Come mostrare diverse barre laterali per post e pagine in WordPress

Per impostazione predefinita, WordPress mostra la stessa barra laterale su tutti i post e le pagine. Ma a volte, potresti voler visualizzare una barra laterale completamente diversa per il tuo post più importante o gli elementi della barra laterale relativi a un'intera categoria di post. Se ti sei mai chiesto come farlo, sei fortunato!

In questo articolo, ti mostrerò come creare barre laterali uniche per diversi post o pagine, sia manualmente che con i plugin di WordPress. Ma prima, parliamo di più del motivo per cui potresti volerlo fare.

Perché potresti volere barre laterali diverse

Come affermato in precedenza, se hai molte categorie nel tuo blog, potresti essere tentato di avere una barra laterale con offerte, annunci o prodotti simili a quell'argomento. O forse vuoi parlare della tua attività in una barra laterale "Chi siamo", adattata al pubblico di ogni pagina.

In questi tipi di situazioni, ti consigliamo di avere una barra laterale unica. Ci sono due modi per crearne uno: manualmente sviluppando il tuo o con un plugin per WordPress.

Copriamo prima il modo manuale.

Come creare manualmente una nuova barra laterale di WordPress

Per creare manualmente una nuova barra laterale, idealmente dovresti utilizzare un tema figlio in un ambiente locale. Ho già creato il mio per il tema 27, ma puoi seguire lo stesso processo per qualsiasi tema.

Innanzitutto, trova il file in cui è registrata la barra laterale nel tuo tema. In genere è il file functions.php, ma può variare a seconda del tema.

Apri il file e individua la funzione per il codice della barra laterale. Generalmente sarà composto da register_sidebar e la funzione completa potrebbe assomigliare a questa:

function twentyseventeen_widgets_init() {

register_sidebar(

array(

'name'       => __( 'Blog Sidebar', 'twentyseventeen' ),

'id'         => 'sidebar-1',

'description'   => __( 'Add widgets here to appear in your sidebar on blog posts and archive pages.', 'twentyseventeen' ),

'before_widget' => '<section id="%1$s" class="widget %2$s">',

'after_widget'  => '</section>',

'before_title'  => '<h2 class="widget-title">',

'after_title'   => '</h2>',

)

);


register_sidebar(

array(

'name'       => __( 'Footer 1', 'twentyseventeen' ),

'id'         => 'sidebar-2',

'description'   => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),

'before_widget' => '<section id="%1$s" class="widget %2$s">',

'after_widget'  => '</section>',

'before_title'  => '<h2 class="widget-title">',

'after_title'   => '</h2>',

)

);


register_sidebar(

array(

'name'      => __( 'Footer 2', 'twentyseventeen' ),

'id'         => 'sidebar-3',

'description'   => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),

'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', 'twentyseventeen_widgets_init' );

Ora copia l'intera funzione e crea un file functions.php nel tuo tema figlio (se non lo hai già) e incolla il codice. Assicurati di cambiare il nome della funzione.

A seconda di quante barre laterali aggiuntive devi creare, puoi semplicemente replicare lo stesso codice e assegnare un ID univoco a ciascuna barra laterale. Dovresti anche cambiare il nome e la descrizione per renderli unici. Qui ho creato due nuove barre laterali:

