Fw

Wordpress Creative Developer

Guida WordPress – Aggiungere Classi Personalizzate agli Elementi del Menu

  • Guide Wordpress
  • -

Secondo appuntamento con le guide WordPress, dove oggi andiamo a vedere come assegnare delle classi personalizzate agli elementi del menu.

Guida WordPress - Aggiungere Classi Personalizzate agli Elementi del Menu

Un modo per migliorare la user experience dell’utente è quello di rendere attiva la voce di menu rispetto alla sezione del sito in cui ci si trova.

Il menu di WordPress già funziona in tal senso, associando una classe per la voce di menu attiva, alla quale poi noi dovremo associare lo stile.

Il problema

Mettiamo però il caso che nel sito le diverse sezioni sono distinte in base al colore, e quindi ogni voce di menu attiva dovrà avere ad esempio un colore di sfondo diverso. Ne puoi vedere un esempio nel sito Spazio Atelier, dove ho curato lo sviluppo.

La soluzione

In questo caso quindi dovremo fare in modo che venga associata una classe specifica ad ogni elemento del menu attivo.

Dovremo quindi inserire questa funzione nel file function.php, all’interno del tema che si sta utilizzando.

add_filter('nav_menu_css_class' , 'active_class' , 10 , 2);
function active_class($classes, $item) {
     if ( (is_single('92') && $item->title == "Consulenza genitoriale") || (in_category('6') && $item->title == "Consulenza genitoriale" )) { //Notice you can change the conditional from is_single() and $item->title
             $classes[] = "gen-attivo";
     }
	 
	 if ( (is_single('97') && $item->title == "Mediazione") || (in_category('8') && $item->title == "Mediazione familiare" )) { //Notice you can change the conditional from is_single() and $item->titl
             $classes[] = "fam-attivo";
     }
     return $classes;
}

In base alla voce di menu e in base alla pagina in cui ci si trova viene assegnata o meno una determinata classe.

Ad esempio nella prima condizione viene controllato se ci si trova nell’articolo singolo con id 92 (is_single(’92’)) e se la voce di menu è uguale a “Consulenza genitoriale” ($item->title == “Consulenza genitoriale”), oppure se ci si trova nella categoria con id 6 (in_category(‘6’)).

Se una di queste 2 condizioni è verificata allora viene associata la classe “gen-attivo” alla voce di menu.

Il numero di condizioni (if) dipende da quante voci di menu hai nel sito.

Conoscevi questa tecnica per personalizzare il menu di WordPress?

1 commento

  1. Grazie… e’ un periodo in cui sto studiando i menu di wordpress e su come personalizzarli al meglio. Il tuo articolo e’ molto interessante ed esaustico come tutti gli altri. Complimenti

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *