Come aggiungere menu di navigazione personalizzati nei temi di WordPress

Vuoi aggiungere menu di navigazione personalizzati nel tuo tema WordPress? I menu di navigazione sono l’elenco orizzontale dei collegamenti visualizzati nella parte superiore della maggior parte dei siti Web.


Per impostazione predefinita, i temi di WordPress vengono forniti con posizioni e layout di menu predefiniti, ma cosa succede se si desidera aggiungere i propri menu di navigazione personalizzati?

In questo articolo, ti mostreremo come creare e aggiungere facilmente menu di navigazione personalizzati in WordPress, in modo da poterli visualizzare ovunque sul tuo tema.

Aggiunta di menu di navigazione personalizzati nei temi di WordPress

Quando hai bisogno di questo tutorial del menu di navigazione di WordPress?

La maggior parte dei temi WordPress include almeno un punto in cui è possibile visualizzare i collegamenti di navigazione del 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, segui semplicemente la nostra guida per principianti su come aggiungere un menu di navigazione in WordPress.

L’obiettivo di questo tutorial è aiutare gli utenti DIY / intermedi ad aggiungere menu di navigazione personalizzati nei loro temi WordPress.

In questo articolo tratteremo i seguenti argomenti:

    Detto questo, diamo un’occhiata a come aggiungere menu di navigazione WordPress personalizzati nel tuo tema.

    Creazione di menu di navigazione personalizzati nei temi di WordPress

    I menu di navigazione sono una caratteristica dei temi WordPress. Ogni tema può definire le proprie posizioni e il supporto del 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.

    funzione wpb_custom_new_menu () {
    register_nav_menu (‘il mio menu personalizzato’, __ (‘Il mio menu personalizzato’));
    }
    add_action (‘init’, ‘wpb_custom_new_menu’);

    Ora puoi andare a Aspetto »Menu pagina nell’amministratore di WordPress e prova a creare o modificare un nuovo menu. Vedrai “Il mio menu personalizzato” come opzione di localizzazione del tema.

    Menu di navigazione personalizzato aggiunto al tema

    Se si desidera aggiungere più di una nuova posizione nel menu di navigazione, è necessario utilizzare un codice come questo:

    funzione wpb_custom_new_menu () {
    register_nav_menus (
    Vettore(
    ‘my-custom-menu’ => __ (‘Il mio menu personalizzato’),
    ‘menu extra’ => __ (‘Menu extra’)
    )
    );
    }
    add_action (‘init’, ‘wpb_custom_new_menu’);

    Dopo aver aggiunto la posizione del menu, vai avanti e aggiungi alcune voci di menu nell’amministratore di WordPress seguendo il nostro tutorial su come aggiungere menu di navigazione per principianti.

    Questo ci consentirà di passare al passaggio successivo che visualizza il menu nel tema.

    Visualizzazione dei menu di navigazione personalizzati nei temi di WordPress

    Successivamente, dobbiamo visualizzare il nuovo menu di navigazione nel tema WordPress. Il luogo più comune in cui si trovano solitamente i menu di navigazione è nella sezione dell’intestazione di un sito Web subito dopo il titolo o il logo del sito.

    Tuttavia, puoi aggiungere il menu di navigazione ovunque tu voglia.

    Sarà necessario aggiungere questo codice nel file modello del tema in cui si desidera visualizzare il menu.

    <?php
    wp_nav_menu (array (
    ‘theme_location’ => ‘My-custom-menù’,
    ‘container_class’ => ‘custom-menu-class’));
    ?>

    La posizione del tema è il nome che abbiamo selezionato nel passaggio precedente.

    La classe container è la classe CSS che verrà aggiunta al menu di navigazione. Il tuo menu apparirà come un semplice elenco puntato sul tuo sito web.

    Personalizzato visualizzato come semplice elenco

    Puoi usare la classe CSS .custom_menu_class per dare uno stile ai tuoi menu. Ecco un esempio di CSS per aiutarti a iniziare:

    div.custom-menu-class ul {
    margine: 20px 0px 20px 0px;
    list-style-type: none;
    stile elenco: nessuno;
    list-style-image: nessuna;
    text-align: right;
    }
    div.custom-menu-class li {
    imbottitura: 0px 20px 0px 0px;
    display: inline;
    }
    div.custom-menu-class a {
    color: #FFFFFF;
    }

    Menu personalizzato in stile

    Per ulteriori informazioni sullo stile di un menu di navigazione, consulta il nostro tutorial dettagliato su come modellare i menu di navigazione di WordPress

    Aggiunta di un menu di navigazione personalizzato in WordPress tramite Page Builder

    Se stai creando una pagina di destinazione o un layout di pagina iniziale personalizzati, l’utilizzo di un plug-in del generatore di pagine WordPress renderebbe il tutto molto più semplice.

    Ti consigliamo di utilizzare Beaver Builder, che è il miglior costruttore di pagine WordPress sul mercato. Ti consente di creare qualsiasi tipo di layout di pagina utilizzando semplici strumenti di trascinamento della selezione (nessuna codifica richiesta).

    Ciò include anche l’aggiunta di un menu di navigazione personalizzato al layout di pagina.

    Innanzitutto, dovrai installare e attivare il plug-in Beaver Builder. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

    Dopo l’attivazione, è necessario creare una nuova pagina o modificarne una esistente in cui si desidera aggiungere il menu di navigazione. Nella schermata dell’editor dei post, fai clic sul pulsante “Avvia Beaver Builder”.

    Avvia Beaver Builder

    Se si tratta di una nuova pagina, è possibile utilizzare uno dei modelli già pronti forniti con Beaver Builder. Puoi anche modificare subito la tua pagina di uscita.

    Scegli un modello

    Successivamente, è necessario aggiungere il modulo Menu e trascinarlo sulla pagina nel punto in cui si desidera visualizzare il menu.

    Aggiungi il modulo menu alla tua pagina

    Ciò farà apparire le impostazioni del modulo Menu in un popup. Innanzitutto, è necessario selezionare il menu di navigazione che si desidera utilizzare. Puoi sempre creare nuovi menu o modificare un menu esistente visitando Aspetto »Menu pagina nell’area di amministrazione di WordPress.

    Impostazioni del modulo menu

    Puoi rivedere anche altre impostazioni. Beaver Builder ti consente di scegliere colori personalizzati, sfondo e altre proprietà di stile per il tuo menu.

    Al termine, puoi fare clic sul pulsante Salva e visualizzare l’anteprima del menu.

    Anteprima di un menu di navigazione personalizzato aggiunto con Beaver Builder

    Creazione di menu reattivi ottimizzati per dispositivi mobili in WordPress

    Con l’aumento dell’utilizzo dei dispositivi mobili, potresti voler rendere i tuoi menu ottimizzati per i dispositivi mobili aggiungendo uno dei tanti effetti popolari.

    Esempio di menu reattivo

    Puoi aggiungere un effetto di scorrimento (sopra), un effetto a discesa e persino un effetto di attivazione / disattivazione per i menu mobili.

    Abbiamo una guida dettagliata passo-passo su come creare menu WordPress reattivi per dispositivi mobili.

    Fai di più con i menu di navigazione di WordPress

    I menu di navigazione sono un potente strumento di web design. Ti consentono di indirizzare gli utenti alle sezioni più importanti del tuo sito web.

    WordPress ti consente di fare molto di più che visualizzare semplicemente i link nel tuo menu. Prova questi utili tutorial per estendere la funzionalità dei menu di navigazione sul tuo sito WordPress.

    • Come aggiungere icone di immagini con i menu di navigazione in WordPress
    • Come aggiungere la logica condizionale ai menu in WordPress
    • Come aggiungere descrizioni di menu nel tema WordPress
    • Come aggiungere un menu reattivo a schermo intero in WordPress
    • Come aggiungere un mega menu al tuo sito WordPress

    Tutto qui, speriamo che questa guida definitiva ti abbia aiutato a imparare come aggiungere un menu di navigazione in WordPress. Potresti anche voler vedere il nostro elenco dei 25 widget WordPress più utili e il nostro elenco dei plug-in WordPress necessari.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map