it-swarm.dev

wp_nav_menu (), come cambiare <li> classe?

Sto costruendo un menu per il mio sito web. La statica ha questo aspetto:

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

Sono stato in grado di capire come personalizzare il tag <ul>, per eliminare il tag <div> automatico. Ma ora, voglio personalizzare il tag <li> per poter assegnare un nome class diverso per controllare un comportamento specifico tramite 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/">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>

Voglio eliminare il id nei tag <li> e modificare class per riflettere il nome della pagina a cui voglio collegarmi. Fondamentalmente voglio mostrare la stessa cosa del primo frammento di codice in questo post.

Il motivo per cui lo faccio, è che io uso immagini personalizzate che sono controllate dal mio CSS insted di testo normale.

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

15
Christian

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

Puoi anche filtrare 'nav_menu_css_class' o 'wp_nav_menu_items'. Ma una classe di walker è più facile da capire e da controllare secondo me.

12
fuxia

vai all'aspetto> menu - seleziona il menu che vuoi - vai a "Opzioni schermo" in alto a destra, seleziona "classi css" - aggiungi una classe a ciascuna voce di menu.

10
Q Studio

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

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

Ho persino usato questo per aggiungere immagini pre-nominate nel menu - un po 'flakey, ma funziona.

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

Impostare la classe <li> su nav-link, dato che bootstrap 4.3 ne ha bisogno:

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 annullare l'attributo id in quell'array.

0
cweiske