Возможность добавить меню в тему появилась в 3-й версии WordPress. Благодаря использованию класса Walker_Nav_Menu меню в WordPress обычно формируется в виде маркированного списка с определенным набором классов для элементов <ul>, <li> и реже - для <a>. Давайте разберемся, как добавить и управлять формированием меню в WordPress.

Добавление меню в теме

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

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

Обратите внимание, что функция называется register_nav_menus() с английским "s" в конце и принимает в качестве параметра массив. Т.е. она изначально предназначена для регистрации нескольких меню. Чаще всего меню добавляют в хедер и футер (пример в коде), но вы также можете размещать меню в боковой колонке, тогда в массиве у вас будет 3, а не 2 элемента. Если у вас одно меню, то оно указывается в виде единственного аргумента массива параметров функции register_nav_menus().

Если вы используете функцию register_nav_menu() , поддержка меню темой включается автоматически. Вы также можете добавить такую поддержку с помощью функции add_theme_support( 'menus' );

Функция register_nav_menu() регистрирует месторасположение вашего меню, но само меню при этом не создается и не отображается в теме. Для этого существует другая функция.

Функция wp_nav_menu() предназначена для вывода вашего меню в том месте шаблона, в котором вы ее размещаете. У нее достаточно много параметров:

Чаще всего эти параметры используются частично. Например, достаточно бывает указать только 'theme_location'. Например, у нас есть меню в футере:

Здесь мы, кроме области размещения меню, указываем, что у нас будут только основные ссылки (1-го уровня), без вложенных элементов.

Изменяем классы в элементах <li>

По умолчанию меню выводит элементы <li> с довольно большим списком стандартных классов. Код может выглядеть так:

Допустим, нам необходимо добавить какие-либо классы к элементам <li>, кроме уже существующих? хоть их и ооочень много. Мы можем сделать это по условию, добавив хук-фильтр для 'nav_menu_css_class'. Например, нам нужно, чтобы class="blogpost" был добавлен к <li>, если они указывают на любой из постов или на страницу блога, которая выводит ссылки на все посты. Тогда нам подойдет такой код:

Второй вариант, для того же хука  'nav_menu_css_class' зарегистрировать функцию, которая описывает дополнительные атрибуты. Например, мы хотим добавить класс .py-1, управляющий свойством padding в Bootstrap, к элементам меню в футере. Тогда нам нужно описать функцию, в которой будет дополнительный, нестандартный аргумент для wp_nav_menu(). Назовем его add_li_class.

Код функции в functions.php:

В файле footer.php вызываем функцию wp_nav_menu() с этим аргументом:

В результате только в меню в футере будет добавлен класс p-1.

Если же вы хотите добавить этот класс ко всем элементам <li> во всех меню, то нужно добавить такой код:

В стандартном меню, выводимом WordPress, массиве $classes имеет такое содержимое (классы):

Однако, в случае добавления одного и того же класса во все элементы <li> стоит, возможно, подумать о том, что проще дописать css-свойство(-а) для  этих  <li> в style.css?

Можно убрать все классы из элементов <li>, заменив их на класс 'menu-item' , плюс для текущей открытой пользователем страницы добавить класс active:

Убираем id в элементах <li>

Тут очень простой код:

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

Использование класса Walker_Nav_Menu

Это, пожалуй, самый интересный вариант формирования WordPress-меню, но и самый сложный для понимания. Класс Walker_Nav_Menu - это "обходчик" меню, который управляет выводом элементов <ul> и <li> для всех меню по умолчанию и для вашего конкретного меню, если вы укажете в нем другой параметр "walker".

Для начала нам нужно где-то разместить код класса, который будет расширять функционал стандартного класса Walker_Nav_Menu. Можно это сделать в functions.php, но код может быть довольно длинным, поэтому его обычно выносят в отдельный файл, например, с именем nav_walker.php и размещают в папке inc. Затем самый простой способ сделать его видимым для темы - это подключить данный файл в functions.php с помощью require:

Длинный способ - зарегистрировать файл nav_walker.php примерно таким же способом:

Затем необходимо вызвать код этого класса в том файле темы, который предназначен для вывода меню. Обычно это header.php, footer.php или реже sidebar.php.

Ну, и самое главное - код в файле nav_walker.php. Здесь мы расширяем стандартный класс Walker_Nav_Menu и используем для этого нескольких функций:

Аргументы функций:

  • $output - определяет, какое HTML-содержимое будет выведено,
  • $depth - определяет глубину вложенности элемента,
  • $args - представляет собой массив дополнительных аргументов.

