Формирование меню в WordPress шаблонах быстро и удобно

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

Для начала, перейдем в админскую панель вродпресса и создадим меню. [ВНЕШНИЙ ВИД]->[МЕНЮ]. Мы можем создавать сколько угодно менюшек, главное, самим в них не запутаться! Новое меню назовем, к примеру main. Интерфейс создания и добавления пунктов меню на странице администрирования очень прост и дополнительных комментариев не требует. Нас интересует способ вывода его шаблоне. А очень просто:

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

1	<?php wp_nav_menu('menu=main'); ?>

Вот и всё!
Правда, то, что получилось в моем шаблоне с использование bootstrap выглядит более чем уныло, поэтому сходим за документацией и доведем код до следующего состояния:

<?php 
wp_nav_menu(array(
        "container_class"=>"collapse navbar-collapse",
        "container_id" => "bs-example-navbar-collapse-1",
        "menu_class" => "nav navbar-nav"
    )); ?>

<?php

wp_nav_menu(array(

"container_class"=>"collapse navbar-collapse",

"container_id" => "bs-example-navbar-collapse-1",

"menu_class" => "nav navbar-nav"

)); ?>

Что мы сделали? Мы указали название класса для элемента — обертки менюшки и его идентификатор, а так же классы для элемента списка вывода меню, чтобы было понятнее, вот результирующий html код:

<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
   <ul id="menu-main" class="nav navbar-nav">
       <li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-6 active "><a href="http://site/">Главная</a></li>
       <li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"><a href="http://site/page/">Page Title</a></li>
    </ul>
</div>

<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-6 active "><a href="http://site/">Главная</a></li>

<li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"><a href="http://site/page/">Page Title</a></li>

</ul>

</div>

Всё на своих местах. В конце статьи я приведу полный перечень параметров для функции. А сейчас поделюсь ещё одним трюком.
Самые внимательные заметили, что в первом пункте меню присутствует ещё один класс у элемента списка — «active». Ведь в большинстве шаблонов активный элемент, т.е. элемент той страницы, на которой мы сейчас находимся выделятся другим стилем. И по-умолчанию в WordPress не задается признак активного элемента меню. Чтобы он появился добавим следующий код перед вызовом функции отображения меню:

    <?php 
    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;
    }
?>

<?php

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;

}

И будет нам счастье! )

Ну и как обещал, список параметров для функции wp_nav_menu:
menu – выбранный идентификатор для меню – ID, slug или название меню.

container – меню UL по умолчанию «оборачивается» в контейнер DIV с помощью данной настройки.

container_class – указывает класс контейнера, по умолчанию его значение menu-{menu slug}-container, то есть в нашем случае, например, будет класс menu-first-container.

container_id – можно добавить контейнеру ID, по умолчанию не указано.

menu_class – класс для элемента меню UL, его значение – menu.

menu_id – ID для элемента ul, по умолчанию равно значению menu-{slug}

echo – если вы не хотите отображать меню, а возвращать значение функции используйте для этой настройки значение 0.

fallback_cb – если меню не существует, вызывается функция wp_page_menu.

before – задает текст, который выводится перед ссылкой А.

after – текст после ссылки А, по умолчанию он, как и предыдущий, пустые.

link_before – выводит фразу перед текстом ссылки, не задано.

link_after – выводится после текста ссылки, тоже пустое.

depth – задает количество уровней иерархии для вывода меню, значение по умолчанию 0 выводит все меню целиком.