Формирование меню в WordPress шаблонах быстро и удобно
Для, практически, любого сайта необходимо формировать навигационное меню. Есть два пути: зашивать навигацию жестко в шаблон и правильный. Вот о правильном методе применительно к созданию шаблонов в WordPress мы и поговорим.
Для начала, перейдем в админскую панель вродпресса и создадим меню. [ВНЕШНИЙ ВИД]->[МЕНЮ]. Мы можем создавать сколько угодно менюшек, главное, самим в них не запутаться! Новое меню назовем, к примеру main. Интерфейс создания и добавления пунктов меню на странице администрирования очень прост и дополнительных комментариев не требует. Нас интересует способ вывода его шаблоне. А очень просто:
Вот и всё!
Правда, то, что получилось в моем шаблоне с использование bootstrap выглядит более чем уныло, поэтому сходим за документацией и доведем код до следующего состояния:
"collapse navbar-collapse", "container_id" => "bs-example-navbar-collapse-1", "menu_class" => "nav navbar-nav" )); ?>
Что мы сделали? Мы указали название класса для элемента — обертки менюшки и его идентификатор, а так же классы для элемента списка вывода меню, чтобы было понятнее, вот результирующий html код:
Всё на своих местах. В конце статьи я приведу полный перечень параметров для функции. А сейчас поделюсь ещё одним трюком.
Самые внимательные заметили, что в первом пункте меню присутствует ещё один класс у элемента списка — «active». Ведь в большинстве шаблонов активный элемент, т.е. элемент той страницы, на которой мы сейчас находимся выделятся другим стилем. И по-умолчанию в WordPress не задается признак активного элемента меню. Чтобы он появился добавим следующий код перед вызовом функции отображения меню:
И будет нам счастье! )
Ну и как обещал, список параметров для функции 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 выводит все меню целиком.