24 сентября 2019 WordPress
Если возникла необходимость создать ещё один тип меню, добавить класс или другие опции к уже существующему меню, или вы разрабатываете тему для WordPress с нуля, то эта статья как раз для вас. Рассмотрим как создать 2 типа меню: верхнее и боковое, и каким образом можно их настроить и вывести на сайте.
Регистрация меню
Регистрируем 2 типа меню. В файле functions.php добавляем следующий код:
register_nav_menus(array(
'top' => 'Верхнее меню', // идентификатор меню и название
'side' => 'Боковое меню'
));
Создание меню
Теперь в разделе Внешний вид → Меню можно создать наши меню. Во вкладке управление областями нужно указать соответствия меню и их областей.
Добавляем пункты меню и сохраняем.
Вывод меню в шаблоне
Чтобы вывести меню добавляем в нужном месте шаблона функцию wp_nav_menu()с указанием идентификатора меню в параметре theme_location. Если на сайте используется только одно меню, то этот параметр можно не указывать.
Указываем класс для меню с помощью параметра menu_class:
Параметры меню
Обычно достаточно задать класс и указать идентификатор, но если вам понадобятся более гибкие настройки, то можно воспользоваться и другими параметрами функции для вывода меню. Вот их полный список с примером:
wp_nav_menu( array(
'menu' => '', // (string) название выводимого меню (указывается в админке при создании меню, приоритетнее, чем указанное местоположение theme_location - если указано, то параметр theme_location игнорируется)
'container' => 'div', // (string) контейнер меню. Обёртка ul. Указывается тег контейнера (по умолчанию тег div)
'container_class' => '', // (string) class контейнера (div тега)
'container_id' => '', // (string) id контейнера (div тега)
'menu_class' => 'menu', // (string) class самого меню (ul тега)
'menu_id' => '', // (string) id самого меню (ul тега)
'echo' => true, // (boolean) выводить на экран или возвращать для обработки
'fallback_cb' => 'wp_page_menu', // (string) используемая (резервная) функция, если меню не существует (не удалось получить)
'before' => '', // (string) текст перед каждой ссылки
'after' => '', // (string) текст после каждой ссылки
'link_before' => '', // (string) текст перед анкором (текстом) ссылки
'link_after' => '', // (string) текст после анкора (текста) ссылки
'depth' => 0, // (integer) глубина вложенности (0 - неограничена, 2 - двухуровневое меню)
'walker' => '', // (object) класс собирающий меню. Default: new Walker_Nav_Menu
'theme_location' => '' // (string) расположение меню в шаблоне. (указывается ключ которым было зарегистрировано меню в функции register_nav_menus)
) );
Дополнительные параметры
Это ещё не все. В админ-панели можно включить поле для добавления кастомного класса для каждого пункта меню. Иногда может пригодиться. Для этого в разделе Внешний вид → Меню на верхней панели «Настройки экрана» ставим галочку «Классы CSS».
