Comment afficher différentes barres latérales pour les articles et les pages dans WordPress

Par défaut, WordPress affiche la même barre latérale sur tous les articles et toutes les pages. Mais parfois, vous souhaiterez peut-être afficher une barre latérale complètement différente pour vos articles les plus importants ou les éléments de la barre latérale liés à une catégorie de publication entière. Si vous vous êtes déjà demandé comment faire cela, vous avez de la chance !

Dans cet article, nous allons vous montrer comment créer des barres latérales uniques pour différents articles ou pages, à la fois manuellement et avec des plugins WordPress. Mais d'abord, parlons plus des raisons pour lesquelles vous pourriez vouloir faire cela.

Pourquoi vous pourriez vouloir des barres latérales différentes

Comme indiqué précédemment, si vous avez de nombreuses catégories dans votre blog, vous pourriez être tenté d'avoir une barre latérale avec des offres, des publicités ou des produits similaires à ce sujet. Ou peut-être souhaitez-vous parler de votre entreprise dans une barre latérale "À propos de nous", adaptée à l'audience de chaque page.

Dans ces types de situations, vous voudrez avoir une barre latérale unique. Vous pouvez en créer un de deux manières : manuellement en développant le vôtre ou avec un plugin WordPress.

Couvrons d'abord la méthode manuelle.

Comment créer manuellement une nouvelle barre latérale WordPress

Pour créer manuellement une nouvelle barre latérale, vous devriez idéalement utiliser un thème enfant dans un environnement local. Nous en avons déjà créé un pour le thème vingt-sept, mais vous pouvez suivre le même processus pour n'importe quel thème.

Tout d'abord, recherchez le fichier dans lequel la barre latérale est enregistrée dans votre thème. Il s'agit généralement du fichier functions.php, mais il peut varier en fonction de votre thème.

Ouvrez le fichier et recherchez la fonction du code de la barre latérale. Il consistera généralement en register_sidebar et la fonction complète pourrait ressembler à ceci :

[php]

