Volete aggiungere uno stile personalizzato alla prima e all’ultima voce del vostro menu WordPress?
Un’opzione è quella di aggiungere semplicemente una classe CSS personalizzata alla prima e all’ultima voce del menu. Tuttavia, se si riorganizza il menu in qualsiasi momento, queste voci potrebbero non essere più la prima e l’ultima.
In questo articolo vi mostreremo come aggiungere una classe .first e .last che stilizzerà le prime e le ultime voci anche se il menu viene riordinato in un secondo momento.
Perché scegliere uno stile diverso per il primo e l’ultimo elemento della navigazione?
A volte è necessario aggiungere uno stile personalizzato alle prime e alle ultime voci di un menu di navigazione. In questo modo è possibile far risaltare i collegamenti importanti, come il link al modulo di contatto o alla pagina del carrello di WooCommerce.
In questo caso, si potrebbe semplicemente aggiungere una classe CSS personalizzata alla prima e all’ultima voce del menu. Tuttavia, se si cambia l’ordine del menu in qualsiasi momento, si potrebbe interrompere completamente lo stile personalizzato.
Per questo motivo, si consiglia di utilizzare i filtri.
In questa guida, vi mostreremo come stilizzare la prima e l’ultima voce del vostro menu di navigazione, in modo da poter riorganizzare il menu senza interrompere lo stile personalizzato. È sufficiente utilizzare i collegamenti rapidi sottostanti per passare direttamente al metodo che si desidera utilizzare:
Metodo 1: Aggiungere la prima e l’ultima classe utilizzando un filtro (consigliato)
Nota: questo metodo funziona solo con un tema classico di WordPress. Se si utilizza un tema a blocchi, passare al metodo 2.
Il modo più semplice per creare uno stile per le voci del menu di navigazione è aggiungere un filtro al tema.
Spesso nei tutorial di WordPress si trovano dei frammenti di codice con le istruzioni per aggiungerli al file functions.php del tema.
Il problema più grande è che anche un piccolo errore nello snippet di codice personalizzato può rompere il vostro sito WordPress e renderlo inaccessibile. Inoltre, se aggiornate il vostro tema WordPress, perderete tutte le vostre personalizzazioni.
È qui che entra in gioco WPCode .
Questo plugin gratuito consente di aggiungere facilmente CSS, PHP, HTML e altro ancora a WordPress senza mettere a rischio il sito.
La prima cosa da fare è installare e attivare il plugin gratuito WPCode. Per maggiori dettagli, consultate la nostra guida passo-passo su come installare un plugin di WordPress.
Dopo l’attivazione, andare su Code Snippets ” Add Snippet.
Qui è sufficiente passare il mouse su “Aggiungi il tuo codice personalizzato”.
Quando appare, fare clic su “Usa snippet”.
Per iniziare, digitate un titolo per lo snippet di codice personalizzato. Può essere qualsiasi cosa che aiuti a identificare lo snippet nella dashboard di WordPress.
Quindi, aprire il menu a tendina “Tipo di codice” e selezionare “Snippet PHP”.
È quindi possibile aggiungere il seguente PHP alla casella di 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');
A questo punto, siete pronti a scorrere fino alla parte superiore dello schermo e a fare clic sulla levetta “Inattivo” in modo che diventi “Attivo”.
Infine, fare clic su “Salva snippet” per rendere attivo lo snippet PHP.
In questo modo si creano le classi CSS .first e .last per la prima e l’ultima voce del menu. È ora possibile utilizzare queste classi per applicare uno stile unico a queste voci.
Per farlo, è necessario aggiungere un secondo snippet al proprio sito web WordPress. Per iniziare, create un nuovo snippet di codice personalizzato seguendo la stessa procedura descritta sopra.
Successivamente, digitare un titolo per lo snippet di codice personalizzato.
Quindi, aprire il menu a tendina “Tipo di codice”, ma questa volta selezionare “Snippet CSS”.
Per questa guida, ci limiteremo a mettere 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;}
A questo punto, fare clic sulla levetta “Inattivo” in modo che diventi “Attivo”.
Infine, fare clic su “Salva snippet” per rendere attivo lo snippet CSS.
Ora, se visitate il vostro sito web, vedrete il menu aggiornato dal vivo.
Metodo 2: Stilizzare il primo e l’ultimo elemento usando i selettori CSS (funziona con tutti i temi)
Se non si vuole utilizzare un plugin, è possibile stilizzare la prima e l’ultima voce del menu utilizzando i selettori CSS. Tuttavia, questo metodo potrebbe non funzionare con alcuni vecchi browser, come Internet Explorer.
Per questo motivo, è bene testare il vostro sito WordPress con diversi browser.
Per seguire questo metodo, dovrete aggiungere del codice al foglio di stile del vostro tema o alla sezione “CSS aggiuntivi” del WordPress Theme Customizer.
Se non l’avete mai fatto prima, consultate la nostra guida su come aggiungere facilmente CSS personalizzati al vostro sito WordPress.
Il primo passo consiste nel modificare il file style.css del tema o nel recarsi in Aspetto ” Personalizzazione e cliccare su “CSS aggiuntivi”.
Dopodiché, aggiungete il seguente frammento di codice al vostro sito:
ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }
Si noti che è necessario sostituire “yourmenuid” con l’ID del menu di navigazione.
I selettori ‘first-child’ e ‘last-child’ selezionano il primo e l’ultimo figlio del suo genitore, ovvero la prima e l’ultima voce del menu di navigazione.
Ad esempio, abbiamo usato questo codice per mettere in grassetto la prima e l’ultima voce del menu di navigazione del 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 si utilizza un tema a blocchi di WordPress, il Theme Customizer non sarà presente nell’amministrazione di WordPress. È necessario inserire questo URL nel browser per accedere al Theme Customizer:
https://yourdomainname.com/wp-admin/customize.php
Assicuratevi di sostituire il dominio con il nome di dominio del vostro sito web.
Quindi, aprire la scheda “CSS aggiuntivo” come in precedenza e inserire il codice seguente. Si noti che il codice è leggermente diverso, poiché non è necessario aggiungere l’ID del 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;
}
Sentitevi liberi di personalizzare il codice in base alle vostre esigenze. Nell’esempio seguente, abbiamo trasformato il primo e l’ultimo link in pulsanti.
Ecco come si presenta:
Speriamo che questo tutorial vi abbia aiutato a capire come aggiungere le classi .first e .last ai menu di navigazione di WordPress. Potreste anche voler consultare la nostra guida su come creare una landing page con WordPress o dare un’occhiata al nostro elenco dei migliori page builder drag-and-drop.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Ahmed Mahdi says
i’ve changed the code slightly to work with child menus too:
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 says
exactly what i needed. thank you!
Georgios Panagiotakopoulos says
Thanks! This works great!
Munkhbayar says
Thanks for code. Works for me.
mad_doc says
Thank you for idea & help!
Charles says
Thanks for this nice code…
What about child menu first and last item?
It applied only for parent manu.
Do you have any idea about child last item?
jordi says
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 says
This does not work reliably if you have nested menus.
Editorial Staff says
Hmm, will look into a fix for this.
Admin
Olivier says
It works when the menu item is the last, or the last child of a last menu item.
It does not work when the menu item is a last child of a menu item that is not the last.
Olivier says
Together with some other additions to functions.php that i’ve tried, this code fails to tag a menu item as first or last menu item when they are in a submenu. A fix for this would be great!
Elliott Richmond says
Nice! Would usually use CSS but this is a good tip
Mattia says
Great! This is particularly interesting because I have to class more than 2 menu items…
Now I got it!
Thanks
karen says
Thanks for this! Forgive me if I missed it – but – is there an example of the menu to see the difference in the nav created by this class? Thank you again!
Editorial Staff says
The site we designed for our client is not live yet. But the main reason was that we wanted to have a border left to the first menu item. All other items had border right element with a specific padding and margin. We used the last class to remove the margin right and the border right because there was no need for it. It was hitting the wrap container. Hope you can visualize it.
Admin
Ivo Minchev says
I’ve tried this at the site http://aurorachalet-switzerland.com/ and I cannot see the effect. I’m using the “Twenty Eleven” theme for this site. Where is the problem?
Ivo Minchev says
Pobably because of the #yourmenuid tag. I tried some ID’s but none of them worked.
Editorial Staff says
This should work as long as you specify the correct id tags.
Admin
Editorial Staff says
Don’t think that you are using the wp_nav_menu. From the looks of it, it seems that your site is using the fall_back menu by listing all pages. Can you confirm that you have gone into Appearance > Menu and created a menu there. Then specified that menu as a primary location??
Admin