Comment ajouter une barre latérale personnalisée dans WordPress (sans codage) 

Sur mes premiers sites, j'ai eu du mal à intégrer les menus et les formulaires dans la mise en page jusqu'à ce que je comprenne ce qu'une barre latérale pouvait faire. Apprendre à ajouter une barre latérale dans WordPress s'est avéré être l'un des meilleurs changements que j'ai apportés pour maintenir l'engagement des visiteurs.

C'est l'endroit où vous pouvez maintenir l'intérêt des lecteurs avec des liens de navigation, des articles récents, ou même un formulaire de newsletter. Dans ce guide, je vais vous montrer comment ajouter une barre latérale dans WordPress étape par étape en utilisant 4 méthodes sur lesquelles je compte pour tous mes projets.

Vous pouvez ajouter une barre latérale dans WordPress en quelques clics en utilisant le constructeur visuel de SeedProd, Apparence → Personnaliseur pour les thèmes classiques, ou Apparence → Éditeur pour les thèmes blocs. Aucun codage n'est requis pour aucun d'entre eux.

Qu'est-ce qu'une barre latérale WordPress ?

Une barre latérale WordPress est une section verticale qui se trouve à côté de votre contenu principal, généralement sur le côté gauche ou droit de la page. C'est une zone de widgets où vous pouvez afficher du contenu supplémentaire comme des menus, des articles récents, des publicités ou des formulaires de newsletter sans encombrer l'espace de l'article principal.

Contrairement à votre contenu principal, qui change d'une page à l'autre, une barre latérale reste souvent la même sur l'ensemble de votre site. Vous pouvez également configurer différentes barres latérales pour différentes pages si vous avez besoin de plus de flexibilité.

Votre thème WordPress contrôle si les barres latérales sont disponibles, combien vous pouvez en utiliser et où elles apparaissent. Certains thèmes les incluent par défaut, tandis que d'autres peuvent nécessiter que vous ajoutiez les vôtres.

La plupart des barres latérales par défaut sont livrées avec des widgets de base qui ne correspondent pas toujours à vos objectifs. Si vous souhaitez plus de contrôle, vous pouvez créer une barre latérale personnalisée et choisir exactement ce qui s'affiche pour vos visiteurs.

À quoi pouvez-vous utiliser votre barre latérale WordPress ?

Vous pouvez ajouter presque n'importe quel contenu à votre barre latérale à l'aide des widgets WordPress.

Voici quelques exemples :

• Navigation – Vous pouvez utiliser des widgets de menu de navigation pour aider les utilisateurs à trouver des pages pertinentes ou un menu pour filtrer vos articles de blog par catégorie.
• Recherche – Ajouter une barre de recherche à votre barre latérale est un excellent moyen d'aider les utilisateurs à trouver rapidement ce qu'ils cherchent.
• Abonnement par e-mail – Ajoutez un formulaire d'e-mail d'opt-in à votre barre latérale pour collecter des adresses e-mail et développer votre liste.
• Contenu mis en avant – Votre barre latérale est un excellent endroit pour présenter des articles uniques qui sont plus précieux pour les utilisateurs que d'autres.
• Réseaux sociaux – Ajoutez des boutons de suivi des réseaux sociaux et un widget de partage pour développer votre audience.
• Publicités – Votre barre latérale est un excellent endroit pour afficher des publicités si vous les utilisez pour générer des revenus.
• Appels à l'action (CTA) – Si vous avez un nouveau cours en ligne, un produit ou une offre, vous pouvez ajouter un CTA à votre barre latérale pour encourager les lecteurs à le découvrir.

Cela couvre ce qu'est une barre latérale et pourquoi elle est utile. Ajoutons-en une à WordPress.

Je vais partager 4 méthodes ci-dessous : le personnaliseur WordPress, l'écran des widgets, l'éditeur de site et un constructeur de site visuel. Aucune d'entre elles ne nécessite de code.

La méthode qui vous convient dépend de votre configuration. Si vous souhaitez un contrôle de conception et des barres latérales illimitées, utilisez SeedProd (Méthode 1).

Si vous utilisez un thème classique, le personnaliseur est l'option la plus rapide (Méthode 2). Si vous utilisez un thème de blocs comme Twenty Twenty-Five, passez directement à la Méthode 4.

