WordPress: aggiungere una classe per ogni singola voce del menu

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.