15 migliori tutorial per padroneggiare i menu di navigazione WordPress

Stai cercando i migliori tutorial per lavorare con i menu di navigazione di WordPress? I menu di navigazione di WordPress ti consentono di personalizzare e gestire facilmente i menu sul tuo sito web. In questo articolo, ti mostreremo i migliori tutorial per padroneggiare i menu di navigazione di WordPress.

Poiché si tratta di un lungo articolo, abbiamo aggiunto un elenco di contenuti per una navigazione più semplice.

1. Introduzione ai menu di navigazione di WordPress
2. Aggiungi icone di social media ai menu di WordPress
3. Mostra diversi menu agli utenti connessi in WordPress
4. Aggiungi logica condizionale ai menu di navigazione
5. Styling dei menu di navigazione WordPress
6. Aggiungi icone di immagini con menu di navigazione in WordPress
7. Aggiungi menu di navigazione personalizzati in WordPress
8. Aggiungi il menu del pannello scorrevole nei temi di WordPress
9. Creazione di un menu WordPress reattivo pronto per il mobile
10. Aggiungi un menu di risposta a schermo intero in WordPress
11. Aggiunta della descrizione con i menu di navigazione in WordPress
12. Come aggiungere argomenti nei menu di navigazione di WordPress
13. Come aggiungere menu di navigazione nella barra laterale di WordPress
14. Aggiungi il menu di navigazione di WordPress in Post e pagine
15. Aggiungi collegamenti NoFollow nei menu di navigazione di WordPress

1. Introduzione ai menu di navigazione di WordPress

Nel web design, il menu di navigazione è un elenco di collegamenti che consente ai visitatori del tuo sito web di visitare diverse pagine e sezioni sul tuo sito web. Aiuta gli utenti a navigare nel tuo sito Web, da qui il menu di navigazione del nome.

WordPress è dotato di uno strumento integrato che ti consente di creare e utilizzare i menu sul tuo sito web. Questo strumento si trova a Aspetto »Menu pagina nell'area amministrativa di WordPress.

Qui puoi creare menu aggiungendo elementi dalla colonna a sinistra a destra. Puoi aggiungere qualsiasi post, pagina, categoria e link personalizzati di WordPress ai tuoi menu.

Per istruzioni dettagliate, consulta la nostra guida per principianti su come aggiungere menu di navigazione in WordPress.

2. Aggiungi le icone dei social media ai menu di WordPress

I menu di WordPress possono anche essere utilizzati per aggiungere pulsanti di social media al tuo sito web. Ciò ti consente di aggiornare facilmente le icone, riorganizzarle e aggiungere nuove icone di social media quando vuoi.

Il modo più semplice per farlo è utilizzare il plug-in Menu Icone sociali. Per ulteriori dettagli, consulta la nostra guida passo passo su come installare un plug-in di WordPress.

All'attivazione, dirigiti verso Aspetto »Menu pagina. Crea un nuovo menu social e poi sulla scheda dei link personalizzati dalla colonna di sinistra.

Vedrai le icone dei social media sotto il testo del link e i campi dell'URL. Tutto quello che devi fare è cliccare su un'icona di social media e inserire l'URL del tuo profilo sociale. Quando hai finito, fai clic sul pulsante aggiungi al menu.

Ripeti questa procedura per tutti i profili di social media che vuoi aggiungere. Una volta terminato selezionare una posizione del menu e quindi fare clic sul pulsante Salva menu.

Per istruzioni più dettagliate consulta la nostra guida su come aggiungere icone di social media ai menu di WordPress.

3. Mostra diversi menu agli utenti connessi in WordPress

Se si esegue un sito di appartenenza a WordPress, è possibile che si desideri mostrare menu diversi agli utenti che hanno effettuato l'accesso. Ecco come puoi ottenere facilmente questo.

Per prima cosa devi creare due menu diversi. Uno per gli utenti che hanno effettuato l'accesso e uno per gli utenti che non hanno effettuato l'accesso. È possibile denominare questi menu registrati e disconnessi.

