Un visitatore arriva sul tuo sito, apre la pagina «Servizi» e non capisce a colpo d’occhio dove si trova. Le voci del menu sembrano tutte uguali. Non c’è uno stato attivo. Non è un bug di WordPress; di default un tema non è obbligato a evidenziare la voce corrente. Ma poche righe di CSS risolvono il problema in meno di un minuto.

WordPress assegna automaticamente un insieme di classi CSS a ogni voce di menu dalla versione 3.0. Tre di queste indicano «l’utente si trova in questa pagina o all’interno di questa sezione». Devi solo scrivere gli stili e la navigazione diventa chiara senza un solo clic.

💡 Panoramica rapida:

• Apri l’inspector del browser e trova il selettore CSS del menu del tuo sito
• Aggiungi 3-5 righe di CSS nel Personalizza tema o in style.css puntando alle classi .current-menu-item, .current-page-ancestor e .current-post-ancestor
• Se il sito ha più menu, affina il selettore in modo che l’evidenziazione si applichi solo a quello principale
• Nei temi a blocchi (FSE) l’approccio è lo stesso, ma il CSS si aggiunge tramite l’editor del sito

Quali classi WordPress aggiunge alle voci di menu

Quando WordPress genera un menu tramite wp_nav_menu(), ogni elemento <li> riceve diverse classi. Ecco le tre che controllano lo stato «attivo»:

.current-menu-item viene assegnata alla voce il cui link punta alla pagina corrente. Apri «Contatti» e la voce di menu «Contatti» riceve questa classe. La più diretta e usata.

.current-page-ancestor scatta quando l’utente si trova su una pagina figlia mentre la voce di menu punta al genitore. Per esempio, il menu contiene «Portfolio» e il visitatore sta leggendo un case study all’interno di quella sezione. La voce genitore «Portfolio» riceve la classe ancestor, così puoi evidenziare anche quella e mostrare in quale sezione del sito si trova l’utente.

.current-post-ancestor è lo stesso concetto, ma per articoli e categorie. Se una voce di menu linka alla categoria «News» e il lettore apre un articolo specifico di quella categoria, la voce «News» riceverà questa classe.

WordPress assegna tutte e tre le classi in automatico. Non devi scrivere condizioni PHP né modificare template a mano, a differenza dell’era WP 2.9 e precedenti, quando ogni link andava avvolto in un controllo if sull’URL corrente. Oggi ti basta aprire l’inspector e vedere quale classe è già agganciata alla voce interessata.

Passo 1: Trova il selettore del menu

Apri il tuo sito, premi F12 (strumenti per sviluppatori) e individua l’elemento <ul> o <nav> che contiene le voci di menu. Di solito ha questo aspetto:

1
<ul id="primary-menu" class="menu">
2
  <li class="menu-item ... current-menu-item">
3
    <a href="/about">О нас</a>
4
  </li>
5
</ul>

Prendi nota dell’identificatore (#primary-menu) o della classe (.main-navigation) del tuo menu. Questo è il selettore che useremo nel passo successivo per limitare la portata del CSS.

Nei temi classici, i menu vengono generati il più delle volte tramite wp_nav_menu() con un argomento theme_location come 'primary'. Le classi CSS sono assegnate dalla funzione nav_menu_css_class e un filtro con lo stesso nome permette agli sviluppatori di aggiungere o rimuovere classi via codice. Ma per l’evidenziazione di base non serve codice, solo CSS.

Passo 2: Aggiungi il CSS di evidenziazione

L’approccio più semplice e sicuro è inserire gli stili tramite il Personalizza tema integrato. Nell’amministrazione di WordPress, vai su Aspetto → Personalizza → CSS aggiuntivo.

Copia e incolla:

1
.current-menu-item > a {
2
  color: #ffffff;
3
  background: #2271b1;
4
  border-radius: 4px;
5
  padding: 6px 14px;
6
}

Cosa fa questo codice: quando una voce di menu riceve la classe .current-menu-item, il suo link cambia il colore del testo in bianco e lo sfondo in blu, con un leggero arrotondamento. Il risultato è visibile subito nell’anteprima del Personalizza tema, prima di salvare.

Per un controllo più fine puoi evidenziare anche gli ancestor:

1
.current-menu-item > a,
2
.current-page-ancestor > a,
3
.current-post-ancestor > a {
4
  border-bottom: 3px solid #2271b1;
5
  color: #2271b1;
6
}

Qui, invece di un riempimento, c’è una sottolineatura con una barra blu. Questa opzione è più pulita nei temi minimalisti.

Passo 3: Limita la portata

Se il tuo sito ha più menu (principale nell’header, secondario nel footer, un menu widget nella sidebar), il CSS del passo precedente evidenzierà la voce attiva ovunque. Raramente è desiderabile.

Anteponi al selettore di classe l’ID o la classe del menu specifico che hai trovato al passo 1:

1
#primary-menu .current-menu-item > a {
2
  background: #2271b1;
3
  color: #ffffff;
4
}

