Come visualizzare una barra laterale diversa per ogni articolo e pagina in WordPress

Vuoi mostrare contenuti diversi nella barra laterale di WordPress per determinati post e pagine?

Una barra laterale standard, valida per tutti, è spesso un'opportunità mancata. Personalizzando la barra laterale per contenuti specifici, puoi aumentare il coinvolgimento degli utenti e le conversioni.

Sebbene questo sembri tecnico, abbiamo visto in prima persona come gli strumenti giusti rendano facile creare e gestire barre laterali diverse per il tuo sito.

In questa guida, ti mostreremo come visualizzare barre laterali diverse per ogni post e pagina in WordPress.

Perché visualizzare una barra laterale diversa per determinate pagine o articoli in WordPress?

Il motivo principale per visualizzare una sidebar diversa è fornire un'esperienza più pertinente e mirata per i tuoi visitatori. Questo aiuta a migliorare il coinvolgimento degli utenti, aumentare le conversioni e rendere il tuo sito più efficace.

Invece di mostrare gli stessi contenuti generici ovunque, puoi personalizzare la sidebar per adattarla alla pagina o al post specifico che un utente sta visualizzando.

Ad esempio, puoi mostrare widget specifici per categoria nei tuoi post del blog, visualizzare informazioni relative ai prodotti nelle pagine del tuo negozio o mostrare i feed dei social media nella tua pagina Chi siamo.

Le sidebar personalizzate ti consentono inoltre di creare un'esperienza più focalizzata presentando collegamenti pertinenti, annunci o pulsanti di invito all'azione.

Detto questo, diamo un'occhiata a 3 metodi per aggiungere barre laterali diverse per post e pagine in WordPress. Puoi utilizzare i collegamenti rapidi qui sotto per passare al metodo che preferisci:

• Method 1: Create a Custom Theme With Different Sidebars for Specific Pages or Posts (Recommended)
• Method 2: Show a Different Sidebar on Certain Pages With a Free Plugin (Classic Themes)
• Method 3: Add Different Sidebars to Specific Templates in WordPress Full-Site Editor (Block Themes)
• Domande frequenti sulle sidebar personalizzate

Metodo 1: Crea un tema personalizzato con barre laterali diverse per pagine o post specifici (Consigliato)

Tra tutti i metodi che abbiamo provato per questo tutorial, consigliamo maggiormente la creazione di un tema personalizzato. Il motivo è che offre la massima flessibilità e controllo sul design del tuo sito WordPress.

Detto questo, suggeriamo di seguire questo metodo solo se sei nelle fasi iniziali della creazione del tuo sito o se sei interessato a cambiare correttamente il tuo tema WordPress. Questo perché cambiare tema può influire in modo significativo sui tuoi contenuti e sul layout esistenti.

Se non vuoi cambiare tema, puoi saltare al metodo 2 (temi classici) o al metodo 3 (temi a blocchi).

Per questo metodo, avrai bisogno di un plugin per la creazione di pagine WordPress.

Sulla base della nostra esperienza nel testare dozzine di costruttori di temi, raccomandiamo di utilizzare uno strumento come SeedProd o Thrive Architect. Offrono un controllo e opzioni di personalizzazione molto maggiori rispetto alle funzionalità integrate di WordPress.

Diversi dei nostri brand partner utilizzano SeedProd perché è facile da usare per i principianti e affidabile. Puoi saperne di più sullo strumento nella nostra recensione di SeedProd.

Passaggio 1: Installa e attiva SeedProd

Per prima cosa, procedi all'installazione del plugin SeedProd sul tuo sito web. Se è la prima volta, consulta la nostra guida per principianti su come installare un plugin WordPress.

Una volta fatto, inserisci la tua chiave di licenza SeedProd nel campo appropriato e fai clic su 'Verifica chiave'.

Passaggio 2: Scegli un kit di modelli di tema

Successivamente, vai su SeedProd » Theme Builder.

