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

16

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

<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-development menus navigation

— Кристиан
источник

Здесь вы можете добавить другой класс в ul> li> a sdtuts.com/wordpress-add-custom-class-in-wp_nav_menu-links

— Rameez SOOMRO

14

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

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

— Фуксия
источник

Благодаря Toscho, я просто обнаружил, что в новой версии Wordpress (3.3) мы можем добавить пользовательский класс для каждого пункта меню, который решает мою проблему. Я попробовал сценарий, который вы мне предложили (T5_Nav_Menu_Walker_Simple), который лишает все возможности <li>, как мы можем контролировать, какие элементы мы хотим сохранить?

— Кристиан,

1

@Christian Вы можете менять ходунки по мере необходимости, это просто очень простой пример. Чтобы увидеть, какая информация доступна, добавьте print_r( $item, TRUE )к каждому li. Затем решите, что с этим делать. :)

— fuxia

Это указало мне правильное направление, мне нужен был wp_nav_menu , но мне нужно было изменить параметр container_class, чтобы он работал в моем конкретном случае использования, где я в некоторых условиях менял главное меню на другое, но мне нужно было классы должны быть последовательны для CSS.

— Д. Дан

10

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

— Q Studio
источник

1

Установка <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атрибут в этом массиве.

— cweiske
источник

0

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

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

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

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

— user2080750
источник