wordpress php вывод меню
Вывод меню с помощью функции 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-
- .
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 интерфейсом, но если нет:
Что делать, когда мы сталкиваемся с вёрсткой меню на бутстрап?
Если вы не в курсе, Bootstrap – это такой фреймворк (читайте – готовые CSS и JS), призванный упростить верстальщикам жизнь.
Прекрасно знаком с тем, что у некоторых бомбит от слова бутстрап, но в то же время он остаётся мега-популярным фреймворком для вёрстки. И очень часто встречается в реальной жизни.
Сам я к нему отношусь нормально – лишь бы верстали нормально.
Но прикол в том, что когда мы переносим свёрстанное на бутстрап меню в WordPress тему, мы сталкиваемся с отдельными кругами боли.
Именно поэтому я подобрал для вас вёрстку меню, сделанную на бутстрап, чтобы показать вам четенько и по шагам, что делать в таких ситуациях. Чтобы вы не боялись никаких сложностей и были ко всему готовы. Именно поэтому урок и растянулся на целый час.
Добавление поддержки меню в тему
Давайте подробно рассмотрим весь процесс добавления меню. Для начала переходим в админке во Внешний вид > Меню… У вас нет такого пункта? Окей, значит вашей темой меню не поддерживаются, сейчас мы это исправим, рассмотрим даже два способа.
Способ 1. Включение меню через add_theme_support()
Для активации функционала меню вы можете использовать функцию add_theme_support(). Всё просто и легко, вставляем этот код в functions.php текущей темы и да, после этого мы можем зайти в админку и начать создавать меню.
От себя добавлю, что этот способ мне почти не пригодился, наверное он хорош только тогда, когда вы хотите использовать меню в виджетах (и только в виджетах, без регистрации областей отображения меню, о которых поговорим ниже).
Способ 2. Регистрация областей отображения меню
Регистрация меню WordPress (а точнее областей меню) – это самый частый способ, который вам встретится при работе с меню, его создании и выводе на сайте.
В двух словах, область меню — это такая условная область, которая предназначена для вывода меню (объяснил 😹). Как всё это происходит по порядку:
Не знаю, насколько понятно я всё это объяснил в теории, но на практике определенно будет легко. Итак, для того, чтобы зарегистрировать область темы, нам понадобится функция register_nav_menus(). Давайте тогда создадим две области, о которых я писал выше: «Шапка сайта» и «Левый сайдбар».
Как создать меню
Давайте теперь разберемся, как создавать и как управлять меню. В принципе в админке WordPress всё сделано интуитивно, но на всякий случай мы всё подробно рассмотрим.
Итак, переходим во Внешний вид > Меню, указываем в поле название нового меню и нажимаем кнопку Создать меню.
Тут мы используем стандартную тему WordPress Twenty Twenty One.
Поддержка таксономий и типов постов
Вы возможно заметили, что в меню по умолчанию присутствуют только записи, страницы, рубрики и метки (включаются в настройках экрана).
Как добавить туда какой-то произвольный зарегистрированный тип записи или таксономию?
WordPress. Меню навигации. Часть 1 из 2
WordPress позволяет создавать и настраивать меню прямо из админки, добавляя ссылки кликами по чекбоксам и меняя порядок ссылок простым перетаскиванием. В меню можно добавить ссылки на страницы, категории и отдельные посты. Можно добавлять свои произвольные ссылки и создавать многоуровневые меню.
Включаем поддержку произвольных меню
Функция register_nav_menu()
Функция автоматически регистрирует поддержку навигационных меню для темы. При использовании этой функции нет необходимости предварительно вызывать функцию:
Функция register_nav_menus()
Функция автоматически регистрирует поддержку навигационных меню для темы. При использовании этой функции нет необходимости предварительно вызывать функцию:
Создаем произвольные меню
После того, как меню зарегистрированы, идем в панель управления и создаем свои меню. Связь между меню и расположением — «один-ко-многим». Т.е. одно меню может быть привязано к нескольким расположениям. Но к одному расположению может быть привязано только одно меню.
Вывод произвольных меню
Функция wp_nav_menu()
Чтобы тема поддерживала меню, нужно включить эту возможность с помощью:
Чаще всего для указания, какое меню выводить, используют параметр theme_location :
Но можно использовать и параметр menu :
Результат будет одинаковый:
Пример создания меню
Допустим, при верстке шаблона был использован фреймворк Bootstrap 4. Чтобы не создавать стили для меню с нуля, нам нужно использовать свой шаблон, с классами bootstrap. Который выглядит так:
Для начала просто вставим вызов функции и посмотрим, что получилось:
Но выглядит это не очень красиво — нам нужен только один CSS-класс, а у нас целых пять. Да и как задать класс active для текущей страницы? Поэтому добавляем в файл functions.php следующий код:
Осталось только добавить класс nav-link для элементов :
Как создать и вывести меню сайта в WordPress?
Итак, WordPress – весьма удобная CMS, которая во многом, облегчает работу с нашим сайтом. Так например создание и редактирование меню очень удобно за счет встроенной функции найти которую можно в панели управления WordPress.
Создание меню в WordPress
Для того, что вам начать создание (редактирование существующего) меню, вам необходимо:
1. Зайти в панель управления вашим сайтом в раздел «Внешний вид» пункт «Меню».
2. Далее, вводим название вашего меню, например, main_menu и жмете «Создать меню». Меню может включать в себя как русский алфавит, так и английский, различные стандартные знаки и пробел.
3. Теперь непосредственно, мы можете приступить к добавлению необходимых вам пунктов. Для упрощения работы, WordPress предлагает нам несколько типов ссылок – страницы, записи и рубрики – здесь, вы можете выбрать или найти нужную вам страницу (раздел), которые уже существуют на вашем сайте, и добавить в ваше меню.
А так же, существуют «Произвольные ссылки», с помощью которых, вы можете добавить ссылки со своими данными, будь то ссылка вашего сайта или стороннего ресурса.
4. По желанию, вы можете настроить вложенность (уровни) меню. Для этого, нажмите на пункт меню и тащите на нужно вам место. Максимальный уровень вложенности меню в WordPress – 12 уровней.
После того, как вы закончили редактирование меню – обязательно нажмите «Сохранить меню».
Так же, вы можете настроить автоматическое добавление пунктов верхнего уровня в меню и выбрать местонахождение меню на сайте (если это предусмотрено вашей темой).
Для визуального изменения меню на вашем сайте – используйте стили CSS.
Вывод меню на страницу WordPress
После того, как меню для сайта готово – нам необходимо вывести его на сайте. Для этого, в нужном месте вашей темы, вставьте код:
Где main_menu – название созданного ранее меню.
Удаление меню в WordPress
Бывает такое, что меню на вашем сайте было сделано не вами (вашим другом, или другим владельцем сайта) и возникает вопрос – как же удалить меню из WordPress?
Для этого, вам необходимо:
1. Зайти в панель управления вашим сайтом и перейти в раздел «Внешний вид» пункт «Меню»
.
2. Если у вас несколько меню на сайте – выберите нужное вам и нажмите «Выбрать».
Если же меню у вас одно – переходите к следующему пункту.
3. Спуститесь вниз страницы, нажмите «Удалить меню» и подтвердите выбранное вами действие.
Если вы не хотите удалять все меню, а только отдельный его пункт, то вам необходимо сделать следующее.
Зайдите в ваше меню, найдите в нем нужный пункт, после чего откройте его и нажмите «Удалить». Таким же образом вы можете и отредактировать необходимые пункты меню.
Если в работе с меню у вас возникли какие либо вопросы или трудности – пишите об этом в комментария, постараюсь помочь.