Quindi, fai clic sul pulsante 'Theme Template Kits'.

Dovresti ora vedere tutti i kit di modelli di temi disponibili. Sentiti libero di usarne uno qualsiasi come base per il tuo tema personalizzato.

Puoi anche passare il mouse su ogni kit e fare clic sul pulsante della lente d'ingrandimento per visualizzare il tema più da vicino.

Per questo tutorial, consigliamo di scegliere un kit di temi che includa già un design della sidebar.

Questo ti consente di duplicare la 'parte del modello della sidebar' esistente e personalizzarla, il che è molto più veloce che costruirne una nuova da zero.

Ad esempio, il kit di temi Curbside Food Truck ha un modello di post singolo che include già una barra laterale:

Una volta deciso un kit, passa semplicemente il cursore del mouse su di esso.

Quindi, fai clic sull'icona della spunta arancione quando appare.

Ora, attendi qualche istante affinché SeedProd imposti il tuo tema.

Passaggio 3: Duplica e modifica il modello della sidebar

Una volta terminato, dovresti essere reindirizzato nuovamente alla pagina delle impostazioni di ‘Theme Builder’ e vedere che SeedProd ha creato diversi modelli di tema per il tuo sito WordPress.

Ora possiamo iniziare a modificare il tuo modello di tema.

Supponiamo che tu voglia che la barra laterale delle tue pagine di archivio del blog per categoria sia diversa da quella dei tuoi post del blog. In tal caso, devi creare 2 diversi modelli di tema per la barra laterale.

Per prima cosa, trova il modello di tema ‘Sidebar’ nel tuo kit. Questa è la barra laterale predefinita che il tuo tema utilizza quando una pagina richiede una barra laterale.

A scopo illustrativo, duplicheremo questo modello e poi lo modificheremo per renderlo diverso dalla versione originale. Per fare ciò, puoi passare il mouse sopra il modello e fare clic su ‘Duplica’.

Ora dovresti vedere una versione copiata del tuo modello di barra laterale.

Qui, procedi e fai clic su ‘Modifica Design’.

Passaggio 4: Personalizza la tua nuova sidebar

Ora arriverai all'editor di SeedProd. Se il modello della barra laterale appare più largo di quanto ti aspetti, non preoccuparti. La dimensione si adeguerà quando la barra laterale verrà aggiunta a una pagina in seguito.

Nel tema scelto, il modello di barra laterale predefinito visualizza una barra di ricerca, una call-to-action per l'iscrizione alla newsletter, collegamenti alle nostre pagine di categoria del blog e un'anteprima del nostro feed Instagram.

Sostituiremo alcuni di questi elementi. Questi blocchi sono stati organizzati in gruppi o righe, quindi possiamo eliminare più blocchi in una singola riga contemporaneamente anziché rimuoverli uno per uno.

Per fare ciò, puoi semplicemente passare il mouse sopra un elemento finché non appare una linea blu scuro su un intero gruppo di blocchi. Quindi, fai clic sull'icona a forma di cestino ‘Elimina riga’ nella parte superiore dell'elemento.

Per creare una nuova riga, passa il mouse sull'elemento immediatamente sopra dove vuoi che appaia la nuova riga. Quando appare una linea blu scuro, fai clic sull'icona '+' che appare sotto di essa.

Quindi, devi fare clic sull'icona '+' sottostante.

Ora puoi scegliere un layout per la riga.

Sceglieremo la prima opzione perché è la più adatta alle nostre esigenze.

Qui puoi iniziare a divertirti e aggiungere tutti i tipi di blocchi alla tua barra laterale.

SeedProd offre tantissime opzioni tra cui scegliere, da un contatore alla rovescia e un hotspot immagine a una barra di avanzamento e altro ancora. Puoi usare la barra di ricerca o scorrere verso il basso nella scheda 'Blocchi' per trovare il blocco di cui hai bisogno.

Una volta trovato un blocco che ti piace, trascinalo e rilascialo nella riga.

