{"id":34663,"date":"2022-03-19T05:56:42","date_gmt":"2022-03-19T04:56:42","guid":{"rendered":"https:\/\/kinsta.com\/?post_type=knowledgebase&p=66027"},"modified":"2025-10-01T20:47:48","modified_gmt":"2025-10-01T19:47:48","slug":"menu-a-tendina-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/menu-a-tendina-wordpress\/","title":{"rendered":"Come Creare un Menu a Tendina in WordPress (in 5 Passi)"},"content":{"rendered":"

La navigazione del sito \u00e8 fondamentale per aiutare i vostri utenti ad arrivare dove vogliono. Un menu ben progettato pu\u00f2 contribuire a migliorare l’esperienza dell’utente (UX) e persino a diminuire la frequenza di rimbalzo<\/a>. Ma un menu mal progettato pu\u00f2 fare esattamente il contrario.<\/p>\n

Per fortuna, WordPress permette di creare menu personalizzati<\/a> per le esigenze di ogni sito. \u00c8 anche possibile utilizzare le funzioni native per aggiungere un menu a tendina compatto che consenta di risparmiare spazio, pur fornendo una direzione chiara ai visitatori.<\/p>\n

In questo articolo parleremo dei motivi per cui la navigazione di un sito web \u00e8 importante e di quanto possano essere utili i menu a tendina. Poi vi spiegheremo come crearli in WordPress e suggeriremo alcuni plugin che possono essere d’aiuto.<\/p>\n

Cominciamo!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Introduzione ai Menu di Navigazione e a Tendina di WordPress<\/h2>\n

Anche se possono essere modesti, i menu di navigazione sono un elemento vitale di qualsiasi sito web. Aiutano gli utenti a trovare rapidamente le pagine pi\u00f9 rilevanti per raggiungere i contenuti che cercano, dando anche ai visitatori che accedono per la prima volta un’idea di ci\u00f2 che si ha da offrire:<\/p>\n

\"Il
Il menu di navigazione principale del sito web di Kinsta<\/figcaption><\/figure>\n

Un menu di navigazione ben progettato \u00e8 determinante per aumentare le conversioni e ridurre la frequenza di rimbalzo. Quando gli utenti possono trovare facilmente le pagine su cui si trova un prodotto, il modulo di iscrizione via email<\/a> o altri contenuti di conversione, sar\u00e0 pi\u00f9 facile per loro fare un acquisto o iscriversi.<\/p>\n

Inoltre, se gli utenti possono trovare facilmente la loro strada in tutto il vostro sito, non rimbalzeranno dalle vostre pagine perch\u00e9 sono finiti nel posto sbagliato. Aiutandoli a fare le cose per bene la prima volta potrete migliorare la UX e ridurre al minimo la frustrazione.<\/p>\n

In WordPress i menu sono una funzione nativa. Qualsiasi sito creato con la piattaforma pu\u00f2 averne uno o pi\u00f9 di uno. Tuttavia, i temi di WordPress<\/a> hanno un ruolo importante anche per quanto riguarda lo stile e la collocazione del menu o dei menu.<\/p>\n

Il vostro menu di WordPress pu\u00f2 assumere diverse forme. Il pi\u00f9 familiare \u00e8 il menu di intestazione standard:<\/p>\n

\"Un
Un esempio di un tipico menu di intestazione<\/figcaption><\/figure>\n

Spesso \u00e8 anche possibile inserire un menu aggiuntivo in fondo alle pagine. Questo pu\u00f2 visualizzare lo stesso contenuto del vostro menu principale o offrire opzioni leggermente diverse:<\/p>\n

\"Un
Un esempio di menu nel footer<\/figcaption><\/figure>\n

Un altro stile \u00e8 quello dei menu sovrapposti (overlay), che gli utenti possono aprire e chiudere a piacere:<\/p>\n

\"Un
Un esempio di menu overlay<\/figcaption><\/figure>\n

In alternativa, si pu\u00f2 prendere in considerazione un menu laterale (sidebar):<\/p>\n

\"Un
Un esempio di menu laterale<\/figcaption><\/figure>\n

Oppure si pu\u00f2 incorporare un menu a tendina (o dropdown), detto anche menu “nidificato”:<\/p>\n

\"Un
Un esempio di menu a tendina<\/figcaption><\/figure>\n

Questo tipo di navigazione \u00e8 ideale per molti siti. Non oscura i contenuti come un menu sovrapposto e non \u00e8 invadente come una grande barra di intestazione o un menu laterale.<\/p>\n

Nascondendo alcuni contenuti fino a quando non sono necessari, si risparmia spazio sullo schermo, pur fornendo agli utenti un modo semplice per spostarsi.<\/p>\n

Come Creare un Menu a Discesa in WordPress (in 5 Passi)<\/h2>\n

Se avete deciso che un menu a tendina \u00e8 la soluzione giusta per il vostro sito WordPress, impostarne uno \u00e8 abbastanza semplice. Utilizzando le funzioni di menu native disponibili in WordPress, \u00e8 possibile creare un sistema di navigazione personalizzato che si adatta alle proprie esigenze in soli cinque passi.<\/p>\n

Passo 1: Creare le Voci di Menu<\/h3>\n

Il primo passo nella creazione di un menu \u00e8 decidere cosa metterci. Cominciate andando su Aspetto > Menu<\/strong> nella bacheca di WordPress:<\/p>\n

\"L'editor
L’editor dei menu nella bacheca di WordPress<\/figcaption><\/figure>\n

Quello che vedete nell’editor del menu varia leggermente a seconda del vostro tema.<\/p>\n

Tuttavia, quello che \u00e8 importante notare per ora \u00e8 la prima opzione nella scheda Modifica menu<\/strong>. Dovreste vedere un’opzione dove selezionare uno dei vostri menu esistenti da modificare e un’opzione per creare un nuovo menu<\/strong>:<\/p>\n

\"Il
Il link per creare un nuovo menu nella parte superiore dell’editor dei menu di WordPress<\/figcaption><\/figure>\n

Per questo esempio, sceglieremo quest’ultima opzione e creeremo un nuovo menu. Aggiungete un titolo e fate clic sul pulsante Crea menu<\/strong>:<\/p>\n

\"Nominare
Nominare e creare un nuovo menu<\/figcaption><\/figure>\n

Ora siete pronti e potete iniziare ad aggiungere voci al vostro menu di WordPress. Nella maggior parte dei casi, \u00e8 meglio mantenere il menu il pi\u00f9 semplice possibile, dando comunque agli utenti abbastanza informazioni per arrivare dove vogliono.<\/p>\n

Inserire troppe pagine pu\u00f2 travolgere i visitatori e rendere la navigazione pi\u00f9 difficile invece che pi\u00f9 facile.<\/p>\n

Ci sono diversi modi per aggiungere le voci di menu. Le prime due sono le Pagine<\/strong> e i Post<\/strong>, e funzionano in modo molto simile.<\/p>\n

\"Aggiungere
Aggiungere pagine al menu<\/figcaption><\/figure>\n

Nella barra laterale dell’editor dei menu, selezionate le caselle di controllo per ogni pagina o post che volete inserire e cliccate sul pulsante Aggiungi al menu<\/strong>:<\/p>\n

La vostra opzione successiva \u00e8 quella di inserire i Link personalizzati<\/strong>. Ci\u00f2 richiede l’URL della pagina a cui si desidera indirizzare gli utenti e la creazione di un’etichetta breve ma descrittiva. Dopo di che, potete cliccare di nuovo su Aggiungi al menu<\/strong>:<\/p>\n

\"Aggiungere
Aggiungere un link personalizzato al menu<\/figcaption><\/figure>\n

Infine, \u00e8 possibile aggiungere al menu di navigazione anche le categorie di pagine e post<\/strong>. Questo porter\u00e0 gli utenti ad una pagina di archivio dove potranno visualizzare tutti i contenuti di un determinato argomento.<\/p>\n

I blog e gli altri siti che contengono molti contenuti possono trovare questa funzione particolarmente utile:<\/p>\n

\"Aggiungere
Aggiungere categorie al menu<\/figcaption><\/figure>\n

Come per Pagine e Messaggi, basta selezionare le caselle di controllo delle categorie<\/strong> che si desidera inserire e scegliere Aggiungi al menu<\/strong>.<\/i><\/p>\n

Fase 2: Organizzare il Menu di WordPress<\/h3>\n

Una volta aggiunte tutte le voci di menu, dovreste vederle elencate nell’editor in singoli riquadri sotto Struttura del menu<\/strong>:<\/p>\n

\"La
La sezione Struttura del menu dell’editor dei menu<\/figcaption><\/figure>\n

Inizialmente, le voci di menu appariranno nell’ordine in cui sono state aggiunte. Tuttavia, potrete modificare facilmente la loro organizzazione trascinandole nella posizione desiderata. In questo modo potrete creare un semplice menu senza funzionalit\u00e0 della tendina.<\/p>\n

Avete un paio di modi per aggiungere dei men\u00f9 a tendina al vostro menu di WordPress.<\/p>\n

Il pi\u00f9 semplice \u00e8 continuare a trascinare e rilasciare, ma annidando alcune voci di menu sotto altre:<\/p>\n

\"Categorie
Categorie di nidificazione sotto la pagina del Blog<\/figcaption><\/figure>\n

Ad esempio, nell’immagine qui sopra, abbiamo spostato le tre categorie di post che abbiamo aggiunto al menu sotto la voce Blog<\/strong>, rendendole “sotto-voci”. Sul frontend, questo creer\u00e0 un menu a tendina che assomiglia a questo:<\/p>\n

\"Esempio
Esempio di menu a tendina in WordPress<\/figcaption><\/figure>\n

Se desiderate aggiungere un menu a tendina che includa tutte le categorie del vostro sito, potete farlo aggiungendo un Link personalizzato<\/strong> al vostro menu. Utilizzate “#” come URL e “Categorie” o qualcosa di simile per l’etichetta:<\/p>\n

\"Creare
Creare un’etichetta di categoria per il menu<\/figcaption><\/figure>\n

Potete quindi aggiungere tutte le vostre categorie al menu e annidarle sotto questa etichetta. Ogni categoria sar\u00e0 cliccabile, ma l’etichetta non lo sar\u00e0:<\/p>\n

\"Il
Il menu a tendina Categorie<\/figcaption><\/figure>\n

In modo simile, potete anche nascondere tutte le voci di menu in un unico menu a tendina.<\/p>\n

Aggiungete un altro Link personalizzato, usando “#” come URL e “Menu” come etichetta. Poi annidate tutte le altre voci di menu sotto questa:<\/p>\n

\"Annidare
Annidare tutti i link di navigazione sotto un’unica etichetta Menu<\/figcaption><\/figure>\n

Il risultato sul frontend sar\u00e0 un menu a tendina con le pagine chiave del vostro sito.<\/p>\n

Come si pu\u00f2 vedere nella voce Categorie<\/strong> qui sotto, ogni contenuto annidato in una sottovoce apparir\u00e0 in un sottomenu:<\/p>\n

\"Un
Un vero menu di navigazione a tendina in WordPress<\/figcaption><\/figure>\n

Utilizzando l’editor dei menu in questo modo, potrete creare qualsiasi stile e combinazione di menu a tendina di WordPress. Ricordate per\u00f2 che troppe voci di menu possono confondere gli utenti.<\/p>\n

\u00c8 anche meglio limitare il numero di sotto-menu che si inseriscono, per evitare di ingombrare eccessivamente la navigazione.<\/p>\n

Fase 3: Incorporare le Immagini nel Menu di WordPress<\/h3>\n

Se alla fine della Fase 2 il vostro menu a tendina \u00e8 esattamente come l’avete immaginato, potete passare alla Fase 5 e pubblicarlo. Tuttavia, ci sono altri passaggi se desiderate arricchire il menu con le vostre personalizzazioni.<\/p>\n

Una possibilit\u00e0 da considerare \u00e8 quella di inserire elementi visivi nei menu per fornire maggiori indicazioni ai visitatori. Mentre le etichette descrittive sono fondamentali, a volte un’immagine o un’icona possono aiutare gli utenti a capire pi\u00f9 rapidamente dove conduce un particolare link di navigazione.<\/p>\n

\u00c8 possibile aggiungere immagini utilizzando CSS personalizzati, di cui parleremo a breve. Tuttavia, consigliamo di utilizzare un plugin come Menu Image, Icons Made Easy<\/a>:<\/p>\n

\"Menu
Menu a discesa WordPress con immagini<\/figcaption><\/figure>\n

In questo modo, non dovrete preoccuparvi del codice per rendere visivamente interessante il vostro menu a tendina.<\/p>\n

Basta installare il plugin e poi tornare a Aspetto > Menu<\/strong>:<\/p>\n

\"La
La sezione Menu Image nell’editor dei menu<\/figcaption><\/figure>\n

Vedrete che ora ci sono opzioni per le immagini per ogni pagina che avete inserito nel menu. \u00c8 possibile selezionare la foto, le dimensioni e la posizione di ogni pagina. Ricordatevi di salvare le modifiche quando avete finito.<\/p>\n

Passo 4: Aggiungere CSS Personalizzati al Menu a Tendina<\/h3>\n

Anche se non lo consigliamo ai principianti, gli utenti intermedi e avanzati potrebbero incorporare il proprio stile nei menu a tendina di WordPress. Prima di saltare direttamente nel vostro CSS<\/a>, tuttavia, dovrete aggiungere una classe al vostro menu.<\/p>\n

Se saltate questo passaggio, i vostri CSS personalizzati<\/a> potrebbero causare problemi ad un qualsiasi altro menu del sito. Per esempio, potreste inavvertitamente applicare lo stile al vostro menu del footer quando intendevate applicarlo solo al menu a tendina principale.<\/p>\n

Nell’editor dei menu, cliccate su Opzioni schermo<\/strong> nell’angolo in alto a destra:<\/p>\n

\"La
La scheda Opzioni schermo nell’editor dei menu<\/figcaption><\/figure>\n

Quindi spuntate la casella per le Classi CSS<\/strong>:<\/p>\n

\"La
La casella di controllo Classi CSS nella scheda Opzioni Schermo<\/figcaption><\/figure>\n

Questo far\u00e0 aggiungere un campo Classi CSS<\/strong> ad ogni pagina del vostro menu:<\/p>\n

\"Il
Il campo Classi CSS nell’editor dei menu<\/figcaption><\/figure>\n

Una volta aggiunte una o pi\u00f9 classi CSS alle voci del menu, qualsiasi codice che inserite nel vostro foglio di stile si applicher\u00e0 solo alle voci del menu con la classe specificata.<\/p>\n

Ora potete andare al vostro foglio di stile o al Customizer e iniziare a lavorare sul vostro stile personalizzato<\/a>.<\/p>\n

Fase 5: Pubblicare il Menu nelle Prime Posizioni<\/h3>\n

Una volta che il menu a tendina di WordPress \u00e8 strutturato e soddisfa le vostre esigenze, e avete applicato tutte le personalizzazioni che desiderate, siete pronti a pubblicarlo sul vostro sito.<\/p>\n

Questo varia leggermente a seconda del tema<\/a> e delle posizioni dei menu che supporta. Per questo esempio, useremo il tema Twenty Twenty<\/a>.<\/p>\n

Nell’editor dei menu, scorrete fino alla sezione Impostazioni Menu<\/strong>:<\/p>\n

\"La
La sezione Impostazioni menu nell’editor<\/figcaption><\/figure>\n

Se desiderate che le nuove pagine vengano aggiunte automaticamente al vostro menu, selezionate la prima casella di controllo. Se avete appena iniziato a lavorare al vostro sito e non avete ancora aggiunto tutte le pagine principali, questo pu\u00f2 esservi utile. Ma fate attenzione a non aggiungere accidentalmente troppe voci al vostro menu.<\/p>\n

Sotto questa voce, vedrete un elenco di caselle con l’indicazione delle diverse aree del sito in cui \u00e8 possibile visualizzare il menu.<\/p>\n

Il tema Twenty Twenty dispone di diverse aree di menu: Menu orizzontale per desktop<\/strong>, Menu espanso per desktop<\/strong>, Menu mobile<\/strong>, Menu nel footer<\/strong>, Menu social<\/strong>.<\/i><\/p>\n

In questo caso, il menu che abbiamo creato si adatta meglio alla posizione del menu orizzontale per desktop<\/strong>, che si trova nell’intestazione del sito:<\/p>\n

\"Menu
Menu orizzontale per desktop per il tema Twenty Twenty<\/figcaption><\/figure>\n

Potreste anche valutare la possibilit\u00e0 di navigare sulla scheda Gestione posizioni<\/strong> nell’area dei menu<\/strong> della bacheca. Qui vedrete tutte le posizioni dei menu supportate dal vostro tema e quale menu avete assegnato a ciascuna di esse:<\/p>\n

\"La
La scheda Gestione posizioni<\/figcaption><\/figure>\n

Quando si posizionano i menu, pu\u00f2 essere utile vedere come appariranno sul frontend.<\/p>\n

\"L'opzione
L’opzione Gestisci con l’anteprima in tempo reale<\/figcaption><\/figure>\n

Fate clic sul pulsante Gestisci con l’anteprima in tempo reale<\/strong> per vedere come apparir\u00e0 il vostro menu nella posizione che avete scelto, utilizzando il Customizer di WordPress:<\/p>\n

\"Un'anteprima
Un’anteprima il tempo reale del menu di WordPress nel Customizer<\/figcaption><\/figure>\n

Potrete quindi pubblicare il vostro menu o i vostri menu direttamente dal Customizer. Se avete bisogno di aggiungere o rimuovere voci dal vostro menu a tendina, potete semplicemente tornare all’editor dei menu ed effettuare le necessarie regolazioni.<\/p>\n

Plugin WordPress per Migliorare i Menu a Tendina<\/h2>\n

Anche se potete creare menu di navigazione di WordPress completi senza altri strumenti, a volte pu\u00f2 essere utile estendere le funzionalit\u00e0 dei menu. In questo caso, potreste dare un’occhiata ad alcuni popolari plugin per i menu di WordPress<\/a>.<\/p>\n

Nested Pages<\/a> \u00e8 un’ottima soluzione per creare menu a tendina in blog con molti contenuti<\/a>. Anche se viene utilizzato principalmente per organizzare i post e le pagine, questo plugin genera automaticamente anche un menu che rispecchia la struttura dei contenuti:<\/p>\n

\"Il
Il Plugin WordPress Nested Pages<\/figcaption><\/figure>\n

Anche se spesso non \u00e8 consigliabile inserire un gran numero di voci nei menu, a volte \u00e8 inevitabile.<\/p>\n

In questo caso, Max Mega Menu<\/a> pu\u00f2 aiutarvi a combinare i vostri menu di WordPress esistenti per formare un “mega menu”:<\/p>\n

\"Il
Il plugin WordPress Max Mega Menu<\/figcaption><\/figure>\n

Con la navigazione mobile in costante crescita, \u00e8 fondamentale avere menu leggibili sui dispositivi mobili.<\/p>\n

WP Mobile Menu<\/a> si abbina a qualsiasi tema reattivo e vi aiuta a creare un sistema di navigazione per gli utenti del vostro sito in movimento:<\/p>\n

\"Il
Il plugin WordPress WP Mobile Menus<\/figcaption><\/figure>\n

Infine, come abbiamo gi\u00e0 detto, ci possono essere situazioni in cui le voci di menu descrittive non sono sufficienti. In queste situazioni, potreste dare un’occhiata Menu Image, Icons Made Easy come abbiamo detto al punto 3.<\/p>\n

Potete utilizzare uno qualsiasi di questi plugin per migliorare il vostro attuale sistema di navigazione e rendere pi\u00f9 efficace il menu a tendina di WordPress. Ricordate solo che a volte, per quel che riguarda la navigazione, pi\u00f9 semplice \u00e8, meglio \u00e8<\/strong>. Aggiungete funzioni extra solo se queste miglioreranno la vostra UX ed eviterete di ingombrare il vostro sito.<\/p>\n

Risoluzione dei Problemi del Menu a Tendina di WordPress<\/h2>\n

Se avete configurato il vostro menu seguendo le nostre indicazioni, ma la funzionalit\u00e0 di dropdown non funziona, potreste indagare tra diverse possibili cause.<\/p>\n

Anche se qui non possiamo trattarle tutte, possiamo aiutarvi a restringere il campo di ricerca, in modo che possiate trovare la soluzione adeguata.<\/p>\n

Spesso, un menu malfunzionante \u00e8 il risultato di un codice che crea un conflitto tra il vostro menu personalizzato e il vostro tema. La prima cosa da fare \u00e8 passare a un tema predefinito come Twenty Twenty. Se il vostro menu inizia a funzionare di nuovo, saprete che il problema \u00e8 legato al tema. Potete quindi contattare lo sviluppatore del tema per cercare una soluzione.<\/p>\n

Altre possibili cause possono essere:<\/p>\n