- Как создать и вывести меню сайта в WordPress?
- Создание меню в WordPress
- Вывод меню на страницу WordPress
- Удаление меню в WordPress
- wp_nav_menu() – вывод меню
- Параметры
- Как это работает?
- Примеры
- Меню без уровней вложенности с контейнером
- Разные меню для авторизованных и неавторизованных пользователей
- Сниппет для быстрого использования
- Стандартные CSS-классы элементов меню
- Экшены и фильтры функции wp_nav_menu()
- wp_nav_menu_args
- pre_wp_nav_menu
- wp_nav_menu_container_allowedtags
- wp_nav_menu_objects
- wp_nav_menu_items
- wp_nav_menu
- Меню в WordPress. Волкер меню
- Что будет в видеоуроке?
- Что делать, когда мы сталкиваемся с вёрсткой меню на бутстрап?
- Добавление поддержки меню в тему
- Способ 1. Включение меню через add_theme_support()
- Способ 2. Регистрация областей отображения меню
- Как создать меню
- Поддержка таксономий и типов постов
Как создать и вывести меню сайта в WordPress?
Итак, WordPress – весьма удобная CMS, которая во многом, облегчает работу с нашим сайтом. Так например создание и редактирование меню очень удобно за счет встроенной функции найти которую можно в панели управления WordPress.
Создание меню в WordPress
Для того, что вам начать создание (редактирование существующего) меню, вам необходимо:
1. Зайти в панель управления вашим сайтом в раздел «Внешний вид» пункт «Меню».
2. Далее, вводим название вашего меню, например, main_menu и жмете «Создать меню». Меню может включать в себя как русский алфавит, так и английский, различные стандартные знаки и пробел.
3. Теперь непосредственно, мы можете приступить к добавлению необходимых вам пунктов. Для упрощения работы, WordPress предлагает нам несколько типов ссылок – страницы, записи и рубрики – здесь, вы можете выбрать или найти нужную вам страницу (раздел), которые уже существуют на вашем сайте, и добавить в ваше меню.
А так же, существуют «Произвольные ссылки», с помощью которых, вы можете добавить ссылки со своими данными, будь то ссылка вашего сайта или стороннего ресурса.
4. По желанию, вы можете настроить вложенность (уровни) меню. Для этого, нажмите на пункт меню и тащите на нужно вам место. Максимальный уровень вложенности меню в WordPress – 12 уровней.
После того, как вы закончили редактирование меню – обязательно нажмите «Сохранить меню».
Так же, вы можете настроить автоматическое добавление пунктов верхнего уровня в меню и выбрать местонахождение меню на сайте (если это предусмотрено вашей темой).
Для визуального изменения меню на вашем сайте – используйте стили CSS.
Вывод меню на страницу WordPress
После того, как меню для сайта готово – нам необходимо вывести его на сайте. Для этого, в нужном месте вашей темы, вставьте код:
Где main_menu – название созданного ранее меню.
Удаление меню в WordPress
Бывает такое, что меню на вашем сайте было сделано не вами (вашим другом, или другим владельцем сайта) и возникает вопрос – как же удалить меню из WordPress?
Для этого, вам необходимо:
1. Зайти в панель управления вашим сайтом и перейти в раздел «Внешний вид» пункт «Меню»
.
2. Если у вас несколько меню на сайте – выберите нужное вам и нажмите «Выбрать».
Если же меню у вас одно – переходите к следующему пункту.
3. Спуститесь вниз страницы, нажмите «Удалить меню» и подтвердите выбранное вами действие.
Если вы не хотите удалять все меню, а только отдельный его пункт, то вам необходимо сделать следующее.
Зайдите в ваше меню, найдите в нем нужный пункт, после чего откройте его и нажмите «Удалить». Таким же образом вы можете и отредактировать необходимые пункты меню.
Если в работе с меню у вас возникли какие либо вопросы или трудности – пишите об этом в комментария, постараюсь помочь.
Источник
wp_nav_menu() – вывод меню
Кстати, рекомендую вам подробнейший видеоурок про меню WordPress.
Функция позволяет вывести уже созданное меню WordPress в шаблоне вашего сайта.
Параметры
Как это работает?
Прежде всего функция wp_nav_menu() чекает параметр theme_location и выводит соответствующее меню, ассоциирующееся с этой областью темы. Если это области не существует или нет меню, присвоенного к этой области, то будет выполнены функция в параметре fallback_cb .
Если же параметр theme_location не задан вообще, тогда:
- Сначала функция попробует вывести меню по ID, ярлыку или имени, указанному в параметре menu .
- Иначе – первое непустое меню, созданное в админке.
- Иначе – выполнится функция в параметре fallback_cb (или же функция wp_page_menu() , как значение по умолчанию).
- Иначе – ничего.
Примеры
Меню без уровней вложенности с контейнером
Разные меню для авторизованных и неавторизованных пользователей
Тут достаточно зарегистрировать две области theme_location меню и использовать функцию is_user_logged_in() для переключения между ними.
Сниппет для быстрого использования
Возможно вам удобнее будет использовать этот готовый сниппет, чтобы копировать его в вашу тему WordPress и уже в нём делать изменения параметров.
Стандартные CSS-классы элементов меню
Также для вашего удобства расскажу про CSS-классы, которые применяются к элементам меню (чтобы вам лишний раз не пришлось инспектировать код).
Хочу напомнить, эти классы все легко перезаписываются при помощи параметра walker , про который я рассказывал в видеоуроке.
Все элементы меню:
- .menu-item
Добавляется к каждому элементу меню. - .menu-item-has-children
Добавляется к каждому элементу меню, у которого есть дочерние элементы . - .menu-item-object-
- .menu-item-type-
Добаляется к каждому элементу меню,может принимать одно из трёх значений: post_type или taxonomy , или custom . - .menu-item-home
Добавляется к элементу меню, ведущему на главную страницу сайта.
Текущие элементы меню:
- .current-menu-item
Будет добавлен к текущему элементу меню (то есть на странице которого мы находимся). - .current-menu-parent
Если текущий элемент меню является дочерним, то к его родительскому элементу будет добавлен этот класс. - .current-menu-ancestor
Если текущий элемент меню является дочерним, то к его прямому родительскому элементу будет добавлен этот класс.
Экшены и фильтры функции wp_nav_menu()
В функции wp_nav_menu() есть несколько хуков, которые позволяют модифицировать вывод меню.
wp_nav_menu_args
Если у вас нет возможности изменять параметры меню непосредственно в шаблоне (допустим вы работаете с готовой темой) и не хотите изменять файл шаблона в дочерней теме, то можете изменить любые параметры функции при помощи хука wp_nav_menu_args , например:
pre_wp_nav_menu
Позволяет перезаписать HTML меню целиком ещё перед тем, как оно будет сгенерировано.
wp_nav_menu_container_allowedtags
Позволяет задать разрешённые теги в контейнере меню. По умолчанию это только div или nav . Но вы можете добавить сюда и другие теги, либо наоборот, запретить уже разрешённые.
Запрещаем тег nav :
Если указан любой неразрешённый HTML-тег, то контейнер добавлен не будет.
wp_nav_menu_objects
Этот хук позволяет нам пройтись по всем элементам меню перед их выводом и сделать в них какие-либо изменения.
Например мы можем добавить какой-то произвольный CSS-класс к текущему элементу меню:
wp_nav_menu_items
Позволяет отфильтровать HTML элементов меню без контейнера и тега
- .
У этого фильтра также есть и частный случай – wp_nav_menu_<ярлык меню>_items .
wp_nav_menu
Практически аналогичен предыдущему фильтру, отличие в том, что тут мы фильтруем целиком готовый HTML код меню, уже с контейнером и тегом
- .
Мой видеокурс по натяжке готового дизайна и HTML-вёрстки на WordPress.
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.
Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!
Источник
Меню в WordPress. Волкер меню
Содержание
Функционал меню появился в версии WordPress 3.0. До этого вывод навигации обычно осуществлялся при помощи функций wp_list_categories() и wp_list_pages(). Конечно, иногда бывает нужно вывести категории сайта в виде меню и ещё чтобы дочерние категории были в виде выпадающих списков, но гораздо удобнее, если каждый элемент меню можно добавить, изменить или удалить по отдельности в админке сайта.
Также в меню WordPress вы можете изменять порядок элементов банальным перетаскиванием.
Что будет в видеоуроке?
Чтобы скачать тему WordPress, которая получилась у нас в процессе этого урока, необходимо приобрести курс.
В этом уроке, который длится практически 40 минут, мы сделаем первые шаги по интеграции интерфейса в админке WordPress, а именно – запрограммируем Меню нашей вёрстки:
А непосредственно в админке оно будет выглядеть вот так:
Я думаю, что вы уже знакомы с этим стандартным WordPress интерфейсом, но если нет:
- Этот интерфейс позволяет очень легко добавлять в меню как любой элемент контента (запись, рубрика, метка, страница и так далее), так и произвольную внешнюю ссылку.
- Порядок или вложенность элементов легко меняется перетаскиванием.
- В любой элемент можно легко добавить произвольный CSS-класс(ы), target=»_blank , nofollow.
Что делать, когда мы сталкиваемся с вёрсткой меню на бутстрап?
Если вы не в курсе, Bootstrap – это такой фреймворк (читайте – готовые CSS и JS), призванный упростить верстальщикам жизнь.
Прекрасно знаком с тем, что у некоторых бомбит от слова бутстрап, но в то же время он остаётся мега-популярным фреймворком для вёрстки. И очень часто встречается в реальной жизни.
Сам я к нему отношусь нормально – лишь бы верстали нормально.
Но прикол в том, что когда мы переносим свёрстанное на бутстрап меню в WordPress тему, мы сталкиваемся с отдельными кругами боли.
Именно поэтому я подобрал для вас вёрстку меню, сделанную на бутстрап, чтобы показать вам четенько и по шагам, что делать в таких ситуациях. Чтобы вы не боялись никаких сложностей и были ко всему готовы. Именно поэтому урок и растянулся на целый час.
Добавление поддержки меню в тему
Давайте подробно рассмотрим весь процесс добавления меню. Для начала переходим в админке во Внешний вид > Меню… У вас нет такого пункта? Окей, значит вашей темой меню не поддерживаются, сейчас мы это исправим, рассмотрим даже два способа.
Способ 1. Включение меню через add_theme_support()
Для активации функционала меню вы можете использовать функцию add_theme_support(). Всё просто и легко, вставляем этот код в functions.php текущей темы и да, после этого мы можем зайти в админку и начать создавать меню.
От себя добавлю, что этот способ мне почти не пригодился, наверное он хорош только тогда, когда вы хотите использовать меню в виджетах (и только в виджетах, без регистрации областей отображения меню, о которых поговорим ниже).
Способ 2. Регистрация областей отображения меню
Регистрация меню WordPress (а точнее областей меню) – это самый частый способ, который вам встретится при работе с меню, его создании и выводе на сайте.
В двух словах, область меню — это такая условная область, которая предназначена для вывода меню (объяснил 😹). Как всё это происходит по порядку:
- Сначала мы регистрируем область темы. После этого у нас сразу появляется функционал меню Внешний вид > Меню. Допустим, мы создадим две области темы: «Шапка сайта» и «Левый сайдбар».
- Затем, при создании меню мы указываем область темы, в которой хотим отображать данное меню. Также можно указать несколько областей сразу.
- И завершающий шаг. В разных частях темы задаём области и выводим в них соответствующие меню.
Не знаю, насколько понятно я всё это объяснил в теории, но на практике определенно будет легко. Итак, для того, чтобы зарегистрировать область темы, нам понадобится функция register_nav_menus(). Давайте тогда создадим две области, о которых я писал выше: «Шапка сайта» и «Левый сайдбар».
Да, код — в functions.php .
Как создать меню
Давайте теперь разберемся, как создавать и как управлять меню. В принципе в админке WordPress всё сделано интуитивно, но на всякий случай мы всё подробно рассмотрим.
Итак, переходим во Внешний вид > Меню, указываем в поле название нового меню и нажимаем кнопку Создать меню.
- Для того, чтобы добавить один или несколько элементов в меню, просто отметьте их галочкой и нажмите кнопку Добавить в меню.
- Если вы не видите нужной вам страницы в списке, перейдите на вкладку «Все» либо воспользуйтесь вкладкой «Поиск».
- Для того, чтобы добавить в меню ссылку на главную страницу, в списке страниц перейдите на вкладку «Все», отметьте галочкой элемент «Главная» и добавьте его в меню.
- По умолчанию в меню можно добавлять только страницы, рубрики и произвольные ссылки. Если вам нужно добавить в меню произвольный тип поста, элементы созданной вами таксономии или записи, перейдите по этой ссылке.
- Вы можете изменять порядок элементов перетаскиванием.
- Также, чуть перетащив элемент вправо, его можно сделать дочерним для вышестоящего элемента, то есть это позволит вам создать многоуровневое меню на сайте. Дочерние элементы можно будет реализовать в виде выпадающего списка на сайте.
- Если отметить галочкой «Автоматически добавлять в это меню новые страницы верхнего уровня», то, после публикации новох страниц, они автоматически будут добавляться в конец этого меню (тогда такое меню лучше будет добавлять в сайдбар, так как в шапке может просто не хватить места).
- Отметьте галочкой области темы, в которой вы хотите отобразить это меню.
- Также вы можете включить дополнительные настройки для элементов меню: Цель ссылки, Атрибут title, Классы CSS, Отношение к ссылке (XFN), Описание, нажав на вкладку «Настройки экрана» в верхней правой части экрана и отметив соответствующие галочки.
Тут мы используем стандартную тему WordPress Twenty Twenty One.
Поддержка таксономий и типов постов
Вы возможно заметили, что в меню по умолчанию присутствуют только записи, страницы, рубрики и метки (включаются в настройках экрана).
Как добавить туда какой-то произвольный зарегистрированный тип записи или таксономию?
И у тех и у других принцип один и тот же — при регистрации таксономии (register_taxonomy()) или типа поста (register_post_type()) значение параметра функции show_in_nav_menus должно быть true .
Источник
