Come aggiungere menu di navigazione personalizzati nei temi WordPress

Su WPBeginner, abbiamo aiutato innumerevoli lettori a personalizzare i loro siti WordPress per migliorare l'esperienza utente, potenziare il branding e aumentare le conversioni. E abbiamo visto che, se fatto correttamente, un menu di navigazione unico nel suo genere può aiutare ad aumentare il coinvolgimento e a mantenere le persone più a lungo sul tuo sito.

Il problema è che tutti i temi WordPress hanno posizioni predefinite in cui è possibile visualizzare un menu di navigazione, quindi modificarlo può essere complicato. Questo è particolarmente vero se sei un principiante, poiché la modifica dei file del tema è un processo delicato.

Quando utilizzi un tema a blocchi, puoi farlo con l'Editor del Sito Completo. Ma, secondo la nostra esperienza, ci sono opzioni migliori che funzioneranno per tutti i tipi di temi.

Ad esempio, se desideri personalizzazioni avanzate, puoi utilizzare un potente page builder come SeedProd. Oppure, se stai cercando un modo semplice per utilizzare codice personalizzato, WPCode è di gran lunga la scelta migliore.

In questo articolo, ti mostreremo come aggiungere un menu di navigazione personalizzato in qualsiasi area del tuo tema WordPress. Ti guideremo attraverso 3 opzioni diverse in modo che tu possa scegliere il tutorial più adatto alle tue esigenze.

Perché aggiungere menu di navigazione personalizzati nei temi WordPress?

Un menu di navigazione è un elenco di collegamenti che puntano ad aree importanti del tuo sito web. Rendono facile per i visitatori trovare contenuti interessanti, il che può aumentare le visualizzazioni di pagina e ridurre il tasso di rimbalzo in WordPress.

La posizione esatta del tuo menu varierà in base al tuo tema WordPress. La maggior parte dei temi ha diverse opzioni, quindi puoi creare menu diversi e mostrarli in posizioni diverse.

Per vedere dove puoi visualizzare i menu nel tuo tema WordPress attuale, vai semplicemente su Aspetto » Menu e poi dai un'occhiata alla sezione 'Posizione di visualizzazione'.

L'immagine seguente mostra le posizioni supportate dal tema WordPress Astra.

A volte, potresti voler mostrare un menu in un'area che non è elencata come 'Posizione di visualizzazione' nel tuo tema.

Tenendo presente questo, diamo un'occhiata a come aggiungere un menu di navigazione personalizzato a qualsiasi area del tuo tema WordPress. Usa semplicemente i collegamenti rapidi qui sotto per passare al metodo che preferisci:

• Metodo 1: Utilizzo dell'Editor del Sito Completo (Solo temi basati su blocchi)
• Metodo 2: Utilizzo di un plugin Page Builder (funziona con tutti i temi)
• Method 3: Create a Custom Navigation Menu in WordPress Using Code (Advanced)

Metodo 1: Utilizzo dell'Editor del Sito Completo (Solo temi basati su blocchi)

Se stai utilizzando un tema a blocchi come ThemeIsle Hestia Pro, puoi aggiungere un menu di navigazione personalizzato utilizzando la modifica completa del sito (FSE) e l'editor a blocchi.

Per maggiori dettagli, puoi consultare il nostro articolo sui migliori temi WordPress per la modifica completa del sito.

Questo metodo non funziona con tutti i temi e non ti permette di personalizzare ogni parte del menu. Se vuoi aggiungere un menu completamente personalizzato a qualsiasi tema WordPress, ti consigliamo di utilizzare invece un plugin page builder.

Se stai utilizzando un tema basato su blocchi, vai su Aspetto » Editor.

Per impostazione predefinita, l'editor del sito completo mostra il modello della home page del tuo tema, ma puoi aggiungere un menu di navigazione in qualsiasi area.

Per vedere tutte le opzioni disponibili, seleziona semplicemente 'Modelli', 'Pattern' o 'Pagine'.

Ora puoi fare clic sul modello, sulla parte del modello o sulla pagina in cui desideri aggiungere un menu di navigazione personalizzato.

