How to Create a Collapsible Sidebar Menu in WordPress (The Easy Way)
Tempo di lettura: 6 minuti

Vuoi creare un menu della barra laterale comprimibile in WordPress?

Un menu comprimibile può offrire ai visitatori del tuo sito Web un modo semplice per accedere a molti collegamenti, senza ingombrare la barra laterale. È perfetto per siti Web di grandi dimensioni, negozi di eCommerce o qualsiasi sito con un layout più complesso.

In questo articolo, ti mostreremo come creare facilmente un menu della barra laterale comprimibile in WordPress.

Che cos’è un menu della barra laterale pieghevole (e quando utilizzarne uno)

Più menu di facile utilizzo fornire un facile accesso a tutti i collegamenti di cui i visitatori hanno bisogno. Tuttavia, questo può essere complicato per i siti che hanno molte pagine o un layout più complesso.

Pensa a un grande Negozio di e-commerce che ha molte categorie e sottocategorie di prodotti, come Amazon.

Visualizzare ogni singola categoria di prodotto in un menu standard non sarebbe una buona idea. Gli acquirenti dovrebbero probabilmente scorrere il menu per trovare la categoria a cui sono interessati.

È qui che entrano in gioco i menu comprimibili. Questi menu organizzano il loro contenuto in una relazione genitore-figlio. Se il visitatore fa clic su un elemento principale in un menu comprimibile, si espanderà per visualizzare tutto il contenuto figlio di quel genitore.

Il quotidiano The Guardian utilizza un menu comprimibile per il suo sito mobile.

Un esempio di menu comprimibile.

I menu comprimibili sono talvolta chiamati menu espandibili. Questo perché le loro diverse sezioni si espandono quando un visitatore fa clic su di esse.

Per impostazione predefinita, i menu comprimibili nascondono molti contenuti e complessità ai visitatori. Questo è molto più facile da usare che scorrere un lungo elenco di categorie e sottocategorie.

Detto questo, diamo un’occhiata a come creare facilmente un menu della barra laterale comprimibile sul tuo Sito WordPress.

Come creare un menu della barra laterale pieghevole in WordPress

Puoi creare un menu della barra laterale comprimibile in WordPress usando il file Plugin del menu della fisarmonica a soffietto.

Il menu a fisarmonica di Bellows fornisce un pratico codice breve in modo da poter posizionare il menu comprimibile su qualsiasi pagina, post o area widget, inclusa la barra laterale.

Un menu della barra laterale comprimibile in WordPress.

Innanzitutto, dovrai installare e attivare il plug-in. Se hai bisogno di aiuto, consulta la nostra guida su come installare un plugin per WordPress.

Dopo l’attivazione, vai su Aspetto » Menu pagina nella dashboard di WordPress.

Creazione di un menu nella dashboard di WordPress.

Per iniziare, digita un nome per il tuo menu nel campo “Nome menu”. I visitatori del tuo sito non vedranno il nome poiché è solo per riferimento personale. È quindi possibile fare clic sul pulsante Crea menu.

Successivamente, puoi scegliere le pagine che desideri aggiungere al menu comprimibile. Per impostazione predefinita, WordPress mostra solo le tue pagine più recenti. Se desideri visualizzare un elenco di tutte le pagine del tuo sito Web, fai clic sulla scheda Visualizza tutto.

Aggiunta di pagine al menu di WordPress.

In alternativa, puoi fare clic su Seleziona tutto. Questo aggiungerà tutte le tue pagine al menu comprimibile.

Quando sei soddisfatto della tua selezione, fai clic sul pulsante “Aggiungi al menu”. Puoi anche selezionare post, categorie di blogo aggiungi link personalizzati. Per maggiori dettagli, consulta la nostra guida su come aggiungere un menu di navigazione in WordPress.

Dopo aver aggiunto tutte le tue diverse pagine web al menu, puoi spostarle trascinandole e rilasciandole. Questo cambierà l’ordine di visualizzazione di queste pagine nel tuo menu comprimibile.

I menu pieghevoli sono tutto relazioni genitore-figlio.

Quando un visitatore fa clic su un elemento principale nel tuo menu comprimibile, si espande per rivelare tutto il contenuto figlio.

Per creare questa relazione, usa semplicemente il trascinamento della selezione per disporre tutte le pagine figlie sotto il genitore.

Quindi, prendi ogni bambino e trascinalo leggermente a destra. È quindi possibile rilasciare questa pagina. Questo farà rientrare l’elemento e lo trasformerà in una pagina figlio.