Successivamente, è necessario aggiungere questo codice al file functions.php del proprio tema o a un plug-in specifico del sito.

 function my_wp_nav_menu_args ($ args = ") if (is_user_logged_in ()) $ args ['menu'] = 'logged-in'; else $ args ['menu'] = 'disconnessi'; return $ args; add_filter ('wp_nav_menu_args', 'my_wp_nav_menu_args'); 

È tutto. Ora puoi testare i tuoi menu di navigazione in azione.

Per istruzioni più dettagliate consulta il nostro tutorial su come mostrare diversi menu agli utenti registrati in WordPress.

4. Aggiungi logica condizionale ai menu di navigazione

Vuoi cambiare menu in base a determinate condizioni? Come un altro menu sulla home page o nascondere un elemento su singoli post. Ecco come puoi ottenere ciò in WordPress.

Per prima cosa è necessario installare e attivare il plug-in If Menu.

Dopo l'attivazione, visita Appearabnce »Menu schermo e fare clic su una voce di menu che si desidera modificare. Noterai una nuova opzione per "Abilita logica condizionale".

Selezionando questa opzione ti verranno mostrate due opzioni a discesa. È possibile selezionare mostrare o nascondere per un menu se corrisponde a determinate condizioni. Ad esempio, nascondi la voce di menu se un utente è un amministratore o mostra una voce di menu solo se un utente visualizza un singolo post.

Per istruzioni più dettagliate, consulta il nostro articolo su come aggiungere la logica condizionale ai menu di WordPress.

5. Styling dei menu di navigazione WordPress

Il tema WordPress controlla l'aspetto dei menu di navigazione sul tuo sito web. Usando i CSS puoi personalizzare l'aspetto dei menu di navigazione.

Il modo più semplice per farlo è usare il plugin CSS Hero. È un plug-in WordPress di alta qualità che consente di personalizzare qualsiasi tema WordPress senza scrivere una singola riga di codice (non è richiesto HTML o CSS). Vedi la nostra recensione su CSS Hero per saperne di più.

Puoi anche personalizzare i menu di navigazione scrivendo manualmente CSS. Per istruzioni dettagliate, consulta la nostra guida su come personalizzare i menu di navigazione di WordPress.

6. Aggiungi icone di immagini con menu di navigazione in WordPress

Molti siti Web popolari utilizzano le icone di immagine accanto ai loro menu di navigazione per renderli più evidenti. Ecco come è possibile aggiungere icone immagine con i menu di navigazione in WordPress.

Innanzitutto, è necessario installare e attivare il plug-in Image del menu. Dopo l'attivazione, vai su "Menu" Aspetto. Qui vedrai un'opzione per aggiungere immagini con ogni voce nel tuo menu esistente.

Puoi anche usare i CSS per aggiungere icone di immagini. Per istruzioni dettagliate, consulta la nostra guida su come aggiungere icone immagine con i menu di navigazione in WordPress.

7. Aggiungi menu di navigazione personalizzati in WordPress

La maggior parte dei temi WordPress gratuiti e premium sono dotati di posizioni predefinite per visualizzare i menu di navigazione. Tuttavia, puoi anche aggiungere menu di navigazione personalizzati ai tuoi temi.

Per prima cosa dovrai registrare il tuo nuovo menu di navigazione aggiungendo questo codice al file functions.php del tuo tema.

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

Questo codice creerà 'My Custom Menu' per il tuo tema. Puoi vedere questo modificando un menu su Aspetto »Menu pagina.

Per visualizzare il tuo menu personalizzato, dovrai aggiungere questo codice al tema in cui desideri visualizzare il menu.

  'my-custom-menu', 'container_class' => 'custom-menu-class')); ?> 

Per istruzioni più dettagliate, consulta il nostro articolo su come aggiungere menu di navigazione personalizzati in temi WordPress.

8. Aggiungi il menu del pannello scorrevole nei temi di WordPress

Vuoi mostrare il menu di navigazione del tuo sito è un pannello slide-in? L'utilizzo della diapositiva nei pannelli rende i tuoi menu più interattivi, meno intrusivi e divertenti, specialmente sui dispositivi mobili.