WordPress mostrerà ora un'anteprima del design. Per modificare questo modello, fai clic sulla piccola icona a forma di matita.

Il passo successivo è aggiungere un blocco di Navigazione nell'area in cui desideri mostrare il tuo menu.

Nell'angolo in alto a sinistra, fai clic sul pulsante blu '+'.

Ora, digita 'Navigazione' nella barra di ricerca.

Quando appare il blocco 'Navigazione', trascinalo e rilascialo sul tuo layout.

Successivamente, fai clic per selezionare il blocco di Navigazione.

Se hai già creato il menu che desideri visualizzare, fai clic per selezionare il blocco Navigazione. Nel menu di destra, fai clic sull'icona dei tre puntini accanto a 'Menu'.

Puoi quindi scegliere un menu dal menu a discesa.

Un'altra opzione è creare un menu all'interno dell'editor del sito completo aggiungendo pagine, articoli, collegamenti personalizzati e altro ancora. Per aggiungere elementi al nuovo menu, fai semplicemente clic sull'icona '+'.

Si aprirà una finestra popup in cui aggiungere qualsiasi articolo o pagina e decidere se questi collegamenti debbano aprirsi in una nuova scheda.

Puoi anche aggiungere una barra di ricerca al menu di WordPress, aggiungere icone dei social media e altro ancora. Nella finestra popup, digita semplicemente il blocco che desideri aggiungere al menu e seleziona l'opzione corretta quando appare.

Puoi quindi configurare questo blocco utilizzando le impostazioni nella barra degli strumenti ridotta e nel menu di destra. Ripeti semplicemente questi passaggi per aggiungere altri elementi al menu.

Quando sei soddisfatto dell'aspetto del menu, fai semplicemente clic sul pulsante 'Salva'.

Il tuo sito utilizzerà ora il nuovo modello e i visitatori potranno interagire con il tuo menu di navigazione personalizzato.

Metodo 2: Utilizzo di un plugin Page Builder (funziona con tutti i temi)

L'editor del sito completo ti consente di aggiungere menu ai temi basati su blocchi. Tuttavia, se desideri aggiungere un menu avanzato e completamente personalizzabile a qualsiasi tema di WordPress, avrai bisogno di un plugin per la creazione di pagine.

SeedProd è il miglior plugin per la creazione di pagine WordPress sul mercato che ti permette di personalizzare ogni parte del tuo menu di navigazione.

Abbiamo una vasta esperienza nell'utilizzo di questo strumento per creare menu di navigazione personalizzati, landing page e molto altro. Per maggiori dettagli, consulta la nostra recensione completa di SeedProd.

Per quanto riguarda le pagine, SeedProd offre oltre 350 modelli progettati professionalmente che puoi utilizzare come punto di partenza. Dopo aver scelto un modello, puoi aggiungere un menu di navigazione personalizzato al tuo sito utilizzando il blocco Nav Menu pronto all'uso di SeedProd.

Innanzitutto, devi installare e attivare il plugin SeedProd. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo aver attivato il plugin, SeedProd ti chiederà la tua chiave di licenza.

Puoi trovare queste informazioni nel tuo account sul sito web di SeedProd. Dopo aver inserito la chiave, fai clic sul pulsante ‘Verifica chiave’.

Una volta fatto ciò, vai su SeedProd » Pagine di destinazione e fai clic sul pulsante ‘Aggiungi nuova pagina di destinazione’.

Ora puoi scegliere un modello per la tua pagina personalizzata.

Per aiutarti a trovare il design giusto, tutti i modelli di SeedProd sono organizzati in diversi tipi di campagna, come le campagne coming soon e lead squeeze. Puoi persino utilizzare i modelli di SeedProd per migliorare la tua pagina 404.

Per esaminare più da vicino un design, passa il mouse sopra quel modello e fai clic sull'icona della lente d'ingrandimento.

Quando trovi un design che desideri utilizzare, fai clic su 'Scegli questo modello'.

Stiamo utilizzando il modello 'Pagina offerte Black Friday' in tutte le nostre immagini, ma puoi utilizzare qualsiasi modello desideri.

