Vuoi aggiungere menu di navigazione personalizzati nel tuo tema WordPress? I menu di navigazione sono l’elenco orizzontale dei link visualizzati in cima alla maggior parte dei siti web.
Di default, i temi WordPress sono dotati di posizioni e layout di menu predefiniti, ma cosa succede se si desidera aggiungere i propri menu di navigazione personalizzati?
In questo articolo, vi mostreremo come creare e aggiungere facilmente menu di navigazione personalizzati in WordPress, in modo da poterli visualizzare ovunque sul vostro tema.
- Quando avete bisogno di questo tutorial sui menu di navigazione di WordPress?
- Creazione di menu di navigazione personalizzati nei temi WordPress
- Visualizzazione dei menu di navigazione personalizzati nei temi WordPress
- Aggiungimento di un menu di navigazione personalizzato in WordPress utilizzando Page Builder
- Creazione di menu responsivi mobile-friendly in WordPress
- Fai di più con i menu di navigazione WordPress
La maggior parte dei temi di WordPress sono dotati di almeno un punto in cui è possibile visualizzare i link di navigazione del vostro sito in un menu.
Puoi gestire le voci di menu da un’interfaccia facile da usare all’interno della tua area di amministrazione di WordPress.
Se stai solo cercando di aggiungere menu di navigazione sul tuo sito web, allora segui semplicemente la nostra guida per principianti su come aggiungere un menu di navigazione in WordPress.
L’obiettivo di questo tutorial è quello di aiutare gli utenti fai da te / intermedi ad aggiungere menu di navigazione personalizzati nei loro temi WordPress.
Copriremo i seguenti argomenti in questo articolo:
- Creazione di un menu di navigazione personalizzato nei temi WordPress
- Visualizzazione del menu di navigazione personalizzato nel tema WordPress
- Aggiungimento di un menu di navigazione personalizzato in WordPress utilizzando page builder
- Creazione di menu responsive mobile-friendly in WordPress
- Altre cose che puoi fare con i menu di navigazione WordPress
Detto questo, diamo un’occhiata a come aggiungere menu di navigazione WordPress personalizzati nel tuo tema.
I menu di navigazione sono una caratteristica dei temi WordPress. Ogni tema può definire le proprie posizioni dei menu e il supporto dei menu.
Per aggiungere un menu di navigazione personalizzato, la prima cosa che devi fare è 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' );
Ora puoi andare alla pagina Aspetto ” Menu nel tuo admin di WordPress e provare a creare o modificare un nuovo menu. Vedrai ‘My Custom Menu’ come opzione di localizzazione del tema.
Se si desidera aggiungere più di una nuova posizione del menu di navigazione, allora è necessario utilizzare un codice come questo:
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' );
Una volta che hai aggiunto la posizione del menu, andare avanti e aggiungere alcune voci di menu nell’amministrazione di WordPress seguendo il nostro tutorial su come aggiungere menu di navigazione per i principianti.
Questo ci permetterà di passare al passo successivo che è la visualizzazione del menu nel tuo tema.
In seguito, abbiamo bisogno di visualizzare il nuovo menu di navigazione nel vostro tema WordPress. Il posto più comune dove i menu di navigazione sono di solito collocati è nella sezione dell’intestazione di un sito web subito dopo il titolo del sito o il logo.
Tuttavia, puoi aggiungere il tuo menu di navigazione ovunque tu voglia.
Avrai bisogno di aggiungere questo codice nel file template del tuo tema dove vuoi visualizzare il tuo menu.
<?phpwp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'custom-menu-class' ) ); ?>
La posizione del tema è il nome che abbiamo selezionato nel passo precedente.
La classe del contenitore è la classe CSS che sarà aggiunta al tuo menu di navigazione. Il tuo menu apparirà come un semplice elenco puntato sul tuo sito web.
Puoi usare la classe CSS .custom_menu_classper dare stile ai tuoi menu. Ecco un esempio CSS per aiutarvi ad iniziare:
div.custom-menu-class ul { margin:20px 0px 20px 0px; list-style-type: none; list-style: none; list-style-image: none; text-align:right;}div.custom-menu-class li { padding: 0px 20px 0px 0px; display: inline;} div.custom-menu-class a { color:#FFFFFF;}
Per saperne di più sullo stile di un menu di navigazione, consultate il nostro tutorial dettagliato su come stilizzare i menu di navigazione di WordPress
Se state creando una landing page personalizzata o un layout di home page, allora l’utilizzo di un plugin WordPress page builder renderebbe il tutto molto più semplice.
Si consiglia di utilizzare Beaver Builder, che è il miglior costruttore di pagine WordPress sul mercato. Consente di creare qualsiasi tipo di layout di pagina utilizzando semplici strumenti di trascinamento (non è richiesta alcuna codifica).
Questo include anche l’aggiunta di un menu di navigazione personalizzato al tuo layout di pagina.
Prima di tutto, è necessario installare e attivare il plugin Beaver Builder. Per maggiori dettagli, vedi la nostra guida passo dopo passo su come installare un plugin per WordPress.
Una volta attivato, è necessario creare una nuova pagina o modificarne una esistente in cui si desidera aggiungere il menu di navigazione. Nella schermata del post editor, clicca sul pulsante ‘Launch Beaver Builder’.
Se si tratta di una nuova pagina, puoi utilizzare uno dei modelli già pronti che vengono forniti con Beaver Builder. Puoi anche modificare subito la tua pagina uscente.
Poi devi aggiungere il modulo Menus e trascinarlo sulla tua pagina nel posto dove vuoi visualizzare il menu.
Questo farà apparire le impostazioni del modulo Menu in un popup. Per prima cosa, devi selezionare il menu di navigazione che vuoi usare. È sempre possibile creare nuovi menu o modificare un menu esistente visitando Appearance ” Menus pagina nell’area di amministrazione di WordPress.
Puoi rivedere anche altre impostazioni. Beaver Builder ti permette di scegliere i colori personalizzati, lo sfondo e altre proprietà di stile per il tuo menu.
Una volta che hai finito, puoi cliccare sul pulsante Salva e vedere l’anteprima del tuo menu.
Con l’aumento dell’uso di dispositivi mobili, potresti voler rendere i tuoi menu mobile-friendly aggiungendo uno dei tanti effetti popolari.
Puoi aggiungere un effetto slide-out (sopra), un effetto dropdown, e anche un effetto toggle per i menu mobili.
Abbiamo una guida dettagliata passo dopo passo su come fare menu WordPress responsive mobile-ready.
I menu di navigazione sono un potente strumento di web design. Ti permettono di puntare gli utenti alle sezioni più importanti del tuo sito web.
WordPress ti permette di fare molto di più della semplice visualizzazione dei link nel tuo menu. Prova questi utili tutorial per estendere la funzionalità dei menu di navigazione sul tuo sito WordPress.
- Come aggiungere icone immagine con i menu di navigazione in WordPress
- Come aggiungere la logica condizionale ai menu in WordPress
- Come aggiungere descrizioni dei menu nel tuo tema WordPress
- Come aggiungere un menu reattivo a schermo intero in WordPress
- Come aggiungere un mega menu al tuo sito WordPress
Questo è tutto, speriamo che questa guida definitiva ti abbia aiutato a imparare come aggiungere un menu di navigazione in WordPress. Potresti anche voler vedere la nostra lista dei 25 widget WordPress più utili, e la nostra lista dei plugin WordPress da avere.
Se ti è piaciuto questo articolo, allora iscriviti al nostro canale YouTube per i video tutorial di WordPress. Potete anche trovarci su Twitter e Facebook.