Per esempio, abbiamo deciso di aggiungere il blocco 'Testimonianze'.

Puoi usarlo per mostrare una recensione positiva di un cliente come prova sociale. Se vuoi imparare come aggiungerne uno anche tu, puoi leggere la nostra guida su come aggiungere testimonianze rotanti in WordPress.

Sentiti libero di aggiungere altre righe e blocchi a questo punto.

Dopo aver soddisfatto il design della barra laterale, fai clic sull'icona a forma di freccia accanto al pulsante 'Salva' nell'angolo in alto a destra della pagina. Quindi, fai clic su 'Pubblica'.

Passaggio 5: Aggiungi la nuova sidebar a un modello di pagina

Ora, procediamo e aggiungiamo questa nuova barra laterale a un modello di post o pagina. Per fare ciò, torna su SeedProd » Theme Builder nella tua bacheca di WordPress.

Il kit di temi che stiamo utilizzando ha 2 modelli di tema che presentano una barra laterale: 'Single Post' e 'Archives, Search Results'. Il primo è per i post di WordPress, mentre il secondo è per tutte le pagine di archivio, inclusi gli archivi di categoria, nonché la pagina dei risultati di ricerca.

Entrambi i modelli utilizzano attualmente lo stesso modello di barra laterale.

In questo caso, vogliamo che il modello 'Archives, Search Results' utilizzi la nuova barra laterale che abbiamo appena creato. Quindi individua semplicemente il modello che desideri modificare e fai clic su 'Edit Design'.

Nell'editor di SeedProd, passa il mouse sull'area con la barra laterale e, quando appare una barra degli strumenti arancione sopra di essa, fai clic su di essa.

Il pannello delle impostazioni a sinistra dovrebbe indicare 'Editing: Template Parts'.

Nel menu a discesa Template Part, devi selezionare il modello di barra laterale che hai appena creato.

Ora dovresti vedere che la tua nuova barra laterale è stata aggiunta al modello della tua pagina.

Dopodiché, fai semplicemente clic su 'Salva' per pubblicare le tue modifiche.

Passaggio 6: Attiva il tuo tema SeedProd

A questo punto, puoi creare altre barre laterali e aggiungerle ad altre pagine ripetendo gli stessi passaggi di prima.

Una volta che sei soddisfatto, torna su SeedProd » Theme Builder , e attiva l'impostazione 'Abilita tema SeedProd' finché non dice 'SÌ'. Questo attiverà il tuo tema SeedProd sul tuo sito web.

E questo è tutto!

Ecco come appare la nostra barra laterale personalizzata:

Metodo 2: Mostra una barra laterale diversa su determinate pagine con un plugin gratuito (Temi classici)

La maggior parte dei temi classici di WordPress ha aree sidebar predefinite e solitamente mostrano la stessa sidebar in tutto il tuo sito.

Sebbene questo funzioni, può risultare limitante se desideri visualizzare contenuti unici per diverse sezioni.

Fortunatamente, puoi ottenere facilmente un maggiore controllo utilizzando un plugin gratuito. Ti consigliamo Lightweight Sidebar Manager. Questo plugin ti consente di creare sidebar personalizzate illimitate e assegnarle a post, pagine, categorie specifici e altro ancora.

Passaggio 1: Installa il plugin Lightweight Sidebar Manager

La prima cosa da fare è installare e attivare il plugin Lightweight Sidebar Manager. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Passaggio 2: Crea una nuova sidebar personalizzata

Dopo l'attivazione, devi andare su Aspetto » Barre laterali. Per creare la prima barra laterale, fai clic sul pulsante 'Aggiungi nuova'.

Ora puoi digitare un titolo per la nuova barra laterale di WordPress. Questo è solo per riferimento, quindi puoi usare quello che vuoi.

Fatto ciò, apri il menu a discesa ‘Sidebar da sostituire’. Questa impostazione ti consente di scegliere quali delle aree sidebar predefinite del tuo tema (come ‘Sidebar principale’ o ‘Sidebar blog’) verranno sostituite dalla tua nuova sidebar personalizzata.

Scegli la posizione in cui desideri mostrare la sidebar. Le opzioni che vedi possono variare a seconda del tuo tema WordPress. 

Passaggio 3: Configura le regole di visualizzazione ed esclusione

Ora puoi controllare dove appare la sidebar creando regole di inclusione o esclusione. 

Per creare una regola di inclusione, apri semplicemente il menu a discesa ‘Mostra su’ e scegli le pagine, i post, i tipi di post personalizzati o le categorie in cui desideri utilizzare la sidebar. 

Ad esempio, potresti aggiungere la sidebar a una pagina specifica, come la tua pagina di errore 404, l'archivio autore o la pagina del blog.

Un'altra opzione è utilizzare la sidebar per una particolare pagina, post o categoria selezionando ‘Pagine/Post/Tassonomie specifiche’.

Questo aggiunge una casella in cui puoi digitare la pagina, il post o la categoria.

Per creare altre regole di inclusione, fai semplicemente clic sul pulsante ‘Aggiungi regola di visualizzazione’.

Questo aggiunge una sezione in cui è possibile creare la nuova regola di inclusione.

Se preferisci, puoi creare regole di esclusione. Ad esempio, potresti voler mostrare la barra laterale su ogni pagina tranne la homepage. 

Puoi anche combinare regole di inclusione ed esclusione per controllare esattamente dove appare la barra laterale sul tuo blog WordPress.

Per creare una regola di esclusione per la posizione della barra laterale, fai clic sul pulsante ‘Aggiungi regola di esclusione’.

Nella nuova sezione ‘Non visualizzare su’, apri il menu a discesa e seleziona la pagina o il post che non dovrebbe utilizzare questa barra laterale. 

Puoi anche escludere la barra laterale dalle pagine WordPress che hanno una categoria specifica seguendo lo stesso processo descritto sopra.

Passaggio 4: Imposta la visibilità per ruolo utente (facoltativo)

Dopo aver deciso dove apparirà la barra laterale, potresti voler mostrare contenuti diversi a utenti diversi.

Ad esempio, se hai un sito di appartenenza, potresti voler utilizzare una barra laterale diversa per i visitatori rispetto ai membri registrati. 

Per fare ciò, apri il menu a discesa ‘Utente’ e scegli un ruolo dal menu a discesa. Ora, solo le persone con questo specifico ruolo utente vedranno la barra laterale. 

Infine, potresti voler digitare una descrizione opzionale. Questa apparirà solo nella dashboard di WordPress, quindi è un buon modo per condividere informazioni con altri amministratori o utenti.

Se hai intenzione di creare molte barre laterali, puoi anche utilizzare questo campo per lasciare note e promemoria utili.

Quando sei soddisfatto delle informazioni inserite, fai semplicemente clic su ‘Pubblica’.

Passaggio 5: Aggiungi widget alla tua nuova sidebar

Fatto ciò, vai su Aspetto » Widget. Ora vedrai tutte le aree widget che il tuo tema supporta per impostazione predefinita, più la nuova barra laterale che hai creato nel passaggio precedente.

Ora puoi procedere e aggiungere widget alla barra laterale, proprio come qualsiasi altra sezione di widget.

Per istruzioni dettagliate, consulta la nostra guida su come aggiungere e utilizzare i widget di WordPress. 

Quando sei soddisfatto di come è impostata la barra laterale, fai clic su 'Aggiorna'.

Ora, se visiti il tuo blog WordPress, vedrai la nuova barra laterale attiva.

Per creare altre barre laterali del tema, continua semplicemente a ripetere questi passaggi. 

Metodo 3: Aggiungi barre laterali diverse a modelli specifici nell'editor completo del sito di WordPress (Temi a blocchi)

