Vuoi evidenziare la pagina corrente nella navigazione o nel menu della barra laterale? Evidenziare la pagina corrente rende la navigazione più semplice.
Le funzioni dei menu di WordPress (wp_nav_menu, wp_list_pages) aggiungono automaticamente la classe current_page_item a li contenente il link attivo. Quindi tutto ciò che dobbiamo fare è usare la stessa classe per evidenziare la pagina corrente.
Istruzioni:
Tutto quello che devi fare è aggiungere questo codice al file style.css del tuo tema:
/* Highlight using list element */
li.current_page_item{
background:#999;
color:#fff;
}
/* Highlight using link element */
li.current_page_item a{
text-decoration:underline;
background:#666;
}
Nota: Se questa è la prima volta che aggiungi snippet di codice in WordPress, consulta la nostra guida su come copiare / incollare correttamente snippet di codice in WordPress, in modo da non rompere accidentalmente il tuo sito.
Se ti è piaciuto questo snippet di codice, prendi in considerazione la lettura dei nostri altri articoli sul sito come: I migliori page builder di WordPress (confrontati).
dove trovo il "file style.css del tema" nella versione gratuita di wordpress?
Grazie. Ho cercato in alcuni posti, ma la tua soluzione ha funzionato. Lo apprezzo molto!
Ciao Robert, siamo felici che la nostra soluzione abbia funzionato per te.
Seguici su Facebook e Twitter per altre guide interessanti. :)
Funziona bene grazie!
Questo codice funziona se il menu ha un solo livello. Altrimenti evidenzia il link di primo livello e tutte le sottocategorie al suo interno. Ad esempio, saresti su "home>about>news" e evidenzierebbe tutte le categorie "home" invece di solo "news".
Il mio tema aggiunge la classe CSS `.current-menu-item`.
Potrebbe essere diverso a seconda del tema, ma il processo è sempre lo stesso.
funziona a meraviglia, e mi ha fatto risparmiare tempo prezioso. Grazie
Grazie mille!!!!
salve signore, va bene ma voglio cambiare il colore del link non il colore di sfondo, per favore aiutami
Il colore sarebbe controllato dalla propriet
color, come ad esempio:li.current_page_item a{ color:#666; }
penso che dovresti solo aggiungere questo al tuo CSS e non alla pagina functions.php. Ha funzionato bene nel mio CSS.
Grazie
Grazie, lo snippet stato aggiornato.