wp_nav_menu(), come modificare la classe <li>?

Question

wp_nav_menu(), come modificare la classe <li>?

26 dic 2011, 22:02:46

Visualizzazioni: 91.1K

Voti: 20

Sto costruendo un menu per il mio sito web. La versione statica appare così:

<nav>
  <ul id="menu">
        <li class="item_1"><a href="#">Elemento 1</a></li>
        <li class="item_2"><a href="#">Elemento 2</a></li>
        <li class="item_3"><a href="#">Elemento 3</a></li>
        <li class="item_4"><a href="#">Elemento 4</a></li>
        <li class="item_5"><a href="#">Elemento 5</a></li>
        <li class="item_6"><a href="#">Elemento 6</a></li>
        <li class="item_7"><a href="#">Elemento 7</a></li>
        <li class="item_8"><a href="#">Elemento 8</a></li>
    </ul>

Sono riuscito a capire come personalizzare il tag <ul>, per eliminare il tag <div> automatico. Ma ora, voglio personalizzare il tag <li> per poter assegnare nomi di class diversi per controllare comportamenti specifici attraverso CSS. Quando uso wp_nav_menu() l'output è il seguente:

    <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/">Moda</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/">Documentario</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/">Eventi</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/">Ritratti</a></li>
    </ul>

Voglio eliminare l'id nei tag <li> e modificare la class per riflettere il nome della pagina a cui voglio collegare. In pratica, voglio ottenere lo stesso output del primo snippet di codice in questo post.

Il motivo per cui lo faccio è che uso immagini personalizzate che vengono controllate dal mio CSS invece del semplice testo.

È possibile? Quale strategia dovrei utilizzare per superare questo problema?

Christian

205

sviluppo temi menu navigazione

Commenti

Qui puoi aggiungere diverse classi in ul > li >a https://sdtuts.com/wordpress-add-custom-class-in-wp_nav_menu-links/

Rameez SOOMRO

9 giu 2018 09:38:49

Tutte le risposte alla domanda

Commenti

Grazie Toscho, ho appena scoperto che nella nuova versione di WordPress (3.3) possiamo aggiungere classi personalizzate per ogni voce di menu, il che risolve più o meno il mio problema. Ho provato lo script che mi hai suggerito (T5_Nav_Menu_Walker_Simple) che rimuove tutto dal <li>, come possiamo controllare quali elementi vogliamo mantenere?

Christian

26 dic 2011 23:20:50

@Christian Puoi modificare il walker come preferisci, è solo un esempio molto basilare. Per vedere quali informazioni sono disponibili, aggiungi un print_r( $item, TRUE ) ad ogni li. Poi decidi cosa farne. :)

fuxia

27 dic 2011 00:44:34

Questo mi ha indirizzato nella giusta direzione, quello che mi serviva era wp_nav_menu, ma dovevo modificare il parametro 'container_class' per adattarlo al mio caso d'uso specifico, dove in alcune condizioni sostituivo il menu principale con un altro, ma avevo bisogno che le classi rimanessero consistenti per il css.

D. Dan

25 gen 2018 17:16:34

vai su aspetto > menu - seleziona il menu desiderato - vai su "opzioni schermo" in alto a destra, seleziona "classi css" - aggiungi una classe a ciascuna voce del menu..

Q Studio

2.53K

22 set 2012 13:49:25

Impostare la classe <li> come nav-link, come richiesto da 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);

Puoi anche rimuovere l'attributo id da quell'array.

cweiske

178

22 apr 2019 21:30:37

Questo è un modo molto semplice per chiamare la classe li e sostituire facilmente "qualsiasi classe". Basta seguire le istruzioni.

Usa questo codice nell'area di navigazione.

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

Quindi ispeziona il tuo codice nel browser. Trova la classe predefinita di WordPress e poi sostituisci str_replace(**"classe_predefinita_qui"**,**"nuova_classe_li_qui"**,$consult_menu); | Nota: $consult_menu qui è il nome del mio tema, puoi usare qualsiasi nome qui.

Muhammad Mohibbullah

21

21 feb 2022 19:20:37

Come ha menzionato l'ultimo utente, puoi aggiungere le tue classi personalizzate tramite aspetto > menu con l'opzione delle classi CSS selezionata nelle opzioni dello schermo. Nel walker, puoi accedere a ciò che inserisci lì tramite:

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

Ho persino utilizzato questo metodo per aggiungere immagini con nome predefinito nel menu - un po' instabile, ma funziona.

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

RPB1001

1

13 giu 2013 08:36:59

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

Utilizza un walker personalizzato, rimuovi tutto ciò che non ti serve e aggiungi le tue classi. Ecco un walker che uso per ottenere una lista con un markup pulito: T5_Nav_Menu_Walker_Simple.

Potresti anche filtrare 'nav_menu_css_class' o 'wp_nav_menu_items'. Ma una classe walker è più semplice da comprendere e da controllare secondo me.

fuxia

107K

26 dic 2011 22:48:28