Come aggiungere menu di navigazione personalizzati nei temi WordPress

Noi di WPBeginner abbiamo aiutato innumerevoli lettori a personalizzare i loro siti WordPress per migliorare l’esperienza dell’utente, incrementare il brand e favorire le conversioni. E abbiamo visto che, se fatto bene, un menu di navigazione unico nel suo genere può aiutare ad aumentare l’engagement e a far rimanere gli utenti sul sito più a lungo.

Il problema è che tutti i temi di WordPress hanno delle impostazioni che visualizzano il menu di navigazione, quindi modificarle può essere complicato. Questo è particolarmente vero se siete principianti, perché la modifica dei file dei temi è un processo delicato.

Se si utilizza un tema a blocchi, è possibile farlo con l’editor completo del sito. Tuttavia, secondo la nostra esperienza, esistono opzioni migliori che funzionano per tutti i temi.

Ad esempio, se si desiderano personalizzazioni avanzate, è possibile utilizzare un potente builder di pagine come SeedProd. Se invece cercate un modo semplice per utilizzare il codice personalizzato, WPCode è di gran lunga la scelta migliore.

In questo articolo vi mostreremo come aggiungere un menu di navigazione personalizzato a qualsiasi area del vostro tema WordPress. Vi illustreremo 3 diverse opzioni, in modo che possiate scegliere il tutorial più adatto alle vostre esigenze.

Perché aggiungere menu di navigazione personalizzati nei temi WordPress?

Un menu di navigazione è un elenco di link che puntano ad aree importanti del vostro sito web. Essi facilitano ai visitatori la ricerca di contenuti interessanti, aumentando le visualizzazioni delle pagine e riducendo la frequenza di rimbalzo in WordPress.

La posizione esatta del menu varia in base al tema di WordPress. La maggior parte dei temi dispone di diverse opzioni, per cui è possibile creare diversi menu e mostrarli in posizioni diverse.

Per vedere dove è possibile visualizzare i menu nel vostro tema WordPress attuale, basta andare su Aspetto ” Menu e poi dare un’occhiata alla sezione “Posizione di visualizzazione”.

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

A volte si può desiderare di mostrare un menu in un’area che non è elencata come “Posizione di visualizzazione” nel tema.

Con queste premesse, vediamo come aggiungere un menu di navigazione personalizzato a qualsiasi area del vostro tema WordPress. Utilizzate i link rapidi qui sotto per passare al metodo che preferite:

Metodo 1: Utilizzo dell’editor completo del sito (solo per i temi a blocchi)

Se si utilizza un tema a blocchi come ThemeIsle Hestia Pro, è possibile aggiungere un menu di navigazione personalizzato utilizzando il Full Site Editing (FSE) e l’editor di blocchi.

Per maggiori dettagli, potete consultare il nostro articolo sui migliori temi WordPress per la modifica dell’intero sito.

Questo metodo non funziona con tutti i temi e non consente di personalizzare ogni parte del menu. Se si desidera aggiungere un menu completamente personalizzato a qualsiasi tema WordPress, si consiglia di utilizzare un plugin per la creazione di pagine.

Se si utilizza un tema a blocchi, andare su Aspetto “ Editor.

Per impostazione predefinita, l’editor completo del sito mostra il modello di home del tema, ma è possibile aggiungere un menu di navigazione a qualsiasi area.

Per vedere tutte le opzioni disponibili, basta selezionare “Modelli”, “Schemi” o “Pagine”.

Ora è possibile fare clic sul modello, sulla parte del modello o sulla pagina in cui si desidera aggiungere un menu di navigazione personalizzato.

WordPress mostrerà ora un’anteprima del design. Per modificare questo template, fare clic sulla piccola icona della matita.

Il passo successivo è l’aggiunta di un blocco di navigazione nell’area in cui si vuole mostrare il menu.

Nell’angolo in alto a sinistra, fare clic sul pulsante blu “+”.

A questo punto, digitate “Navigazione” nella barra di ricerca.

Quando appare il blocco “Navigazione”, è sufficiente trascinarlo sul layout.

Quindi, fare clic per selezionare il blocco Navigazione.