Dopo aver scelto un modello, digita un nome per quella pagina personalizzata. SeedProd creerà automaticamente un URL basato sul titolo della pagina, ma puoi modificare questo URL come preferisci.

Ad esempio, potresti aggiungere parole chiave pertinenti per aiutare i motori di ricerca a capire di cosa tratta la pagina. Questo può migliorare il tuo SEO di WordPress e aiutare il motore di ricerca a mostrare la pagina alle persone che cercano contenuti simili ai tuoi.

Dopo aver inserito queste informazioni, fai clic sul pulsante 'Salva e inizia a modificare la pagina'.

La maggior parte dei modelli contiene già alcuni blocchi, che sono i componenti principali di tutti i layout di pagina SeedProd.

Per personalizzare un blocco, fai semplicemente clic per selezionarlo nell'editor di pagina.

La barra degli strumenti di sinistra mostrerà ora tutte le impostazioni per quel blocco. Ad esempio, nell'immagine sottostante, stiamo modificando il testo all'interno di un blocco 'Titolo'.

Puoi formattare il testo, cambiarne l'allineamento, aggiungere collegamenti e altro ancora utilizzando le impostazioni nel menu di sinistra.

Se selezioni la scheda ‘Avanzate’, avrai accesso a ancora più impostazioni. Ad esempio, puoi far risaltare davvero il blocco aggiungendo ombreggiature e animazioni CSS.

Per aggiungere nuovi blocchi al tuo progetto, trova semplicemente un blocco nel menu di sinistra e trascinalo sulla pagina. Se vuoi eliminare un blocco, fai clic per selezionarlo e quindi utilizza l'icona del cestino.

Poiché vogliamo creare un menu di navigazione personalizzato, trascina un blocco ‘Menu di Navigazione’ sulla pagina.

Questo crea un menu di navigazione con un singolo elemento predefinito ‘Informazioni’.

Ora puoi creare un nuovo menu all'interno dell'editor SeedProd o scegliere un menu che hai già creato nella bacheca di WordPress.

Per mostrare un menu che hai creato in precedenza, fai clic sul pulsante ‘Menu WordPress’. Ora puoi aprire il menu a discesa ‘Menu’ e scegliere qualsiasi opzione dall'elenco.

Dopo di che, puoi modificare la dimensione del carattere, l'allineamento del testo e altro ancora utilizzando le impostazioni nel menu di sinistra.

Se invece vuoi creare un nuovo menu all'interno di SeedProd, seleziona il pulsante ‘Semplice’.

Quindi, fai clic per espandere l'elemento ‘Informazioni’ che SeedProd crea per impostazione predefinita.

Questo apre alcuni controlli dove puoi modificare il testo e aggiungere l'URL a cui il elemento del menu si collegherà.

Per impostazione predefinita, il link sarà ‘dofollow’ e si aprirà nella stessa finestra del browser. Puoi modificare queste impostazioni utilizzando le caselle di controllo nella sezione ‘Link URL’.

Nell'immagine seguente, stiamo creando un link ‘nofollow’ che si aprirà in una nuova finestra. Per maggiori informazioni su questo argomento, consulta la nostra guida per principianti ai link nofollow.

Per aggiungere altri elementi al menu, fai clic sul pulsante ‘Aggiungi nuovo elemento’.

Puoi quindi personalizzare ciascuno di questi elementi seguendo lo stesso processo descritto sopra.

Il menu di sinistra ha anche impostazioni che modificano la dimensione del carattere e l'allineamento del testo.

Puoi persino creare un divisore, che apparirà tra ogni elemento del menu.

Dopo di che, procedi e passa alla scheda ‘Avanzate’. Qui puoi modificare i colori, lo spazio, la tipografia e altre opzioni avanzate del menu.

Man mano che apporti modifiche, l'anteprima live si aggiornerà automaticamente, così potrai provare diverse impostazioni per vedere cosa funziona bene nel tuo design.

Per impostazione predefinita, SeedProd mostra lo stesso menu su dispositivi mobili e desktop. Tuttavia, i dispositivi mobili hanno in genere schermi molto più piccoli rispetto ai computer desktop.

