wp_nav_menu (), jak zmienić klasę <li>?

16

Buduję menu dla mojej strony internetowej. Statyczny wygląda następująco:

<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>

Byłem w stanie zrozumieć, jak dostosować <ul>tag, aby pozbyć się <div>tagu automatycznego . Ale teraz chcę dostosować <li>tag, aby móc przypisać inną classnazwę, aby kontrolować określone zachowanie za pomocą CSS. Kiedy używam, wp_nav_menu()dane wyjściowe są następujące:

    <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>

Chcę pozbyć się idw <li>znacznikach i zmienić class, aby odzwierciedlić nazwę strony chcę połączyć. Zasadniczo chcę wypisać to samo, co pierwszy fragment kodu w tym poście.

Powodem, dla którego to robię, jest to, że używam niestandardowych obrazów, które są kontrolowane przez mój CSS zamiast zwykłego tekstu.

czy to możliwe? Jaką strategię powinienem zastosować, aby rozwiązać ten problem?

theme-development menus navigation chrześcijanin
źródło
Tutaj możesz dodać inną klasę w ul> li> a sdtuts.com/wordpress-add-custom-class-in-wp_nav_menu-links
Rameez SOOMRO

Odpowiedzi:

14

Użyj niestandardowego chodzika , usuń wszystko, czego nie potrzebujesz i dodaj swoje zajęcia. Oto walker, którego używam, aby uzyskać listę z czystymi znacznikami: T5_Nav_Menu_Walker_Simple .

Możesz także filtrować 'nav_menu_css_class'lub 'wp_nav_menu_items'. Ale moim zdaniem klasa chodzika jest łatwiejsza do zrozumienia i kontrolowania.

fuxia
źródło
Dzięki Toscho, właśnie odkryłem, że w nowej wersji Wordpress (3.3) możemy dodawać niestandardowe klasy do każdego elementu menu, który w pewnym sensie rozwiązuje mój problem. Wypróbowałem skrypt, który mi zaproponowałeś (T5_Nav_Menu_Walker_Simple), który usuwa wszystko z<li> , w jaki sposób możemy kontrolować, które elementy chcemy zachować?
Christian
1
@Christian Możesz zmienić walker według potrzeb, to tylko bardzo prosty przykład. Aby zobaczyć, które informacje są dostępne, dodaj print_r( $item, TRUE )do każdego z nich li. Następnie zdecyduj, co z tym zrobić. :)
fuxia
To wskazało mi właściwy kierunek, potrzebowałem wp_nav_menu , ale musiałem zmienić parametr „container_class”, aby pracować dla mojego konkretnego przypadku użycia, w którym pod pewnymi warunkami zamieniłem menu główne na inne, ale potrzebowałem klasy powinny być spójne dla css.
D. Dan
10

przejdź do wyglądu> menu - wybierz żądane menu - przejdź do „opcji ekranu” w prawym górnym rogu, wybierz „klasy css” - dodaj klasę do każdej pozycji menu.

Q Studio
źródło
1

Ustawienie <li>klasy tak nav-link, jak potrzebuje 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);

Możesz także odznaczyć idatrybut w tej tablicy.

cweiske
źródło
0

Jak wspomniano w ostatnim plakacie, możesz dodawać własne klasy poprzez wygląd> menu z klasami CSS zaznaczonymi w opcjach ekranu. W walkerze możesz uzyskać dostęp do tego, co tam wprowadzasz:

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

Użyłem tego nawet do dodawania w menu wstępnie nazwanych obrazów - trochę płatkowych, ale działa.

<img src="theme/images/navigation/'.$item->classes[0].'" width="48" height="48">
user2080750
źródło