WordPress: aggiungere una classe per ogni singola voce del menu

Aggiornato il

Questo articolo rappresenta una rivisitazione di questo tutorial su WP Beginner.

Si possono aggiungere singole classi alle voci del menu attraverso il pannello di controllo, ma una soluzione più comoda è probabilmente quella di sfruttare i filtri.
Ipotizzando di avere un sito con 6 voci sole nel menu principale, aprire il file functions.php e aggiungere il seguente codice:


function aggiungi_classi($items) {
    $items[1]->classes[] = 'menu_1';
    $items[2]->classes[] = 'menu_2';
    $items[3]->classes[] = 'menu_3';
    $items[4]->classes[] = 'menu_4';
    $items[5]->classes[] = 'menu_5';
    $items[count($items)]->classes[] = 'menu_6';
    return $items;
}
add_filter('wp_nav_menu_objects', 'aggiungi_classi');

Attraverso poche regole CSS, si può dare uno stile alle classi del menu appena create:


.menu_1 {/*...*/}
.menu_2 {/*...*/}
.menu_3 {/*...*/}
.menu_4 {/*...*/}
.menu_5 {/*...*/}
.menu_6 {/*...*/}

Per stilizzare solo la prima e l’ultima voce del menu, si potevano anche utilizzare gli pseudo-elementi CSS:


ul#ID-del-menu li:first-child {/*...*/}
ul#ID-del-menu li:last-child {/*...*/}

Quest’ultima soluzione, tuttavia, non funziona con Internet Explorer 7 e inferiori.

di Mattia Frigeri

COMMENTI

    • Se ho capito bene la sua domanda, la soluzione è dare una classe a quella voce, e sfruttarla nel CSS per ottenere (intercettando il link, e quindi il tag <a>) il risultato di cui ha bisogno.
      Tra l’altro, adesso può anche sfruttare il pannello “Menu” (Aspetto > Menu) per dare direttamente alla voce di menu una classe unica, senza ricorrere quindi allo script qui sopra.

  • Buongiorno, ottime indicazioni.
    Ho una domanda: dalla seconda voce del mio menu parte un submenu.
    Queste sottovoci influsicono? Come posso baipassarle facendo in modo che non influsicano sull’ordine del menù principale?
    Grazie

    Mi correggo: dal menu si diramano dei sotto elementi.

    • Ciao Silvia, di solito si ragiona al contrario: si assegnano cioè le regole per le voci principali, e per le sottovoci si sovrascrivono. Per ogni submenu, WordPress assegna in automatico la classe submenu (all’elemento ul), in modo che sia facile poi sfruttarlo e fare le dovute sovrascritture nel CSS. Spero questo risolva il tuo problema, perché è il metodo più veloce in cui agire.