Ora l’evidenziazione scatterà solo dentro l’elemento con id="primary-menu". Gli altri menu del sito restano invariati.

Se il tuo tema usa una classe invece di un ID, scrivi .main-navigation .current-menu-item > a. Il principio è lo stesso.

E per i temi a blocchi (FSE)

Nei temi basati su blocchi (Twenty Twenty-Four, Twenty Twenty-Five e simili) non c’è il Personalizza tema classico con il campo CSS aggiuntivo. I menu sono costruiti tramite il blocco Navigazione.

Il CSS si aggiunge dall’editor del sito: Aspetto → Editor → Stili → tre puntini (menu) → CSS aggiuntivo. Il codice è esattamente lo stesso; WordPress continua ad assegnare la classe .current-menu-item e le altre anche nei temi a blocchi.

La differenza sta nel selettore. Nell’FSE il contenitore del menu è un <nav> con una classe come .wp-block-navigation. Verifica il selettore con l’inspector e anteponilo alle classi di voce attiva:

1
.wp-block-navigation .current-menu-item > a {
2
  border-bottom: 2px solid #2271b1;
3
}

Se il tuo sito gira su un tema moderno e il menu non si evidenzia «out of the box», controlla se il tema stesso sovrascrive gli stati dei link tramite :hover e :focus senza stili per .current-menu-item. La soluzione è aggiungere un selettore di pari specificità.

La personalizzazione più avanzata dei menu (dai mega menu alla navigazione mobile) è trattata in un articolo a parte. Include anche una carrellata di plugin per i casi in cui il CSS non basta più: dai builder gratuiti alle soluzioni professionali con griglie e icone.

⁉️🤔 Domande frequenti

Perché il menu non si evidenzia dopo aver aggiunto il CSS?

La causa più comune è che il selettore non corrisponde alla struttura HTML reale. Apri l’inspector (F12), clicca sulla voce di menu attiva e controlla: l’elemento <li> ha la classe .current-menu-item? Se la classe manca, WordPress non considera quella pagina «corrente» per quella voce. Può succedere con custom post type o plugin che sovrascrivono la logica del menu. Soluzione: registra il tipo personalizzato con 'show_in_nav_menus' => true oppure aggiungi il supporto tramite il filtro nav_menu_css_class.

Posso evidenziare una voce di menu con un colore diverso per ogni pagina?

Sì. WordPress aggiunge una classe univoca come .menu-item-{ID} a ogni voce, per esempio .menu-item-42. Usa l’inspector per trovare l’ID della voce interessata e scrivi: .menu-item-42 > a { background: #d63638; }. Questo ti permette di codificare i colori del menu in base alle sezioni del sito.

Come evidenzio una voce di menu se è un link esterno o un’ancora?

Un link esterno non riceverà .current-menu-item perché punta a un altro sito e WordPress non può identificarlo come «corrente». Per le ancore all’interno della stessa pagina la classe non scatta ugualmente. In questi casi aggiungi manualmente una classe CSS personalizzata alla voce: Aspetto → Menu → Impostazioni schermo → spunta Classi CSS, poi inserisci la tua classe nelle impostazioni della voce e assegna lo stile.

È sicuro aggiungere CSS tramite CSS aggiuntivo nel Personalizza tema?

Sì. Gli stili inseriti in questo campo sono salvati nel database e non vanno persi quando il tema si aggiorna, a differenza delle modifiche a style.css in un child theme che possono essere sovrascritte per errore. Il campo è disponibile da WordPress 4.7 ed è supportato praticamente da tutti i temi classici.

Vale la pena: riassunto in tre righe

Evidenziare la voce di menu attiva non è un capriccio da designer; è una base minima di navigazione. Senza, i visitatori impiegano secondi extra per orientarsi. Con l’evidenziazione, la struttura del sito è chiara a colpo d’occhio.

Il compito è gestito interamente da tre classi: .current-menu-item, .current-page-ancestor e .current-post-ancestor. Sta in cinque righe di codice. L’implementazione richiede tre minuti tramite il Personalizza tema.

Se ti serve di più (comportamenti non standard del menu, evidenziazione condizionale per ruolo utente o indicatori personalizzati) consulta la carrellata di oltre 15 plugin per menu. Per l’evidenziazione di base, il CSS basta.