Comment afficher une barre latérale différente pour chaque article et page dans WordPress

« Comment puis-je afficher un contenu de barre latérale différent pour mes articles de blog et mes pages de vente ? » C'est une question fréquente que me posent les utilisateurs qui comprennent que les barres latérales uniques ne sont pas toujours la meilleure approche.

Différents types de contenu nécessitent souvent des éléments de support différents pour être efficaces.

Nous avons constaté que la personnalisation des barres latérales pour un contenu spécifique peut améliorer considérablement l'engagement et les taux de conversion. Bien que cela puisse sembler complexe, les outils WordPress modernes rendent étonnamment simple l'ajout de différentes barres latérales sur votre site.

Aujourd'hui, nous allons vous présenter les méthodes les plus fiables pour créer et gérer plusieurs barres latérales dans WordPress.

Pourquoi afficher une barre latérale différente pour certaines pages ou certains articles dans WordPress ?

Parfois, vous voudrez peut-être afficher une barre latérale WordPress différente pour certains articles ou pages afin de fournir un contenu plus pertinent à vos visiteurs.

Cette personnalisation peut être particulièrement utile lorsque vous avez des sujets variés sur votre site Web ou que vous souhaitez mettre en évidence des informations spécifiques pour différentes sections.

Par exemple, vous pourriez vouloir afficher des widgets spécifiques à une catégorie sur vos articles de blog, afficher des informations relatives aux produits sur vos pages de boutique en ligne, ou présenter des flux de médias sociaux sur votre page À propos.

Les barres latérales personnalisées peuvent également vous aider à créer une expérience plus ciblée pour vos lecteurs en présentant des liens pertinents, des publicités ou des boutons d'appel à l'action adaptés au contenu qu'ils consultent.

Cela dit, examinons 3 méthodes pour ajouter différentes barres latérales pour les articles et les pages dans WordPress. Vous pouvez utiliser les liens rapides ci-dessous pour accéder à la méthode qui vous convient le mieux :

• Méthode 1 : Créer un thème personnalisé avec différentes barres latérales pour des pages ou des articles spécifiques (Recommandé)
• Méthode 2 : Afficher une barre latérale différente sur certaines pages avec un plugin gratuit (Thèmes classiques)
• Méthode 3 : Ajouter différentes barres latérales à des modèles spécifiques dans l'éditeur complet de site WordPress (Thèmes blocs)

Méthode 1 : Créer un thème personnalisé avec différentes barres latérales pour des pages ou des articles spécifiques (Recommandé)

Parmi toutes les méthodes que nous avons essayées pour ce tutoriel, nous recommandons le plus la création d'un thème personnalisé. La raison en est qu'elle offre le plus de flexibilité et de contrôle sur la conception de votre site WordPress.

Cela dit, nous ne suggérons de suivre cette méthode que si vous êtes aux premières étapes de la création de votre site ou si vous souhaitez changer correctement de thème WordPress. En effet, le changement de thème peut avoir un impact significatif sur votre contenu et votre mise en page existants.

Si vous ne souhaitez pas changer de thème, vous pouvez passer à la méthode 2 (thèmes classiques) ou à la méthode 3 (thèmes blocs).

Pour ce tutoriel, nous vous recommandons d'utiliser un constructeur de pages tel que SeedProd ou Thrive Architect.

Les constructeurs de pages offrent beaucoup plus d'options de personnalisation et de contrôle sur votre thème, nous pensons donc qu'il est préférable de les utiliser plutôt que les fonctionnalités intégrées de WordPress.

Plusieurs de nos marques partenaires utilisent SeedProd car il est convivial pour les débutants et fiable. Vous pouvez en savoir plus sur l'outil dans notre avis sur SeedProd.

Tout d'abord, installez le plugin SeedProd sur votre site Web. Si c'est la première fois, consultez notre guide pour débutants sur comment installer un plugin WordPress.

Une fois terminé, insérez votre clé de licence SeedProd dans le champ approprié et cliquez sur « Vérifier la clé ».

Ensuite, allez dans SeedProd » Constructeur de thèmes.

Cliquez ensuite sur le bouton « Kits de modèles de thèmes ».

