it-swarm.com.ru

wp_nav_menu (), как изменить класс <li>?

Я создаю меню для моего сайта. Статика выглядит так:

<nav>
  <ul id="menu">
        <li class="item_1"><a href="#">Item 1</a></li>
        <li class="item_2"><a href="#">Item 2</a></li>
        <li class="item_3"><a href="#">Item 3</a></li>
        <li class="item_4"><a href="#">Item 4</a></li>
        <li class="item_5"><a href="#">Item 5</a></li>
        <li class="item_6"><a href="#">Item 6</a></li>
        <li class="item_7"><a href="#">Item 7</a></li>
        <li class="item_8"><a href="#">Item 8</a></li>
    </ul>

Я смог понять, как настроить тег <ul>, чтобы избавиться от автоматического тега <div>. Но теперь я хочу настроить тег <li>, чтобы иметь возможность назначать другое имя class для управления определенным поведением через CSS. Когда я использую функцию wp_nav_menu(), получается следующее:

    <ul id="menu">
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://mydomain.com/dummy/fashion/">Fashion</a></li>
    <li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://mydomain.comdummy/documentary/">Documentary</a></li>
    <li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://mydomain.com/dummy/events/">Events</a></li>
    <li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://mydomain.com/dummy/portraits/">Portraits</a></li>
    </ul>

Я хочу избавиться от id в тегах <li> и изменить class, чтобы отразить название страницы, на которую я хочу сослаться. По сути, я хочу вывести то же самое, что и первый фрагмент кода в этом посте.

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

Это возможно? Какую стратегию я должен использовать, чтобы преодолеть эту проблему?

theme-developmentmenusnavigation
15
Christian

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

Вы также можете фильтровать 'nav_menu_css_class' или 'wp_nav_menu_items'. Но, по моему мнению, класс ходоков легче понять и контролировать.

12
fuxia

перейдите к внешнему виду> меню - выберите необходимое меню - перейдите к "параметрам экрана" в правом верхнем углу, выберите "классы CSS" - добавьте класс к каждому пункту меню.

10
Q Studio

Как упоминалось в последнем постере, вы можете добавлять свои собственные классы через внешний вид> меню с CSS-классами, отмеченными галочкой в ​​опциях экрана. В Walker вы можете получить доступ к тому, что вы там вводите через:

$item_output .= '<a'. $attributes .' class="'. $item->classes[0].'">';

Я даже использовал это, чтобы добавить предварительно названные изображения в меню - немного странно, но это работает.

<img src="theme/images/navigation/'.$item->classes[0].'" width="48" height="48">
0
user2080750

Установка класса <li> в nav-link, так как это требуется для начальной загрузки 4.3:

function add_menu_link_class($atts, $item, $args)
{
    $atts['class'] = 'nav-link';
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_menu_link_class', 1, 3);

Вы также можете сбросить атрибут id в этом массиве.

0
cweiske