Tuttavia, per aggiungerli avrai bisogno di una comprensione di livello medio di JavaScript, temi WordPress e CSS.

Per istruzioni dettagliate, consulta la nostra guida su come aggiungere un menu del pannello scorrevole in temi WordPress.

9. Creazione di un menu WordPress reattivo predisposto per il Mobile

La maggior parte dei temi WordPress sono reattivi e sono dotati di menu di navigazione predisposti per dispositivi mobili. Tuttavia, se il tuo tema non gestisce bene i menu di navigazione sui dispositivi mobili, influisce sull'esperienza utente sui dispositivi mobili.

Fortunatamente, ci sono alcuni modi semplici per aggiungere menu reattivi pronti per il mobile senza scrivere alcun codice.

Innanzitutto, è necessario installare e attivare il plug-in del menu di risposta.

Dopo l'attivazione, è necessario fare clic su "Menu di risposta" nella barra di amministrazione di WordPress per configurare le impostazioni del plug-in.

Basta selezionare una larghezza dopo la quale dovrebbe essere visibile il menu di risposta mobile. Successivamente è necessario selezionare un menu di navigazione esistente.

Non dimenticare di fare clic sul pulsante "Opzioni di aggiornamento" per memorizzare le tue impostazioni. È tutto ciò che puoi ora visitare il tuo sito Web e ridimensionare lo schermo del browser per vedere il menu di risposta del cellulare.

Esistono molti altri modi per aggiungere un menu di risposta mobile. Come un menu che appare con un effetto alternato, una diapositiva nel menu e un menu di scelta rapida. Scopri di più su tutti loro nella nostra guida su come creare un menu WordPress reattivo predisposto per dispositivi mobili.

10. Aggiungi un menu di risposta a schermo intero in WordPress

Hai notato come alcuni siti Web famosi utilizzano un menu di navigazione a schermo intero? Di solito richiede un uso creativo di JavaScript e CSS. Fortunatamente, puoi farlo in WordPress senza scrivere alcun codice.

Innanzitutto, è necessario installare e attivare DC - Menu a schermo intero reattivo. Dopo l'attivazione, è necessario visitare Aspetto "DC Menu a schermo intero pagina per configurare le impostazioni del plugin.

Qui puoi scegliere un menu, il colore dello sfondo e del testo e il carattere di Google per il menu a schermo intero.

Fare clic sul pulsante di invio per memorizzare le impostazioni. Ora puoi visitare il tuo sito Web per vedere in azione il tuo menu reattivo a schermo intero.

Per ulteriori informazioni su questo argomento, consulta la nostra guida su come aggiungere un menu reattivo a schermo intero in WordPress.

11. Aggiunta della descrizione con i menu di navigazione in WordPress

I menu di navigazione di WordPress sono in genere solo collegamenti testuali che mostrano l'etichetta del collegamento o il testo di ancoraggio. Cosa fare se si desidera aggiungere una piccola descrizione o una riga di tag per ciascun elemento nel menu di navigazione?

Fortunatamente, WordPress è dotato di funzionalità integrate per aggiungere una descrizione ad ogni elemento nei menu di navigazione.

Innanzitutto, è necessario abilitare l'elemento delle descrizioni. Fai clic sul pulsante Opzioni schermo nell'angolo in alto a destra dello schermo.

Questo mostrerà un elenco di caselle e opzioni che è possibile abilitare. È necessario selezionare la casella accanto a Descrizione.

Ora scorri verso il basso e fai clic su una voce di menu per modificarlo e vedrai un'opzione per aggiungere una descrizione.

Aggiungi la tua descrizione e fai clic sul pulsante Salva menu.

Se il tuo tema supporta le descrizioni dei menu, sarai in grado di vederli subito. Altrimenti, dovrai modificare i file del tema per mostrare le descrizioni.

Per istruzioni dettagliate, consulta la nostra guida su come aggiungere descrizioni dei menu nel tuo tema WordPress.

