Come visualizzare le barre laterali sensibili ai contenuti per qualsiasi pagina WordPress o tipo di post

Bene, parliamo di barre laterali sensibili ai contenuti. Tuttavia, prima di farlo, dovremmo prima parlare delle barre laterali in generale.

La tipica barra laterale è un elemento fondamentale del web design e di molti temi WordPress. Sono un buon posto per visualizzare informazioni aggiuntive come moduli di contatto, i tuoi post sul blog più recenti o più popolari, pubblicità o qualsiasi altra cosa che non sia l'attrazione principale del tuo sito. Mentre negli ultimi anni, la tendenza è andata verso design a una pagina senza barre laterali, rimangono un elemento popolare.

Nella maggior parte dei casi, la barra laterale di un sito Web mostrerà lo stesso contenuto indipendentemente dalla pagina in cui ti trovi. Tuttavia, questo non è sempre il modo ottimale per farlo. In effetti, ci sono molti motivi per mostrare barre laterali personalizzate su pagine o post diversi che sono consapevoli del contenuto che accompagnano.

Per questo motivo, in questo articolo vogliamo parlare di più di questo argomento. Per prima cosa ti mostreremo i casi d'uso per le barre laterali sensibili ai contenuti. In questo modo capirai se hanno senso per te. Successivamente, continueremo spiegando come implementare questo tipo di barra laterale sul tuo sito Web WordPress.

Pronto ad andare? Allora diamoci da fare.

Qual è il punto delle barre laterali sensibili ai contenuti?

Prima di ogni altra cosa, parliamo del motivo per cui dovresti anche preoccuparti di personalizzare le barre laterali a seconda del contenuto a cui appaiono accanto. Dopotutto, la barra laterale statica esiste da secoli e sembra ancora fare il trucco. Perché pasticciare con un sistema funzionante?

A quanto pare, ci sono molti casi d'uso in cui ha senso utilizzare le barre laterali sensibili al contenuto:

• Onboarding : i visitatori per la prima volta potrebbero aver bisogno di contenuti diversi come clienti abituali. Ad esempio, gli utenti che hanno effettuato l'accesso non hanno bisogno di vedere l'invito all'azione "registrati" che ha lo scopo di convincere le persone a iscriversi al tuo sito o alla tua lista di e-mail.
• Informazioni personalizzate — Alcune informazioni hanno più senso in alcune pagine rispetto ad altre. Gli esempi includono ulteriori informazioni di contatto sulla pagina dei contatti, articoli migliori o più recenti sulla pagina del blog, offerte speciali sulla pagina del negozio: hai capito.
• SEO migliorato : anche se non è un fattore importante, il contenuto della barra laterale è ancora importante per l'ottimizzazione dei motori di ricerca (specialmente se i titoli dei widget sono adeguatamente racchiusi nei tag di intestazione). Pertanto, puoi utilizzare le barre laterali sensibili ai contenuti per rendere le tue pagine ancora più mirate.
• Inviti all'azione : puoi anche utilizzare questo tipo di barra laterale per personalizzare gli inviti all'azione per diversi punti del tuo sito web.
• Lingue — Consentono anche di creare barre laterali per diverse versioni linguistiche del tuo sito e indirizzare mercati diversi.

Come puoi vedere, ci sono diversi motivi per utilizzare le barre laterali sensibili ai contenuti e questo elenco è tutt'altro che esaustivo. Tuttavia, ora concentriamoci su come implementarli.

Come implementare le barre laterali sensibili ai contenuti in WordPress

Esistono tre modi principali per impostare barre laterali personalizzate per post e pagine. Ciò che hanno in comune è che il contenuto della barra laterale viene modificato in risposta alla pagina o al post in cui viene visualizzato. Le condizioni includono tag, categorie, nomi di pagine o altri attributi di WordPress, ad esempio se un utente ha effettuato l'accesso o meno.

Successivamente, la barra laterale viene solitamente modificata in tre modi:

• Widget filtro : una barra laterale è piena di widget e una sorta di logica in background decide quali widget vengono visualizzati in quale posizione e quali sono nascosti
• Imposta barre laterali intere : un altro modo consiste nel creare barre laterali completamente separate che vengono visualizzate nella stessa posizione quando vengono soddisfatte condizioni diverse. Possono contenere configurazioni di widget individuali.
• Hardcoded in tema : ovviamente, puoi anche aggiungere barre laterali personalizzate ai file del tema, se hai le capacità di codifica per questo

Personalmente penso che il secondo metodo sia quello che si traduce nell'interfaccia utente più ordinata. Tuttavia, di seguito esamineremo ogni modo in dettaglio in modo che tu possa prendere una decisione. Successivamente elencheremo alcune altre opzioni per implementare barre laterali personalizzate sul tuo sito WordPress.

