home iconГлавная / wordpress / wp_nav_menu (), как изменить класс <li>?

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

    • vote up icon 17 vote down icon
    • translation icon
    • view icon70949 calendar icon2011-12-26

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

     <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 https://sdtuts.com/wordpress-add-custom-class-in-wp_nav_menu-links/

4  ответ

  • голосов
    • accept answer icon
    • translation icon
    • calendar icon 2011-12-26

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

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

    • Спасибо,Тошо,я просто обнаружил,что в новой версии Wordpress (3.3) мы можем добавить собственный класс для каждого пункта меню,который вроде как решает мою проблему.Я попробовал сценарий,который вы мне предложили (T5_Nav_Menu_Walker_Simple),который удаляет все из `
    • `,как мы можем контролировать,какие элементы мы хотим сохранить?
  • @Christian. Вы можете изменить ходунок по своему усмотрению,это просто очень простой пример.Чтобы увидеть,какая информация доступна,добавьте `print_r ($item,TRUE)` к каждому `li`.Затем решите,что с ним делать.:)
  • Это указывало мне в правильном направлении,мне было нужно ** wp_nav_menu **,** но ** мне нужно было изменить параметр 'container_class',чтобы он работал в моем конкретном случае использования,где я при некоторых условиях поменял местами основнойменю для другого,но нужно,чтобы классы были согласованы для css.
    • translation icon
    • calendar icon 2012-09-22

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

    • translation icon
    • calendar icon 2019-04-22

    Установка для класса <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 в этом массиве.

    • translation icon
    • calendar icon 2013-06-13

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

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

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

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