Come generare un menu della barra laterale comprimibile in WordPress

Pubblicato: 2022-04-12


Vuoi sviluppare un menu della barra laterale comprimibile in WordPress?

Un menu comprimibile può offrire ai visitatori del tuo sito Internet un modo semplice per accedere a molti collegamenti in entrata, senza ingombrare la barra laterale. È fantastico per grandi siti Web, negozi di e-commerce o qualsiasi sito Internet che ha un formato extra complesso.

In questo post, ti mostreremo come produrre comodamente un menu della barra laterale comprimibile in WordPress.

How to Create a Collapsible Sidebar Menu in WordPress (The Easy Way)

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

I menu più accoglienti presentano un'accessibilità diretta a tutti i collegamenti ipertestuali che i visitatori del sito devono avere. Anche così, questo può essere difficile per i siti web che hanno molte pagine o un formato molto più complicato.

Credi in un importante rivenditore di eCommerce che ha molte classi e sottocategorie di prodotti o servizi, come Amazon.

Visualizzare ogni singola classificazione di oggetti in un menu normale non sarebbe un ottimo concetto. Molto probabilmente gli acquirenti dovranno scorrere il menu per scoprire il gruppo a cui sono incuriositi.

È proprio qui che entrano in gioco i menu pieghevoli. Questi menu organizzano il loro contenuto scritto in una connessione madre o padre-piccolo. Se il cliente fa clic su un elemento di mamma o papà in un menu comprimibile, si svilupperà per visualizzare tutti i contenuti per bambini di quel genitore.

The Guardian fa uso di un menu comprimibile per la sua pagina web cellulare.

An example of a collapsible menu.

I menu comprimibili sono in alcuni casi chiamati menu espandibili. Questo è il motivo per cui le loro sezioni uniche crescono quando un cliente fa clic su di esse.

Per impostazione predefinita, i menu comprimibili nascondono molti contenuti e complessità ai visitatori del sito. Questo è molto più accogliente per il consumatore rispetto allo scorrere per mezzo di un elenco prolungato di tipi e sottocategorie.

Detto questo, diamo un'occhiata a come puoi creare facilmente un menu della barra laterale comprimibile sul tuo sito Web WordPress.

Come generare un menu della barra laterale comprimibile in WordPress

Puoi creare un menu della barra laterale comprimibile in WordPress applicando il plug-in del menu della fisarmonica di Bellows.

Il menu a fisarmonica di Bellows fornisce un utile shortcode in modo da poter posizionare il menu comprimibile su qualsiasi pagina Web, pubblicazione o spazio widget, inclusa la barra laterale.

A collapsible sidebar menu in WordPress.

Per cominciare, dovrai configurare e attivare il plugin. Se devi avere supporto, assicurati di vedere le nostre informazioni su come inserire un plugin per WordPress.

Al momento dell'attivazione, vai alla pagina del sito Web Aspetto generale »Menu nella dashboard di WordPress.

Creating a menu in the WordPress dashboard.

Per iniziare, seleziona un nome per il tuo menu nell'area "Nome menu". I visitatori del tuo sito web non vedranno l'identificativo perché è solo per il tuo riferimento personale. Quindi puoi semplicemente fare clic sul pulsante del menu Produci.

In seguito, puoi selezionare le pagine Web che desideri aumentare nel menu comprimibile. Per impostazione predefinita, WordPress mostra solo le tue pagine Web più moderne. Se vuoi vedere un elenco di tutte le pagine del tuo sito web, clicca sulla scheda Check out All.

Adding pages to your WordPress menu.

In alternativa, puoi fare clic su Scegli tutto. Questo incorporerà tutte le tue pagine web nel menu comprimibile.

Dopo che sei soddisfatto del tuo assortimento, fai semplicemente clic sul pulsante "Aggiungi al menu". Puoi anche scegliere post, categorie di siti o includere collegamenti unidirezionali personalizzati. Per maggiori informazioni, ricordati di consultare il nostro manuale su come inserire un menu di navigazione in WordPress.

Subito dopo aver incluso tutte le tue diverse pagine web nel menu, puoi spostarle trascinandole e rilasciandole. Questo regolerà la visualizzazione di queste pagine web nel tuo menu comprimibile.