Vous devriez maintenant voir tous les kits de modèles de thèmes disponibles. N'hésitez pas à en utiliser l'un d'eux comme base pour votre thème personnalisé.

Vous pouvez également survoler chaque kit et cliquer sur le bouton loupe pour visualiser le thème de plus près.

Pour les besoins de ce tutoriel, nous vous recommandons de choisir un kit de thème qui possède déjà une page avec une barre latérale afin que vous puissiez simplement dupliquer ce modèle de page et personnaliser la barre latérale plus tard.

Par exemple, le kit de thème Curbside Food Truck possède un modèle de publication unique qui inclut déjà une barre latérale :

Une fois que vous avez choisi un kit, placez simplement votre curseur dessus.

Cliquez ensuite sur l'icône de coche orange lorsqu'elle apparaît.

Maintenant, attendez quelques instants que SeedProd configure votre thème.

Une fois cela fait, vous devriez être redirigé vers la page des paramètres du « Theme Builder » et voir que SeedProd a créé plusieurs modèles de thème pour votre site WordPress.

Nous pouvons maintenant commencer à modifier votre modèle de thème.

Disons que vous voulez que la barre latérale de votre page d'archives de catégorie de blog archive pages soit différente de celle de vos articles de blog. Dans ce cas, vous devez créer 2 modèles de thème de barre latérale différents.

Tout d'abord, trouvez le modèle de thème « Sidebar » dans votre kit. C'est la barre latérale par défaut que votre thème utilise lorsqu'une page nécessite une barre latérale.

À titre d'illustration, nous allons dupliquer ce modèle, puis le modifier pour le rendre différent de la version originale. Pour ce faire, vous pouvez survoler le modèle et cliquer sur « Dupliquer ».

Vous devriez maintenant voir une version copiée de votre modèle de barre latérale.

Ici, cliquez sur « Modifier le design ».

Vous arriverez maintenant dans l'éditeur SeedProd. Si le modèle de barre latérale semble plus large que prévu, ne vous inquiétez pas. La taille s'ajustera lorsque la barre latérale sera ajoutée à une page plus tard.

Dans le thème que nous avons choisi, le modèle de barre latérale par défaut affiche une barre de recherche, un appel à l'action pour l'abonnement à la newsletter, des liens vers nos pages d'archives de catégorie de blog, et un aperçu de notre flux Instagram.

Nous allons remplacer certains de ces éléments. Ces blocs ont été organisés en groupes ou en lignes, nous pouvons donc supprimer plusieurs blocs dans une seule ligne à la fois plutôt que de les supprimer un par un.

Pour ce faire, vous pouvez simplement survoler un élément jusqu'à ce qu'une ligne bleu foncé apparaisse sur un groupe entier de blocs. Ensuite, cliquez sur l'icône de corbeille « Supprimer la ligne » en haut de l'élément.

Pour créer une nouvelle ligne, survolez l'élément immédiatement au-dessus de l'endroit où vous souhaitez que la nouvelle ligne apparaisse. Lorsqu'une ligne bleu foncé apparaît, cliquez sur l'icône « + » qui s'affiche en dessous.

Ensuite, vous devez cliquer sur l'icône « + » ci-dessous.

Vous pouvez maintenant choisir une mise en page pour la ligne.

Nous allons choisir la première option car elle est la plus adaptée à nos besoins.

C'est ici que vous pouvez commencer à vous amuser et à ajouter toutes sortes de blocs à votre barre latérale.

SeedProd propose une multitude d'options, d'un compte à rebours et d'un point d'intérêt sur une image à une barre de progression et plus encore. Vous pouvez utiliser la barre de recherche ou faire défiler l'onglet « Blocs » pour trouver le bloc dont vous avez besoin.

Une fois que vous avez trouvé un bloc qui vous plaît, faites-le simplement glisser et déposez-le dans la ligne.

Pour l'exemple, nous avons décidé d'ajouter le bloc « Témoignages ».

Vous pouvez l'utiliser pour afficher un avis positif d'un client comme preuve sociale. Si vous souhaitez apprendre à en ajouter un vous aussi, vous pouvez lire notre guide sur l'ajout de témoignages rotatifs dans WordPress.

