Разметка 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>

Скачать

BEM_Walker_Nav_Menu.zip

Загрузок: 25 | Размер: 2 Кб

Подключение

  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(), как указано выше.

Комментарии (1)

  1. С возвращением!!!

Ваш комментарий