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é questo è un articolo lungo, abbiamo aggiunto un indice per facilitare la navigazione.
- Iniziare con i menu di navigazione di WordPress
- Aggiungere icone dei social media ai menu di WordPress
- Mostrare menu diversi agli utenti che hanno effettuato l'accesso in WordPress
- Aggiungere logica condizionale ai menu di navigazione
- Stilizzare i menu di navigazione di WordPress
- Aggiungere icone immagine ai menu di navigazione in WordPress
- Aggiungere menu di navigazione personalizzati in WordPress
- Aggiungere un menu a pannello scorrevole nei temi WordPress
- Creare un menu WordPress responsive pronto per dispositivi mobili
- Aggiungere un menu responsive a schermo intero in WordPress
- Aggiungere descrizioni ai menu di navigazione in WordPress
- Come aggiungere argomenti nei menu di navigazione di WordPress
- Come aggiungere menu di navigazione nella barra laterale di WordPress
- Aggiungere menu di navigazione di WordPress in post e pagine
- Aggiungere link NoFollow nei menu di navigazione di WordPress
1. Iniziare con i menu di navigazione di WordPress
Nel web design, un menu di navigazione è un elenco di collegamenti che consente ai visitatori del tuo sito web di visitare diverse pagine e sezioni del tuo sito. Aiuta gli utenti a navigare nel tuo sito, da cui il nome menu di navigazione.
WordPress è dotato di uno strumento integrato che ti consente di creare e utilizzare menu sul tuo sito web. Questo strumento si trova nella pagina Aspetto » Menu nella tua area di amministrazione di WordPress.
Qui puoi creare menu aggiungendo elementi dalla colonna di sinistra alla destra. Puoi aggiungere qualsiasi post, pagina, categoria e link personalizzato di WordPress ai tuoi menu.
Per istruzioni dettagliate, consulta la nostra guida per principianti su come aggiungere menu di navigazione in WordPress.
2. Aggiungere icone dei social media ai menu di WordPress
I menu di WordPress possono anche essere utilizzati per aggiungere pulsanti dei social media al tuo sito web. Questo ti permette di aggiornare facilmente le icone, riorganizzarle e aggiungere nuove icone dei social media quando vuoi.
Il modo più semplice per farlo è utilizzare il plugin Menu Social Icons. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin per WordPress.
Dopo l'attivazione, vai alla pagina Aspetto » Menu. Crea un nuovo menu social e poi nella scheda collegamenti personalizzati dalla colonna di sinistra.
Vedrai le icone dei social media sotto i campi testo del link e URL. Tutto quello che devi fare è fare clic su un'icona dei social media e inserire l'URL del tuo profilo social. Una volta terminato, fai clic sul pulsante aggiungi al menu.
Ripeti questo processo per tutti i profili dei social media che desideri aggiungere. Una volta terminato, seleziona una posizione del menu e quindi fai clic sul pulsante Salva menu.
Per istruzioni più dettagliate, consulta la nostra guida su come aggiungere icone dei social media ai menu di WordPress.
3. Mostra menu diversi agli utenti connessi in WordPress
Se gestisci un sito di appartenenza WordPress, potresti voler mostrare menu diversi ai tuoi utenti connessi. Ecco come puoi ottenerlo facilmente.
Per prima cosa devi creare due menu diversi. Uno per i tuoi utenti connessi e uno per gli utenti non connessi. Puoi nominare questi menu logged-in e logged-out.
Successivamente, devi aggiungere questo codice al file functions.php del tuo tema o a un plugin specifico per il sito.
function my_wp_nav_menu_args( $args = '' ) {
if( is_user_logged_in() ) {
$args['menu'] = 'logged-in';
} else {
$args['menu'] = 'logged-out';
}
return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );
Tutto qui. Ora puoi testare i tuoi menu di navigazione in azione.
Per istruzioni più dettagliate, consulta il nostro tutorial su come mostrare menu diversi agli utenti connessi in WordPress.
4. Aggiungi logica condizionale ai menu di navigazione
Vuoi cambiare i menu in base a determinate condizioni? Come un menu diverso sulla homepage, o nascondere una voce nei singoli post. Ecco come puoi ottenerlo in WordPress.
Per prima cosa devi installare e attivare il plugin If Menu.
Dopo l'attivazione, visita la schermata Aspetto » Menu e fai clic su una voce di menu che desideri modificare. Noterai una nuova opzione per 'Abilita logica condizionale'.
Selezionando questa opzione verranno visualizzate due opzioni a discesa. Puoi selezionare mostra o nascondi per un menu se corrisponde a determinate condizioni. Ad esempio, nascondi una voce di menu se un utente è un amministratore o mostra una voce di menu solo se un utente sta visualizzando un singolo post.
Per istruzioni più dettagliate, consulta il nostro articolo su come aggiungere logica condizionale ai menu di WordPress.
5. Stile dei menu di navigazione di WordPress
Il tuo tema WordPress controlla l'aspetto dei menu di navigazione sul tuo sito web. Utilizzando CSS puoi personalizzare l'aspetto dei menu di navigazione.
Il modo più semplice per farlo è utilizzare il plugin CSS Hero. È un plugin premium per WordPress che ti consente di personalizzare qualsiasi tema WordPress senza scrivere una singola riga di codice (nessun HTML o CSS richiesto). Vedi la nostra recensione di CSS Hero per saperne di più.
Puoi anche stilizzare i tuoi menu di navigazione scrivendo manualmente CSS. Per istruzioni dettagliate, consulta la nostra guida su come stilizzare i menu di navigazione di WordPress.
6. Aggiungere icone immagine ai menu di navigazione in WordPress
Molti siti web popolari utilizzano icone immagine accanto ai loro menu di navigazione per renderli più evidenti. Ecco come puoi aggiungere icone immagine ai menu di navigazione in WordPress.
Innanzitutto, devi installare e attivare il plugin Menu Image. Dopo l'attivazione, vai su Aspetto » Menu. Lì vedrai un'opzione per aggiungere immagini a ciascuna voce del tuo menu esistente.
Puoi anche usare il CSS per aggiungere icone immagine. Per istruzioni dettagliate, consulta la nostra guida su come aggiungere icone immagine ai menu di navigazione in WordPress.
7. Aggiungere menu di navigazione personalizzati in WordPress
La maggior parte dei temi WordPress gratuiti e premium viene fornita con posizioni predefinite per visualizzare i tuoi 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à ‘Il mio menu personalizzato’ per il tuo tema. Puoi vederlo modificando un menu nella pagina Aspetto » Menu.
Per visualizzare il tuo menu personalizzato, dovrai aggiungere questo codice al tuo tema dove desideri visualizzare il menu.
<?php
wp_nav_menu( array(
'theme_location' => 'my-custom-menu',
'container_class' => 'custom-menu-class' ) );
?>
Per istruzioni più dettagliate, consulta il nostro articolo su come aggiungere menu di navigazione personalizzati nei temi WordPress.
8. Aggiungere un menu a pannello scorrevole nei temi WordPress
Vuoi che il menu di navigazione del tuo sito appaia in un pannello scorrevole? L'utilizzo di pannelli scorrevoli rende i tuoi menu più interattivi, meno invadenti 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 passo passo, consulta la nostra guida su come aggiungere un menu a pannello scorrevole nei temi WordPress.
9. Creare un menu WordPress responsive pronto per dispositivi mobili
La maggior parte dei temi WordPress sono responsive e sono dotati di menu di navigazione pronti per dispositivi mobili. Tuttavia, se il tuo tema non gestisce bene i menu di navigazione sui dispositivi mobili, ciò influisce sull'esperienza utente sui dispositivi mobili.
Fortunatamente, ci sono alcuni modi semplici per aggiungere menu responsive pronti per dispositivi mobili senza scrivere codice.
Innanzitutto, devi installare e attivare il plugin Responsive Menu.
Dopo l'attivazione, devi fare clic su 'Menu Responsive' nella barra di amministrazione di WordPress per configurare le impostazioni del plugin.
Seleziona semplicemente una larghezza dopo la quale il menu responsive per dispositivi mobili dovrebbe essere visibile. Dopodiché, devi selezionare un menu di navigazione esistente.
Non dimenticare di fare clic sul pulsante 'Aggiorna Opzioni' per salvare le tue impostazioni. Tutto qui, ora puoi visitare il tuo sito web e ridimensionare la finestra del browser per vedere il menu responsive per dispositivi mobili.
Ci sono molti altri modi per aggiungere un menu responsive per dispositivi mobili. Come un menu che appare con un effetto toggle, un menu a comparsa, e un menu responsive di tipo select. Scopri di più su tutti questi metodi nella nostra guida su come creare un menu WordPress responsive pronto per dispositivi mobili.
10. Aggiungere un menu responsive a schermo intero in WordPress
Hai notato come alcuni siti web popolari 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 codice.
Innanzitutto, devi installare e attivare il plugin DC – Full Screen Responsive Menu. Dopo l'attivazione, devi visitare la pagina Aspetto » DC Fullscreen Menu per configurare le impostazioni del plugin.
Qui puoi scegliere un menu, il colore di sfondo e del testo, e un font Google per il tuo menu a schermo intero.
Fai clic sul pulsante di invio per salvare le tue impostazioni. Ora puoi visitare il tuo sito web per vedere il tuo menu responsive a schermo intero in azione.
Per saperne di più su questo argomento, consulta la nostra guida su come aggiungere un menu responsive a schermo intero in WordPress.
11. Aggiungere descrizioni ai menu di navigazione in WordPress
I menu di navigazione di WordPress sono solitamente solo link di testo che mostrano l'etichetta del link o il testo di ancoraggio. Cosa succederebbe se volessi aggiungere una piccola descrizione o uno slogan per ogni elemento nel tuo menu di navigazione?
Fortunatamente, WordPress offre funzionalità integrate per aggiungere una descrizione a ogni elemento nei tuoi menu di navigazione.
Innanzitutto, dovrai 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 puoi abilitare. Devi selezionare la casella accanto a Descrizione.
Ora scorri verso il basso e fai clic su una voce di menu per modificarla 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 vederle subito. Altrimenti, dovrai modificare i file del tuo tema per visualizzare le descrizioni.
Per istruzioni dettagliate, consulta la nostra guida su come aggiungere descrizioni ai menu nel tuo tema WordPress.
12. Come aggiungere argomenti ai menu di navigazione di WordPress
Ci viene spesso chiesto come aggiungere argomenti del blog ai menu di navigazione in WordPress. Molti principianti presumono di dover creare pagine per ogni argomento per poterli aggiungere ai menu.
Ciò di cui hai realmente bisogno sono le categorie. Categorie e tag sono tassonomie integrate in WordPress che ti consentono di ordinare i contenuti in argomenti pertinenti.
Aggiungi i tuoi articoli nelle categorie pertinenti e poi vai alla pagina Aspetto » Menu. Fai clic sulla scheda categorie per espanderla e quindi seleziona le categorie che desideri visualizzare nei tuoi menu di navigazione.
Per maggiori dettagli, consulta il nostro articolo su come aggiungere argomenti nei menu di navigazione di WordPress.
13. Come aggiungere menu di navigazione in una barra laterale di WordPress
I temi di WordPress di solito hanno menu di navigazione in alto o in basso. Tuttavia, puoi anche creare e aggiungere menu alla barra laterale del tuo WordPress.
Visita semplicemente la pagina Aspetto » Widget e aggiungi il widget 'Menu personalizzato' alla tua 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. Aggiungere un menu di navigazione di WordPress in post e pagine
Di solito i menu di navigazione vengono visualizzati 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 faresti.
Innanzitutto, devi installare e attivare il plugin Menu Shortcode. Dopo l'attivazione, modifica il post o la pagina in cui desideri visualizzare il tuo menu e aggiungi questo shortcode:
[listmenu menu="Il Tuo Nome Menu"]
Non dimenticare di sostituire 'Il Tuo Nome 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 menu di navigazione WordPress in post o pagine.
15. Aggiungere link NoFollow nei menu di navigazione di WordPress
In genere, il menu di navigazione del tuo sito contiene link ai tuoi post e alle tue pagine. Tuttavia, a volte potresti dover aggiungere un link a un sito esterno.
Molti esperti SEO consigliano di aggiungere l'attributo rel="nofollow" ai link esterni. Ecco come aggiungere l'attributo nofollow ai link nei menu di navigazione di WordPress.
Innanzitutto, devi visitare la pagina Aspetto » Menu e quindi fare clic sul pulsante Opzioni Schermata nell'angolo in alto a destra dello schermo.
Questo aprirà un menu in cui dovrai selezionare le caselle accanto a Relazione del link (XFN) e Opzioni di destinazione del link.
Ora fai clic sulla voce di menu che desideri modificare. Noterai due nuove opzioni, Relazione del link e Apri link in una nuova finestra/scheda.
Devi inserire nofollow nell'opzione relazione del link. Puoi anche selezionare l'opzione apri link in una nuova finestra/scheda se lo desideri.
Fai clic sul pulsante Salva menu per memorizzare le modifiche. Ora questo particolare link nel tuo menu di navigazione di WordPress avrà l'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 ti abbia aiutato a trovare i migliori tutorial per padroneggiare i menu di navigazione di WordPress. Potresti anche voler consultare il nostro elenco di 24 plugin WordPress indispensabili per siti web aziendali.
Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Jiří Vaněk
Mi piace molto e sono incuriosito dal tuo punto numero 3 nel tutorial. Ho un sito di appartenenza che utilizza MemberPress, e l'idea che gli utenti connessi possano avere un menu di navigazione diverso è fantastica perché posso aggiungere contenuti premium al menu che gli utenti normali non dovrebbero vedere. Sono anche sorpreso da quante funzionalità siano nascoste nel pannello Aspetto » Menu. Non avevo idea di quanto potesse essere utile a questo riguardo.
ERFmama
Thank you so much for a fantastic overview! I’ve learned a few new things!
