wordpress вывод меню в шаблоне
wp_nav_menu() – вывод меню
Кстати, рекомендую вам подробнейший видеоурок про меню WordPress.
Функция позволяет вывести уже созданное меню WordPress в шаблоне вашего сайта.
Параметры
Как это работает?
Если же параметр theme_location не задан вообще, тогда:
Примеры
Меню без уровней вложенности с контейнером
Разные меню для авторизованных и неавторизованных пользователей
Тут достаточно зарегистрировать две области theme_location меню и использовать функцию is_user_logged_in() для переключения между ними.
Сниппет для быстрого использования
Возможно вам удобнее будет использовать этот готовый сниппет, чтобы копировать его в вашу тему WordPress и уже в нём делать изменения параметров.
Стандартные CSS-классы элементов меню
Также для вашего удобства расскажу про CSS-классы, которые применяются к элементам меню (чтобы вам лишний раз не пришлось инспектировать код).
Текущие элементы меню:
Экшены и фильтры функции wp_nav_menu()
В функции wp_nav_menu() есть несколько хуков, которые позволяют модифицировать вывод меню.
wp_nav_menu_args
pre_wp_nav_menu
Позволяет перезаписать HTML меню целиком ещё перед тем, как оно будет сгенерировано.
wp_nav_menu_container_allowedtags
Если указан любой неразрешённый HTML-тег, то контейнер добавлен не будет.
wp_nav_menu_objects
Этот хук позволяет нам пройтись по всем элементам меню перед их выводом и сделать в них какие-либо изменения.
Например мы можем добавить какой-то произвольный CSS-класс к текущему элементу меню:
wp_nav_menu_items
Позволяет отфильтровать HTML элементов меню без контейнера и тега
- .
wp_nav_menu
Практически аналогичен предыдущему фильтру, отличие в том, что тут мы фильтруем целиком готовый HTML код меню, уже с контейнером и тегом
- .
Мой видеокурс по натяжке готового дизайна и HTML-вёрстки на WordPress.
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.
Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!
Вывод меню с помощью функции wp_nav_menu
В позапрошлой статье блога я писал про интересное нововведения последней версии wordpress — специальный механизм создания и управления меню в wordpress 3.0. Теперь стало намного удобнее и проще обычным пользователям создавать различные по сложности меню, которые могут состоять не только страницы или категории блога, но и иметь ссылки на любые URL. Для отображения меню в шаблоне используется специальная функция wp_nav_menu — про нее сегодня и расскажу.
Если в админке wordpress нету раздела меню, то его можно активировать добавлением специального кода в файл functions.php
Далее создаете меню в соответствующему пункте раздела «Внешний вид» (Appearence). После этого в шаблоне блога в нужном нам месте выводим само меню через код:
Здесь first — название созданного нами меню. Это использование функции в общем случае без виджетов, с ними там нужно будет немного по другому работать. Тем не менее функция wp_nav_menu может выводиться и без аргументов, в результате чего будут «просматриваться» разные ситуация — сначала совпадение по названию меню, если для него указан хотя бы один пункт меню, в противном случае будет просто отображено непустое меню ну и т.п. Но опять же советую просто использовать приведенный выше код и не разбираться потом что должна выводить функция без аргументов. Ее синтаксис выглядит следующим образом:
Здесь используются следующие параметры:
$menu — выбранный идентификатор для меню — ID, slug или название меню.
$container — меню UL по умолчанию «оборачивается» в контейнер DIV с помощью данной настройки.
$container_class — указывает класс контейнера, по умолчанию его значение menu-
- %3$s
‘
depth(число)
Сколько уровень вложенных друг в друга ссылок показывать. 0 – все уровни.
walker(объект)
Класса, который будет использоваться для построения меню. Нужно указывать объект, а не строку, например new My_Menu_Walker(). По умолчанию: Walker_Nav_Menu(). Как использовать смотрите ниже…
По умолчанию: Walker_Nav_Menu
item_spacing(строка)
Оставлять или нет переносы строк в HTML коде меню. Может быть: preserve или discard
По умолчанию: ‘preserve’
Пример
Выводить меню, только если оно существует
По умолчанию, если меню нет, то вместо него будут выведены страницы сайта. Но если нужно выводить меню, только в том случае когда оно создано в админ-панели, укажите параметр fallback_cb как ‘__return_empty_string’ :
Создание меню для сайта на WordPress
Создание меню навигации в теме для WordPress
Шаг 1: Создание и определение параметров меню
Помимо приведенных выше параметров, существуют также и другие параметры, которые при необходимости, можно добавить в массив.
Все доступные параметры меню приведены в таблице в конце статьи.
Шаг 2: Регистрация созданного меню
Шаг 3: Настраиваем меню в панеле управления
Переходим во вкладку Меню, где определяемся с именем нового меню и сохраняем его. Далее можно добавить в него необходимые страницы.
Создание меню для темы WordPress
Указываем все те ссылки, которые хотим видеть в меню. В примере ниже указаны ссылки на страницы сайта и одна произвольная ссылка на главную страницу.
Пример добавления ссылок на страницы в меню
Управление областями меню
В конечном итоге мы получим следующий результат.
Вывод готового меню в header.php
Как создать и вывести меню сайта в WordPress?
Итак, WordPress – весьма удобная CMS, которая во многом, облегчает работу с нашим сайтом. Так например создание и редактирование меню очень удобно за счет встроенной функции найти которую можно в панели управления WordPress.
Создание меню в WordPress
Для того, что вам начать создание (редактирование существующего) меню, вам необходимо:
1. Зайти в панель управления вашим сайтом в раздел «Внешний вид» пункт «Меню».
2. Далее, вводим название вашего меню, например, main_menu и жмете «Создать меню». Меню может включать в себя как русский алфавит, так и английский, различные стандартные знаки и пробел.
3. Теперь непосредственно, мы можете приступить к добавлению необходимых вам пунктов. Для упрощения работы, WordPress предлагает нам несколько типов ссылок – страницы, записи и рубрики – здесь, вы можете выбрать или найти нужную вам страницу (раздел), которые уже существуют на вашем сайте, и добавить в ваше меню.
А так же, существуют «Произвольные ссылки», с помощью которых, вы можете добавить ссылки со своими данными, будь то ссылка вашего сайта или стороннего ресурса.
4. По желанию, вы можете настроить вложенность (уровни) меню. Для этого, нажмите на пункт меню и тащите на нужно вам место. Максимальный уровень вложенности меню в WordPress – 12 уровней.
После того, как вы закончили редактирование меню – обязательно нажмите «Сохранить меню».
Так же, вы можете настроить автоматическое добавление пунктов верхнего уровня в меню и выбрать местонахождение меню на сайте (если это предусмотрено вашей темой).
Для визуального изменения меню на вашем сайте – используйте стили CSS.
Вывод меню на страницу WordPress
После того, как меню для сайта готово – нам необходимо вывести его на сайте. Для этого, в нужном месте вашей темы, вставьте код:
Где main_menu – название созданного ранее меню.
Удаление меню в WordPress
Бывает такое, что меню на вашем сайте было сделано не вами (вашим другом, или другим владельцем сайта) и возникает вопрос – как же удалить меню из WordPress?
Для этого, вам необходимо:
1. Зайти в панель управления вашим сайтом и перейти в раздел «Внешний вид» пункт «Меню»
.
2. Если у вас несколько меню на сайте – выберите нужное вам и нажмите «Выбрать».
Если же меню у вас одно – переходите к следующему пункту.
3. Спуститесь вниз страницы, нажмите «Удалить меню» и подтвердите выбранное вами действие.
Если вы не хотите удалять все меню, а только отдельный его пункт, то вам необходимо сделать следующее.
Зайдите в ваше меню, найдите в нем нужный пункт, после чего откройте его и нажмите «Удалить». Таким же образом вы можете и отредактировать необходимые пункты меню.
Если в работе с меню у вас возникли какие либо вопросы или трудности – пишите об этом в комментария, постараюсь помочь.