В данной статье рассмотрим полный процесс создания меню WordPress. Добавим его на сайт, сделаем многоуровневое меню и научимся добавлять в меню разные типы записей.
Шаг 1.
Регистрация меню
Регистрация понадобится тогда, когда вы создаете шаблон WordPress с нуля или изменяете файлы шаблона. Если вы купили тему или установили из репозитория WordPress, то с вероятностью 99% в ней уже зарегистрировано меню.
Чтобы добавлять меню в админке и выводить на сайте, прежде всего его надо зарегистрировать. Регистрация заключается в добавлении специального кода в шаблон, который сообщаем ядру WordPress, что на сайте будут использоваться меню. Если быть точнее, регистрация позволяет указать, что в шаблоне есть места (locations) для вывода меню.
Регистрируется меню в вордпресс с помощью функций register_nav_menus() и register_nav_menu().
Первая функция массово регистрирует несколько местоположений для меню.
register_nav_menus( [
'header' => 'Меню в шапке',
'footer' => 'Меню в подвале'
] );В параметре функции передается массив местоположений. В примере мы зарегистрировали два стандартных места для меню: в шапке и подвале сайта.
Функция register_nav_menu() позволяет регистрировать только одно местоположение.
register_nav_menu( 'header', 'Меню в шапке' );
register_nav_menu( 'footer', 'Меню в подвале' );Функция принимает два параметра: местоположение и описание (будет выведено в админке).
Эти функции принято вызывать на хуке after_setup_theme. Полный код для регистрации меню будет выглядеть так:
add_action( 'after_setup_theme', 'register_custom_menu' );
function register_custom_menu() {
register_nav_menus( [
'header' => 'Меню в шапке',
'footer' => 'Меню в подвале'
] );
}Код необходимо разместить в файле functions.php вашего шаблона.
Шаг 2.
Вывод меню на сайте
Если у вас установлен готовый шаблон, то в нем уже выведены меню в коде темы. Этот пункт можно пропустить.
После регистрации меню его нужно вывести в шаблоне. Выводится меню функцией wp_nav_menu(). В функцию передается массив с параметрами.
wp_nav_menu([
'theme_location' => 'header'
]);В параметр theme_location указывается значение местоположения, которое было зарегистрировано. Если выводим меню для шапки, то данный код добавляем в файл header.php внутри тега <header></header>. Например, разметка шапки может выглядеть так:
<header class="header">
<div class="header__wrapper">
<div class="header__logo">
<img src="<?php echo get_template_directory_uri() . '/images/logo.png' ?>" alt="Логотип сайта">
</div>
<div class="header__nav">
<nav class="nav">
<?php wp_nav_menu([
'theme_location' => 'header'
]); ?>
</nav>
</div>
</div>
</header>Для вывода меню в подвале сайта параметр theme_location будет иметь значение footer. Код вывода меню в подвале необходимо поместить в файл footer.php.
wp_nav_menu([
'theme_location' => 'footer'
]);Пока мы не создали ни одного меню в админке, функция ничего не выведет.
Шаг 3.
Создание меню WordPress
Добавление меню в WordPress выполняется в админке. Откройте раздел Внешний вид > Меню.
Укажите Название меню в поле. Это название будет видно только вам в админке. Поэтому используйте понятное именование. Для меню в шапке сайта так и укажем: Меню в шапке сайта.
Ниже перечислены области отображения меню, те самые, которые были зарегистрированы выше (или уже были зарегистрированы разработчиками вашей темы).
Поставьте чекбокс Меню в шапке и нажмите Создать меню.
Меню создано и привязано к месту на сайте. После того, как мы добавим в меню элементы, оно отобразится на сайте.
Шаг 4.
Добавление пунктов меню
После создания меню слева стали активны элементы для добавления в меню.
Чтобы добавить пункты, отметьте галочки необходимых элементов и нажмите кнопку Добавить в меню.
Пункты появились в настройках меню. Вы можете их перетаскивать и менять местами. Для замены анкора ссылки раскройте пункт и замените значение поля Ярлык навигации.
После всех изменений не забудьте нажать Сохранить меню.
У пунктов меню еще есть расширенные настройки но по умолчанию они скрыты. Чтобы их открыть необходимо вверху страницы раскрыть раздел Настройки экрана и отметить все галочки.
Теперь у элементов меню стали доступны дополнительные свойства.
Атрибут title – добавляет ссылке всплывающую подсказку при наведении. В разметке у элемента появится атрибут title.
Открывать в новой вкладке – добавит ссылке атрибут _target="blank", который отвечает за открытие ссылки в новой вкладке браузера.
Классы CSS – опция добавляет пункту меню дополнительные классы css. С помощью классов можно стилизовать конкретный элемент или добавить действие по клику с помощью JavaScript. Для указания нескольких классов используйте пробел.
Отношение к ссылке (XNF) – значения свойства будет выведено в атрибуте rel. Чаще всего указывают nofollow для запрета поисковым роботам переходить по ссылке.
Описание – задает описание пункта меню. Работает данная опция только при условии, что такой функционал доступен в шаблоне сайта. В большинстве тем опция не используется.
В меню WordPress можно добавлять разные типы элементов: страницы, записи, архивы рубрик, произвольные ссылки и прочее. Рассмотрим каждый тип отдельно.
Добавление в меню страниц
Для добавления страниц раскройте раздел Страницы. Во вкладке Самые свежие будут показаны последние добавленные страницы. Вкладка Все выводит все страницы которые есть на сайте. А если у вас добавлено много страниц, то удобнее всего использовать раздел Поиск. Он покажет страницы по поисковому запросу.
Процесс добавления был рассмотрен выше. Отмечаете галочкам и жмете кнопку Добавить в меню.
Добавление записей в меню
Откройте вкладку Записи. Появится список всех записей. Процесс добавления аналогичен страницам.
Добавление рубрик
Рубрики записей добавляются в разделе Рубрики. Откройте его и выделите нужные рубрики. В меню будут выведены ссылки на архивные страницы рубрик.
Добавление произвольных ссылок
Произвольные ссылки позволяют добавлять в меню элементы, которые не созданы в админке WordPress. Например, можно указать внешнюю ссылку на другой сайт или добавить кнопку обратного звонка.
Раскройте раздел Произвольные ссылки и укажите URL и текст ссылки. Добавьте ее в меню. Текст и ссылку можно будет поменять в настройках в любой момент.
В качестве примера добавил в меню ссылку на страницу ВК.
Как сделать выпадающее меню
В настройках меню есть классный функционал создания выпадающего меню. Путем перетаскивания элементов, можно создать многоуровневое меню.
Например, создадим выпадающее меню для пункта Блог. При наведении на ссылку будут открываться список рубрик.
Зайдите в раздел настройки меню (Внешний вид > Меню) и добавьте элементы меню (если они еще не добавлены).
Получился такой «плоский» вид меню. Все элементы на первом уровне.
Теперь элементы, которые должны быть в выпадающем меню у элемента Блог чуть перетаскиваем в правую сторону.
Сохраняем изменение и можно смотреть результат.
Таким же образом можно добавить и третий уровень. Добавьте пункты меню и перетащите их к нужному родительскому пункту. Должно получиться так
Только что мы сделали выпадающее меню с тремя уровнями вложенности.
Выпадающее меню может не работать в вашей теме, потому что разработчики не реализовали такой функционал.
Шаг 5.
Редактирование меню WordPress
Время от времени в готовое меню требуется вносить изменения. Например, добавлять новые пункты, удалять старые и т.д. Редактирование уже созданного меню выполняется в том же самом разделе Внешний вид > Меню.
Если у вас создано несколько меню, то перед редактированием выберите нужное в выпадающем списке.
Редактирование меню WordPress напоминает процесс создания. Вы можете добавлять элементы, менять текст ссылки, изменять свойства пунктов.
Если нужно удалить пункт меню, раскройте его и нажмите ссылку Удалить.
Для удаления всего меню есть ссылка Удалить меню рядом с кнопкой Сохранить меню.
Нажмите Удалить меню и подтвердите действие во всплывающем окне.
Итог
На этом все. Мы полностью разобрали процесс создания меню в WordPress. Рассмотрели как добавляются, настраиваются, редактируются пункты. Дальнейшее изучение меню будет касаться его кастомизации. Для этого у WordPress существует огромное количество инструментов, такие как Walker класс и различные хуки меню.