12. Come aggiungere argomenti nei menu di navigazione di WordPress

Spesso ci viene chiesto come aggiungere argomenti del blog ai menu di navigazione in WordPress. Molti principianti pensano che debbano creare pagine per ogni argomento per poterle aggiungere ai menu.

Ciò di cui hai effettivamente bisogno sono le categorie. Le categorie e i tag sono costruiti in tassonomie WordPress che consentono di ordinare i contenuti in argomenti pertinenti.

Aggiungi i tuoi articoli in categorie pertinenti e poi vai a Aspetto »Menu pagina. Fare clic sulla scheda delle categorie per espanderla e quindi selezionare le categorie che si desidera visualizzare nei menu di navigazione.

Per ulteriori dettagli, consulta il nostro articolo su come aggiungere argomenti nei menu di navigazione di WordPress.

13. Come aggiungere menu di navigazione nella barra laterale di WordPress

I temi WordPress di solito hanno menu di navigazione in alto o in basso. Tuttavia, puoi anche creare e aggiungere menu nella barra laterale di WordPress.

Basta visitare Aspetto »Widget pagina e aggiungi il widget "Menu personalizzato" alla barra laterale. Per istruzioni dettagliate, consulta la nostra guida su come aggiungere e utilizzare i widget in WordPress.

Dopo aver aggiunto il widget a una barra laterale, puoi selezionare un menu dall'opzione a discesa. Non dimenticare di fare clic sul pulsante Salva per memorizzare le tue impostazioni.

14. Aggiungi il menu di navigazione di WordPress in Post e pagine

Solitamente i menu di navigazione sono mostrati nell'intestazione o nella barra laterale di un sito web. Tuttavia, a volte potresti voler aggiungere un menu all'interno di un post o di una pagina di WordPress. Ecco come lo faresti.

Innanzitutto, è necessario installare e attivare il plug-in Menu Shortcode. Dopo l'attivazione, modifica il post o la pagina in cui desideri visualizzare il menu e aggiungi questo shortcode:

[menu elenco = "Nome menu"]

Non dimenticare di sostituire "Nome del tuo menu" con il nome del tuo menu di navigazione. Salva o pubblica il tuo post e quindi fai clic sul pulsante di anteprima.

Per maggiori dettagli, consulta la nostra guida su come aggiungere il menu di navigazione di WordPress nei post o nelle pagine.

15. Aggiungi collegamenti NoFollow nei menu di navigazione di WordPress

In genere, il menu di navigazione del tuo sito contiene collegamenti ai tuoi post e alle tue pagine. Tuttavia, a volte potrebbe essere necessario aggiungere un collegamento a un sito esterno.

Molti esperti SEO raccomandano di aggiungere attributo rel = "nofollow" a link esterni. Ecco come si aggiungerà l'attributo nofollow ai collegamenti nei menu di navigazione di WordPress.

Per prima cosa, devi visitare Aspetto »Menu pagina e quindi fare clic sul pulsante Opzioni schermo nell'angolo in alto a destra dello schermo.

Ciò porterà giù un menu in cui è necessario selezionare le caselle accanto a Link Relationship (XFN) e Link Target options.

Ora fai clic sulla voce di menu che desideri modificare. Noterai due nuove opzioni, Link Relationship e Apri link in una nuova finestra / scheda.

Devi entrare non seguire nell'opzione relazione di collegamento. Se lo desideri, puoi anche controllare l'opzione Apri link in nuova finestra / scheda.

Fare clic sul pulsante del menu di salvataggio per memorizzare le modifiche. Ora questo particolare link nel tuo menu di navigazione WordPress avrà attributo rel = "nofollow" aggiunto.

Per istruzioni più dettagliate, consulta il nostro tutorial su come aggiungere link nofollow nei menu di navigazione di WordPress.

Speriamo che questo articolo abbia aiutato a trovare i migliori tutorial per padroneggiare i menu di navigazione di WordPress. Potresti anche voler vedere il nostro elenco di 24 plug-in WordPress per siti Web aziendali.

Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi anche trovarci su Twitter e Facebook.