Usa la visibilità del widget Jetpack per filtrare i widget

Il modo più semplice per filtrare l'aspetto del widget sul tuo sito è il modulo Widget Visibility, opportunamente chiamato, incluso in Jetpack. Se hai già il plugin sul tuo sito, creare barre laterali personalizzate è facile come attivare il modulo (se non è già attivo per impostazione predefinita). In alternativa, puoi anche utilizzare questa versione standalone.

Una volta fatto e vai al menu del widget, troverai un nuovo pulsante Visibilità su tutti i tuoi widget. Fai clic e puoi implementare facilmente la logica di visualizzazione desiderata per i tuoi widget tramite i menu a discesa.

Le condizioni per la visibilità sono le seguenti:

• Categoria : i widget possono apparire su determinate pagine di categoria o su tutte
• Autore — Aspetto su tutte le pagine dell'autore o limitato a determinati utenti
• Utente : controlla se l'utente ha effettuato l'accesso o meno
• Ruolo : controlla i widget in base al ruolo dell'utente
• Tag : funziona come le pagine di categoria ma per i tag
• Data : controlla in quale data vengono visualizzati i widget degli archivi
• Pagina : imposta la visibilità del widget per la prima pagina, la pagina dei post, le pagine di archivio, la pagina di errore 404, i tipi di post, gli archivi dei tipi di post e le pagine statiche

Per ogni opzione, puoi definire se i widget sono mostrati o nascosti. Le regole devono essere inserite separatamente, ciò significa che non è possibile inserire più pagine contemporaneamente. Tuttavia, questo metodo è ancora più conveniente rispetto all'immissione manuale degli ID di pagina, se necessario, in altre soluzioni (maggiori informazioni di seguito). C'è anche una casella di controllo Corrisponde a tutte le condizioni che forza la visualizzazione dei widget solo se tutte le condizioni sono valide.

Le barre laterali sensibili al contenuto ti consentono di impostare barre laterali personalizzate

La seconda soluzione di cui vogliamo parlare è il plugin Content Aware Sidebars. Come accennato in precedenza, questo plugin ti consente di impostare intere barre laterali che puoi quindi popolare con widget e assegnare a post e pagine. È abbastanza semplice da usare.

Dopo l'installazione, troverai una nuova voce di menu chiamata Sidebars nel menu di WordPress.

Quando scegli Aggiungi nuovo qui, arrivi a questa schermata:

Qui, la prima cosa da fare è nominare la barra laterale. Successivamente, è il momento di impostare le condizioni per visualizzarlo. Le opzioni disponibili sono simili a Jetpack:

• Pagine statiche : scegli pagine statiche su cui visualizzare la barra laterale come la prima pagina, i risultati di ricerca o le pagine di errore 404
• Post — Le stesse opzioni di cui sopra ma per i post
• Pagine : scegli su quali pagine del tuo sito mostrare la barra laterale
• Media : determina su quali pagine multimediali viene visualizzata la barra laterale
• Autori — Limita la visualizzazione alle pagine degli autori
• Modelli di pagina : scegli i modelli di pagina su cui visualizzare la barra laterale
• Categorie : scegli determinate categorie o tutti gli archivi di categorie
• Tag — Stesse opzioni ma per i tag
• Formati — Di nuovo, le stesse impostazioni per gli archivi di formato
• Date — E ancora una volta per gli archivi delle date
• URL (solo versione Pro): limita la visualizzazione della barra laterale a determinati URL

Altre impostazioni:

• Pianificazione — Imposta un orario per la visualizzazione della barra laterale. Nella versione gratuita sei limitato a giorni interi, la versione Pro offre fasce orarie più granulari.
• Design : aggiungi classi CSS personalizzate alle barre laterali, ai widget e ai titoli dei widget per manipolarli
• Avanzate : imposta l'ordine delle barre laterali (nel caso ce ne sia più di una)

Inoltre, puoi anche unire le barre laterali tra loro, sostituirle, configurarle come aree widget e controllarne la visibilità per gli utenti che hanno effettuato l'accesso (ruoli utente disponibili in Pro).

Dopo aver terminato la configurazione, la nuova barra laterale viene visualizzata nel normale menu del widget in cui è possibile popolarla, attivarla e disattivarla e persino vedere le revisioni precedenti. Pulito e facile.

Crea manualmente barre laterali personalizzate

Infine, è anche possibile creare barre laterali personalizzate tramite codifica. WordPress offre molte opzioni per questo e esamineremo rapidamente il processo.

