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

Question

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

26 дек. 2011 г., 22:02:46

Просмотры: 91.1K

Голосов: 20

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

<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 вместо простого текста.

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

Christian

205

разработка тем меню навигация

Комментарии

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

Rameez SOOMRO

9 июн. 2018 г. 09:38:49

Все ответы на вопрос

Комментарии

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

Christian

26 дек. 2011 г. 23:20:50

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

fuxia

27 дек. 2011 г. 00:44:34

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

D. Dan

25 янв. 2018 г. 17:16:34

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

Q Studio

2.53K

22 сент. 2012 г. 13:49:25

Установка класса <li> в nav-link, так как Bootstrap 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

178

22 апр. 2019 г. 21:30:37

Это очень простой способ вызова класса li и легкой замены "любого класса". Просто следуйте инструкциям.

Используйте этот код в области навигации.

<?php
            $consult_menu = wp_nav_menu(array(
                    'theme_location' => 'topmenu',
                    'menu_id' => 'menu',
                    'menu_class' => 'navbar-nav m-auto',
                    'echo' => false
                )
            );
            $consult_menu = str_replace('menu-item', 'nav-item', $consult_menu);
            echo $consult_menu;
            ?>

Затем проверьте ваш код в браузере. Найдите стандартный класс wp и замените его str_replace(**"default_class_here"**,**"new_li_class_here"**,$consult_menu); | Примечание: $consult_menu здесь — это название моей темы, вы можете использовать любое имя здесь.

Muhammad Mohibbullah

21

21 февр. 2022 г. 19:20:37

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

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

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

<img src="theme/images/navigation/'.$item->classes[0].'" width="48" height="48" alt="Навигационное изображение" title="Навигационное изображение">

RPB1001

1

13 июн. 2013 г. 08:36:59

fuxia 107K · Accepted Answer · 2011-12-26T22:48:28Z

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

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

fuxia

107K

26 дек. 2011 г. 22:48:28