/ WordPress / WP Nav Menu — Произвольные меню в WordPress

WP Nav Menu — Произвольные меню в WordPress

Автор: delux · Опубликовано 25.01.2017 · Обновлено 25.02.2019

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

Если вы используете WordPress, то наверняка вы успели заметить все прелести в настройках меню WP
Всё удобно, предельно просто и понятно.
В это статье мы расскажем и покажем как использовать функцию wp_nav_menu в своём шаблоне.

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

Ну с вводной частью мы ознакомились, теперь приступим к настройкам

1. Включаем в нашем шаблоне поддержку произвольных меню.
Для активации функции wp_nav_menu нам необходимо в файле functions.php (Данный файл находится в папке с вашим шаблоном) зарегистрировать (дописать) следующую функцию (Писать в самый конец файла)

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

register_nav_menus(array(

'top' => 'Верхнее меню', //Название месторасположения меню в шаблоне

'bottom' => 'Нижнее меню' //Название другого месторасположения меню в шаблоне

));

Данным действием мы зарегистрировали два меню: Верхнее меню, Нижнее меню.

Если вы все сделали правильно, то в админпанели в настройках меню (Админпанель > Внешний вид > Меню) Должны появиться добавленные нами области меню (Предварительно создайте новое меню, если такового у вас нет).

Управление областями wp_nav_menu

У вас всё должно получиться примерно так же, как на следующем скриншоте:

Создание меню

Ну а теперь самое интересно, выводим наше меню в шаблон (Так как это верхнее меню, вставляем код в header.php) нашего сайта:

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

<?php

wp_nav_menu( array(

'menu_class'=>'menu',

'theme_location'=>'top',

'after'=>' /'

) );

Вышеприведённый код вставляем в код нашего шаблона, обратите внимание на строку

'theme_location'=>'top'

1	'theme_location'=>'top'

Где top — это зарегистрированное название нашего меню (область) в файле functions.php

Так же можем внести дополнительные настройки в наше меню, вот полный список доступных настроек:

$args = 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)
);

Нижнее меню (В файле footer.php) выводим следующим образом:

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

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

Так же созданное нами меню в админе панели можно вывести в шаблон по его название, и вот как это делается:

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

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

Ну вроде-бы и всё. Хотя вот вам бонус, функция добавляющая к активному пункту меню css класс active — активный пункт, это та страница, на которой мы находимся:

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);

function special_nav_class ($classes, $item) {
if (in_array('current-menu-item', $classes) ){
$classes[] = 'active ';
}
return $classes;
}