N'hésitez pas à ajouter d'autres lignes et blocs à ce stade.

Une fois que vous êtes satisfait de la conception de la barre latérale, cliquez simplement sur l'icône de flèche à côté du bouton « Enregistrer » dans le coin supérieur droit de la page. Ensuite, cliquez sur « Publier ».

Maintenant, ajoutons cette nouvelle barre latérale à un article ou à un modèle de page. Pour ce faire, retournez à SeedProd » Constructeur de thème sur votre tableau de bord WordPress.

Le kit de thème que nous utilisons a 2 modèles de thème qui comportent une barre latérale : « Article unique » et « Archives, résultats de recherche ». Le premier est pour les articles WordPress, tandis que le second est pour toutes les pages d'archives, y compris les archives de catégories, ainsi que la page des résultats de recherche.

Les deux modèles utilisent actuellement le même modèle de barre latérale.

Dans ce cas, nous voulons que le modèle « Archives, résultats de recherche » utilise la nouvelle barre latérale que nous venons de créer. Localisez donc simplement le modèle que vous souhaitez modifier et cliquez sur « Modifier la conception ».

Dans l'éditeur SeedProd, survolez la zone avec la barre latérale, et lorsqu'une barre d'outils orange apparaît au-dessus, cliquez dessus.

Le panneau des paramètres de gauche devrait indiquer « Modification : Parties du modèle ».

Dans le menu déroulant Partie du modèle, vous devez sélectionner le modèle de barre latérale que vous venez de créer.

Vous devriez maintenant voir que votre nouvelle barre latérale a été ajoutée à votre modèle de page.

Après cela, cliquez simplement sur « Enregistrer » pour publier vos modifications.

À ce stade, vous pouvez créer d'autres barres latérales et les ajouter à d'autres pages en répétant les mêmes étapes qu'auparavant.

Une fois que vous êtes satisfait, retournez simplement dans SeedProd » Theme Builder , puis activez le paramètre « Activer le thème SeedProd » jusqu’à ce qu’il indique « OUI ». Cela activera votre thème SeedProd sur votre site Web.

Et c’est tout !

Voici à quoi ressemble notre barre latérale personnalisée :

Méthode 2 : Afficher une barre latérale différente sur certaines pages avec un plugin gratuit (Thèmes classiques)

La difficulté avec les thèmes classiques est que la manière dont chacun gère les barres latérales est différente. Et la plupart du temps, vous devez utiliser la même barre latérale sur l’ensemble de votre site Web.

Si vous souhaitez créer plusieurs barres latérales pour votre thème, nous vous suggérons d’utiliser Lightweight Sidebar Manager. Ce plugin de barre latérale personnalisée vous permet de créer autant de barres latérales que vous le souhaitez, puis de les attribuer à différents articles et pages.

Vous pouvez également les ajouter à des types d’articles personnalisés ou attribuer une barre latérale à toutes les différentes pages ou articles qui ont une catégorie spécifique.

La première chose à faire est d’installer et d’activer le plugin Lightweight Sidebar Manager. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l’activation, vous devez aller dans Apparence » Barres latérales. Pour créer la première barre latérale, cliquez sur le bouton « Ajouter ».

Vous pouvez maintenant taper un titre pour la nouvelle barre latérale WordPress. Ceci est juste pour votre référence, vous pouvez donc utiliser ce que vous voulez.

Une fois cela fait, ouvrez le menu déroulant « Sidebar To Replace » et choisissez l'emplacement où vous souhaitez afficher la barre latérale. Les options que vous voyez peuvent varier en fonction de votre thème WordPress. 

Vous pouvez maintenant contrôler où la barre latérale apparaît en créant des règles d'inclusion ou d'exclusion. 

Pour créer une règle d'inclusion, ouvrez simplement le menu déroulant « Display On » et choisissez les pages, articles, types d'articles personnalisés ou catégories où vous souhaitez utiliser la barre latérale. 

Par exemple, vous pourriez ajouter la barre latérale à une page spécifique, telle que votre page d'erreur 404, l'archive de l'auteur ou la page du blog.

