Разметка WordPress-меню по БЭМ с помощью волкера

Я верстаю по методологии БЭМ и при разработке WordPress-шаблонов стараюсь там, где это возможно, привести к соответствующему виду встроенные в WordPress CSS-классы.

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

Далее в примерах будет использоваться БЭМ-блок с именем nav.

Особенности

• За основу взят волкер Walker_Nav_Menu, расположенный в файле /wp-includes/class-walker-nav-menu.php.
• CSS-классы, добавленные при редактировании меню в админке в поле “Классы CSS”, становятся модификаторами. Например, если вы указали через пробел два класса: “mod-1 mod-2”, будут добавлены модификаторы nav__item--mod-1 и nav__item--mod-2.
• У ссылки текущей страницы удаляется атрибут href и добавляется класс nav__item--active.
• Для пункта-родителя добавляется класс .nav__item--active-parent.
• Для пункта, являющегося предком среди родительских пунктов, добавляется класс .nav__item--active-ancestor.
• Для списков 2-го и далее уровней вложенности добавляется класс nav__sub-menu и модификатор вида nav__sub-menu--level-1, показывающий уровень вложенности.

Как это выглядит в коде

PHP-код для вывода меню в шаблоне:

wp_nav_menu( [
  'theme_location' => 'header-nav',
  'depth'          => 1,
  'container'      => false,
  'fallback_cb'    => false,
  'echo'           => true,
  'walker'         => new BEM_Walker_Nav_Menu(),
  'bem_block'      => 'nav',
  'items_wrap'     => '
    <nav class="nav">
      <ul class="nav__list">%3$s</ul>
    </nav>
  ',
] );

Здесь важны два параметра:

1. walker – подключает соответствующий волкер;
2. bem_block – содержит имя блока.

В результате получится примерно следующая структура HTML-кода:

<nav class="nav">
  <ul class="nav__list">
    <li class="nav__item">
      <a class="nav__link" href="#">Пункт 1</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">Пункт 2</a>
      <ul class="nav__sub-menu  nav__sub-menu--level-1">
        <li class="nav__item">
          <a class="nav__link" href="#">Подпункт 1</a>
        </li>
        <li class="nav__item">
          <a class="nav__link" href="#">Подпункт 2</a>
        </li>
        <li class="nav__item">
          <a class="nav__link" href="#">Подпункт 3</a>
        </li>
      </ul>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">Пункт 3</a>
    </li>
  </ul>
</nav>

Скачать

Подключение

1. Поместите файл BEM_Walker_Nav_Menu.php, находящийся в скачанном архиве, в папку с шаблоном, например, сюда: includes/BEM_Walker_Nav_Menu.php.

2. Подключите его в файле functions.php следующей строкой:

   require_once 'includes/BEM_Walker_Nav_Menu.php';

3. Используйте параметры walker и bem_block в функции wp_nav_menu(), как указано выше.