Come mostrare diverse barre laterali per articoli e pagine in WordPress
Pubblicato: 2023-02-16Per 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 i tuoi post più importanti 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 mostreremo come creare barre laterali uniche per diversi post o pagine, sia manualmente che con i plugin di WordPress. Ma prima, parliamo di più sul motivo per cui potresti volerlo fare.
Perché potresti volere diverse barre laterali
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, vorrai avere una barra laterale unica. Ci sono due modi per crearne uno: manualmente sviluppando il tuo o con un plugin 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. Ne abbiamo già creato uno per il tema TwentySeventeen, 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 consisterà in register_sidebar e la funzione completa potrebbe essere simile a questa:
[php]
funzione ventidiciassette_widgets_init() {
register_sidebar(
vettore(
'name' => __( 'Blog Sidebar', 'twentyseventeen' ),
'id' => 'barra laterale-1',
'description' => __( 'Aggiungi widget qui per apparire nella barra laterale nei post del blog e nelle pagine di archivio.', '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(
vettore(
'nome' => __( 'Piè di pagina 1', 'ventisettedici' ),
'id' => 'barra laterale-2',
'description' => __( 'Aggiungi widget qui per apparire nel 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(
vettore(
'nome' => __( 'Piè di pagina 2', 'ventisettedici' ),
'id' => 'barra laterale-3',
'description' => __( 'Aggiungi widget qui per apparire nel 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', 'ventisette_widgets_init' );
[/php]
Ora copia l'intera funzione e crea un file functions.php nel tuo child theme (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 abbiamo creato due nuove barre laterali:
[php]
funzione ventidiciassette_nuovi_widgets_init() {
register_sidebar(
vettore(
'nome' => __( 'WordPress Sidebar', 'ventisettedici' ),
'id' => 'barra laterale-4',
'description' => __( 'Aggiungi widget qui per apparire nella tua barra laterale sui post del blog relativi a wordpress.', '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(
vettore(
'name' => __( 'Web Design Sidebar', 'twentyseventeen' ),
'id' => 'barra laterale-5',
'description' => __( 'Aggiungi widget qui per apparire nella tua barra laterale sui post del blog relativi al web design.', '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', 'ventiseventeen_new_widgets_init' );
[/php]
Le nuove barre laterali sono pronte ora; Se controlli la sezione widget, mostrerà due nuove aree widget. Abbiamo aggiunto un semplice widget di testo a ciascuna barra laterale per renderle riconoscibili.
Dopo aver creato le barre laterali, è il momento di assegnare la posizione. Stiamo cercando di sostituire la barra laterale destra esistente, quindi devi trovare il file in cui si trova.
Per questa istanza, è in sidebar.php . Copia il file dal tema principale e incollalo nel tema figlio.
Se controlli il file, sta chiamando sidebar-1 , che è l'id della barra laterale destra principale.
[php]
<aside id=”secondary” class=”widget-area” role=”complementary” aria-label=”<?php esc_attr_e( 'Blog Sidebar', 'twentyseventeen' ); ?>”>
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>
[/php]
Ora creeremo una barra laterale per la mia categoria di web design e un'altra per la mia categoria di WordPress. Ciò può essere ottenuto in due modi diversi: uno è un approccio basato su modelli e l'altro è un approccio basato su categorie.
Approccio guidato da 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 tema figlio. Rinomina il file di conseguenza, come wordpress-post.php , e aggiungi anche un nome per il modello.
[php]
/* Nome del modello: barra laterale di WordPress
* Tipo di post modello: post*/
[/php]
Allo stesso modo, abbiamo creato un altro modello chiamato webdesign-post.php .
Ora torna al file sidebar.php del child theme e aggiungi una semplice condizione per verificare quale template è in uso. Per questo, useremo la funzione is_page_template() .
Il codice è autoesplicativo. Controlla quale modello è in uso e imposta la barra laterale di conseguenza. Se nessuna delle condizioni è soddisfatta, utilizzerà la barra laterale predefinita.
[php]
<?php
if ( is_page_template('wordpress-post.php') ) {
dynamic_sidebar( 'sidebar-4' );
}elseif ( is_page_template('webdesign-post.php') ){
dynamic_sidebar('sidebar-5');
}altro{
dynamic_sidebar('sidebar-1');
}
?>
[/php]
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 basato sulle categorie
Per questo esempio (modifica della barra laterale in base alle categorie di post), un approccio basato su categorie funzionerà meglio dell'approccio basato su modelli. Per fare ciò, dovrai regolare la condizione in sidebar.php in base alla categoria anziché al modello utilizzando la funzione in_category() .
[php]
<?php
if ( in_category('wordpress') ) {
dynamic_sidebar( 'sidebar-4' );
}elseif ( in_category('web-design') ){
dynamic_sidebar('sidebar-5');
}altro{
dynamic_sidebar('sidebar-1');
}
?>
[/php]
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 abbiamo scelto il web design come categoria del mio 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 utili plugin di WordPress che ti consentono di crearle facilmente!
Uno di questi plugin è Content Aware Sidebars. È un semplice plug-in che ti consente di creare dinamicamente barre laterali su singole pagine, post, categorie, ecc.
Una volta installato, vedrai un menu di 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 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 inoltre di selezionare le barre laterali durante la modifica di ciascun post o pagina, indipendentemente dalle impostazioni iniziali.
All'interno di un post o di una pagina, vedrai un pannello Sidebars – Quick Select sul lato destro che ti mostrerà tutte le sidebars esistenti. Da lì puoi selezionare la barra laterale nella posizione di destinazione impostata in precedenza nelle impostazioni iniziali.
Ad esempio, in precedenza avevamo creato La mia barra laterale e la posizione di destinazione era Barra laterale del blog , quindi nel pannello Selezione rapida La 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 nuova barra laterale e pubblicare o aggiornare la pagina.
Se crei una nuova barra laterale, ti basterà attivarla nella sezione Aspetto > Widget .
Nota: puoi anche assegnare barre laterali alle tue pagine, ma assicurati che il tuo modello di pagina includa una barra laterale. Senza di ciò, la barra laterale non verrà visualizzata, anche se la imposti nella sezione di modifica della pagina.
Conclusione
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 desideri aggiungere un plug-in aggiuntivo al tuo sito, dovresti scegliere la modalità manuale . L'importante è capire le tue esigenze e quindi scegliere l'opzione migliore!