Une autre option consiste à utiliser la barre latérale pour une page, un article ou une catégorie particulière en sélectionnant « Specific Pages/Posts/Taxonomies ».

Cela ajoute une boîte où vous pouvez taper le nom de la page, de l'article ou de la catégorie.

Pour créer plus de règles d'inclusion, cliquez simplement sur le bouton « Ajouter une règle d'affichage ».

Cela ajoute une section où vous pouvez créer la nouvelle règle d'inclusion.

Si vous préférez, vous pouvez créer des règles d'exclusion à la place. Par exemple, vous pourriez vouloir afficher la barre latérale sur toutes les pages sauf la page d'accueil. 

Vous pouvez également combiner des règles d'inclusion et d'exclusion pour contrôler exactement où la barre latérale apparaît sur votre blog WordPress.

Pour créer une règle d'exclusion pour l'emplacement de la barre latérale, cliquez simplement sur le bouton « Ajouter une règle d'exclusion ».

Dans la nouvelle section « Ne pas afficher sur », ouvrez le menu déroulant et sélectionnez la page ou l'article qui ne devrait pas utiliser cette barre latérale. 

Vous pouvez également exclure la barre latérale des pages WordPress ayant une catégorie spécifique en suivant le même processus décrit ci-dessus.

Après avoir décidé où la barre latérale apparaîtra, vous pourriez vouloir afficher un contenu différent à différents utilisateurs.

Par exemple, si vous avez un site d'adhésion, vous pourriez vouloir utiliser une barre latérale différente pour les visiteurs que pour les membres connectés. 

Pour ce faire, ouvrez le menu déroulant « Utilisateur » et choisissez un rôle dans le menu déroulant. Désormais, seules les personnes ayant ce rôle d'utilisateur spécifique verront la barre latérale. 

Enfin, vous pourriez vouloir saisir une description facultative. Celle-ci n'apparaîtra que dans le tableau de bord WordPress, c'est donc un bon moyen de partager des informations avec d'autres administrateurs ou utilisateurs.

Si vous allez créer de nombreuses barres latérales, vous pouvez également utiliser ce champ pour vous laisser des notes et des rappels utiles.

Lorsque vous êtes satisfait des informations que vous avez saisies, cliquez simplement sur « Publier ».

Une fois cela fait, allez dans Apparence » Widgets. Vous verrez maintenant toutes les zones de widgets que votre thème prend en charge par défaut, ainsi que la nouvelle barre latérale que vous avez créée à l'étape précédente.

Vous pouvez maintenant ajouter des widgets à la barre latérale, comme toute autre section de widgets.

Pour des instructions étape par étape, veuillez consulter notre guide sur comment ajouter et utiliser les widgets WordPress. 

Lorsque vous êtes satisfait de la configuration de la barre latérale, cliquez sur « Mettre à jour ».

Maintenant, si vous visitez votre blog WordPress, vous verrez la nouvelle barre latérale en direct.

Pour créer plus de barres latérales de thème, répétez simplement ces étapes. 

Méthode 3 : Ajouter différentes barres latérales à des modèles spécifiques dans l'éditeur complet de site WordPress (Thèmes blocs)

Si vous utilisez un thème de blocs, comme le thème Twenty Twenty-Four ou Hestia, vous pouvez utiliser l'éditeur complet du site pour créer des barres latérales personnalisées et les placer où vous le souhaitez. Nous utiliserons le thème Twenty Twenty-Four pour démontrer cette méthode.

Ce qui est génial avec les thèmes de blocs, c'est que la façon dont ils sont modifiés est la même. Vous n'avez donc pas besoin d'un plugin spécial pour les barres latérales WordPress. Vous pouvez simplement utiliser l'éditeur complet du site pour ajouter une barre latérale différente à des pages ou des articles spécifiques.

Tout d'abord, allez dans Apparence » Éditeur dans votre administration WordPress.

Ici, vous verrez quelques menus pour personnaliser votre thème de blocs.

Pour créer une nouvelle barre latérale, vous devez sélectionner « Motifs ».

Maintenant, cliquez sur « Toutes les parties de modèle ».

Vous devriez maintenant voir une partie de modèle appelée « Barre latérale ». Cliquez sur le menu à trois points, puis sélectionnez « Dupliquer ». Cela créera une copie du modèle de barre latérale que vous pourrez ensuite personnaliser.

