WP Nav Menu — Произвольные меню в WordPress
С выходом WordPress 3.0 была реализована поддержка произвольных меню (настраиваемых меню, гибких меню). В данной статье мы покажем как использовать wp_nav_menu и для чего это нужно.
Если вы используете WordPress, то наверняка вы успели заметить все прелести в настройках меню WP
Всё удобно, предельно просто и понятно.
В это статье мы расскажем и покажем как использовать функцию wp_nav_menu в своём шаблоне.
Удобство заключается в том, что теперь можно создавать и конфигурировать меню прямо из админки, добавляя ссылки кликами по чекбоксам и меняя порядок ссылок простым перетаскиванием. В меню можно добавить ссылки на страницы, категории и отдельные посты. Можно создавать многоуровневые меню, так же в меню можно добавлять свои произвольные ссылки, о которых WordPress не знает. В общем, полная свобода действий.
Ну с вводной частью мы ознакомились, теперь приступим к настройкам
1. Включаем в нашем шаблоне поддержку произвольных меню.
Для активации функции wp_nav_menu нам необходимо в файле functions.php (Данный файл находится в папке с вашим шаблоном) зарегистрировать (дописать) следующую функцию (Писать в самый конец файла)
1 2 3 4 |
register_nav_menus(array( 'top' => 'Верхнее меню', //Название месторасположения меню в шаблоне 'bottom' => 'Нижнее меню' //Название другого месторасположения меню в шаблоне )); |
Данным действием мы зарегистрировали два меню: Верхнее меню, Нижнее меню.
Если вы все сделали правильно, то в админпанели в настройках меню (Админпанель > Внешний вид > Меню) Должны появиться добавленные нами области меню (Предварительно создайте новое меню, если такового у вас нет).
У вас всё должно получиться примерно так же, как на следующем скриншоте:
Ну а теперь самое интересно, выводим наше меню в шаблон (Так как это верхнее меню, вставляем код в header.php) нашего сайта:
1 2 3 4 5 6 7 |
<?php wp_nav_menu( array( 'menu_class'=>'menu', 'theme_location'=>'top', 'after'=>' /' ) ); ?> |
Вышеприведённый код вставляем в код нашего шаблона, обратите внимание на строку
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) выводим следующим образом:
1 |
<?php wp_nav_menu('menu_class=bmenu&theme_location=bottom'); ?> |
Так же созданное нами меню в админе панели можно вывести в шаблон по его название, и вот как это делается:
1 |
<?php wp_nav_menu('menu=Главное меню'); ?> |
Ну вроде-бы и всё. Хотя вот вам бонус, функция добавляющая к активному пункту меню css класс active — активный пункт, это та страница, на которой мы находимся:
1 2 3 4 5 6 7 8 |
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; } |
Функцию так же добавляем в самый конец файла functions.php