Создание произвольного меню в теме WordPress – часть 6
В этой статье рассмотрим важную для любого сайта на WordPress задачу – формирование произвольного меню. На примере нашей темы Lightweight создание произвольного меню выполнено в 2 приёма:
1) В файл functions.php помещаем такой код:
1 2 3 4 5 | <?php register_nav_menus(array( 'top' => 'Верхнее меню' )); ?> |
2) В файл header.php помещаем такой код:
1 2 3 4 5 6 7 | <?php wp_nav_menu( array( 'menu_class'=>'menu', 'theme_location'=>'top', 'container'=>'' ) ); ?> |
После чего в админ-панели создаём новое меню с любым названием (например, MenuTop) и привязываем его к области темы. В данном случае область темы – «Верхнее меню», что указано в пункте 1 (пример на скриншоте ниже).
В результате WordPress сгенерирует ненумерованный список следующего вида:
1 | <ul><li></li></ul> |
Теперь рассмотрим подробнее пункты 1 и 2.
Функция register_nav_menus (прописываем её в файле functions.php) регистрирует несколько меню одновременно. В нашей теме зарегистрировано только одно меню под названием top.
Для вывода в шапке сайта этого меню top применяем функцию wp_nav_menu (прописываем её в файле header.php). Присваиваем параметру “theme_location” значение top . В нашем примере выглядит так: ‘theme_location’=>’top’.
Т.е., название top должно быть указано в обеих функциях (register_nav_menus и wp_nav_menu) и является их связкой.
Также следует отметить, что выводить произвольное меню с помощью функции wp_nav_menu Вы можете в любой области сайта – не обязательно в шапке (файл header.php). Это может быть подвал или боковая панель, тогда вставляйте функцию wp_nav_menu в файл footer.php или sidebar.php соответственно.
Кроме того, в функции wp_nav_menu мы определили:
- ‘menu_class’=>’menu’ – название класса меню, которое будет присвоено тегу
- ‘container’=>’ ‘ – чем оборачивать ul тег. Допустимо: div или nav. В нашем случае в кавычках ничего не указано, значит, ничем не оборачиваем
Также могут задаваться такие параметры:
1 2 3 4 5 6 7 8 9 | 'container_class' => - class у контейнера меню 'container_id' => - id у контейнера меню 'menu_class' => - class у тега ul 'menu_id' => - id у тега ul 'before' => - текст перед тегом <a> в меню 'after' => - текст после каждого тега </a> в меню 'link_before' => - текст перед анкором каждой ссылки в меню 'link_after' => - текст после анкора каждой ссылки в меню 'depth' => - уровень вложенности меню (по умолчанию 0 – без ограничений) |
Произвольное меню в WordPress – это мега-удобная вещь! Не забывайте, что у нас Вы можете также заказать изготовление темы WordPress – обращайтесь!