Tenendo presente questo, potresti voler creare un menu separato da mostrare sui dispositivi mobili. Ad esempio, potresti utilizzare un layout verticale in modo che gli utenti mobili non debbano scorrere lateralmente. Potresti anche voler mostrare meno collegamenti sui dispositivi smartphone e tablet.

Per creare un menu pronto per i dispositivi mobili, è sufficiente progettare il menu seguendo lo stesso processo descritto sopra. Quindi, seleziona la scheda 'Avanzate' e fai clic per espandere la sezione 'Visibilità dispositivo'.

Ora puoi attivare il cursore 'Nascondi su desktop'.

Ora, SeedProd mostrerà questo menu solo agli utenti mobili.

Quando sei soddisfatto dell'aspetto del tuo menu personalizzato, è ora di pubblicarlo.

Fai semplicemente clic sulla freccia a discesa accanto a 'Salva' e quindi seleziona 'Pubblica'.

Ora, se visiti il tuo blog WordPress, vedrai il menu di navigazione personalizzato in azione.

Metodo 3: Creare un menu di navigazione personalizzato in WordPress utilizzando il codice (Avanzato)

Se non vuoi configurare un plugin page builder, puoi aggiungere un menu di navigazione personalizzato utilizzando il codice. Troverai spesso guide con istruzioni su come aggiungere frammenti di codice personalizzati al file functions.php del tuo tema.

Tuttavia, non raccomandiamo questo metodo, poiché anche un piccolo errore nel tuo codice potrebbe causare una serie di errori comuni di WordPress o addirittura bloccare completamente il tuo sito. Perderai anche il codice personalizzato quando aggiornerai il tuo tema WordPress.

Ecco perché consigliamo di utilizzare WPCode. È il modo più semplice e sicuro per aggiungere codice personalizzato in WordPress senza dover modificare alcun file principale di WordPress.

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 di WordPress.

Dopo l'attivazione, vai su Snippet di codice » Aggiungi snippet nella tua bacheca di WordPress.

Qui vedrai tutti gli snippet pronti all'uso che puoi aggiungere al tuo sito.  Questi includono uno snippet che ti permette di disabilitare completamente i commenti, caricare tipi di file che WordPress normalmente non supporta, disabilitare le pagine di allegato, e molto altro.

Per creare il tuo snippet, passa il mouse sopra 'Aggiungi il tuo codice personalizzato (Nuovo snippet)' e poi fai clic sul pulsante '+ Aggiungi snippet personalizzato'.

Successivamente, devi scegliere un tipo di codice dall'elenco delle opzioni che appaiono sullo schermo. Per questo tutorial, seleziona 'Snippet PHP' come tipo di codice.

Verrai ora indirizzato alla pagina Crea snippet personalizzato.

Per iniziare, inserisci un titolo per lo snippet di codice personalizzato. Può essere qualsiasi cosa che ti aiuti a identificare lo snippet nella tua bacheca di WordPress.

Una volta fatto ciò, incolla semplicemente il seguente snippet nell'editor di codice:

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

Questo aggiungerà una nuova posizione di menu al tuo tema chiamata 'Il mio menu personalizzato'. Per utilizzare un nome diverso, modifica semplicemente lo snippet di codice.

Se desideri aggiungere più di un menu di navigazione personalizzato al tuo tema, aggiungi semplicemente una riga extra allo snippet di codice.

Ad esempio, qui stiamo aggiungendo due nuove posizioni per i menu al nostro tema, chiamate ‘Il mio menu personalizzato’ e ‘Menu extra’:

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

Successivamente, scorri fino alle opzioni ‘Inserimento’. Se non è già selezionato, scegli il metodo ‘Inserimento automatico’ in modo che WPCode aggiunga lo snippet su tutto il tuo sito.

Quindi, apri il menu a discesa ‘Posizione’ e fai clic su ‘Esegui ovunque’.

Ora sei pronto per scorrere fino in cima alla schermata e fare clic sull’interruttore ‘Inattivo’ in modo che cambi in ‘Attivo’.

Infine, procedi e fai clic su ‘Salva’ per rendere attivo questo snippet.