Se è già stato creato il menu che si desidera visualizzare, fare clic per selezionare il blocco Navigazione. Nel menu di destra, fare clic sull’icona con i tre puntini accanto a “Menu”.

È quindi possibile scegliere un menu dal menu a discesa.

Un’altra opzione è quella di costruire un menu all’interno dell’editor del sito completo, aggiungendo pagine, post, link personalizzati e altro ancora. Per aggiungere elementi al nuovo menu, basta cliccare sull’icona ‘+’.

Si apre una finestra a comparsa in cui è possibile aggiungere qualsiasi post o pagina e decidere se questi link devono essere aperti in una nuova scheda.

È anche possibile aggiungere una barra di ricerca al menu di WordPress, aggiungere le icone dei social media e altro ancora. Nel popup, è sufficiente digitare il blocco che si desidera aggiungere al menu e selezionare l’opzione giusta quando appare.

È quindi possibile configurare questo blocco utilizzando le impostazioni della mini-barra degli strumenti e del menu di destra. È sufficiente ripetere questi passaggi per aggiungere altre voci al menu.

Quando si è soddisfatti dell’aspetto del menu, è sufficiente fare clic sul pulsante “Salva”.

Ora il sito utilizza il nuovo modello e i visitatori possono interagire con il menu di navigazione personalizzato.

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

L’editor completo del sito consente di aggiungere menu ai temi basati su blocchi. Tuttavia, se si desidera aggiungere un menu avanzato e completamente personalizzabile a qualsiasi tema WordPress, è necessario un plugin per la creazione di pagine.

SeedProd è il miglior plugin per WordPress page builder sul mercato che consente di personalizzare ogni parte del menu di navigazione.

Abbiamo una vasta esperienza nell’uso di questo strumento per costruire menu di navigazione personalizzati, landing page e molto altro. Per maggiori dettagli, selezionate la nostra recensione completa di SeedProd.

Per quanto riguarda le pagine, SeedProd offre oltre 350 template progettati professionalmente che possono essere utilizzati come punto di partenza. Dopo aver scelto un template, è possibile aggiungere un menu di navigazione personalizzato al sito utilizzando il blocco Nav Menu già pronto di SeedProd.

Per prima cosa, è necessario installare e attivare il plugin SeedProd. Per maggiori dettagli, consultate la nostra guida passo-passo su come installare un plugin di WordPress.

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

Queste informazioni si trovano nel proprio account sul sito web di SeedProd. Dopo aver inserito la chiave, fare clic sul pulsante “Verifica chiave”.

Una volta fatto ciò, andate su SeedProd ” Pagine di destinazione e fate clic sul pulsante “Aggiungi nuova pagina di destinazione”.

È ora possibile scegliere un modello per la pagina personalizzata.

Per aiutarvi 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. È possibile utilizzare i modelli di SeedProd anche per migliorare la propria pagina 404.

Per dare un’occhiata più da vicino a qualsiasi disegno, è sufficiente passare il mouse su quel modello e fare clic sull’icona della lente d’ingrandimento.

Una volta trovato il design che si desidera utilizzare, fare clic su “Scegli questo modello”.

In tutte le nostre immagini utilizziamo il modello “Black Friday Sales Page”, ma potete utilizzare qualsiasi modello desideriate.

Dopo aver scelto un modello, digitare un nome per la pagina personalizzata. SeedProd creerà automaticamente un URL basato sul titolo della pagina, ma è possibile cambiare questo URL con qualsiasi cosa si desideri.

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

Dopo aver inserito queste informazioni, fare clic sul pulsante “Salva e inizia a modificare la pagina”.

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

Per personalizzare un blocco, basta fare 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”.

È possibile formattare il testo, modificarne l’allineamento, aggiungere collegamenti e altro ancora utilizzando le impostazioni del menu di sinistra.

Se si seleziona la scheda “Avanzate”, si avrà accesso a un numero ancora maggiore di impostazioni. Ad esempio, è possibile far risaltare il blocco aggiungendo ombreggiature e animazioni CSS.

Per aggiungere nuovi blocchi al progetto, è sufficiente trovare un blocco qualsiasi nel menu di sinistra e trascinarlo sulla pagina. Se si desidera eliminare un blocco, fare clic per selezionarlo e utilizzare l’icona del cestino.

