Как сделать меню навигации в wordpress

Обновлено: 06.07.2024

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()

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

Или можно зарегистрировать место для меню, с помощью 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 , остальное опционально. По умолчанию: '
Чаще всего для указания, какое меню выводить, используют параметр theme_location :

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

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

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

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

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

Но выглядит это не очень красиво — нам нужен только один CSS-класс, а у нас целых пять. Да и как задать класс active для текущей страницы? Поэтому добавляем в файл functions.php следующий код:

Осталось только добавить класс nav-link для элементов :

И получаем в результате то, что нам нужно:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Широко известно, что в WordPress 3.0 добавлена поддержка произвольных меню (настраиваемых меню). Вещь, на мой взгляд, крайне удобная и полезная. Собственно, отсюда и эта статья.

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

Однако, чтобы такая "свобода" была доступна, нужно, скажем так, легким движением мышки, настроить вывод произвольного меню в шаблон.

Использовать такие меню будет крайне удобно, если пользоваться мультисайтовой возможностью WordPress, потому что для разных сайтов можно будет настраивать разные меню, а шаблон для них использовать один.

Заметка: меню работает через таксономию (nav_menu) WordPress, а произвольные (внешние) ссылки, записываются в основную таблицу БД posts. Такой подход более гибкий и динамичный, однако требует постоянной генерации таких меню.

Видео по меню в WordPress

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

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

Задаем название меню (меню в шаблоне можно выводить по указанному названию, функцией wp_nav_menu()

Создаем пункты меню. Используем левый блок: страницы ссылки, рубрики

Поддержка произвольных меню в WordPress включается для каждой темы отдельно, такой строчкой в файле functions.php add_theme_support('menus'); Однако, в этой строчке нет необходимости, если мы регистрируем меню. В этом случаем поддержка будет включена автоматически.

Вывод произвольных меню через функцию wp_nav_menu

В данном примере в шаблон нужно вставить примерно (зависит от необходимых вам параметров) такие, 2 кода:

Верхнее меню. Вставляем в шапку шаблона (header.php), там где будет выводится верхнее (top) меню:

Выведет созданное в админке меню, прикрепленное к расположению "Верхнее меню" с подобной структурой:

Нижнее меню. Вставляем в подвал шаблона (footer.php), там где будет выводится нижнее (bottom) меню:

Выведет созданное в админке меню, прикрепленное к расположению "Нижнее меню". Структура будет идентичная первой.

Обратите внимание, в первом варианте параметры были переданы через массив (array). Во втором через строку. Оба варианта правильны. Это обычное дело для функций WordPress - параметры можно передавать как массивом, так и строкой (строка потом преобразовывается в массив).

Чтобы вывести меню по его названию можно воспользоваться аргументом 'menu'. Название указывается, то которое было задано при создании меню в админке. В нашем примере (см. картинку) "Главное меню". Аргумент menu обладает большим приоритетом чем theme_location , а значит, если мы выводим по названию, то параметр theme_location будет игнорироваться.

Можно указать ID меню, а не название. Так, при изменении названия меню, код останется рабочим. ID меню можно посмотреть в УРЛ во время редактирования меню:

Заметки

Уберем обертку Div

Вы наверное обратили внимание, что меню "оборачивается", часто, ненужным тегом div. Его можно удалить, указав в аргументах для функции wp_nav_menu() пустой параметр 'container'=>'' .

Изменяем параметры по умолчанию

Чтобы постоянно не указывать один и те же параметр для вставляемых меню, их можно переопределить в functions.php . Делается это через фильтр wp_nav_menu_args :

По аналогии, можно создать свои аргументы по умолчанию: $args['аргумент'] = 'значение' .

Параметр walker

Из всех передаваемых аргументов, непонятным является walker. Для тех, кто хочет разобраться для чего он нужен, читайте раздел в описании функции wp_nav_menu(). Там коротко и ясно описан принцип. Если очень коротко, то с его помощью можно внедриться в процесс генерации меню и изменить его как угодно.

Включение доп. параметров у меню

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

Содержание:

Меню навигации помогает посетителям ориентироваться в содержании веб-сайта. Используя его, они найдут информацию, которую ищут. Навигация создает структуру вашего сайта WordPress. Чаще всего вы найдете его вверху или сбоку страницы.

Как создать меню навигации в WordPress

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

Места для вывода меню на сайте

Расположение меню в администрировании темы

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

Плагин мегаменю

Редактирование существующей навигации

Редактирование существующей навигации

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

Каждый элемент также можно переместить в новое место в иерархии навигации. Можете просто прикрепить определенный элемент с помощью мыши и переместить его в нужное место. Помните, что можете перемещать ссылки не только вверх и вниз, но и вправо. Это делает ссылку дочерней по отношению к ссылке выше.

Добавление, перетаскивание и назначение дочерним элементом меню

Варианты редактирования

При редактировании навигации вы также можете установить некоторые параметры для каждого элемента. Когда нажмете на маленькую стрелку рядом с названием элемента, откроется новое окно. Здесь можете редактировать:

Последние ссылки — это следующие функции:
- удалить — удаляет элемент,
- отменить — отменяет изменения.
Варианты редактирования

Изменить название ссылки

Добавление страницы к элементам навигации меню

Добавление поста и ссылки на категорию

Вставка собственной ссылки

Вставка собственной ссылки

Удаление элемента

Управление расположением меню

Управление областями расположения меню

Результат вывода меню

Хотели бы вы вывести меню навигации WordPress в своих записях или страницах? Обычно, ваша тема WordPress сама задает как и где выводить меню навигации. В этой статье мы покажем вам как добавить меню навигации WordPress в записи/страницы или в любое другое место на сайте.

Зачем добавлять меню навигации WordPress в записи или на странице

Меню навигации в WordPress предлагает простой способ добавления структурированного меню на вашем сайте.

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

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

Давайте же посмотрим как можно добавить меню навигации в записи и на страницы WordPress.

Добавляем меню навигации в записи и на страницы WordPress

Первым делом вам потребуется установить и активировать плагин Shortcode Menu.

Как только ваше меню будет готово, можно переходить в раздел Shortcode Menu в админке. Вы окажетесь на странице генератора шорткодов.

Сначала потребуется выбрать меню для добавленя из выпадающего списка ‘Select Menu’. Если вам нужно добавить ID или атрибут класса в меню, то здесь можно это сделать.

Далее, выбираем стиль отображения меню. По-умолчанию, ваше меню будет выводится в виде блока. Можно изменить значение на inline для того, чтобы меню выстраивалось в горизонтальную линию.

Также можно изменять цвет меню в разделе ‘Design your menu on the fly’. Плагин позволяет вам выбрать цвета фона, анкора и hover’а.

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

Плагин добавляет свое форматирование для меню, но если захочется настроить внешний вид самостоятельно, то придется делать это с помощью CSS.

Во втором столбце на странице настроек плагина вы найдете базовый сниппет CSS. Его можно использовать в качестве отправной точки для стилизации меню.

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

Читайте также: