Comment afficher les barres latérales sensibles au contenu pour n'importe quelle page WordPress ou type de publication

D'accord, parlons des barres latérales sensibles au contenu. Cependant, avant de le faire, nous devrions d'abord parler des barres latérales en général.

La barre latérale typique est un incontournable de la conception Web et de nombreux thèmes WordPress. Ils sont un bon endroit pour afficher des informations supplémentaires telles que des formulaires de contact, vos articles de blog les plus récents ou les plus populaires, des publicités ou tout autre élément qui n'est pas l'attraction principale de votre site. Alors que ces dernières années, la tendance est allée aux conceptions d'une page sans barres latérales, elles restent un élément populaire.

Dans la plupart des cas, la barre latérale d'un site Web affichera le même contenu, quelle que soit la page sur laquelle vous vous trouvez. Cependant, ce n'est pas toujours la meilleure façon de procéder. En fait, il existe de nombreuses raisons d'afficher des barres latérales personnalisées sur différentes pages ou publications qui connaissent le contenu qu'elles accompagnent.

Pour cette raison, dans cet article, nous voulons parler davantage de ce sujet. Nous allons d'abord vous montrer des cas d'utilisation pour les barres latérales sensibles au contenu. De cette façon, vous comprendrez s'ils ont du sens pour vous. Après cela, nous continuerons en expliquant comment implémenter ce type de barre latérale sur votre site WordPress.

Prêt à partir? Alors on craque.

À quoi servent les barres latérales sensibles au contenu ?

Avant toute chose, parlons de la raison pour laquelle vous prendriez même la peine de personnaliser les barres latérales en fonction du contenu à côté duquel elles apparaissent. Après tout, la barre latérale statique existe depuis des lustres et semble toujours faire l'affaire. Pourquoi jouer avec un système qui fonctionne ?

Il s'avère qu'il existe de nombreux cas d'utilisation où il est logique d'utiliser des barres latérales sensibles au contenu :

