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

16

Sto creando un menu per il mio sito Web. L'elettricità statica si presenta così:

<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 <ul>tag, per sbarazzarsi del <div>tag automatico . Ma ora, voglio personalizzare il <li>tag per poter assegnare un classnome diverso per controllare il comportamento specifico tramite CSS. Quando uso l' wp_nav_menu()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 sbarazzarmi del idnei <li>tag e cambiare il classper riflettere il nome della pagina a cui voglio collegarmi. Fondamentalmente voglio produrre la stessa cosa del primo frammento di codice in questo post.

Il motivo per cui sto facendo questo, è che uso immagini personalizzate che sono controllate dal mio CSS istinto di testo normale.

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

theme-development menus navigation

— cristiano
fonte

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

— Rameez SOOMRO

14

Usa un walker personalizzato , rimuovi tutto ciò che non ti serve e aggiungi le tue lezioni. Ecco un walker che utilizzo per ottenere un elenco con markup pulito: T5_Nav_Menu_Walker_Simple .

Puoi anche filtrare 'nav_menu_css_class'o 'wp_nav_menu_items'. Secondo me, una classe di camminatori è più facile da capire e controllare.

— fuxia
fonte

Grazie Toscho, ho appena scoperto che nella nuova versione di Wordpress (3.3) possiamo aggiungere classi personalizzate ad ogni voce di menu che risolve il mio problema. Ho provato lo script che mi hai suggerito (T5_Nav_Menu_Walker_Simple) che toglie tutto da <li>come, come possiamo controllare quali elementi vogliamo mantenere?

— Christian, il

1

@Christian Puoi cambiare il walker di cui hai bisogno, è solo un esempio molto semplice. Per vedere quali informazioni sono disponibili, aggiungi a print_r( $item, TRUE )a ciascuna li. Quindi decidere cosa farne. :)

— fuxia

Questo mi ha indicato nella giusta direzione, quello di cui avevo bisogno era il wp_nav_menu , ma avevo bisogno di cambiare il parametro 'container_class', per lavorare per il mio caso d'uso particolare, dove in una condizione ho scambiato il menu principale con un altro, ma avevo bisogno del classi per essere coerenti per CSS.

— D. Dan

10

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 di menu.

— Q Studio
fonte

1

Impostando la <li>classe su nav-link, come 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' idattributo in quell'array.

— cweiske
fonte

0

Come indicato nell'ultimo poster, puoi aggiungere le tue classi tramite l' 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 anche 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">

— user2080750
fonte