Comment créer une barre latérale WordPress personnalisée avec SeedProd ?

Peut-être souhaitez-vous une seule barre latérale personnalisée, ou plusieurs pour différentes parties de votre site.

Dans tous les cas, vous aurez besoin d'un plugin WordPress ou d'un code personnalisé pour en créer une. La solution la plus simple est SeedProd, qui le fait sans code.

SeedProd est le meilleur constructeur de sites Web WordPress par glisser-déposer. Vous pouvez l'utiliser pour créer des thèmes et des mises en page WordPress personnalisés sans code.

SeedProd utilise des modèles individuels pour créer toutes les parties de votre thème. L'un de ces modèles est la barre latérale, qui vous permet d'ajouter une barre latérale personnalisée à votre site en quelques clics.

Mieux encore, vous pouvez créer autant de barres latérales que vous le souhaitez avec SeedProd, et les afficher sur des pages et des articles spécifiques de votre site Web.

Suivez donc les étapes ci-dessous pour ajouter une barre latérale à WordPress avec SeedProd.

Étape 1. Installer le constructeur de site SeedProd

La première étape consiste à installer le plugin SeedProd Website Builder.

Remarque : Vous aurez besoin d'une licence SeedProd Pro ou Elite pour utiliser la fonctionnalité Theme Builder.

Vous pouvez suivre ce guide sur l'installation d'un plugin WordPress si vous avez besoin d'aide pour cette étape.

Après avoir installé et activé le fichier .zip du plugin, accédez à la page SeedProd ≫ Paramètres et entrez les détails de votre clé de licence. Vous pouvez trouver votre clé de licence sur le site Web de SeedProd dans votre tableau de bord de compte.

Étape 2. Créer vos modèles de thème WordPress

Pour créer une barre latérale personnalisée avec SeedProd, vous devrez d'abord créer les différentes parties de votre thème. C'est plus rapide que cela n'y paraît, et vous ne modifierez aucun fichier de modèle directement.

Tout d'abord, allez à la page SeedProd » Theme Builder. Vous verrez une liste de modèles pour votre thème SeedProd actuel sur cette page.

Lorsque vous l'ouvrez pour la première fois, vous ne verrez qu'un modèle CSS global.

Pour commencer, vous avez deux options.

1. Utiliser l'un des thèmes SeedProd prêts à l'emploi comme point de départ
2. Créer manuellement des modèles de thème à partir de zéro

Je suggère de commencer par un modèle de thème prédéfini. SeedProd génère tous les fichiers pour vous, vous commencez donc avec un thème fonctionnel au lieu d'une page vierge.

Pour choisir un modèle de thème, cliquez sur le bouton Thèmes et sélectionnez l'un des thèmes disponibles. Il existe différents thèmes pour différents sites Web, alors choisissez celui qui correspond le mieux à vos besoins.

Après avoir choisi un thème, SeedProd génère tous les modèles pour vous. Vous pouvez maintenant modifier chacun d'eux dans l'éditeur glisser-déposer.

Étape 3. Personnaliser votre barre latérale WordPress

Pour personnaliser votre barre latérale avec SeedProd, trouvez le modèle Barre latérale et cliquez sur le lien Modifier le design.

Cela lancera votre barre latérale dans le constructeur glisser-déposer de SeedProd. Vous verrez un aperçu en direct de votre modèle de barre latérale dans la colonne de droite avec un panneau d'édition dans la colonne de gauche.

Modifier un élément de votre barre latérale est aussi simple que de pointer et cliquer. Par exemple, vous pouvez cliquer sur l'icône de la corbeille pour supprimer des blocs.

Ou vous pouvez cliquer sur n'importe quel bloc pour voir ses paramètres dans le panneau de gauche.

Vous pouvez ajouter presque n'importe quoi en utilisant les blocs de SeedProd. Faites glisser un bloc de la gauche et déposez-le à l'endroit souhaité sur votre barre latérale.

Certains des blocs parmi lesquels vous pouvez choisir incluent :

