Добавить (БЭМ) классы в список пунктов меню WordPress и якоря

Я начал свой проект с создания статических HTML-шаблонов. Моя «основная» навигация выглядит так:

<nav class="site-nav">
<a href="#" class="page-head__logo">
<img src="img/interface/logo.png" alt="Wireforce logo" />
</a>
<a href="#" id="site-nav__toggle">Menu</a>
<ul class="site-nav__list">
<li class="site-nav__item"><a href="#" class="site-nav__link">Services</a></li>
<li class="site-nav__item"><a href="#" class="site-nav__link">Security</a></li>
<li class="site-nav__item"><a href="#" class="site-nav__link">Blog</a></li>
<li class="site-nav__item"><a href="#" class="site-nav__link">About</a></li>
<li class="site-nav__item"><a href="#" class="site-nav__link">Contact</a></li>
</ul>
</nav>

Я знаю, что могу ориентироваться на якоря WordPress в CSS с .site-nav li a {} но я хотел бы придерживаться моего соглашения об именах БЭМ для согласованности.

В functions.php Я вижу, что с помощью wp_nav_menu Я могу указать классы для контейнера / ul, но не для list-items / anchors. Кто-нибудь может порекомендовать «лучший» способ достижения того, чего я добиваюсь? Делая немного чтения, кажется, что ходунки класс может быть путь? Так что я бы очень признателен за несколько советов на эту тему или, если есть лучший метод.

Для справки мой wp_nav_menu скрипт в настоящее время выглядит так:

function html5blank_nav() {
wp_nav_menu(
array(
'theme_location'  => 'header-menu',
'menu'            => '',
'container'       => 'div',
'container_class' => 'menu-{menu slug}-container',
'container_id'    => '',
'menu_class'      => 'menu',
'menu_id'         => '',
'echo'            => true,
'fallback_cb'     => 'wp_page_menu',
'before'          => '',
'after'           => '',
'link_before'     => '',
'link_after'      => '',
'items_wrap'      => '<ul class="site-nav__list">%3$s</ul>',
'depth'           => 0,
'walker'          => ''
)
);
}

1

Решение

Ты прав насчет ходока. Попробуйте что-то вроде этого и пройдите new Custom_Walker на ваш walker ключ в массиве аргументов, подаваемых на wp_nav_menu

<?php

// functions.php
// OR - preferrably - some file of it's own that you `include` by other means.

class Custom_Walker extends \Walker_Nav_Menu
{
/**
* Start the element output.
*
* The $args parameter holds additional values that may be used with the child
* class methods. Includes the element output also.
*
* @since 2.1.0
* @abstract
*
* @param string $output            Passed by reference. Used to append additional content.
* @param object $object            The data object.
* @param int    $depth             Depth of the item.
* @param array  $args              An array of additional arguments.
* @param int    $current_object_id ID of the current item.
*/
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$anchorEl = sprintf(
'<a class="site-nav__link%s" href=\'%s\'>%s</a>',
($item->object_id === get_the_ID()) ? ' site-nav__link--active' : '',
$item->url,
$item->title
);

$output .= sprintf( "\n<li class="site-nav__item">%s\n", $anchorEl);
}//end start_el()

/**
* Ends the element output, if needed.
*
* The $args parameter holds additional values that may be used with the child class methods.
*
* @since 2.1.0
* @abstract
*
* @param string $output Passed by reference. Used to append additional content.
* @param object $object The data object.
* @param int    $depth  Depth of the item.
* @param array  $args   An array of additional arguments.
*/
public function end_el(&$output, $object, $depth = 0, $args = array()) {
$output .= '</li>';
}//end end_el()
}//end class
0

Другие решения

Других решений пока нет …