Come aggiungere un menu del pannello scorrevole nei temi di WordPress

Se sei uno sviluppatore WordPress o un designer di temi WordPress, potresti voler aggiungere un menu personalizzato nel tuo editor di temi per controllare le opzioni del menu. Tuttavia, la dashboard di amministrazione di WordPress non ha un'opzione di menu del pannello scorrevole per impostazione predefinita . Ciò significa che devi rivolgerti a un plug-in o un modello di terze parti per aggiungere questa funzione ai tuoi temi. Pertanto, oggi spiegheremo come aggiungere un menu del pannello scorrevole nei temi di WordPress.

Menu del pannello scorrevole nei temi WordPress: perché includerlo?

Ci sono molte ragioni per cui includere un pannello laterale può essere importante. Il primo motivo è che i visitatori avranno un tempo più facile per navigare nel tuo sito WordPress se ti prendi il tempo per sviluppare menu intuitivi. Il secondo motivo è che i pannelli scorrevoli sono necessari per i dispositivi mobili. Pertanto, devi assicurarti di averli se vuoi che il tuo sito web funzioni bene sui dispositivi mobili . Tuttavia, se molti degli utenti del tuo sito utilizzeranno dispositivi mobili, testare il layout del menu su questi display più piccoli è essenziale prima di andare live con WordPress. Fortunatamente, se visualizzati su un dispositivo mobile, gli stili predefiniti di molti temi WordPress mostreranno menu ottimizzati per i dispositivi mobili. Un menu reattivo a schermo intero o un menu dinamico del pannello scorrevole nei temi WordPress potrebbe essere un bel tocco per personalizzare ulteriormente la navigazione mobile. Per questo motivo, esaminiamo l'integrazione di un menu a pannelli scorrevoli nei temi di WordPress.

Fase uno: installa il plug-in del menu reattivo

Installare e abilitare il plugin Responsive Menu è il primo passo. Esistono due diverse versioni di questo plugin, una a pagamento e una gratuita . Sebbene la versione a pagamento di Responsive Menu offra alcuni interessanti extra come la logica condizionale e più opzioni del tema, per questo tutorial utilizzeremo il plug-in open source. Dopo aver attivato il menu reattivo, vai su Menu reattivo > Menu. Non appena sei lì, vai sulla barra degli strumenti e premi il pulsante "Crea nuovo menu". Dai un nome al tuo nuovo menu e salva il tuo lavoro. Non preoccuparti se dice che è vuoto.

Fase due: scegli il tema

Il nuovo menu reattivo ti fornirà quindi quattro diverse opzioni di design. Puoi acquistare più temi se lo desideri. Questo tutorial utilizzerà il tema selezionato dal sistema. Quindi, puoi continuare selezionando l'opzione "Avanti". Se non lo hai già fatto, dai un nome al tuo menu reattivo e poi scegli il tipo di menu dalla dashboard di WordPress che vuoi che appaia nella barra laterale. Abbiamo selezionato l'opzione 'Navigazione' per il bene di questo tutorial.

Se desideri che i tuoi visitatori vedano solo il nuovo menu del pannello scorrevole, puoi anche scegliere di nascondere il menu predefinito che appare con il tuo tema WordPress. Per fare ciò, utilizza l'area denominata "Nascondi menu tema" per inserire del codice CSS. Fare clic sul pulsante "Saperne di più" per ulteriori informazioni su come inserire il codice appropriato per il tema scelto. L'edizione Pro aggiunge alcune opzioni di personalizzazione in più per l'utente.

Passaggio tre: configuralo

Dopo aver regolato i parametri a proprio piacimento, è possibile generare il menu facendo clic sul pulsante "Crea menu". Dopo averlo fatto, troverai un'anteprima del tuo sito sulla destra, con le opzioni per passare alla modalità mobile, tablet o desktop in basso . Sulla sinistra, vedrai ulteriori impostazioni per la personalizzazione. Prendi nota della lingua che appare sopra le opzioni del menu. Qui vengono mostrati sia il titolo del menu che una riga di "Contenuto aggiuntivo", come lo etichetta il plug-in.

Seleziona "Menu mobile" e poi "Contenitore" dal menu laterale per apportare modifiche o nascondere il testo. Nell'area del testo del titolo, puoi inserire qualsiasi cosa, da "Menu principale" a "Navigazione". Per disabilitare la barra del titolo, sposta semplicemente l'interruttore con l' etichetta "Titolo" in posizione off. Dopo averlo fatto, vai all'opzione "Contenuti aggiuntivi". Hai la possibilità di disabilitare questa funzione o sostituire il testo con qualsiasi altra cosa. Quando hai finito di personalizzare il menu, non dimenticare di fare clic sul pulsante "Aggiorna" nella parte inferiore della pagina.

Prima di andare in diretta, è importante eseguire alcuni test preliminari. Per assicurarti che tutto funzioni correttamente, ti consigliamo di utilizzare un browser diverso da quelli che utilizzi normalmente per accedere al tuo sito. In questo esempio, abbiamo utilizzato il browser Google Chrome. Per accedere al sito su dispositivi mobili, abbiamo scaricato un'app chiamata " Internet Explore per Android". Abbiamo copiato e incollato l' URL di questo sito nell'app e i risultati sono stati sorprendenti. Abbiamo scoperto che il menu era formattato correttamente sia in orientamento orizzontale che verticale e tutti i collegamenti funzionavano come previsto. Tuttavia, il tuo chilometraggio può variare quando si tratta di dispositivi mobili. Ti invitiamo a testare il tuo menu su quanti più dispositivi e browser possibile prima di pubblicarlo. Se riscontri problemi, ora è il momento di risolverli.

Passaggio cinque: vai in diretta

Una volta che il menu è stato testato e sei soddisfatto che tutto funzioni come previsto, è il momento di renderlo disponibile al pubblico. Fai clic sull'icona del menu nell'angolo in alto a destra del tuo sito e seleziona "Impostazioni menu" dal menu a discesa. Vedrai un elenco di elementi con il titolo "Mobile Menu" nella parte superiore dell'elenco. Qui è dove inserirai l'indirizzo web per la tua pagina Mobile Menu Plugin. Al termine, fai clic su "Salva modifiche" e attendi qualche secondo affinché le modifiche abbiano effetto. Questo è tutto!

Conclusione

Ora che sai come aggiungere un menu del pannello scorrevole nei temi di WordPress, provalo sul tuo sito. E ora, se vuoi aggiornare il tuo sito web con menu aggiuntivi, sai come farlo . Spero che questo articolo ti abbia aiutato ad apprendere una nuova abilità e non ti abbia fatto sentire sopraffatto.