• Balises de modèle – Blocs qui vous permettent d'ajouter du contenu dynamique de WordPress, tel que des articles de blog, des commentaires, des images mises en avant, etc. C'est un excellent moyen de créer une barre latérale dynamique.
• Blocs standard – Ce sont des éléments de conception Web populaires que la plupart des sites Web utilisent, tels que des images, des boutons, du texte et des vidéos.
• Blocs avancés – Fonctionnalités avancées de génération de prospects telles que les formulaires de contact, les profils sociaux, les boutons de partage, les formulaires d’inscription, Google Maps, et plus encore.
• WooCommerce – Si vous gérez une boutique en ligne, vous pouvez utiliser les blocs WooCommerce pour afficher les produits populaires, les paniers d'achat et d'autres fonctionnalités de la boutique dans votre barre latérale.

En plus d'ajouter du contenu à votre barre latérale, SeedProd vous permet également de personnaliser ses couleurs, ses polices, son espacement, ses bordures, et bien plus encore.

Par exemple, si vous cliquez sur l'icône des paramètres d'une section, vous pouvez voir des options pour changer la couleur d'arrière-plan, télécharger une image d'arrière-plan et modifier la largeur. Ensuite, il y a plus de paramètres dans l'onglet Avancé qui vous permettent de contrôler les bordures, l'espacement, et plus encore.

Lorsque vous êtes satisfait de votre nouvelle barre latérale, cliquez sur le bouton vert Enregistrer dans le coin supérieur droit de votre écran.

Répétez maintenant ce processus pour les autres modèles de votre thème, y compris :

• Page unique
• Publication unique
• Index/Archives du blog
• Page d'accueil
• En-tête
• Pied de page

Répétez pour chaque partie, et vous pouvez créer un thème WordPress personnalisé qui correspond à votre site.

Étape 4. Publier votre barre latérale personnalisée dans WordPress

Lorsque vous êtes satisfait de votre barre latérale WordPress personnalisée, la dernière étape consiste à l'activer sur votre site WordPress.

Dans SeedProd, vous activez un interrupteur pour le rendre public.

Accédez à la page SeedProd » Theme Builder et basculez l'interrupteur à côté de l'option « Activer le thème SeedProd » sur « Oui ».

SeedProd remplacera désormais votre conception existante par le nouveau thème et la nouvelle barre latérale WordPress.

Visitez maintenant votre site pour voir votre barre latérale personnalisée en place.

Comment afficher une barre latérale différente sur différentes pages

Une seule barre latérale convient rarement à toutes les pages. Les liens qui aident sur un article de blog peuvent sembler déplacés sur votre page de contact ou une page de vente.

Afficher une barre latérale différente sur différentes pages résout ce problème. Vous pouvez placer les articles récents à côté de vos articles, un bouton de réservation sur votre page de services, et rien du tout sur une page de destination.

Cela maintient également les visiteurs engagés. Un design interactif et bien ciblé peut augmenter la rétention des utilisateurs jusqu'à 60 %, donc une barre latérale qui correspond à la page mérite sa place.

Avec SeedProd, vous pouvez créer autant de barres latérales que vous le souhaitez et en assigner chacune à un modèle spécifique. Voici le moyen le plus rapide de le faire.

Vous préférez regarder d'abord ? Voici la partie de notre tutoriel Theme Builder qui couvre les parties globales réutilisables.

Étape 1. Dupliquez votre barre latérale existante

Plutôt que de créer une deuxième barre latérale à partir de zéro, dupliquez celle que vous avez déjà. Cela permet de conserver les polices, l'espacement et le style cohérents sur votre site.

Dans SeedProd » Theme Builder, survolez la partie de modèle Sidebar et cliquez sur Duplicate.

Une copie apparaît dans votre liste de parties de thème. Cliquez sur Edit Design sur le duplicata pour l'ouvrir dans le constructeur visuel.

Étape 2. Personnalisez le duplicata pour sa page

Modifiez maintenant le contenu pour qu'il corresponde à l'endroit où il apparaîtra. Pour supprimer un bloc, survolez-le et cliquez sur l'icône de la poubelle.

Ensuite, faites glisser les blocs que vous souhaitez. Pour une barre latérale d'archives, j'échange le formulaire d'inscription contre un bloc d'articles récents et quelques témoignages.

Cliquez sur Enregistrer lorsque la mise en page vous convient. Elle reste fidèle à votre marque car vous êtes parti de votre barre latérale d'origine.

Étape 3. Attribuez la barre latérale à un modèle spécifique

Ensuite, décidez quelles pages doivent utiliser la nouvelle barre latérale. Les thèmes SeedProd incluent généralement un modèle Article unique pour les articles de blog et un modèle Archives, Résultats de recherche pour les pages de catégories et de résultats de recherche.

Dans cet exemple, je veux que les pages d'archives utilisent ma nouvelle barre latérale. Trouvez le modèle Archives, Résultats de recherche et cliquez sur Modifier le design.

Dans l'éditeur, survolez la zone de la barre latérale jusqu'à ce que la barre d'outils orange apparaisse, puis cliquez pour la sélectionner. Le panneau de gauche indiquera Modification : Parties de modèle.

Ouvrez le menu déroulant Partie de modèle et choisissez la barre latérale que vous venez de créer.

La mise en page se met à jour immédiatement. Cliquez sur Enregistrer, et vos pages d'archives affichent désormais une barre latérale différente de celle de vos articles de blog.

Répétez ces étapes pour tout autre modèle, comme les Pages ou une mise en page WooCommerce spécifique. Chacun peut avoir sa propre barre latérale.

Comment afficher différentes barres latérales sans constructeur de page

Vous n'avez pas besoin d'un constructeur de page si vous préférez l'éviter. Il existe deux méthodes sans constructeur, en fonction de votre thème.

Sur un thème classique, le personnalisateur intégré vous permet souvent de définir des mises en page de barres latérales distinctes pour les articles, les pages et les archives. J'aborde cela dans la méthode du personnalisateur ci-dessous.

Sur un thème de blocs, vous attribuez le contenu de la barre latérale par modèle dans l'éditeur de site. Je vous guide à travers cela dans la méthode du thème de blocs plus bas.

Si vous souhaitez un contrôle par page sur un thème classique sans constructeur, un plugin gratuit comme Custom Sidebars, Dynamic Widget Area Manager crée des zones de widgets supplémentaires et les attribue à des articles, pages ou catégories spécifiques.

Cela fonctionne avec la plupart des thèmes et ne nécessite aucun code. Le compromis est que vous êtes limité aux mises en page basées sur des widgets, sans le contrôle visuel complet que vous offre SeedProd.

Comment ajouter une barre latérale à l'aide du personnalisateur WordPress ?

Le personnalisateur WordPress intégré facilite l'ajout d'une barre latérale personnalisée à votre site WordPress. Le personnalisateur utilise les paramètres par défaut de votre thème WordPress pour contrôler la disposition, le contenu et le placement de votre barre latérale.

Pour utiliser cette méthode, vous aurez besoin d'un thème WordPress qui inclut des zones de widgets de barre latérale. Si vous n'avez pas encore de thème, voici les thèmes WordPress les plus populaires pour les petites entreprises.

Pour ce guide, j'utilise le Thème WordPress Astra.

Étape 1 : Ajouter la mise en page de votre barre latérale WordPress

Après avoir installé votre thème, accédez à Apparence ≫ Thèmes et cliquez sur le bouton bleu Personnaliser.

Cela vous mènera à la page de personnalisation de WordPress, où vous pourrez modifier la mise en page et le design de votre thème. Les paramètres varient d'un thème à l'autre, mais j'utiliserai Astra ici pour que vous puissiez voir comment cela fonctionne.

Regardez le panneau de gauche dans l’outil de personnalisation et trouvez le titre « Barre latérale ». Cliquez sur ce titre pour ouvrir les options de personnalisation de votre barre latérale.

Sur l’écran suivant, vous pouvez choisir parmi les options de barre latérale suivantes :

• Disposition par défaut – Pas de barre latérale, barre latérale droite ou barre latérale gauche.
• Pages – Où afficher la barre latérale sur les pages individuelles.
• Articles – Où afficher votre barre latérale sur les articles individuels.
• Archives – Comment votre barre latérale apparaît sur les pages d’archives comme votre page de blog.

Vous pouvez également choisir la largeur de votre barre latérale sur la même page. Lorsque vous êtes satisfait de la mise en page de votre barre latérale, cliquez sur le bouton Publier.

