Wp menu как вывести

WordPress. Меню навигации. Часть 1 из 2

WordPress позволяет создавать и настраивать меню прямо из админки, добавляя ссылки кликами по чекбоксам и меняя порядок ссылок простым перетаскиванием. В меню можно добавить ссылки на страницы, категории и отдельные посты. Можно добавлять свои произвольные ссылки и создавать многоуровневые меню.

Включаем поддержку произвольных меню

Для начала нужно зарегистрировать возможность использования произвольных меню. Для этого добвляем в файл functions.php вызов функции register_nav_menu() или register_nav_menus() .

Функция register_nav_menu()

Регистрирует одно расположение меню, к которому затем в админке прикрепляется меню. Меню выводится в шаблоне функцией wp_nav_menu() .

• $location (строка, обязательный). Идентификатор расположения меню.
• $description (строка, обязательный). Описание расположения меню, которое будет показываться в админке.

Функцию принято вызывать во время события after_setup_theme . Чтобы зарегистрировать сразу несколько расположений, можно использовать функцию register_nav_menus() .

Функция автоматически регистрирует поддержку навигационных меню для темы. При использовании этой функции нет необходимости предварительно вызывать функцию:

Функция register_nav_menus()

Регистрирует сразу несколько расположений меню, к которым затем в админке прикрепляются меню. Меню выводятся в шаблоне функцией wp_nav_menu() .

• $locations (массив, обязательный). Массив с идентификаторами (ключи массива) и описаниями (значения ключей) каждого создаваемого меню.

Функцию принято вызывать во время события after_setup_theme . Чтобы зарегистрировать только одно расположение, можно использовать функцию register_nav_menu() .

Функция автоматически регистрирует поддержку навигационных меню для темы. При использовании этой функции нет необходимости предварительно вызывать функцию:

Создаем произвольные меню

После того, как меню зарегистрированы, идем в панель управления и создаем свои меню. Связь между меню и расположением — «один-ко-многим». Т.е. одно меню может быть привязано к нескольким расположениям. Но к одному расположению может быть привязано только одно меню.

Вывод произвольных меню

Меню зарегистрированы и созданы, осталось добавить их в шаблон с помощью функции wp_nav_menu() .

Функция wp_nav_menu()

Выводит произвольное меню, созданное в панели: «Внешний вид • Меню». Какое именно меню навигации выводить, указывается в параметре theme_location или menu .

Чтобы тема поддерживала меню, нужно включить эту возможность с помощью:

Или можно зарегистрировать место для меню, с помощью register_nav_menu() , тогда поддержка меню темой включиться автоматически.

• theme_location (строка). Идентификатор расположения меню в шаблоне. По умолчанию пустая строка.
• menu (строка). Меню которое нужно вывести. Соответствие: id , slug или название меню. По умолчанию пустая строка.
• container (строка/false). Чем оборачивать ul тег. Допустимо: false , div или nav . По умолчанию: ‘div’ .
• container_class (строка). Значение атрибута class у контейнера меню. По умолчанию: ‘menu--container’ .
• container_id (строка). Значение атрибута id у контейнера меню. По умолчанию пустая строка.
• menu_class (строка). Значение атрибута class у тега ul . По умолчанию: ‘menu’ .
• menu_id (строка). Значение атрибута id у тега ul . По умолчанию: ‘menu-‘ .
• items_wrap (строка). Шаблон обёртки для элементов меню. Шаблон обязательно должен иметь плейсхолдер %3$s , остальное опционально. По умолчанию: ‘
  %3$s

  ‘ .

• fallback_cb (строка). Функция для обработки вывода, если никакое меню не найдено. Установите пустую строку, чтобы ничего не выводилось, если меню нет. По умолчанию: ‘wp_page_menu’ .
• before (строка). Текст перед тегом в меню. По умолчанию пустая строка.
• after (строка). Текст после каждого тега в меню. По умолчанию пустая строка.
• link_before (строка). Текст перед анкором каждой ссылки в меню. По умолчанию пустая строка.
• link_after (строка). Текст после анкора каждой ссылки в меню. По умолчанию пустая строка.
• depth (число). Сколько уровеней вложенности показывать. По умолчанию ноль (все уровни).
• item_spacing (строка). Оставлять или нет переносы строк в HTML коде меню. Может быть: preserve или discard . По умолчанию: preserve .
• echo (логическое). Выводить на экран ( true ) или возвратить для обработки ( false ). По умолчанию: true .
• walker (объект). Объект класса для построения меню. По умолчанию: объект Walker_Nav_Menu() .

Чаще всего для указания, какое меню выводить, используют параметр theme_location :

Но можно использовать и параметр menu :

Результат будет одинаковый:

Пример создания меню

Допустим, при верстке шаблона был использован фреймворк Bootstrap 4. Чтобы не создавать стили для меню с нуля, нам нужно использовать свой шаблон, с классами bootstrap. Который выглядит так:

Для начала просто вставим вызов функции и посмотрим, что получилось:

Не хватает класса nav-item для элементов
и класса nav-link для элементов . Давайте это исправим.

Класс nav-item для элементов
можно добавить в панели управления. Для этого отмечаем checkbox «Классы CSS» в настройках экрана и добавляем для каждого элемента меню класс nav-item :

Но выглядит это не очень красиво — нам нужен только один 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. Спуститесь вниз страницы, нажмите «Удалить меню» и подтвердите выбранное вами действие.

Если вы не хотите удалять все меню, а только отдельный его пункт, то вам необходимо сделать следующее.

Зайдите в ваше меню, найдите в нем нужный пункт, после чего откройте его и нажмите «Удалить». Таким же образом вы можете и отредактировать необходимые пункты меню.

Если в работе с меню у вас возникли какие либо вопросы или трудности – пишите об этом в комментария, постараюсь помочь.

Источник

wp_nav_menu() – вывод меню

Кстати, рекомендую вам подробнейший видеоурок про меню WordPress.

Функция позволяет вывести уже созданное меню WordPress в шаблоне вашего сайта.

Параметры

Как это работает?

Прежде всего функция wp_nav_menu() чекает параметр theme_location и выводит соответствующее меню, ассоциирующееся с этой областью темы. Если это области не существует или нет меню, присвоенного к этой области, то будет выполнены функция в параметре fallback_cb .

Если же параметр theme_location не задан вообще, тогда:

1. Сначала функция попробует вывести меню по ID, ярлыку или имени, указанному в параметре menu .
2. Иначе – первое непустое меню, созданное в админке.
3. Иначе – выполнится функция в параметре fallback_cb (или же функция wp_page_menu() , как значение по умолчанию).
4. Иначе – ничего.

Примеры

Меню без уровней вложенности с контейнером

Разные меню для авторизованных и неавторизованных пользователей

Тут достаточно зарегистрировать две области theme_location меню и использовать функцию is_user_logged_in() для переключения между ними.

Сниппет для быстрого использования

Возможно вам удобнее будет использовать этот готовый сниппет, чтобы копировать его в вашу тему WordPress и уже в нём делать изменения параметров.

Стандартные CSS-классы элементов меню

Также для вашего удобства расскажу про CSS-классы, которые применяются к элементам меню (чтобы вам лишний раз не пришлось инспектировать код).

Хочу напомнить, эти классы все легко перезаписываются при помощи параметра walker , про который я рассказывал в видеоуроке.

Все элементы меню:

• .menu-item
  Добавляется к каждому элементу меню.
• .menu-item-has-children
  Добавляется к каждому элементу меню, у которого есть дочерние элементы .
• .menu-item-object-