Dans la nouvelle fenêtre contextuelle, donnez un nom à votre nouvelle barre latérale pour l'identifier facilement plus tard.

Dans la section « Zone », sélectionnez « Général ». Une fois terminé, cliquez simplement sur « Dupliquer ».

Vous devriez maintenant voir votre barre latérale nouvellement dupliquée dans la liste des parties de modèle.

Cliquez simplement sur la miniature pour ouvrir l'interface d'édition.

Vous pouvez maintenant commencer à personnaliser votre barre latérale, ajouter d'autres blocs ou les configurer pour qu'ils correspondent au design de votre site web. L'éditeur de site complet fonctionne de la même manière que l'éditeur de blocs Gutenberg, en ce sens que vous n'avez qu'à faire glisser et déposer des blocs sur la partie du modèle.

Dans notre cas, nous avons décidé d'afficher nos articles les plus récents, un bouton d'appel à l'action pour s'abonner à notre liste d'e-mails, et un séparateur de forme pour séparer ces éléments.

Une fois que vous êtes satisfait de l'apparence de la barre latérale, cliquez sur le bouton « Enregistrer ».

Maintenant, nous devons ajouter cette nouvelle barre latérale à un modèle de page.

Tout d'abord, retournez au menu principal de l'éditeur de site complet. Ensuite, cliquez sur « Modèles ».

Le modèle Twenty Twenty-Four a plusieurs modèles de page avec une barre latérale, mais ils utilisent tous la même partie de modèle de barre latérale. Changeons l'un d'eux avec notre barre latérale nouvellement créée.

Pour ce faire, sélectionnez un modèle de page avec une barre latérale. Dans notre cas, nous sélectionnerons « Page avec barre latérale » afin que la barre latérale des pages normales soit différente de celle des articles WordPress individuels.

Dans l'interface d'édition, cliquez sur la section « Barre latérale ».

Dans la barre d'outils des blocs, cliquez sur le menu à trois points et sélectionnez « Supprimer » pour supprimer l'ancienne barre latérale.

Ensuite, cliquez sur l'icône « + » dans cette même section.

Après cela, localisez et sélectionnez « Partie de modèle ».

Une fois que vous avez fait cela, cliquez sur « Choisir ».

Cela vous permettra de choisir la barre latérale que vous venez de créer.

Une nouvelle fenêtre contextuelle apparaîtra, vous montrant les différentes parties de modèle que le thème possède.

Ici, cliquez simplement sur la nouvelle partie de modèle de barre latérale.

À ce stade, vous pouvez continuer à personnaliser le modèle si nécessaire.

Ensuite, cliquez simplement sur « Enregistrer ».

Vous avez maintenant personnalisé un modèle de page et y avez ajouté une barre latérale personnalisée.

Cependant, nous devons nous assurer que ce modèle est effectivement utilisé sur votre site Web. Pour ce faire, retournez au menu principal de l'éditeur de site complet et cliquez sur « Pages ».

Ensuite, choisissez une page à laquelle vous souhaitez ajouter la barre latérale.

À titre d'exemple, nous utiliserons notre page « Politique de confidentialité ».

Maintenant, cliquez sur l'icône des paramètres en haut à gauche de la page et cliquez sur « Pages » dans le panneau des paramètres de la page.

Après cela, vous devez sélectionner « Échanger le modèle ».

Une fois que vous aurez fait cela, une fenêtre contextuelle apparaîtra.

Ici, sélectionnez simplement le modèle de page avec la nouvelle barre latérale.

Et voilà ! N'hésitez pas à répéter les mêmes étapes pour créer une nouvelle barre latérale personnalisée et l'implémenter sur différentes pages et articles.

Voici à quoi ressemble notre exemple de page de politique de confidentialité avec la nouvelle barre latérale :

Nous espérons que cet article vous a aidé à apprendre comment afficher différentes barres latérales sur les pages et les articles dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment changer le côté de la barre latérale dans WordPress et nos meilleurs choix d'experts des meilleures alternatives à Canva pour les graphiques de site Web.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.