Successivamente, vai su Aspetto » Menu e guarda l’area ‘Posizione di visualizzazione’.

Ora dovresti vedere una nuova opzione ‘Il mio menu personalizzato’.

Ora puoi procedere e aggiungere alcune voci di menu alla nuova posizione. Per ulteriori informazioni, consulta la nostra guida passo passo su come aggiungere menu di navigazione per principianti.

Quando sei soddisfatto del tuo menu, il passo successivo è aggiungerlo al tuo tema WordPress.

Aggiungere il menu di navigazione personalizzato al tuo tema WordPress

La maggior parte dei siti web mostra il menu di navigazione direttamente sotto la sezione dell'intestazione. Ciò significa che il menu è una delle prime cose che i visitatori vedono, insieme al logo del sito o al titolo.

Puoi aggiungere il menu di navigazione personalizzato in qualsiasi posizione aggiungendo del codice al file del modello del tuo tema.

Nella tua bacheca di WordPress, vai su Aspetto » Editor file tema.

Nel menu a destra, scegli il modello in cui desideri aggiungere il menu. Ad esempio, se desideri mostrare il menu di navigazione personalizzato nell'intestazione del tuo sito web, allora selezionerai tipicamente il file header.php.

Per assistenza nel trovare il file del modello corretto, consulta la nostra guida su come trovare i file da modificare nel tuo tema WordPress.

Dopo aver selezionato il file, dovrai aggiungere una funzione wp_nav_menu e specificare il nome del tuo menu personalizzato.

Ad esempio, nel seguente snippet di codice, stiamo aggiungendo 'Il mio menu personalizzato' all'intestazione del tema:

wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );

Dopo aver aggiunto il codice, fai clic sul pulsante 'Aggiorna file' per salvare le modifiche.

Ora, se visiti il tuo sito, vedrai il menu personalizzato in azione.

Per impostazione predefinita, il tuo menu apparirà come un semplice elenco puntato.

Puoi personalizzare il menu di navigazione personalizzato per adattarlo meglio al tuo tema WordPress o al branding della tua azienda aggiungendo codice CSS personalizzato al tuo sito.

Per fare ciò, vai su Aspetto » Personalizza.

Nel personalizzatore del tema WordPress, fai clic su ‘CSS aggiuntivo’.

Questo aprirà un piccolo editor di codice dove puoi digitare del CSS.

Ora puoi stilizzare il tuo menu usando la classe CSS che hai aggiunto al template del tuo tema. Nel nostro esempio, questa è .custom_menu_class.

Nel seguente codice, stiamo aggiungendo margini e padding, impostando il colore del testo su nero e disponendo le voci del menu in un layout orizzontale:

div.custom-menu-class ul {
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
	display:inline-block;
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline-block;
} 

div.custom-menu-class a {
    color:#000;
}

Il personalizzatore di WordPress si aggiornerà automaticamente.

Mostrerà ora come apparirà il menu con il nuovo stile.

Se sei soddisfatto di come appare il menu, fai clic su ‘Pubblica’ per rendere effettive le tue modifiche.

Per maggiori informazioni, consulta la nostra guida su come stilizzare i menu di navigazione di WordPress.

Guide Esperte: Fai di Più con i Menu di Navigazione di WordPress

Con WordPress, puoi creare ogni tipo di menu utile e coinvolgente. Tenendo presente questo, ecco alcune guide esperte per aiutarti a ottenere ancora di più dai tuoi menu di navigazione:

• Come aggiungere icone immagine con menu di navigazione in WordPress
• Come aggiungere logica condizionale ai menu in WordPress (Passo dopo Passo)
• Come aggiungere descrizioni ai menu nei tuoi temi WordPress
• Come aggiungere un menu responsive a schermo intero in WordPress
• Come aggiungere un Mega Menu sul tuo sito WordPress (Passo dopo Passo)

Speriamo che questa guida definitiva ti abbia aiutato a imparare come aggiungere un menu di navigazione personalizzato in WordPress. Potresti anche voler consultare le nostre guide su come aggiungere un pulsante nel menu dell'intestazione di WordPress o come evidenziare una voce di menu in WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.