VIDEOВозвращает
Функция выводит на экран html код меню.
Аргументы параметра $args
walker(объект) Класса, который будет использоваться для построения меню. Нужно указывать объект, а не строку, например new My_Menu_Walker() . По умолчанию: Walker_Nav_Menu(). Как использовать смотрите ниже. По умолчанию: Walker_Nav_Menu
#1. Первое не пустое меню, с настройками вывода по умолчанию:
#2. Выведем меню с названием «Навигация по сайту»:
#3 Меню из страниц. Пример из темы: Twenty Ten.
Если параметры вывода не указаны и меню не найдено, то будет построено меню из страниц, функцией wp_page_menu() .
В этом примере будет выведено меню, прикрепленное к области меню ‘primary’:
#4 Использование фильтра wp_nav_menu_args для установки параметров по умолчанию для всех меню
Чтобы удалить контейнер у всех навигационных меню сразу, используем следующих код в файле темы functions.php . Используем хук wp_nav_menu_args:
#4.1. Удалим контейнер, только у одного, выводимого меню
#5 Удалим ul обертку
Этот пример удалит обертку тега ul у меню:
#6 Добавим слово в начало меню
Этот пример показывает, как добавить слово в начало списка меню, в виде такого же элемента меню, только не ссылки. Добавим в начало меню, слово «Список», также укажем атрибут id созданному тегу li:
#7 Добавим CSS классы ко всем меню
Используя хук, мы можем добавить свои CSS классы, если соблюдается нужное нам условие.
Добавим CSS класс, если это пост и название элемента меню равно «blog»:
#8 Использование своей функции для построения меню
Во-первых нужно указать аргумент ‘walker’ => new Your_Walker_Function .
Your_Walker_Function — это наш новый класс, который строит меню. Чтобы не изобретать велосипед, её можно скопировать из оригинала, см. класс Walker_Nav_Menu . Копируем код класса и просто поправляем его там где нужно.
Вот пример, добавляющий глубину меню и четные/нечетные CSS классы к элементам меню (обоим ul и li):
#9 Отдельные меню для авторизованных пользователей
Если нужно показывать разные меню, авторизованным и неавторизованным пользователям, то используем условный тег is_user_logged_in():
В админке нужно создать 2 разных меню и прикрепить их к соответствующим локациям (областям).
#10 CSS класс для родительских элементов меню
Если нужно добавить CSS класс для элементов меню, у которых есть дочерние (сложенные списки ссылок), то делаем так:
#11 Добавление класса к отдельным элементам меню
Появился специальных хук для этого: nav_menu_css_class . И теперь классы можно добавлять или удалять через него. Для примера давайте добавим класс my__class ко всем элементам меню:
Классы элементам меню добавляются функцией _wp_menu_item_classes_by_context( &$menu_items ); . Но к сожалению в ней не предусмотрены никакие фильтры, чтобы добавить свой класс. Поэтому пойдем обходным путем и используем костыль str_replace() :
#12 Выводить меню, только если оно существует
По умолчанию, если меню нет, то вместо него будут выведены страницы сайта. Но если нужно выводить меню, только в том случае когда оно создано в админ-панели, укажите параметр fallback_cb как ‘__return_empty_string’ :
#13 Вывод только подпункта меню
Допустим, есть первый уровень и у каждого из элементов первого уровня, есть свое подменю. Нам нужно вывести такое подменю у пункта с классом menu-item-135 :
Не очень оптимальный, но рабочий пример. Иногда может пригодится, для малопосещаемых сайтов где нужно быстро получить результат.
CSS классы элементов меню
Следующие CSS классы добавляются к элементам меню (разделение по условиям на каких страницах находится пользователь):
Для всех элементов на всех страницах
.menu-item — ко всем элементам меню;
.menu-item-object- — ко всем элементам, где замениться на название типа записи или таксономии: .menu-item-object-category (для категорий) .menu-item-object-tag (для меток) .menu-item-object-page (для постоянных страниц) .menu-item-object-
.menu-item-type- — ко всем элементам меню, где замениться на тип ссылки (запись или таксономия). Группирует все типы ссылок: .menu-item-type-post_type (постоянная страница, произвольный тип записи) .menu-item-type-taxonomy (категория, метка или произвольная таксономия)
меню
Для элементов текущей страницы
.current-menu-item — если ссылка в меню совпадает с адресом просматриваемой страницы. Текущая страница.
Для элементов родительских для просматриваемой страницы
.current-menu-parent
.current--ancestor
.current--ancestor
Для элементов как-то связанных с просматриваемой страницей
.current-menu-ancestor
.current--ancestor
.current--ancestor
Для элементов связанных с главной страницей сайта
Совместимость с функцией wp_page_menu()
.page_item
.page-item-$ >
Параметры $item
В примерах часто используется элемент меню $item. Ниже показаны почти все параметры этого элемента:
Поле
Описание
ID
ID элемента меню
menu_item_parent
ID родительского элемента меню
classes
массив классов элемента меню
post_date
дата добавления
post_modified
дата последнего изменения
post_author
ID пользователя, добавившего этот элемент меню
title
заголовок элемента меню
url
ссылка элемента меню
attr_title
title атрибут ссылки
xfn
rel атрибут ссылки
target
target атрибут ссылки
current
равен 1, если это текущий элемент
current_item_ancestor
1, если текущий элемент — это вложенный элемент
current_item_parent
1 если текущим элемент — это родительский элемент
menu_order
порядковый номер в меню
object_id
ID объекта меню. Записи, термина и т.д.
type
тип объекта меню (такса, запись)
object
название таксы, типа записи: page, category, post_tag .
type_label
локализованное название типа: Рубрика, Страница
post_parent
ID родительской записи
post_title
заголовок записи
post_name
ярлык записи
Пример объекта $item
Пример использования параметра walker
В walker можно указать объект, который будет строить меню. В этом объекте можно описать HTML код получаемого меню.
Если нужно создать меню для нестандартной верстки, то иногда проще переделать этот объект, чем переделывать верстку.
В качестве примера walker объекта, возьмем класс Walker_Nav_Menu<>, который используется по умолчанию. В нём нас интересует только один метод start_el() . Именно он отвечает за HTML каждого элемента. Как правило, достаточно изменить только его. Для этого нужно создать свой класс, который будет расширять класс Walker_Nav_Menu и указать его в параметре walker при вызове меню.
Смотрим на примере. Взят код метода start_el() без изменений. Используем в качестве шаблона:
Теперь, при вызове меню указываем свой walker:
Готово, теперь каждый элемент меню будет строиться по нужной нам HTML схеме.
БЭМ меню с помощью фильтров
VIDEO
Будет» формироваться вёрстка по методологии БЭМ:
Файл index.php или другой для вывода меню
Файл functions.php
Заказывайте очень дешевые лайки на публичную страницу в Facebook на данном сервисе и получайте возможность выбрать не только приятную цену, но и персональные условия для приобретения ресурса. Так, например, Вам будет доступен выбор скоростного режима поступления и качества подписываемых страниц. Кроме того, сервис предоставляет гарантии своим клиентам.
Использование меню такого типа очень удобно, особенно если делаешь сайт для заказчиков. Конечно, можно вывести рубрики при помощи wp_list_categories или вообще написать на HTML (лично я всегда так и делаю, когда создаю сайт для себя), но будет нудно, если пункты меню будут часто меняться и дополняться.
Для начала нужно включить поддержку меню темой, вставив этот код в файл functions.php:
А это более правильный вариант с регистрацией областей темы:
После этого в админке появится вкладка Внешний вид > Меню. Заходим туда и создаём своё меню, назовём его например «menu1».
Засуньте этот код в то место в теме, куда вы хотите вставить менюху:
Точно так же можно насоздавать ещё кучу менюшек, указывая в скобках их названия. Это был примитивный пример.
Итак, функция wp_nav_menu()
Параметры по умолчанию:
Впервые познакомился с WordPress в 2009 году. С 2014 года меня можно встретить на WordCamp по всему миру — официальной конфе по WordPress, иногда там выступаю, но с 2019 выступаю только на тех, которые сам организовываю. Также периодически школа Epic Skills и LoftSchool приглашают меня вести у них уроки/вебинары.
Если вам нужна помощь с вашим сайтом или может даже разработка с нуля — пишите мне.
Комментарии 37
Спасибо за Вашу работу! Помогли! Дай Бог Вам здоровья и успехов!
Все вроде получилось, но есть одно НО) (установил плагин UberMenu). Хочу добавить это меню в сайдбар.
Сделал все как у вас.
Когда выбираю области темы, которые уже были в самой теме, то плагин работает.
А в созданной мной — нет. Не подскажете, что может быть?
посмотри, может зависит от css класса меню
А как стилизовать, чтобы меню стояло в один ряд? Без этого меню появляется, как рубрики в сайт-баре.
Добрый день, можно использовать следующие CSS-стили к соответствующим элементам меню:
Доброй ночи, Михаил. Надеюсь на Вашу помощь, сама зашла в тупик. Пытаюсь написать walker, который группирует пункты меню по 2
Чтобы визуально разделить на две колонки. Попробовала так
И вроде нормально, но если я поменяю местами пункты в уже созданном меню, то всё съезжает.. Пробовала прикрутить обработчик из кодекса, но у меня он упорно ставить even ВСЕМ элементам li верхнего уровня. А odd только если depth меняю — создаю подменю, вот у него odd-класс.
Подскажите, как сделать чет-нечет?
Нда. Всё оказалось проще некуда.. заменила
Миш, а можно еще немного помощи попросить =»)?
Сейчас» у меня такая таксономия
произвольная ссылка (href=»#»)>> рубрика >> ее подрубрика >> запись
И когда я на странице записи — произвольной ссылке НЕ присваивается класс current .
Прочла, что произ.ссылки хранятся в БД отдельно. По логике тогда в валкере нужно сделать проверку, чтобы на странице записи присваивать current класс самому высшему родительскому пункту меню, если такой класс есть у дочернего. Но что-то уже весь рунет и буржунет облазила, а решения не нашла.
оу, боюсь, что с ходу я тут не скажу, нужно смотреть и разбираться..
Это не критично, но мой перфекционизм не дает спать =»).» Если вдруг встретишь решение или осенит — маякни, пожалуйста.
Уважаемый, хоть я и оставлял комментарий здесь, но не помню, чтобы подписывался на новые комментарии к данной статье. Возможно, я просто не заметил галочку, которая стоит по умолчанию. Прошу Вас отписать от получения уведомлений о новых комментариях. Если уж сделали фичу на подписку, резонно было бы дать людям самостоятельно отписаться.
Отписал вас. Да, согласен, всё никак не успеваю доработать это.
Добрый день, Миша. Не подскажешь как добавить номер в классы пунктов верхнего уровня меню? Чтобы было так
menu_order нумерует по порядку без привязки к depth
Добрый день! я бы залез в файл, где определяется функция и поискал бы там фильтры для классов, ну и скорее всего через волкер можно реализовать.
Через волкер и пытаюсь =»)..» но стандартно $i=»0″ if (depth=»0)» $i++ не получается прикрутить.
Думаю тут в волкере поможет параметр $item->menu_item_parent . То есть, если этот параметр не существует, то делаем инкремент счетчика.
P.S. Скажу честно, когда ты меня три месяца назад спросила про это, я в волкерах был полным нубом 🙂
Да я сама методом тыка всё осваиваю =»)..» Я уже там что-то другое навертела, но на будущее запомню), спасибо!
Если я в start_el дописываю в скобки $i=»0,» потом пишу $i++ и условие, то соответственно li каждый раз обнуляется и у всех . А если не писать эту переменную или не присваивать ей нулевое значение, то счетчик вообще не работает. Или я что-то напутала?
Михаил, доброго времени суток. У меня такая трабла: Клиент требует убирать из меню те страницы сайта (меню основано на страницах), для которых стоит статус «Черновик» или «На утверждении».
Можно ли каким нибудь способом, либо: a) не формировать это меню в момент сборки, или же б) присваивать такому пункту какой либо, скажем, класс, например
В данный момент меню формируется следующим образом:
Я не Миша =»),» но может Вам подключить валкер и в нем прописать что-то вроде
Здравствуйте! Создал 2х уровневое меню в админке. Пытаюсь создать новую тему. Вывожу меню так:
Почему то вместо такого результата:
Почему не получаю ожидаемого результата? Есть какие-то тонкости использования функции wp_nav_menu?
Как через get_the_post_thumbnail() прикрепить миниатюры в навигационное меню. не могу сообразить.
Ну через волкер все возможно.
Как прописать атрибут title к ссылкам в меню Рубрики на сайте http://espana-live.com/? В каком файле внести изменения? nav-menu.php или nav-menu-template.php?
Михаил, добрый день! Помню как-то вы мне помогли в одном вопросе, за это спасибо! Может поможете и в этом?
Суть в следующем: есть плагин WP-Recall, там есть личный кабинет в котором выводятся кнопки, делаю тему для WordPress и хотел бы сделать меню, что бы эти кнопки отображались в меню темы. а не на странице плагина!
Разработчик написал, что это возможно, написал следующее:
«Добрый день, да, это вполне возможно, все действующие вкладки личного кабинета можно получить в глобальной переменной $rcl_option[‘tabs’], затем обратиться к массиву данных нужного меню сайта и добавить туда нужные пункты используя данные из $rcl_option[‘tabs’], в результате меню выведет добавленные кнопки.