• Intégration — Les visiteurs novices peuvent avoir besoin d'un contenu différent de celui des habitués. Par exemple, vos utilisateurs connectés n'ont pas besoin de voir l'appel à l'action « inscription » qui vise à amener les gens à rejoindre votre site ou sur votre liste de diffusion.
• Informations personnalisées — Certaines informations ont plus de sens sur certaines pages que sur d'autres. Les exemples incluent des informations de contact supplémentaires sur la page de contact, les meilleurs ou les derniers articles sur la page du blog, des offres spéciales sur la page de la boutique - vous obtenez l'essentiel.
• SEO amélioré - Bien que n'étant pas un facteur majeur, le contenu de la barre latérale est toujours important pour l'optimisation des moteurs de recherche (surtout si les titres des widgets sont correctement encapsulés dans les balises d'en-tête). Par conséquent, vous pouvez utiliser des barres latérales sensibles au contenu pour rendre vos pages encore plus ciblées.
• Appels à l'action — Vous pouvez également utiliser ce type de barre latérale pour personnaliser les appels à l'action pour différents endroits de votre site Web.
• Langues — Ils permettent également de créer des barres latérales pour différentes versions linguistiques de votre site et ciblent différents marchés.

Comme vous pouvez le voir, il existe plusieurs raisons d'utiliser des barres latérales sensibles au contenu et cette liste est loin d'être exhaustive. Cependant, concentrons-nous maintenant sur la façon de les mettre en œuvre.

Comment implémenter des barres latérales sensibles au contenu dans WordPress

Il existe trois manières principales de configurer des barres latérales personnalisées pour les articles et les pages. Ce qu'ils ont tous en commun, c'est que le contenu de la barre latérale est modifié en fonction de la page ou de la publication sur laquelle il est affiché. Les conditions incluent les balises WordPress, les catégories, les noms de page ou d'autres attributs comme si un utilisateur est connecté ou non.

Après cela, la barre latérale est généralement modifiée de l'une des trois manières suivantes :

• Filtrer les widgets - Une barre latérale est remplie de widgets et une sorte de logique en arrière-plan décide quels widgets apparaissent à quel emplacement et lesquels sont cachés
• Configurer des barres latérales entières - Une autre façon consiste à créer des barres latérales entièrement séparées qui s'affichent au même endroit lorsque différentes conditions sont remplies. Ils peuvent contenir des configurations de widget individuelles.
• Codé en dur dans le thème - Bien sûr, vous pouvez également ajouter des barres latérales personnalisées à vos fichiers de thème, si vous avez les compétences de codage pour cela

Personnellement, je pense que la deuxième méthode est celle qui donne l'interface utilisateur la plus ordonnée. Cependant, dans ce qui suit, nous passerons en revue chaque méthode en détail afin que vous puissiez vous faire votre propre opinion. Après cela, nous énumérerons quelques options supplémentaires pour implémenter des barres latérales personnalisées sur votre site WordPress.

Utilisez la visibilité des widgets Jetpack pour filtrer les widgets

Le moyen le plus simple de filtrer l'apparence des widgets sur votre site est le module bien nommé Widget Visibility inclus dans Jetpack. Si vous avez déjà le plugin sur votre site, créer des barres latérales personnalisées est aussi simple que d'activer le module (s'il n'est pas déjà actif par défaut). Alternativement, vous pouvez également utiliser cette version autonome.

Une fois que vous l'avez fait et que vous êtes allé dans le menu des widgets, vous trouverez un nouveau bouton de visibilité sur tous vos widgets. Cliquez dessus et vous pouvez facilement implémenter la logique d'affichage souhaitée pour vos widgets via des menus déroulants.

Les conditions de visibilité sont les suivantes :

• Catégorie — Les widgets peuvent apparaître sur certaines pages de catégorie ou sur toutes
• Auteur — Apparition sur toutes les pages d'auteur ou limitée à certains utilisateurs
• Utilisateur — Vérifie si l'utilisateur est connecté ou non
• Rôle — Contrôlez les widgets en fonction du rôle de l'utilisateur
• Balise — Fonctionne comme les pages de catégorie mais pour les balises
• Date — Contrôle à quelle date les widgets d'archives apparaissent sur
• Page - Définir la visibilité des widgets pour la page d'accueil, la page des publications, les pages d'archives, la page d'erreur 404, les types de publication, les archives de types de publication et les pages statiques

Pour chaque option, vous pouvez définir si les widgets sont affichés ou masqués. Les règles doivent être saisies séparément, ce qui signifie qu'il n'est pas possible de saisir plusieurs pages à la fois. Cependant, cette méthode est encore plus pratique que la saisie manuelle des identifiants de page si nécessaire dans d'autres solutions (plus de détails ci-dessous). Il existe également une case à cocher Faire correspondre toutes les conditions qui force les widgets à ne s'afficher que si toutes les conditions sont valides.

Les barres latérales sensibles au contenu vous permettent de configurer des barres latérales personnalisées

La deuxième solution dont nous voulons parler est le plugin Content Aware Sidebars. Comme mentionné précédemment, ce plugin vous permet de configurer des barres latérales entières que vous pouvez ensuite remplir avec des widgets et attribuer à des articles et des pages. C'est assez simple à utiliser.

Après l'installation, vous trouvez un nouvel élément de menu appelé Barres latérales dans le menu WordPress.

Lorsque vous choisissez Ajouter un nouveau ici, vous accédez à cet écran :

Ici, la première chose à faire est de nommer votre barre latérale. Après cela, il est temps de mettre en place les conditions d'affichage. Les options disponibles sont similaires à Jetpack :

• Pages statiques - Choisissez des pages statiques sur lesquelles afficher la barre latérale comme la page d'accueil, les résultats de recherche ou les pages d'erreur 404
• Messages — Les mêmes options que ci-dessus mais pour les messages
• Pages — Choisissez sur quelles pages de votre site afficher la barre latérale
• Média — Détermine sur quelles pages multimédia votre barre latérale apparaît
• Auteurs — Limiter l'affichage aux pages d'auteur
• Modèles de page — Choisissez des modèles de page sur lesquels afficher votre barre latérale
• Catégories — Choisissez certaines catégories ou toutes les archives de catégories
• Balises — Mêmes options mais pour les balises
• Formats — Encore une fois, les mêmes paramètres pour les archives de format
• Dates — Et encore une fois pour les archives de dates
• URL (version Pro uniquement) — Limiter l'affichage de la barre latérale à certaines URL

Paramètres additionnels:

• Programmer — Définissez un horaire pour l'affichage de la barre latérale. Dans la version gratuite, vous êtes limité à des journées entières, la version Pro propose des plages horaires plus granulaires.
• Conception — Ajoutez des classes CSS personnalisées à vos barres latérales, widgets et titres de widgets pour manipuler leur
• Avancé — Définissez l'ordre de vos barres latérales (au cas où il y en aurait plusieurs)

En plus de cela, vous pouvez également fusionner les barres latérales les unes avec les autres, les remplacer, les configurer en tant que zones de widgets et contrôler leur visibilité pour les utilisateurs connectés (rôles d'utilisateurs disponibles dans Pro).

Une fois la configuration terminée, la nouvelle barre latérale apparaît dans le menu du widget normal où vous pouvez la remplir, l'activer et la désactiver et même voir les révisions précédentes. Soigné et facile.

Créer manuellement des barres latérales personnalisées

Enfin, il est également possible de créer des barres latérales personnalisées via le codage. WordPress offre de nombreuses options pour cela et nous allons rapidement passer en revue le processus.

La première chose à faire pour créer des barres latérales personnalisées est d'enregistrer une nouvelle zone widgetisée. Pour cela, il suffit de saisir le code suivant dans functions.php de votre thème (enfant) :

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(); ?>

Avec ça:

<?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; ?>

Après cela, voici le résultat final sur le frontend :

Bien sûr, si vous avez des difficultés de développement, il est possible d'ajouter plus de conditions telles que l'affichage de la barre latérale uniquement pour les utilisateurs connectés. Vous pouvez également obtenir plus de détails sur l'endroit où l'afficher en utilisant la hiérarchie des modèles WordPress. Ce n'est peut-être pas la solution la plus dynamique, cependant, elle fait l'affaire et peut fonctionner complètement en arrière-plan sans avoir besoin d'installer des plugins supplémentaires.

Moyens supplémentaires pour implémenter des barres latérales sensibles au contenu

Outre les options ci-dessus, nous avons également quelques plugins supplémentaires avec des fonctionnalités similaires.

Logique des widgets

Ce plugin fonctionne de manière similaire à la solution Jetpack, cependant, au lieu de menus déroulants, vous devez saisir manuellement les balises conditionnelles WordPress. De cette façon, vous pouvez déterminer où les widgets apparaissent en fonction d'autant de règles que vous le souhaitez.

Cependant, pour ce faire, vous devez connaître les identifiants de vos pages et dans l'ensemble c'est un peu plus technique que ce que nous avons vu plus haut. Cela ne veut pas dire que cela ne fonctionne pas et que ce n'est pas un plugin puissant, cependant, les personnes moins techniques pourraient être mieux loties avec autre chose.

Barres latérales personnalisées

Créé par WPMU DEV, nous avons ici une autre solution pour configurer des barres latérales sensibles au contenu qui fonctionnent avec n'importe quelle zone de widget. Le plugin vous permet d'afficher dynamiquement des widgets sur n'importe quelle publication, page, archive de catégorie, type de publication et plus encore. De plus, il fait tout cela avec une interface utilisateur très puissante et facile à utiliser. Pour une introduction complète, consultez l'article de Tom Ewer sur leur site Web.

Barres latérales de page simples

La solution finale pour créer des barres latérales personnalisées est conçue pour la simplicité. Il vous permet d'attribuer des barres latérales et d'apporter des modifications en masse directement à partir de l'éditeur de page. Après cela, vous pouvez les remplir comme d'habitude dans le menu des widgets.

Malheureusement, il manque des options de personnalisation plus avancées. Cependant, si vous souhaitez uniquement avoir des barres latérales différentes pour vos pages, cela pourrait être la solution que vous recherchez.

Barres latérales sensibles au contenu en un mot

Il existe de nombreuses bonnes raisons d'utiliser des barres latérales personnalisées sur votre site. Tous les contenus n'ont pas besoin des mêmes informations pour apparaître à côté. Avec les barres latérales sensibles au contenu, vous pouvez afficher ce qui a du sens au lieu d'utiliser une barre latérale standard.

Dans ce didacticiel, nous avons appris plusieurs façons de créer des barres latérales personnalisées. Du filtrage des widgets à la création de nouvelles barres latérales entières jusqu'à leur codage dans votre thème, tout est là.

Armé de ces informations, vous pouvez désormais fournir uniquement le contenu de la barre latérale dont vous avez besoin pour améliorer l'interaction utilisateur et le service à votre public. Essaie!

Quelle est votre expérience avec les barres latérales sensibles au contenu ? Faites-nous savoir dans la section commentaires ci-dessous!

Image miniature de l'article par Kit8.net/shutterstock.com