Кастомные меню в WP 3.0+ (wp_nav_menu)

С версии WordPress 3.0 появилась поддержка кастомных меню, что значительно упрощает их создание и настройку. В этой статье мы разберём, как включить поддержку кастомных меню, как их отобразить и настроить.

Содержание

• Включение поддержки кастомных меню (wp_nav_menu)
• Отображение кастомных меню с помощью функции wp_nav_menu

  • 1 Отображение меню по местоположению

  • 2 Отображение меню по имени

• Примечания
  • Удаление обёртки div
  • Изменение параметров по умолчанию
  • Проверка регистрации меню
  • Параметр Walker
  • Включение дополнительных параметров меню

Включение поддержки кастомных меню (wp_nav_menu)

Чтобы начать использовать кастомные меню, их необходимо зарегистрировать в файле functions.php. Для этого используйте функцию register_nav_menus:

register_nav_menus( [
'top' => 'Верхнее меню', // Имя местоположения меню в шаблоне
'bottom' => 'Нижнее меню' // Имя другого место��оложения меню в шаблоне
] );

Теперь у нас зарегистрированы два меню с идентификаторами 'top' и 'bottom'. Эти идентификаторы нужны для того, чтобы использовать меню в вашей теме и указать место, где оно будет отображаться с помощью функции wp_nav_menu. Имена зарегистрированных местоположений будут видны в админ-панели при переходе в "Внешний вид -> Меню".

После регистрации меню нужно создать их в админ-панели. Для этого выполните следующие шаги:

1. Задайте имя меню (это имя будет использоваться при его отображении).
2. Создайте элементы меню. Используйте левую колонку для добавления страниц, ссылок и категорий.
3. Выберите, где будет располагаться меню: "Верхнее меню" или "Нижнее меню".

Обратите внимание, что поддержка кастомных меню включается отдельно для каждой темы с помощью строки add_theme_support('menus');. Однако, если вы регистрируете меню, эта строка не нужна, так как поддержка включится автоматически.

Отображение кастомных меню с помощью функции wp_nav_menu

Теперь, когда меню зарегистрированы и созданы, нужно добавить их в шаблон. Это делается с помощью функции wp_nav_menu, которая принимает следующие параметры:

wp_nav_menu( array(
'menu' => '', // (строка) Имя меню для отображения
'container' => 'div', // (строка) Обёртка для меню
'container_class' => '', // (строка) Класс для контейнера
'container_id' => '', // (строка) ID для контейнера
'menu_class' => 'menu', // (строка) Класс для самого меню
'menu_id' => '', // (строка) ID для меню
'echo' => true, // (логическое) Выводить на экран или возвращать
'fallback_cb' => 'wp_page_menu', // (строка) Функция, используемая в случае отсутствия меню
'before' => '', // (строка) Текст перед ссылкой
'after' => '', // (строка) Текст после ссылки
'link_before' => '', // (строка) Текст перед якорем ссылки
'link_after' => '', // (строка) Текст после якоря ссылки
'depth' => 0, // (целое) Глубина вложенности (0 - неограниченно, 2 - двухуровневое меню)
'walker' => '', // (объект) Класс генерации меню
'theme_location' => '' // (строка) Местоположение меню
) );

Теперь рассмотрим, как отобразить меню.

1 Отображение меню по местоположению

Чтобы отобразить "Верхнее меню", вставьте в файл header.php следующий код:

<?php
wp_nav_menu( array(
'menu_class' => 'menu',
'theme_location' => 'top',
'after' => ' /'
) );
?>

Это выведет меню, созданное в админ-панели, связанное с "Верхним меню".

А чтобы отобразить "Нижнее меню", добавьте в файл footer.php следующий код:

<?php wp_nav_menu('menu_class=bmenu&theme_location=bottom'); ?>

Меню будет иметь такую же структуру, как и в предыдущем случае. Обратите внимание, что в первом примере параметры переданы в виде массива, а во втором — как строка. Оба варианта правильные и допустимы.

2 Отображение меню по имени

Для отображения меню по имени используйте аргумент 'menu', в котором укажите имя, заданное при создании меню в админ-панели. Например:

<?php wp_nav_menu('menu=Главное меню'); ?>

Вы также можете указать ID меню вместо имени. Это позволит сохранить работоспособность кода даже при изменении имени меню. Чтобы узнать ID, откройте редактор меню и взгляните на URL в адресной строке.

<?php wp_nav_menu('menu=455'); ?>

Примечания

Удаление обёртки div

Если вы заметили, что меню оборачивается в ненужный div, вы можете убрать его, указав пустой параметр 'container' в аргументах функции wp_nav_menu:

wp_nav_menu( array( 'container' => '' ) );

Изменение параметров по умолчанию

Чтобы избежать постоянного указания одних и тех же параметров, вы можете переопределить их в functions.php с помощью фильтра wp_nav_menu_args:

add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );
function my_wp_nav_menu_args( $args='' ){
$args['container'] = '';
return $args;
}

Вы также можете создать свои собственные параметры по умолчанию.

Проверка регистрации меню

В WordPress есть условная функция has_nav_menu('top'), которая проверяет, зарегистрировано ли местоположение верхнего меню. Если меню не указано, функция wp_nav_menu() работает как wp_list_pages(). Чтобы это исправить, можно использовать следующую конструкцию:

if (has_nav_menu('top')){
wp_nav_menu( array(
'container' => '',
'theme_location' => 'top',
'menu_class' => 'menu'
));
} else {
echo '

';
wp_list_pages( array('depth' => 1, 'title_li' => '' ));
echo '

';
}

Параметр Walker

Параметр walker позволяет вам вмешиваться в процесс генерации меню и модифицировать его по своему усмотрению. Более подробно об этом можно прочитать в документации wp_nav_menu.

Включение дополнительных параметров меню

Вы можете настроить меню, например, добавив возможность указать CSS класс для элемента меню или ссылки. Для этого откройте вкладку "Настройки экрана" в редакторе меню.

Вышеописанные шаги помогут вам легко создать и настроить кастомные меню в WordPress, чтобы они стали более удобными и функциональными для вашего сайта.