Come aggiungere la prima e l'ultima classe agli elementi del menu di navigazione di WordPress

Recentemente durante il lavoro su un progetto di design personalizzato, abbiamo riscontrato l'esigenza di aggiungere alcuni stili personalizzati alle voci del nostro menu di navigazione WordPress. Questo disegno in particolare richiedeva stili diversi per la prima voce di menu e l'ultima voce di menu. Ora potremmo facilmente andare nell'amministratore di WordPress e aggiungere una classe css personalizzata alla prima e ultima voce di menu. Ma poiché lo stiamo consegnando a un cliente, è molto probabile che possano modificare l'ordine dei menu in futuro. Utilizzare il modo di aggiungere le classi del pannello di amministrazione non era il metodo più efficiente. Quindi abbiamo deciso di farlo usando i filtri. In questo articolo, ti mostreremo come personalizzare in modo diverso il primo e l'ultimo menu di WordPress aggiungendo una classe .first e .last CSS.

Tutto quello che devi fare è aprire il tema functions.php file. Quindi incollare il seguente codice:

 function wpb_first_and_last_menu_class ($ items) $ items [1] -> classes [] = 'first'; $ items [count ($ items)] -> classes [] = 'last'; restituire $ articoli;  add_filter ('wp_nav_menu_objects', 'wpb_first_and_last_menu_class'); 

Un altro modo per modellare diversamente la prima e l'ultima voce di menu consiste nell'utilizzare selettori CSS che funzionano nella maggior parte dei browser moderni.

 ul # yourmenuid> li: first-child  ul # yourmenuid> li: last-child  

Nota: se si hanno molti utenti su browser più vecchi (Internet Explorer), probabilmente si vuole evitare la seguente tecnica.

Speriamo che questo articolo ti abbia aiutato. Abbiamo creato un cheat sheet sulle classi CSS predefinite generate da WordPress, che possono tornare utili anche nello styling di voci di menu.