Étape 2. Ajouter des widgets à votre barre latérale avec le personnaliseur

Après avoir choisi la mise en page de votre barre latérale, vous pouvez commencer à y ajouter des widgets. Pour ce faire, trouvez le titre « Widgets » dans le menu de l’outil de personnalisation WordPress et cliquez pour ouvrir les paramètres.

Sur l’écran suivant se trouve une liste des barres latérales actuellement disponibles pour cette page particulière, alors cliquez sur la barre latérale que vous souhaitez personnaliser.

Vous verrez maintenant un constructeur de barre latérale, prêt à afficher les widgets que vous choisissez. Cliquez sur l’icône plus (+) pour rechercher un bloc ou un widget que vous souhaitez afficher dans votre barre latérale.

Cliquer sur un bloc l’ajoutera automatiquement à votre barre latérale.

Continuez à ajouter des widgets à votre barre latérale jusqu’à ce qu’elle vous convienne. Cliquez ensuite sur le bouton Publier pour enregistrer vos modifications.

Maintenant, lorsque vous visiterez votre page, vous verrez votre barre latérale WordPress personnalisée.

Comment ajouter des widgets à votre barre latérale WordPress ?

La méthode suivante utilise l’écran des widgets WordPress pour ajouter une barre latérale à WordPress. Elle est similaire à la méthode précédente, mais elle vous permet uniquement d’ajouter des widgets à votre barre latérale au lieu de vous permettre de modifier son emplacement.

Accédez à Apparence ≫ Widgets depuis votre tableau de bord WordPress pour utiliser cette méthode. Vous pouvez voir toutes les barres latérales que votre thème prend actuellement en charge sur cet écran.

Dans mon cas, le thème inclut 4 zones de barre latérale :

1. Barre latérale principale
2. En-tête
3. Section 1 de la barre de pied de page
4. Section 2 de la barre de pied de page

L'ajout de widgets fonctionne comme à l'étape précédente. Cliquez sur l'icône plus et recherchez les widgets que vous souhaitez.

Lorsque vous avez terminé de créer votre barre latérale, cliquez sur le bouton Mettre à jour. Vous pouvez maintenant visiter votre site et voir votre nouvelle barre latérale.

Comment ajouter une barre latérale dans un thème bloc WordPress ?

Les thèmes basés sur des blocs comme Twenty Twenty-Five n’utilisent pas les zones de widgets de barre latérale traditionnelles. Au lieu de cela, vous créez un effet de barre latérale directement dans vos modèles de page à l’aide de l’éditeur de site.

J’ai moi-même rencontré cette confusion. Lorsque vous passez à un thème basé sur des blocs, l’outil de personnalisation ne contrôle plus l’emplacement de la barre latérale, et cela perturbe beaucoup de monde.

Pour ajouter une barre latérale dans un thème bloc, allez dans Apparence → Éditeur dans votre tableau de bord WordPress. Cliquez sur Modèles et choisissez le modèle que vous souhaitez modifier, comme Article unique ou Page.

Dans l'éditeur de modèle, cliquez sur le bouton + et recherchez Colonnes. Insérez une mise en page à deux colonnes et redimensionnez-la de sorte que la colonne de la barre latérale soit plus étroite que la colonne de contenu.

Ajoutez le contenu principal de votre page à la colonne la plus large à l'aide d'un bloc Contenu de l'article. Dans la colonne la plus étroite, ajoutez du contenu de barre latérale comme Articles récents, Recherche ou un bloc HTML personnalisé.

Lorsque vous êtes satisfait de la mise en page, cliquez sur Enregistrer. Votre barre latérale apparaîtra désormais sur toutes les pages utilisant ce modèle.

Gardez à l'esprit que cela ne s'applique qu'aux thèmes blocs. Si vous utilisez un thème classique, les méthodes 1, 2 ou 3 ci-dessus sont le bon choix.

FAQ sur l'ajout d'une barre latérale à WordPress

Comment ajouter une barre latérale gauche et droite dans WordPress ?