Сами функции (методы класса) описывают следующее:

  • start_lvl— (начало уровня) описывает открывающий тег. В случае списков это будет начало нового «подсписка», и поэтому здесь идет вывод тега <ul>.
  • end_lvl– (конец уровня) закрывает любой тег, который ранее был открыт методом start_lvl. В примере меню навигации эта функция отвечает за завершение подсписка закрывающим тегом списка.</ul>
  • start_el— (начало элемента)  используется для отображения открывающего HTML-тега текущего элемента. В случае меню это означает <li>тег и ссылку на элемент.
  • end_el– (конец элемента) вызывается после того, как Walker создает элемент со всеми его дочерними элементами и возвращает закрывающий тег. Обычно в меню это  закрывающий тег </li>.

Если заглянуть в класс Walker_Nav_Menu, то вы увидите, что в функции start_lvl определяются отступы и класс sub-menu для вложенных ul-элементов, в функции end_lvl закрывается элемент ul и тоже описываются отступы. Функция start_el добавляет отступы к элементам <li>, описывает их классы и id, добавляет параметры before и after для <li>, а также link_before и link_before для ссылок. Функция end_el описывает отступы и закрывает элемент </li>.

Можно в вашем классе использовать одну или 2 функции из перечисленных, если вы вносите изменения, например, только в вывод элементов <li> и вложенных в них <a>. Тогда вам точно нужна функция start_el и, возможно, end_el.

Такой способ формирования меню обычно нужен в футере для вывода так называемых "технических" меню с ссылками на страницы политики конфиденциальности, возврата товара, дисклаймеры и т.п., которые пользователи читают, прямо скажем, редко, но наличие их на сайте обязательно.

Использование списков в этом случае не нужно, достаточно просто элементов <a>.

Код класса Nav_Footer_Walker:

Автор этого кода kosinix. Вы можете посмотреть его на Github. С другой стороны убрать <ul> и <li> из меню можно с использованием стандартного обходчика и вызова функции strip_tags().

Давайте изменим вывод меню в шапке сайта. Как правило, часть пунктов меню являются выпадающими. Поэтому добавим свой walker:

В качестве основы для стилей и классов будем использовать такой пример:

See the Pen Responsive Multilevel Dropdown menu by Elen (@ambassador)on CodePen.

Больше примеров в статье Примеры выпадающих меню (dropdown menu)

В файле nav_walker.php размещаем код класса Dropdown_CSS_Menu_Walker:

Здесь мы удалили ряд классов из элементов <li> в меню, например, 'menu-item-type-post_type' и 'menu-item-object-page', а также их id, просто не включив строчки с формированием id в код.

Код с новым walker несколько изменим и добавим в файле header.php:

Наверняка у вас есть еще файлы с js и css-кодом. В них нужно добавить js-код и стили из примера. Вполне возможно, часть из них нужно будет подправить в соответствии со стилями темы.

Меню для WordPress при использовании Bootstrap

Для Bootstrap 5

Источник Bootstrap-5  wordpress-navbar-walker

Код в файле bootstrap5_wp_nav_menu_walker.php. Этот файл нужно подключить в functions.php.

В файле functions.php:

В файле header.php:

Дополнительные настройки:

  • На странице «Внешний вид» → «Меню» WordPress установите флажок «Классы CSS» в разделе «Параметры экрана» ;
  • Добавьте пользовательскую ссылку с «#» в поле URL-адреса (это будет родительский элемент раскрывающегося списка);
  • В поле «Классы CSS» добавьте любой из следующих классов выравнивания: 'dropdown-menu-start', 'dropdown-menu-end', 'dropdown-menu-sm-start', 'dropdown-menu-sm-end', 'dropdown-menu-md-start', 'dropdown-menu-md-end', 'dropdown-menu-lg-start', 'dropdown-menu-lg-end', 'dropdown-menu-xl-start', 'dropdown-menu-xl-end', 'dropdown-menu-xxl-start', 'dropdown-menu-xxl-end';
  • Если какой-либо из упомянутых выше классов обнаружен, он будет автоматически скопирован в элемент ul.dropdown-menu, соответствующий структуре Bootstrap 5;
  • Любой другой класс, не связанный с выравниванием раскрывающегося меню, не учитывается.

Меню для WordPress при использовании Bootstrap 4

Если вы используете Bootstrap 4 для создания файлов темы и решили использовать его классы для формирования меню, то вам пригодятся следующие ссылки:

  1. WP Bootstrap Navwalker for fully implementing the Bootstrap 4 navigation style
  2. Мега-меню для Bootstrap-4
  3. Walker Menu WordPress per BootStrap Dropdown e Hover
  4. wp-bootstrap-navwalker

Пример:

Для 3-й версии Bootrstrap:

  1. WP Bootstrap 3 Navwalker
  2. Bootstrap-3 Dropdown menus in WordPress
  3. Мега-меню для Bootstrap-3

Другие варианты:

Почитать дополнительно:

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *