Hai mai notato siti web con elementi del menu stilizzati in modo univoco per il primo e l'ultimo? Non è un caso: è un'astuta tecnica CSS. Questa tecnica può evidenziare link importanti, come la tua pagina dei contatti o un'offerta speciale.
Molti dei nostri lettori hanno provato ad aggiungere classi personalizzate ai loro elementi del menu, solo per scoprire che quando riorganizzano il menu, lo stile si rompe. Gli elementi contrassegnati come 'primo' e 'ultimo' non sono più in quelle posizioni, lasciando il menu con un aspetto incoerente.
Ecco perché questa guida ti mostrerà come aggiungere una classe .first e .last che rimarrà associata ai tuoi elementi del menu, anche se li riorganizzi in seguito. Copriremo due metodi: un filtro per i temi classici e selettori CSS per tutti i temi, inclusi i temi a blocchi.
Perché stilizzare diversamente il primo e l'ultimo elemento di navigazione?
A volte, potresti dover aggiungere uno stile personalizzato al primo e all'ultimo elemento di un menu di navigazione. Questo può far risaltare link importanti, come il link al modulo di contatto del tuo sito o alla pagina carrello WooCommerce.
In questo caso, potresti semplicemente aggiungere una classe CSS personalizzata al primo e all'ultimo elemento del menu. Tuttavia, se cambi l'ordine del menu in qualsiasi momento, questo potrebbe rompere completamente lo stile personalizzato.
Per questo motivo, consigliamo di utilizzare invece i filtri.
In questa guida, ti mostreremo come stilizzare il primo e l'ultimo elemento del tuo menu di navigazione, in modo da poter riorganizzare il menu senza compromettere lo stile personalizzato. Utilizza semplicemente i collegamenti rapidi qui sotto per passare direttamente al metodo che desideri utilizzare:
- Metodo 1: Aggiungere classi First e Last utilizzando un filtro (consigliato)
- Metodo 2: Stilizzare i primi e gli ultimi elementi utilizzando selettori CSS (funziona con tutti i temi)
Suggerimento Pro: Vuoi evidenziare un elemento del menu sul tuo sito web? Dai un'occhiata alla nostra guida su come evidenziare un elemento del menu in WordPress per maggiori informazioni.
Metodo 1: Aggiungere classi First e Last utilizzando un filtro (consigliato)
Nota: Questo metodo funziona solo con un tema WordPress classico. Se stai utilizzando un tema a blocchi, vai al Metodo 2.
Il modo più semplice per stilizzare gli elementi del tuo menu di navigazione è aggiungere un filtro al tuo tema.
Spesso troverai snippet di codice nei tutorial di WordPress con istruzioni per aggiungerli al file functions.php del tuo tema.
Il problema più grande è che anche un piccolo errore nello snippet di codice personalizzato può compromettere il tuo sito WordPress e renderlo inaccessibile. Senza contare che, se aggiorni il tuo tema WordPress, perderai tutte le tue personalizzazioni.
È qui che entra in gioco WPCode .
Questo plugin gratuito rende facile aggiungere CSS, PHP, HTML personalizzati e altro a WordPress senza mettere a rischio il tuo sito.
La prima cosa da fare è installare e attivare il plugin gratuito WPCode. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.
Dopo l'attivazione, vai su Snippet di codice » Aggiungi snippet.
Qui, passa semplicemente il mouse sopra ‘Aggiungi il tuo codice personalizzato’.
Quando appare, fai clic su ‘Usa snippet’.
Per iniziare, digita un titolo per lo snippet di codice personalizzato. Può essere qualsiasi cosa che ti aiuti a identificare lo snippet nella dashboard di WordPress.
Successivamente, apri il menu a discesa 'Tipo di codice' e seleziona 'Snippet PHP'.
Puoi quindi aggiungere il seguente PHP nella casella del codice:
function wpb_first_and_last_menu_class($items) {
$items[1]->classes[] = 'first';
$items[count($items)]->classes[] = 'last';
return $items;
}
add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');
Dopodiché, sei pronto per scorrere fino in cima allo schermo e fare clic sull’interruttore ‘Inattivo’ in modo che cambi in ‘Attivo’.
Infine, fai clic su 'Salva snippet' per rendere attivo lo snippet PHP.
Questo crea le classi CSS .first e .last per le tue voci di menu, la prima e l’ultima. Ora puoi usare queste classi per applicare uno stile unico a queste voci sul tuo menu di navigazione personalizzato.
Per fare ciò, dovrai aggiungere un secondo snippet al tuo sito WordPress. Per iniziare, crea un nuovo snippet di codice personalizzato seguendo lo stesso processo descritto sopra.
Dopodiché, digita un titolo per lo snippet di codice personalizzato.
Quindi, apri il menu a discesa ‘Tipo di codice’, ma questa volta seleziona ‘Snippet CSS’.
Per questa guida, metteremo semplicemente in grassetto la prima e l'ultima voce del menu aggiungendo la seguente formattazione CSS alla casella di codice:
.first a {font-weight: bold;}
.last a {font-weight: bold;}
Fatto ciò, fai clic sull'interruttore ‘Inattivo’ in modo che cambi in ‘Attivo’.
Infine, fai clic su ‘Salva snippet’ per rendere attivo lo snippet CSS.
Ora, se visiti il tuo sito web, vedrai il menu appena stilizzato attivo.
Metodo 2: Stilizzare i primi e gli ultimi elementi utilizzando selettori CSS (funziona con tutti i temi)
Se non vuoi utilizzare un plugin per snippet di codice, puoi stilizzare la prima e l'ultima voce del menu utilizzando i selettori CSS. Tuttavia, questo metodo potrebbe non funzionare con alcuni browser più vecchi, come Internet Explorer.
Tenendo presente ciò, è una buona idea testare il tuo sito WordPress su diversi browser.
Per seguire questo metodo, dovrai aggiungere codice al foglio di stile del tuo tema o alla sezione ‘CSS aggiuntivo’ del Personalizzatore del tema di WordPress.
Se non l'hai mai fatto prima, consulta la nostra guida su come aggiungere facilmente CSS personalizzato al tuo sito WordPress.
Il primo passo è modificare il file style.css del tuo tema o andare su Aspetto » Personalizza e quindi fare clic su ‘CSS aggiuntivo’.
Dopodiché, procedi e aggiungi il seguente snippet di codice al tuo sito:
ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }
Nota che dovrai sostituire ‘yourmenuid’ con l’ID del tuo menu di navigazione.
I selettori ‘first-child’ e ‘last-child’ selezionano il primo e l’ultimo figlio del suo genitore, che sono il primo e l’ultimo elemento nel menu di navigazione.
Ad esempio, abbiamo utilizzato questo codice per mettere in grassetto il primo e l’ultimo elemento del menu di navigazione sul nostro blog WordPress:
ul#primary-menu-list > li:first-child a {
font-weight: bold;
}
ul#primary-menu-list > li:last-child a {
font-weight: bold;
}
Se utilizzi un tema a blocchi di WordPress, il Personalizzatore del tema sarà assente nella tua amministrazione di WordPress. Devi inserire questo URL nel tuo browser per accedere al Personalizzatore del tema:
https://yourdomainname.com/wp-admin/customize.php
Assicurati di sostituire il dominio con il nome del dominio del tuo sito web.
Dopodiché, apri la scheda ‘CSS aggiuntivo’ come prima e inserisci il seguente codice. Nota come il codice appare leggermente diverso poiché non è necessario aggiungere l’ID del tuo menu.
li:first-child a,
li:last-child a {
background-color: black;
border: none;
color: white !important; /* Ensures the color white is prioritized */
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 12px;
}
Sentiti libero di personalizzare il codice secondo le tue esigenze. Nell’esempio seguente, abbiamo trasformato i primi e gli ultimi link in pulsanti.
Ecco come appare:
Speriamo che questo tutorial ti abbia aiutato a imparare come aggiungere le classi .first e .last ai menu di navigazione di WordPress. Potresti anche voler consultare il nostro articolo su come creare un menu di navigazione verticale in WordPress e la nostra guida per principianti su creare un menu a discesa su un sito WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Ahmed Mahdi
ho modificato leggermente il codice per farlo funzionare anche con i sottomenu:
function wpb_first_and_last_menu_class($items) {
foreach($items as $k => $v) { $parent[$v->menu_item_parent][] = $v; }
foreach($parent as $k => $v) { $v[0]->classes[] = ‘first’; $v[count($v)-1]->classes[] = ‘last’; }
return $items;
}
add_filter(‘wp_nav_menu_objects’, ‘wpb_first_and_last_menu_class’);
Trevor Simonton
esattamente quello di cui avevo bisogno. grazie!
Georgios Panagiotakopoulos
Grazie! Funziona benissimo!
Munkhbayar
Grazie per il codice. Funziona per me.
mad_doc
Grazie per l'idea e l'aiuto!
Charles
Grazie per questo bel codice...
Che dire del menu per bambini, primo e ultimo elemento?
Si applica solo al menu padre.
Hai qualche idea per l'ultimo elemento del sottomenu?
jordi
Anyone have any tip about use add_filter(”); for wp_nav_menu using STARKERS?
JS and CSS are fine to do that, it is just frustrating to don’t be able to fix it from the back…
can’t make it works
thanks to share anyway!!
Jake
Questo non funziona in modo affidabile se hai menu nidificati.
Staff editoriale
Hmm, darò un'occhiata per una soluzione.
Amministratore
Olivier
Funziona quando la voce di menu è l'ultima, o l'ultimo figlio di una voce di menu finale.
Non funziona quando la voce di menu è un ultimo figlio di una voce di menu che non è l'ultima.
Olivier
Insieme ad altre aggiunte a functions.php che ho provato, questo codice non riesce a contrassegnare un elemento del menu come primo o ultimo elemento del menu quando si trovano in un sottomenu. Una soluzione sarebbe fantastica!
Elliott Richmond
Bello! Di solito userei CSS, ma questo è un buon suggerimento
Mattia
Ottimo! Questo è particolarmente interessante perché devo classificare più di 2 voci di menu...
Ora ho capito!
Grazie
karen
Grazie per questo! Perdonami se l'ho perso, ma c'è un esempio del menu per vedere la differenza nella navigazione creata da questa classe? Grazie ancora!
Staff editoriale
Il sito che abbiamo progettato per il nostro cliente non è ancora online. Ma il motivo principale era che volevamo avere un bordo a sinistra del primo elemento del menu. Tutti gli altri elementi avevano un bordo a destra con un padding e un margine specifici. Abbiamo utilizzato l'ultima classe per rimuovere il margine destro e il bordo destro perché non ce n'era bisogno. Stava colpendo il contenitore wrap. Spero tu riesca a visualizzarlo.
Amministratore
Ivo Minchev
Ho provato questo sul sito http://aurorachalet-switzerland.com/ e non vedo l'effetto. Sto usando il tema "Twenty Eleven" per questo sito. Dov'è il problema?
Ivo Minchev
Probabilmente a causa del tag #yourmenuid. Ho provato alcuni ID ma nessuno ha funzionato.
Staff editoriale
Questo dovrebbe funzionare finché specifichi i tag ID corretti.
Amministratore
Staff editoriale
Non credo che tu stia usando wp_nav_menu. A giudicare dall'aspetto, sembra che il tuo sito stia usando il menu di fallback elencando tutte le pagine. Puoi confermare di essere andato su Aspetto > Menu e di aver creato un menu lì. Quindi hai specificato quel menu come posizione primaria??
Amministratore