Pour une barre latérale droite, allez dans Apparence → Personnaliser et trouvez les paramètres de mise en page ou de barre latérale de votre thème. Choisissez Barre latérale droite ou Barre latérale gauche parmi les options de mise en page. Avec SeedProd, vous définissez le placement des colonnes directement dans l'éditeur glisser-déposer. Pour les thèmes blocs, utilisez le bloc Colonnes de l'Éditeur de site et placez le contenu de la barre latérale dans la colonne de votre choix.

Qu'est-ce qu'une barre latérale dans WordPress ?

Une barre latérale WordPress est une zone de widgets verticale qui se trouve à côté de votre contenu principal, généralement sur le côté gauche ou droit de la page. Vous pouvez la remplir avec des menus de navigation, des articles récents, des formulaires d'inscription par e-mail ou des publicités. La plupart des thèmes WordPress classiques incluent une barre latérale par défaut. Les thèmes blocs n'en incluent pas à moins que vous ne l'ajoutiez via l'Éditeur de site.

Comment modifier ma barre latérale WordPress ?

Pour les thèmes classiques, allez dans Apparence → Widgets et ajoutez ou réorganisez des blocs dans votre zone de barre latérale. Dans le personnalisateur, allez plutôt dans Apparence → Personnaliser → Widgets. Avec SeedProd, ouvrez le Générateur de thèmes, trouvez le modèle de barre latérale et cliquez sur Modifier la conception pour le mettre à jour dans l'éditeur visuel. Vos modifications seront en ligne lorsque vous enregistrerez et publierez.

Que faire si mon thème WordPress n'a pas de barre latérale ?

Si votre thème classique n'inclut pas de barre latérale, passez à un thème qui prend en charge les zones de widgets ou utilisez le Générateur de thèmes de SeedProd pour en créer une. Pour les thèmes blocs, les paramètres de barre latérale du personnalisateur n'apparaîtront pas car les thèmes blocs utilisent l'Éditeur de site. Allez dans Apparence → Éditeur, ouvrez votre modèle et ajoutez un bloc Colonnes pour créer la mise en page de la barre latérale.

Puis-je afficher différentes barres latérales sur différentes pages dans WordPress ?

Oui. De nombreux thèmes classiques vous permettent d'attribuer différentes zones de barre latérale à des types de pages spécifiques, tels que les articles, les pages et les archives, via le personnalisateur. Avec SeedProd, vous pouvez créer des barres latérales illimitées et en attribuer chacune à un modèle ou une page spécifique. Cela permet d'afficher facilement une barre latérale de blog sur les articles et une barre latérale différente sur vos pages de services ou de destination.

Où puis-je gérer différentes barres latérales dans SeedProd ?

Toutes vos barres latérales se trouvent sous SeedProd » Constructeur de thème en tant que parties de modèle. Vous dupliquez ou ajoutez une partie Barre latérale là-bas, puis ouvrez n'importe quel modèle, sélectionnez sa zone de barre latérale et choisissez quelle barre latérale afficher dans le menu déroulant Partie de modèle.

Puis-je ajouter une barre latérale personnalisée aux pages WooCommerce ?

Oui. SeedProd prend en charge WooCommerce, vous pouvez donc attribuer une barre latérale personnalisée aux pages de produits, aux archives de la boutique, au panier et à la caisse. Créez la barre latérale en tant que partie de modèle, puis définissez-la sur le modèle WooCommerce pertinent.

Puis-je supprimer complètement la barre latérale d'une page ?

Oui. Laissez simplement le bloc de barre latérale ou la partie de modèle hors de la mise en page de cette page, et le contenu remplira toute la largeur. C'est un choix courant pour les pages de destination et les pages de contact où une barre latérale ne ferait que distraire.

Bien maîtriser le contrôle de la barre latérale signifie que chaque page travaille plus dur pour vous. Vous pouvez diriger les lecteurs vers votre meilleur contenu et les maintenir engagés sans modifier votre mise en page principale.

Pour une flexibilité de conception maximale, le Theme Builder de SeedProd vous permet de créer un nombre illimité de barres latérales personnalisées et de les assigner à n'importe quelle page ou publication. Aucun code requis.

Vous pourriez également aimer cet article sur les meilleurs exemples de lead magnets pour développer votre liste. Et si vous affinez toute votre mise en page, consultez notre guide sur comment changer la mise en page de votre blog dans WordPress.

Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.