Se utilizzi un tema a blocchi, come il tema Twenty Twenty-Four o Hestia, puoi utilizzare l'editor del sito completo per creare sidebar personalizzate e posizionarle dove preferisci.

Utilizzeremo il tema Twenty Twenty-Four per dimostrare questo metodo.

Il bello dei temi a blocchi è che utilizzano tutti lo stesso strumento standard: l'Editor del sito completo. Sebbene i modelli specifici all'interno di ciascun tema possano essere diversi, il processo di modifica è coerente.

Ciò significa che non hai bisogno di un plugin speciale per la sidebar per aggiungere una sidebar diversa alle tue pagine o ai tuoi post.

Passaggio 1: Apri l'editor del sito completo

Innanzitutto, vai su Aspetto » Editor nella tua amministrazione di WordPress.

Qui vedrai alcuni menu per personalizzare il tuo tema a blocchi.

Per creare una nuova barra laterale, devi selezionare 'Pattern'.

Passaggio 2: Duplica la parte del modello della sidebar

Ora, fai clic su 'Tutte le parti del modello'.

Le parti del modello sono blocchi di contenuto riutilizzabili, come un'intestazione, un piè di pagina o una sidebar, che possono apparire in più pagine del tuo sito.

Dovresti vedere una parte del modello chiamata ‘Sidebar’. Fai clic sul menu con tre puntini, quindi seleziona ‘Duplica’. Questo creerà una copia della parte del modello della sidebar che potrai quindi personalizzare.

Nel nuovo popup, dai alla tua nuova barra laterale un nome per identificarla facilmente in seguito.

Nella sezione ‘Area’, seleziona ‘Generale’. Una volta fatto, fai semplicemente clic su ‘Duplica’.

Passaggio 3: Personalizza la nuova sidebar

Dovresti ora vedere la tua barra laterale appena duplicata nell'elenco delle parti del modello.

Fai semplicemente clic sulla miniatura per aprire l'interfaccia di modifica.

Ora, puoi iniziare a personalizzare la tua barra laterale, aggiungere altri blocchi o configurarli per adattarli al design del tuo sito web. L'editor del sito completo funziona allo stesso modo dell'editor a blocchi, nel senso che devi solo trascinare e rilasciare i blocchi sulla parte del modello.

Nel nostro caso, abbiamo deciso di visualizzare i nostri articoli più recenti, un pulsante di invito all'azione per iscriversi alla nostra newsletter e un divisore di forma per separare questi elementi.

Una volta soddisfatto di come appare la barra laterale, fai clic sul pulsante 'Salva'.

Passaggio 4: Aggiungi la nuova barra laterale a un modello di pagina

Ora dobbiamo aggiungere questa nuova barra laterale a un modello di pagina.

Innanzitutto, torna al menu principale dell'editor completo del sito. Quindi, fai clic su 'Modelli'.

Il modello Twenty Twenty-Four ha diversi modelli di pagina con una barra laterale, ma utilizzano tutti la stessa parte del modello della barra laterale. Cambiamone uno con la nostra barra laterale appena creata.

Per fare ciò, seleziona un modello di pagina con una barra laterale. Nel nostro caso, selezioneremo 'Pagina con barra laterale' in modo che la barra laterale nelle pagine normali sia diversa da quella degli articoli singoli di WordPress.

Nell'interfaccia di modifica, fai clic sulla sezione 'Barra laterale'.

Nella barra degli strumenti dei blocchi, fai clic sul menu a tre punti e seleziona 'Elimina' per rimuovere la vecchia barra laterale.

Successivamente, fai clic sull'icona '+' nella stessa sezione.

Dopo di che, individua e seleziona 'Parte del modello'.

Una volta fatto ciò, procedi e fai clic su 'Scegli'.

Questo ti permetterà di scegliere la barra laterale che hai appena creato.

Apparirà un nuovo popup che ti mostrerà le diverse parti del modello che il tema ha.

Qui, fai semplicemente clic sulla nuova parte del modello della barra laterale.

