Меню WordPress, все варианты

Одним из самых важных элементов на любом сайте является меню (или, иначе, навигация). Чем проще и удобнее оно сделано, тем легче посетителю ориентироваться, тем быстрее он найдет нужную информацию. Давайте подробно рассмотрим какие есть варианты меню на WordPress.

Довольно долгое время у блогеров не было выбора. Вплоть до версии 2.7 единственным способом сделать меню были только списки страниц и категорий. Позже добавили возможность автоматического добавления ссылки на главную к списку страниц, однако это не сильно облегчило ситуацию. И только с выходом WordPress 3.0 и функции wp_nav_menu стало возможно делать сколько угодно гибкое меню, с любыми данными и любой степени вложенности. Итак, пойдем в хронологическом порядке.

wp_list_pages

Функция выводит список страниц. Появилась еще в WordPress 1.5 и долгое время оставалась чуть ли ни единственным способом вывести меню. Опять же, из-за того, что других инструментов не было, разработчикам приходилось заставлять блогеров выстраивать структуру сайта на основе отдельных страниц, со всеми вытекающими отсюда программными костылями и извращениями.

Функция wp_list_pages имеет множество настроек и достаточно подробно описана в официальной документации. Поскольку такое меню довольно сложно кастомизировать, иногда можно встретить такой вариант вывода, он используется, например, для создания эффекта вкладок с динамической шириной:

Документация: wp_list_pages

wp_page_menu

Эта функция, по сути, делает то же самое, что и предыдущая, и добавляет автоматическую вставку ссылки на главную и возможность обернуть список div-блоком с заданным классом. Появилась в WordPress 2.7.

Документация: wp_page_menu.

wp_nav_menu

А вот эта функция специально создана для вывода меню. Я уже писал о ней в статье Адаптируем вывод меню для WordPress 3.0. С помощью этой функции можно создавать меню любой сложности и вставлять в него любые данные, доступные в WordPress. Давайте рассмотрим ее на примере выпадающего меню, которое я делал для Blackpig.ru. Для начала нужно создать само меню. Для этого добавьте в functions.php вашей темы следующие строки:

После этого в настройках меню появится вкладка «Navigation». Блок if проверяет наличие этого меню, и если оно не существует (вдруг удалили), создает его заново. Конечно, меню можно создать прямо в админке, однако я предпочитаю делать это в коде.

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

Этот код, т.н. walker, дает возможность изменить вывод меню, в данном случае добавляет класс parent для родительских элементов.

После этого подключаем любой скрипт выпадающего меню, например, Горизонтальное выпадающее меню на jQuery и вставляем вызов меню на страницу:

Документация: wp_nav_menu

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

P.S. Я сознательно не стал подробно расписывать такие моменты, как верстка меню, подключение скрипта и подробное описание параметров функций, так как эта статья не рассчитана на новичков и будет интересна, прежде всего, разработчикам тем для WordPress, которые и сами могут разобраться в документации. Тем не менее, я буду рад помочь освоить эту тему.