Poiché vogliamo creare un menu di navigazione personalizzato, trasciniamo un blocco “Menu nav” nella pagina.

Questo crea un menu di navigazione con una singola voce predefinita “Informazioni”.

A questo punto è possibile creare un nuovo menu nell’editor di SeedProd o scegliere un menu già creato nella dashboard di WordPress.

Per mostrare un menu creato in precedenza, fate clic sul pulsante “Menu WordPress”. A questo punto è possibile aprire il menu a tendina “Menu” e scegliere una qualsiasi opzione dall’elenco.

Successivamente, è possibile modificare la dimensione dei caratteri, l’allineamento del testo e altro ancora utilizzando le impostazioni del menu di sinistra.

Se invece si desidera creare un nuovo menu all’interno di SeedProd, selezionare il pulsante “Semplice”.

Quindi, fare clic per espandere la voce “Informazioni” che SeedProd crea per impostazione predefinita.

Si aprono alcuni controlli in cui è possibile modificare il testo e aggiungere l’URL a cui la voce di menu sarà collegata.

Per impostazione predefinita, il link sarà “dofollow” e si aprirà nella stessa finestra del browser. È possibile 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 saperne di più su questo argomento, consultate la nostra guida per principianti sui link nofollow.

Per aggiungere altre voci al menu, è sufficiente fare clic sul pulsante “Aggiungi nuova voce”.

È quindi possibile personalizzare ciascuno di questi elementi seguendo la stessa procedura descritta sopra.

Il menu di sinistra contiene anche impostazioni che modificano la dimensione dei caratteri e l’allineamento del testo.

È anche possibile creare un divisorio, che apparirà tra ogni voce del menu.

Dopodiché, passare alla scheda ‘Avanzate’. Qui è possibile modificare i colori, la spaziatura, la tipografia e altre opzioni avanzate del menu.

Man mano che si apportano le modifiche, l’anteprima dal vivo si aggiorna automaticamente, in modo da poter provare diverse impostazioni per vedere cosa si ottiene con il proprio progetto.

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.

Per questo motivo, è consigliabile creare un menu separato da visualizzare sui dispositivi mobili. Ad esempio, si potrebbe utilizzare un layout verticale, in modo che gli utenti mobili non debbano scorrere lateralmente. Potreste anche voler mostrare meno link sui dispositivi smartphone e tablet.

Per creare un menu pronto per i dispositivi mobili, è sufficiente progettare il menu seguendo la stessa procedura descritta sopra. Quindi, selezionare la scheda ‘Avanzate’ e fare clic per espandere la sezione ‘Visibilità del dispositivo’.

È ora possibile attivare/disattivare il cursore “Nascondi sul desktop”.

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

Quando si è soddisfatti dell’aspetto del menu personalizzato, è il momento di pubblicarlo.

È sufficiente fare clic sulla freccia a discesa accanto a “Salva” e selezionare “Pubblica”.

Ora, se visitate il vostro blog WordPress, vedrete il menu di navigazione personalizzato in azione.

Metodo 3: Creare un menu di navigazione personalizzato in WordPress usando il codice (avanzato)

Se non si vuole impostare un plugin per il page builder, è possibile aggiungere un menu di navigazione personalizzato utilizzando il codice. Spesso si trovano guide con istruzioni su come add-on di snippet di codice personalizzati al file functions.php del tema.

Tuttavia, non raccomandiamo questo metodo, poiché anche un piccolo errore nel codice potrebbe causare una serie di errori comuni di WordPress o addirittura rompere completamente il sito. Inoltre, quando aggiornerete il tema di WordPress, perderete il codice personalizzato.

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

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, andate su Code Snippets “ Add Snippet nella vostra dashboard di WordPress.

Qui vedrete tutti gli snippet già pronti che potete aggiungere al vostro sito, tra cui uno snippet che vi permette di disabilitare completamente i commenti, di caricare tipi di file che WordPress di solito non supporta, di disabilitare le pagine degli allegati e molto altro ancora.

Per creare il proprio snippet, passare il mouse su “Aggiungi codice personalizzato” e fare clic su “Usa snippet”.

Per iniziare, inserite 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”.