function twentyseventeen_new_widgets_init() {

register_sidebar(

array(

'name'       => __( 'Wordpress Sidebar', 'twentyseventeen' ),

'id'         => 'sidebar-4',

'description'   => __( 'Add widgets here to appear in your sidebar on wordpress related blog posts.', 'twentyseventeen' ),

'before_widget' => '<section id="%1$s" class="widget %2$s">',

'after_widget'  => '</section>',

'before_title'  => '<h2 class="widget-title">',

'after_title'   => '</h2>',

)

);



register_sidebar(

array(

'name'       => __( 'Web Design Sidebar', 'twentyseventeen' ),

'id'         => 'sidebar-5',

'description'   => __( 'Add widgets here to appear in your sidebar on web design related blog posts.', 'twentyseventeen' ),

'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', 'twentyseventeen_new_widgets_init' );

Le nuove barre laterali sono ora pronte; Se controlli la sezione dei widget, mostrerà due nuove aree dei widget. Ho aggiunto un semplice widget di testo a ciascuna barra laterale per renderle riconoscibili.

Una volta create le barre laterali, è il momento di assegnare la posizione. Stiamo cercando di sostituire la barra laterale destra esistente, quindi è necessario trovare il file in cui si trova.

Per questo esempio, è in sidebar.php . Copia il file dal tema principale e incollalo nel tuo tema figlio.

Se controlli il file, sta chiamando sidebar-1 , che è l'id della barra laterale destra principale.

<aside id="secondary" class="widget-area" role="complementary" aria-label="<?php esc_attr_e( 'Blog Sidebar', 'twentyseventeen' ); ?>">

<?php dynamic_sidebar( 'sidebar-1' ); ?>

</aside>

Ora creerò una barra laterale per la mia categoria di web design e un'altra per la mia categoria WordPress. Ciò può essere ottenuto in due modi diversi: uno è un approccio basato su modelli e l'altro è un approccio basato sulla categoria.

Approccio basato su modelli

In questo approccio, devi creare modelli diversi a seconda delle tue esigenze. Per questo esempio, single.php è responsabile dei singoli post, quindi puoi copiare e incollare il file nel tuo tema figlio. Rinomina il file di conseguenza, come wordpress-post.php e aggiungi anche un nome per il modello.

/* Template Name: WordPress Sidebar

* Template Post Type: post*/

Allo stesso modo, ho creato un altro modello chiamato webdesign-post.php .

Ora torna al file sidebar.php del tema figlio e aggiungi una semplice condizione per verificare quale modello è in uso. Per questo, useremo la funzione is_page_template() .

Il codice è autoesplicativo. Verifica quale modello è in uso e imposta la barra laterale di conseguenza. Se nessuna delle condizioni è soddisfatta, utilizzerà la barra laterale predefinita.

<?php

if ( is_page_template('wordpress-post.php') ) {

dynamic_sidebar( 'sidebar-4' );

}elseif ( is_page_template('webdesign-post.php') ){

dynamic_sidebar( 'sidebar-5' );

}else{

dynamic_sidebar( 'sidebar-1' );

}

?>

Ora creiamo un nuovo post e assegniamo uno dei modelli che abbiamo appena creato.

Vedrai che ho selezionato la barra laterale di WordPress per questo particolare post.

Approccio guidato dalla categoria

Per questo esempio (modifica della barra laterale in base alle categorie dei post), un approccio basato sulla categoria funzionerà meglio dell'approccio basato su modelli. Per fare ciò, dovrai regolare la condizione in sidebar.php in base alla categoria anziché al modello usando la funzione in_category() .

<?php

if ( in_category('wordpress') ) {

dynamic_sidebar( 'sidebar-4' );

}elseif ( in_category('web-design') ){

dynamic_sidebar( 'sidebar-5' );

}else{

dynamic_sidebar( 'sidebar-1' );

}

?>

Ora, se modifichi o crei un nuovo post, aggiungi semplicemente la categoria desiderata. Visualizzerà la barra laterale di conseguenza, quindi non è necessario scegliere alcun modello! Qui ho scelto il web design come categoria di post, quindi apparirà la barra laterale del web design.

Fondamentalmente, devi solo regolare la condizione sidebar.php in base alle tue esigenze specifiche.

Come creare barre laterali personalizzate con i plugin di WordPress

Se hai problemi a creare manualmente le barre laterali, puoi provare alcuni pratici plugin di WordPress che ti consentono di crearli facilmente!

Uno di questi plugin è Content Aware Sidebars. È un semplice plugin che ti consente di creare dinamicamente barre laterali su singole pagine, post, categorie, ecc.

Una volta installato, vedrai un menu delle barre laterali nel pannello di amministrazione.

Barre laterali > Aggiungi nuovo

Innanzitutto, aggiungi un nome alla barra laterale. È quindi possibile impostare le condizioni di visualizzazione dal menu a discesa Condizioni della barra laterale . Una barra laterale può avere più condizioni come pagine, post, categorie, autore, ecc.

Puoi pianificare la barra laterale dalla scheda pianificazione e modificare i tag HTML nella scheda progettazione.

Vedrai una casella Opzioni sul lato destro. Da lì, puoi impostare la posizione e le regole della tua nuova barra laterale. Puoi anche eseguire azioni, come creare uno shortcode della barra laterale.

Una volta pubblicata la barra laterale, puoi accedervi dalla sezione Aspetto > Widget .

Questa nuova barra laterale apparirà automaticamente su pagine e post, secondo le tue impostazioni.

Il plug-in ti consente anche di selezionare le barre laterali durante la modifica di ogni post o pagina, indipendentemente dalle tue impostazioni iniziali.

All'interno di un post o di una pagina, vedrai un pannello Barre laterali - Selezione rapida sul lato destro che ti mostrerà tutte le barre laterali esistenti. Da lì puoi selezionare la tua barra laterale nella posizione di destinazione impostata in precedenza nelle impostazioni iniziali.

Ad esempio, in precedenza avevo creato La mia barra laterale e la mia posizione di destinazione era la barra laterale del blog , quindi nel pannello Selezione rapida , la mia barra laterale sarà disponibile solo per la barra laterale del blog .

Puoi anche creare nuove barre laterali, tuttavia, dalla sezione della pagina di modifica. Basta digitare il nome della tua nuova barra laterale e pubblicare o aggiornare la pagina.

Se crei una nuova barra laterale, dovrai solo attivarla nella sezione Aspetto > Widget .

Nota: puoi anche assegnare barre laterali alle tue pagine, ma assicurati che il modello di pagina includa una barra laterale. Senza ciò, la barra laterale non verrà visualizzata, anche se l'hai impostata nella sezione della pagina di modifica.

Conclusione

Design Stagista, Rese e Art Director di Flywheel, Andrea

Ora hai visto due opzioni per la creazione di barre laterali: lo sviluppo manuale e con i plug-in. Se non ti senti a tuo agio con i codici, l'utilizzo di un plug-in potrebbe essere l'opzione migliore per te, ma se hai un requisito specifico e non vuoi aggiungere un plug-in aggiuntivo al tuo sito, dovresti optare per il modo manuale . L'importante è capire le tue esigenze e quindi scegliere l'opzione migliore!

Pronto per un altro tutorial? Prova uno di questi:

• Come aggiungere un pulsante appiccicoso back-to-top sul tuo sito web
• Come creare modelli di post singoli personalizzati
• Come rendere il tuo sito WordPress mobile friendly
• Come clonare il tuo sito WordPress