A questo punto, puoi continuare a personalizzare il modello se necessario.

Quindi, fai semplicemente clic su 'Salva'.

Hai ora personalizzato un modello di pagina e aggiunto una barra laterale personalizzata.

Passaggio 5: Assegna il nuovo modello a una pagina

Tuttavia, dobbiamo assicurarci che questo modello venga effettivamente utilizzato sul tuo sito web. Per fare ciò, torna al menu principale dell'editor completo del sito e fai clic su 'Pagine'.

Successivamente, scegli una pagina a cui desideri aggiungere la barra laterale.

Ai fini dell'esempio, utilizzeremo la nostra pagina 'Informativa sulla privacy'.

Ora, fai clic sull'icona delle impostazioni in alto a sinistra della pagina e fai clic su 'Pagine' nel pannello delle impostazioni della pagina.

Dopodiché, devi selezionare 'Scambia modello'.

Una volta fatto ciò, apparirà un popup.

Qui, seleziona semplicemente il modello di pagina con la nuova barra laterale.

E questo è tutto! Sentiti libero di ripetere gli stessi passaggi per creare una nuova barra laterale personalizzata e implementarla su diverse pagine e articoli.

Ecco come appare la nostra pagina di esempio della privacy policy con la nuova barra laterale:

Domande frequenti sulle sidebar personalizzate

Ecco alcune domande che i nostri lettori hanno posto frequentemente riguardo all'aggiunta di una barra laterale personalizzata a specifici articoli o pagine in WordPress:

1. Come posso creare una barra laterale unica solo per un post specifico?

Se stai utilizzando un plugin come Lightweight Sidebar Manager, puoi creare una nuova barra laterale e impostare la regola 'Mostra su' su 'Pagine/Articoli/Tassonomie specifiche'. Quindi, digita semplicemente il nome dell'articolo esatto su cui vuoi che appaia.

Se stai utilizzando un tema builder come SeedProd, puoi creare un nuovo modello di pagina, assegnargli la tua barra laterale personalizzata e quindi applicare quel modello al singolo articolo dall'editor dell'articolo.

2. Avere molte barre laterali diverse rallenterà il mio sito web?

Generalmente, no. Il numero di barre laterali che crei ha un impatto minimo sulla velocità del sito. Le prestazioni dipendono maggiormente da ciò che metti al loro interno.

Una barra laterale piena di molti widget pesanti, come immagini di grandi dimensioni o script complessi, può rallentare una pagina. Tuttavia, i plugin e gli strumenti di gestione delle barre laterali stessi sono leggeri e ottimizzati per le prestazioni.

3. Come funzionano le barre laterali personalizzate sui dispositivi mobili?

La maggior parte dei temi WordPress moderni è responsive. Ciò significa che su schermi più piccoli, come quelli dei telefoni, il contenuto della barra laterale non viene visualizzato di lato. Invece, viene "impilato" e spostato per apparire sotto il contenuto principale della pagina.

Le tue barre laterali personalizzate saranno comunque visibili ai visitatori da dispositivi mobili, ma dovranno scorrere verso il basso oltre l'articolo per vederle.

4. Posso rimuovere la barra laterale da una pagina specifica invece di sostituirla?

Sì. La maggior parte dei temi WordPress include un modello di pagina 'A larghezza intera' o 'Senza barra laterale'. Puoi selezionare questo modello dall'editor della pagina per rimuovere la barra laterale da quella pagina specifica.

Se il tuo tema non ha questa opzione, un page builder come SeedProd (Metodo 1) ti dà il pieno controllo per creare modelli senza barre laterali.

Speriamo che questo articolo ti abbia aiutato a imparare come mostrare barre laterali diverse su pagine e articoli in WordPress. Potresti anche voler consultare la nostra guida su come cambiare il lato della barra laterale in WordPress e le nostre scelte esperte delle migliori alternative a Canva per la grafica del sito web.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.