function vingt-sept_widgets_init() {

register_sidebar(

déployer(

'name' => __( 'Blog Sidebar', 'vingt-sept' ),

'id' => 'barre latérale-1',

'description' => __( 'Ajoutez des widgets ici pour qu'ils apparaissent dans votre barre latérale sur les articles de blog et les pages d'archives.', '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(

déployer(

'nom' => __( 'Pied de page 1', 'vingt-sept' ),

'id' => 'sidebar-2',

'description' => __( 'Ajoutez des widgets ici pour qu'ils apparaissent dans votre pied de page.', '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(

déployer(

'nom' => __( 'Pied de page 2', 'vingt-sept' ),

'id' => 'sidebar-3',

'description' => __( 'Ajoutez des widgets ici pour qu'ils apparaissent dans votre pied de page.', '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', 'vingt-sept_widgets_init' );

[/php]

Copiez maintenant la fonction entière et créez un fichier functions.php dans votre thème enfant (si vous ne l'avez pas déjà) et collez le code. Assurez-vous de changer le nom de la fonction.

Selon le nombre de barres latérales supplémentaires que vous devez créer, vous pouvez simplement répliquer le même code et attribuer un identifiant unique à chaque barre latérale. Vous devez également modifier le nom et la description pour rendre chacun unique. Ici, nous avons créé deux nouvelles barres latérales :

[php]

function vingt-sept_nouveaux_widgets_init() {

register_sidebar(

déployer(

'name' => __( 'WordPress Sidebar', 'vingt-sept' ),

'id' => 'barre latérale-4',

'description' => __( 'Ajoutez des widgets ici pour qu'ils apparaissent dans votre barre latérale sur les articles de blog liés à 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(

déployer(

'nom' => __( 'Barre latérale de conception Web', 'vingt-sept' ),

'id' => 'barre latérale-5',

'description' => __( 'Ajoutez des widgets ici pour qu'ils apparaissent dans votre barre latérale sur les articles de blog liés à la conception Web.', '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' );

[/php]

Les nouvelles barres latérales sont prêtes maintenant ; Si vous cochez la section des widgets, elle affichera deux nouvelles zones de widgets. Nous avons ajouté un widget de texte simple à chaque barre latérale pour les rendre reconnaissables.

Une fois que vous avez créé vos barres latérales, il est temps d'attribuer l'emplacement. Nous cherchons à remplacer la barre latérale droite existante, vous devez donc trouver le fichier où il se trouve.

Pour cette instance, c'est dans sidebar.php . Copiez le fichier du thème parent et collez-le dans votre thème enfant.

Si vous vérifiez le fichier, il appelle sidebar-1 , qui est l'identifiant de la barre latérale droite principale.

[php]

<aside id=”secondaire” class=”widget-area” role=”complémentaire” aria-label=”<?php esc_attr_e( 'Blog Sidebar', 'twentyseventeen' ); ?>”>

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

</aside>

[/php]

Maintenant, nous allons créer une barre latérale pour ma catégorie de conception Web et une autre pour ma catégorie WordPress. Cela peut être réalisé de deux manières différentes : l'une est une approche basée sur des modèles et l'autre est une approche basée sur des catégories.

Approche basée sur des modèles

Dans cette approche, vous devez créer différents modèles en fonction de vos besoins. Pour cet exemple, single.php est responsable des messages uniques, vous pouvez donc copier et coller le fichier dans votre thème enfant. Renommez le fichier en conséquence, comme wordpress-post.php , et ajoutez également un nom de modèle.

[php]

/* Nom du modèle : Barre latérale WordPress

* Type de publication du modèle : post*/

[/php]

De même, nous avons créé un autre modèle nommé webdesign-post.php .

Maintenant, revenez au fichier sidebar.php du thème enfant et ajoutez une condition simple pour vérifier quel modèle est utilisé. Pour cela, nous allons utiliser la fonction is_page_template() .

Le code est explicite. Il vérifie quel modèle est utilisé et définit la barre latérale en conséquence. Si aucune des conditions n'est remplie, il utilisera la barre latérale par défaut.

[php]

<?php

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

dynamic_sidebar( 'sidebar-4' );

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

dynamic_sidebar( 'sidebar-5' );

}autre{

dynamic_sidebar( 'sidebar-1' );

}

?>

[/php]

Créons maintenant un nouveau message et attribuons l'un des modèles que nous venons de créer.

Vous verrez que j'ai sélectionné la barre latérale WordPress pour cet article particulier.

Approche axée sur les catégories

Pour cet exemple (modification de la barre latérale en fonction des catégories de publication), une approche basée sur les catégories fonctionnera mieux que l'approche basée sur les modèles. Pour ce faire, vous devrez ajuster la condition dans sidebar.php en fonction de la catégorie au lieu du modèle en utilisant la fonction in_category() .

[php]

<?php

si ( dans_category('wordpress') ) {

dynamic_sidebar( 'sidebar-4' );

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

dynamic_sidebar( 'sidebar-5' );

}autre{

dynamic_sidebar( 'sidebar-1' );

}

?>

[/php]

Maintenant, si vous modifiez ou créez un nouveau message, ajoutez simplement la catégorie souhaitée. Il affichera la barre latérale en conséquence, il n'est donc pas nécessaire de choisir un modèle ! Ici, nous avons choisi la conception Web comme catégorie de publication, de sorte que la barre latérale de conception Web apparaîtra.

Fondamentalement, il vous suffit d'ajuster la condition sidebar.php en fonction de vos besoins spécifiques.

Comment créer des barres latérales personnalisées avec les plugins WordPress

Si vous rencontrez des difficultés pour créer manuellement des barres latérales, vous pouvez essayer des plugins WordPress pratiques qui vous permettent de les créer facilement !

L'un de ces plugins est Content Aware Sidebars. C'est un plugin simple qui vous permet de créer dynamiquement des barres latérales sur des pages individuelles, des publications, des catégories, etc.

Une fois installé, vous verrez un menu Sidebars dans le panneau d'administration.

Barres latérales > Ajouter nouveau

Tout d'abord, ajoutez un nom à votre barre latérale. Vous pouvez ensuite définir les conditions d'affichage à partir de la liste déroulante des conditions de la barre latérale . Une barre latérale peut avoir plusieurs conditions telles que des pages, des publications, des catégories, un auteur, etc.

Vous pouvez programmer votre barre latérale à partir de l'onglet de planification et modifier les balises HTML dans l'onglet de conception.

Vous verrez une boîte Options sur le côté droit. À partir de là, vous pouvez définir l'emplacement et les règles de votre nouvelle barre latérale. Vous pouvez également effectuer des actions, telles que la création d'un shortcode de votre barre latérale.

Une fois votre barre latérale publiée, vous pouvez y accéder depuis la section Apparence > Widgets .

Cette nouvelle barre latérale apparaîtra automatiquement sur les pages et les publications, selon vos paramètres.

Le plugin vous permet également de sélectionner des barres latérales lors de la modification de chaque publication ou page, quels que soient vos paramètres initiaux.

Dans une publication ou une page, vous verrez un panneau Barres latérales - Sélection rapide sur le côté droit qui vous montrera toutes les barres latérales existantes. De là, vous pouvez sélectionner votre barre latérale dans l'emplacement cible défini précédemment dans les paramètres initiaux.

Par exemple, nous avions précédemment créé Ma barre latérale et l'emplacement cible était Blog Sidebar , donc dans le panneau de sélection rapide , Ma barre latérale sera disponible pour Blog Sidebar uniquement.

Cependant, vous pouvez également créer de nouvelles barres latérales à partir de la section de modification de la page. Tapez simplement le nom de votre nouvelle barre latérale et publiez ou mettez à jour la page.

Si vous créez une nouvelle barre latérale, il vous suffira de l'activer dans la section Apparence > Widgets .

Remarque : Vous pouvez également attribuer des barres latérales à vos pages, mais assurez-vous que votre modèle de page inclut une barre latérale. Sans cela, la barre latérale ne sera pas affichée, même si vous la définissez dans la section d'édition de la page.

Conclusion

Vous avez maintenant vu deux options pour créer des barres latérales : le développement manuel ainsi qu'avec des plugins. Si vous n'êtes pas à l'aise avec les codes, l'utilisation d'un plugin peut être la meilleure option pour vous, mais si vous avez une exigence spécifique et que vous ne voulez pas ajouter un plugin supplémentaire à votre site, alors vous devriez opter pour la méthode manuelle. . L'important est de comprendre vos besoins et ensuite de choisir votre meilleure option !