I menu pieghevoli riguardano le interazioni mamma o papà-figlio.

Quando un visitatore fa clic su un prodotto padre o madre nel tuo menu comprimibile, aumenterà per esporre tutto il contenuto figlio.

Per costruire questo matrimonio, usa semplicemente il trascinamento e la caduta per preparare tutte le pagine web del tuo piccolo sotto la loro mamma o papà.

Quindi, prendi quasi tutti i bambini e trascinalo un po' nell'ideale. È quindi possibile avviare questa pagina Web. Questo farà rientrare l'elemento e lo trasformerà in una pagina web per bambini.

Adding posts to the WordPress menu.

Non dimenticare di fare clic sul pulsante Aiuta a salvare le regolazioni quando hai concluso.

Ora vogliamo includere questo menu comprimibile nella barra laterale di WordPress. Per fare ciò, utilizzeremo alcuni codici brevi creati meccanicamente da Bellows Accordion.

Per prendere lo shortcode, vai su Aspetto visivo » Menu a soffietto . Se non è attualmente selezionato, assicurati di decidere nella scheda Presenta tutto.

The collapsible menu shortcode in the WordPress dashboard.

Ora puoi semplicemente fare clic sulla casella Shortcode, che dovrebbe enfatizzare tutto il codice. Ora, duplica questo codice lavorando con la scorciatoia da tastiera Command + c o Ctrl + c.

La prossima mossa sta incollando questo shortcode in un widget, quindi vai a Aspetto generale »Widget . Questo mostrerà tutti i luoghi widgetizzati all'interno del tuo concetto attuale. Le selezioni che vedi potrebbero cambiare, ma i temi WordPress più alla moda sono caratterizzati da una barra laterale.

Configuring the collapsible sidebar menu.

Nel momento in cui hai scoperto la posizione della barra laterale, dagli un semplice clic. Questa porzione ora crescerà.

Per aggiungere un blocco, fai clic sull'icona + e inizia a digitare Shortcode. Quando sembra, scegli il blocco Shortcode.

How to add a widget to the WordPress sidebar.

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

Ora, quando vai al tuo sito web dovresti vedere un nuovo menu della barra laterale comprimibile.

Example of a working collapsible menu

Il plugin Bellows Accordion rende estremamente semplice personalizzare questo menu predefinito. Ad esempio, puoi migliorare la sua combinazione di colori per replicare meglio il marchio del tuo sito.

Se vuoi modificare il menu predefinito, vai semplicemente su Aspetto fisico » Menu a soffietto nella dashboard di WordPress.

Questo menu ha tutte le configurazioni necessarie per personalizzare il tuo menu comprimibile. Ci sono molte impostazioni da dare un'occhiata. Tuttavia, potresti voler iniziare andando su Configurazione primaria »Configurazione di base .

Configuring the look and feel of your WordPress collapsible sidebar menu.

Qui puoi scambiare tra molte sfumature di menu distintive. Puoi anche scegliere se i visitatori del sito possono ampliare o meno molti sottomenu non appena utilizzano le impostazioni di piegatura a fisarmonica.

Per modificare l'allineamento e la larghezza del menu, fare clic sulla scheda "Layout & Position".

Placing the collapsible menu on the WordPress website.

Se desideri visualizzare in anteprima i tuoi miglioramenti in tempo reale, puoi modificare il menu della barra laterale comprimibile nel Personalizzatore di WordPress. Per fare ciò, vai su Aspetto visivo »Personalizza .

Nella barra di sinistra, scegli Soffietto.

Configuring your collapsible menu in the WordPress Customizer.

Proprio qui, otterrai molte impostazioni diverse per la tua barra laterale pieghevole. Consiste nel modificarne la larghezza, l'allineamento e la colorazione del menu della barra laterale.

Speriamo che questo post ti abbia aiutato a capire come produrre un menu della barra laterale comprimibile in WordPress. Puoi anche consultare la nostra guida su come monitorare i lettori della tua pagina web e il miglior software per computer di notifica della forza per far maturare i tuoi visitatori mirati.

Se hai preferito questo articolo, assicurati di iscriverti al nostro canale YouTube per i tutorial sui film WordPress. Puoi anche incontrarci su Twitter e Fb.