Una volta fatto ciò, è sufficiente incollare 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 del menu al tema, chiamata “Il mio menu personalizzato”. Per utilizzare un nome diverso, è sufficiente modificare lo snippet di codice.

Se si desidera aggiungere più di un menu di navigazione personalizzato al tema, è sufficiente aggiungere una riga in più allo snippet di codice.

Ad esempio, qui stiamo aggiungendo due nuove posizioni di menu al nostro tema, chiamate “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, scorrere fino alle opzioni “Inserimento”. Se non è già selezionata, scegliere il metodo “Inserimento automatico”, in modo che WPCode aggiunga lo snippet in tutto il sito.

Quindi, aprire il menu a tendina “Posizione” e fare clic su “Esegui ovunque”.

Quindi, siete pronti a scorrere fino alla parte superiore dello schermo e a fare clic sulla levetta “Inattivo” per farla diventare “Attivo”.

Infine, fare clic su “Salva” per rendere attivo questo snippet.

Successivamente, andare su Aspetto ” Menu e controllare l’area “Posizione di visualizzazione”.

A questo punto dovrebbe apparire una nuova opzione “Il mio menu personalizzato”.

Ora è possibile aggiungere alcune voci di menu alla nuova posizione. Per ulteriori informazioni, consultare la nostra guida passo-passo su come aggiungere menu di navigazione per principianti.

Quando siete soddisfatti del vostro menu, il passo successivo è aggiungerlo al vostro tema WordPress.

Aggiunta del menu di navigazione personalizzato al 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 o al titolo del sito.

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

Nella dashboard di WordPress, andare su Aspetto ” Editor dei file del tema.

Nel menu di destra, scegliere il template in cui si desidera aggiungere il menu. Ad esempio, se si vuole mostrare il menu di navigazione personalizzato nell’header del sito web, in genere si seleziona il file header.php.

Per trovare il file del modello giusto, consultate la nostra guida su come trovare i file da modificare nel vostro tema WordPress.

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

Ad esempio, nel seguente frammento di codice, stiamo aggiungendo “Il mio menu personalizzato” all’header del tema:

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

Dopo aver aggiunto il codice, fare clic sul pulsante “Aggiorna file” per salvare le modifiche.

Ora, se visitate il vostro sito, vedrete il menu personalizzato in azione.

Per impostazione predefinita, il menu appare come un semplice elenco puntato.

Il menu di navigazione personalizzato può essere adattato al tema di WordPress o al marchio dell’azienda aggiungendo un codice CSS personalizzato al sito.

Per farlo, andare su Aspetto ” Personalizza.

Nel personalizzatore del tema WordPress, fare clic su “CSS aggiuntivi”.

Si apre un piccolo editor di codice in cui è possibile digitare alcuni CSS.

Ora è possibile creare il menu utilizzando la classe CSS aggiunta al template del tema. Nel nostro esempio, questa è .custom_menu_class.

Nel codice seguente, aggiungiamo margini e padding, impostiamo il colore del testo sul nero e disponiamo le voci di 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 personalizzato di WordPress si aggiorna automaticamente.

Ora verrà mostrato l’aspetto del menu con il nuovo stile.

Se siete soddisfatti dell’aspetto del menu, fate clic su “Pubblica” per rendere effettive le modifiche.

Per maggiori informazioni, consultate la nostra guida su come creare i menu di navigazione di WordPress.

Guide per esperti: Fare di più con i menu di navigazione di WordPress

Con WordPress è possibile creare ogni tipo di menu utile e coinvolgente. Per questo motivo, ecco alcune guide di esperti che vi aiuteranno a ottenere ancora di più dai vostri menu di navigazione:

• Come aggiungere icone di immagini ai menu di navigazione in WordPress
• Come aggiungere la logica condizionale ai menu di WordPress (passo dopo passo)
• Come aggiungere le descrizioni dei menu nei temi di WordPress
• Come aggiungere un menu responsive a schermo intero in WordPress
• Come add-onare un Mega Menu sul vostro sito WordPress (passo dopo passo)

Speriamo che questa guida definitiva vi abbia aiutato a capire come aggiungere un menu di navigazione personalizzato in WordPress. Potreste anche voler consultare le nostre guide su come add-on un pulsante nel menu dell’header di WordPress o su come evidenziare una voce di menu in WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.