La prima cosa da fare per creare barre laterali personalizzate è registrare una nuova area widget. Per questo, inserisci semplicemente il seguente codice in functions.php del tuo tema (figlio):

function custom_sidebar_init() {
	register_sidebar( array(
		'name'          => 'New Custom Sidebar',
		'id'            => 'custom_sidebar_1',
		'description'   => 'Add widgets here to appear for single posts.',
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'custom_sidebar_init' );
[/php
Of course, you can change the name and other elements to your liking. After saving and uploading to your server, it will now appear in your widget menu where you can add widgets to it as usual.

<img class="with-border aligncenter wp-image-53962 size-full" src="https://www.elegantthemes.com/blog/wp-content/uploads/2017/06/new-widget-area.jpg" alt="new widget area" width="672" height="445" />

However, so far the sidebar doesn't show up anywhere on your site. To change that, you need to add it to the template file(s) of where you want them to show up.

In our example, we want the new sidebar to appear for single posts, so we would input it inside <em>single.php</em> of our theme. In the case of the <em>Twenty Seventeen</em> theme, that means we would exchange this:

<?php get_sidebar(); ?>

Con questo:

<?php if ( is_active_sidebar( 'custom_sidebar_1' ) ) : ?>
	<aside id="secondary" class="widget-area" role="complementary">
		<?php dynamic_sidebar( 'custom_sidebar_1' ); ?>
	</aside><!-- #primary-sidebar -->
<?php endif; ?>

Dopodiché, questo è il risultato finale sul frontend:

Ovviamente, se hai ulteriori capacità di sviluppo, è possibile aggiungere più condizioni come mostrare la barra laterale solo per gli utenti che hanno effettuato l'accesso. Puoi anche ottenere informazioni più dettagliate su dove visualizzarlo utilizzando la gerarchia dei modelli di WordPress. Potrebbe non essere la soluzione più dinamica, tuttavia, fa il trucco e può funzionare completamente in background senza la necessità di installare plug-in aggiuntivi.

Modi aggiuntivi per implementare barre laterali sensibili ai contenuti

Oltre alle opzioni di cui sopra, abbiamo anche altri plugin con funzionalità simili.

Logica dei widget

Questo plugin funziona in modo simile alla soluzione Jetpack, tuttavia, invece dei menu a discesa, è necessario inserire manualmente i tag condizionali di WordPress. In questo modo, puoi determinare dove vengono visualizzati i widget in base a tutte le regole che desideri.

Tuttavia, per farlo, devi conoscere gli ID delle tue pagine e nel complesso è un po' più tecnico di quello che abbiamo visto sopra. Ciò non significa che non funzioni e non sia un plugin potente, tuttavia, le persone meno tecniche potrebbero stare meglio con qualcos'altro.

Barre laterali personalizzate

Realizzato da WPMU DEV, qui abbiamo un'altra soluzione per impostare barre laterali sensibili ai contenuti che funzionano con qualsiasi area widget. Il plug-in ti consente di visualizzare dinamicamente i widget su qualsiasi articolo, pagina, archivio di categoria, tipo di articolo e altro. Inoltre, fa tutto questo con un'interfaccia utente molto potente e facile da usare. Per un'introduzione completa, controlla l'articolo di Tom Ewer sul loro sito web.

Barre laterali della pagina semplice

La soluzione finale per creare barre laterali personalizzate è fatta per semplicità. Ti consente di assegnare barre laterali e apportare modifiche in blocco direttamente dall'editor di pagine. Dopo averlo fatto, puoi popolarli come al solito nel menu del widget.

Sfortunatamente, mancano opzioni di personalizzazione più avanzate. Tuttavia, se desideri solo avere barre laterali diverse per le tue pagine, questa potrebbe essere la soluzione che stai cercando.

Barre laterali sensibili ai contenuti in poche parole

Ci sono molti buoni motivi per utilizzare barre laterali personalizzate sul tuo sito. Non tutti i contenuti necessitano delle stesse informazioni per essere visualizzati accanto ad essi. Con le barre laterali sensibili al contenuto, puoi visualizzare ciò che ha senso invece di utilizzare una barra laterale standard.

In questo tutorial, abbiamo imparato diversi modi per creare barre laterali personalizzate. Dal filtraggio dei widget alla creazione di intere nuove barre laterali alla codifica nel tuo tema, è tutto lì.

Armato di queste informazioni, ora puoi fornire solo il contenuto della barra laterale di cui hai bisogno per migliorare l'interazione dell'utente e il servizio al tuo pubblico. Provaci!

Qual è la tua esperienza con le barre laterali sensibili ai contenuti? Fatecelo sapere nella sezione commenti qui sotto!

Immagine in miniatura dell'articolo di Kit8.net/ shutterstock.com