Sfaturi pentru personalizarea claselor li în wp_nav_menu() WordPress

Question

Sfaturi pentru personalizarea claselor li în wp_nav_menu() WordPress

26 dec. 2011, 22:02:46

Vizualizări: 91.1K

Voturi: 20

Construiesc un meniu pentru site-ul meu. Versiunea statică arată astfel:

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

Am reușit să înțeleg cum să personalizez tag-ul <ul>, pentru a scăpa de tag-ul automat <div>. Dar acum, vreau să personalizez tag-ul <li> pentru a putea atribui diferite nume de class pentru a controla comportamente specifice prin CSS. Când folosesc wp_nav_menu(), rezultatul arată astfel:

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

Vreau să scap de id din tag-urile <li> și să schimb class pentru a reflecta numele paginii pe care vreau să o leg. În esență, vreau să obțin același rezultat ca în primul fragment de cod din acest post.

Motivul pentru care fac asta este că folosesc imagini personalizate care sunt controlate prin CSS în loc de text simplu.

Este posibil? Ce strategie ar trebui să folosesc pentru a rezolva această problemă?

Christian

205

dezvoltare teme meniuri navigare

Comentarii

Aici puteți adăuga diferite clase în ul > li >a https://sdtuts.com/wordpress-add-custom-class-in-wp_nav_menu-links/

Rameez SOOMRO

9 iun. 2018 09:38:49

Toate răspunsurile la întrebare

Comentarii

Mulțumesc Toscho, tocmai am descoperit că în noua versiune de WordPress (3.3) putem adăuga clase personalizate pentru fiecare element de meniu, ceea ce rezolvă parțial problema mea. Am încercat scriptul pe care mi l-ai sugerat (T5_Nav_Menu_Walker_Simple) care elimină tot din <li>, cum putem controla ce elemente dorim să păstrăm?

Christian

26 dec. 2011 23:20:50

@Christian Poți modifica walker-ul după cum ai nevoie, este doar un exemplu foarte simplu. Pentru a vedea ce informații sunt disponibile, adaugă un print_r( $item, TRUE ) la fiecare li. Apoi decide ce să faci cu ele. :)

fuxia

27 dec. 2011 00:44:34

Acest lucru m-a îndreptat în direcția potrivită, aveam nevoie de wp_nav_menu, dar trebuia să modific parametrul 'container_class' pentru a funcționa în cazul meu particular, unde în anumite condiții înlocuiam meniul principal cu altul, dar aveam nevoie ca clasele să rămână consistente pentru CSS.

D. Dan

25 ian. 2018 17:16:34

accesați aspect > meniuri - selectați meniul dorit - mergeți la "opțiuni ecran" în dreapta sus, selectați "clase css" - adăugați o clasă pentru fiecare element de meniu..

Q Studio

2.53K

22 sept. 2012 13:49:25

Setarea clasei <li> la nav-link, deoarece Bootstrap 4.3 o necesită:

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

De asemenea, puteți elimina atributul id din acel array.

cweiske

178

22 apr. 2019 21:30:37

Acesta este un mod foarte simplu de a apela clasa li și de a înlocui ușor "orice clasă". Doar urmați instrucțiunile.

Folosiți acest cod în zona de navigare.

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

Apoi inspectați codul în browser. Găsiți clasa implicită wp și apoi înlocuiți str_replace(**"clasa_implicita_aici"**,**"noua_clasa_li_aici"**,$consult_menu); | Notă: $consult_menu aici este numele temei mele, puteți folosi orice nume aici.

Muhammad Mohibbullah

21

21 feb. 2022 19:20:37

După cum a menționat și ultimul utilizator, poți adăuga propriile clase CSS prin aspect > meniuri cu opțiunea de clase CSS bifată în opțiunile ecranului. În walker, poți accesa ceea ce introduci acolo folosind:

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

Am folosit chiar și această metodă pentru a adăuga imagini predefinite în meniu - puțin mai fragil, dar funcționează.

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

RPB1001

1

13 iun. 2013 08:36:59

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

Folosește un walker personalizat, elimină orice nu ai nevoie și adaugă clasele tale. Iată un walker pe care îl folosesc pentru a obține o listă cu markup curat: T5_Nav_Menu_Walker_Simple.

De asemenea, ai putea filtra 'nav_menu_css_class' sau 'wp_nav_menu_items'. Dar o clasă walker este mai ușor de înțeles și de controlat, în opinia mea.

fuxia

107K

26 dec. 2011 22:48:28