Aggiunta di post al menu di WordPress.

Non dimenticare di fare clic sul pulsante Salva modifiche quando hai finito.

Ora vogliamo aggiungere questo menu comprimibile alla barra laterale di WordPress. Per fare ciò, utilizzeremo uno shortcode creato automaticamente da Bellows Accordion.

Per prendere lo shortcode, vai a Aspetto » Menu a soffietto. Se non è già selezionato, assicurati di selezionare la scheda Mostra tutto.

Lo shortcode del menu comprimibile nella dashboard di WordPress.

Ora puoi fare clic sulla casella Shortcode, che dovrebbe evidenziare tutto il codice. Ora copia questo codice usando la scorciatoia da tastiera Command + c o Ctrl + c.

Il passaggio successivo consiste nell’incollare questo shortcode in un widget, quindi vai a Aspetto » Widget. Questo mostrerà tutte le aree widgetizzate all’interno del tuo tema corrente. Le opzioni che vedi possono variare, ma la maggior parte temi WordPress moderni dispongono di una barra laterale.

Configurazione del menu della barra laterale comprimibile.

Una volta trovata l’area della barra laterale, fai un clic. Questa sezione verrà ora ampliata.

Per aggiungere un blocco, fai clic sull’icona + e inizia a digitare Shortcode. Quando appare, seleziona il blocco Shortcode.

Come aggiungere un widget alla barra laterale di WordPress.

Ora, incolla semplicemente il tuo shortcode del menu comprimibile in questo blocco. Per pubblicare il tuo menu, dovrai fare clic sul pulsante Aggiorna nella parte superiore dello schermo.

Ora, quando visiti il ​​tuo sito dovresti vedere un nuovo menu della barra laterale comprimibile.

Esempio di menu comprimibile funzionante

Il plug-in per fisarmonica a soffietto semplifica la personalizzazione di questo menu predefinito. Ad esempio, potresti cambiarlo combinazione di colori per riflettere meglio il marchio del tuo sito.

Se vuoi modificare il menu predefinito, vai semplicemente su Aspetto » Soffietti Menù nella dashboard di WordPress.

Questo menu ha tutte le impostazioni necessarie per personalizzare il tuo menu comprimibile. Ci sono molte impostazioni da esplorare. Tuttavia, potresti voler iniziare andando a Configurazione principale » Configurazione di base.

Configurazione dell'aspetto grafico del menu della barra laterale comprimibile di WordPress.

Qui puoi cambiare tra diversi colori di menu. Puoi anche scegliere se i visitatori possono espandere più sottomenu contemporaneamente utilizzando le impostazioni di piegatura a fisarmonica.

Per modificare l’allineamento e la larghezza del menu, fai clic sulla scheda “Layout & Position”.

Posizionamento del menu comprimibile sul sito Web di WordPress.

Se preferisci visualizzare in anteprima le modifiche in tempo reale, puoi modificare il menu comprimibile della barra laterale nel Personalizzatore di WordPress. Per fare questo, vai a Aspetto » Personalizza.

Nella barra di sinistra, seleziona Soffietti.

Configurare il tuo menu comprimibile nel Personalizzatore di WordPress.

Qui troverai molte impostazioni diverse per la tua barra laterale pieghevole. Ciò include la modifica della larghezza, dell’allineamento e del colore del menu della barra laterale.

Ci auguriamo che questo articolo ti abbia aiutato a imparare come creare un menu della barra laterale comprimibile in WordPress. Puoi anche consultare la nostra guida su come monitorare i visitatori del tuo sito webe il miglior software di notifica push per far crescere il tuo traffico.

Se ti è piaciuto questo articolo, iscriviti al nostro Canale Youtube per i video tutorial di WordPress. Puoi trovarci anche su Twitter e Facebook.



Source link

Di Simone Serra

Web Designer Freelancer Realizzazione Siti Web Serra Simone Realizzo siti web, portali ed e-commerce con focus specifici sull’usabilità, l’impatto grafico, una facile gestione e soprattutto in grado di produrre conversioni visitatore-cliente. Elaboro siti internet, seguendo gli standard Web garantendo la massima compatibilità con tutti i devices. Sviluppo e-commerce personalizzati, multilingua, geolocalizzati per potervi mettere nelle migliori condizioni di vendita. Posiziono il tuo sito su Google per dare maggiore visibilità alla tua attività sui motori di ricerca con SEO di base o avanzato.