Comment changer le côté de la barre latérale dans WordPress (4 méthodes)

Lorsque nous avons commencé à personnaliser les thèmes WordPress, déplacer la barre latérale de droite à gauche semblait être une chose simple à faire.

Pourtant, nous avons découvert que de nombreux utilisateurs ont du mal avec ce changement de mise en page de base car chaque thème le gère différemment, et certains ne rendent pas l'option évidente.

Après avoir aidé des utilisateurs via WPBeginner, nous avons appris que le positionnement de la barre latérale peut avoir un impact significatif sur la façon dont les visiteurs interagissent avec votre contenu.

Que vous suiviez les meilleures pratiques de conception ou que vous vous adaptiez aux habitudes de lecture de votre public, savoir comment changer la position de votre barre latérale est une compétence précieuse.

Dans ce guide, nous vous montrerons les moyens les plus simples de changer la position de votre barre latérale dans WordPress.

Comment changer le côté de la barre latérale de mon thème WordPress ?

Pour changer le côté de la barre latérale de votre thème WordPress, vous devez d'abord vérifier quel type de thème vous utilisez. Les thèmes WordPress se répartissent généralement en deux catégories : les thèmes classiques et les thèmes de blocs.

Si vous utilisez un thème classique, vous verrez généralement une option « Widgets » sous le menu « Apparence » dans votre tableau de bord WordPress. Ces thèmes utilisent souvent des zones de widgets pour créer des barres latérales et ajouter divers widgets comme des formulaires de contact, des flux de médias sociaux et les articles récents.

Dans ce cas, vous pouvez soit utiliser le personnaliseur de thème WordPress, soit le CSS du thème pour changer le côté de la barre latérale.

Les thèmes de blocs, quant à eux, utilisent l'éditeur de site complet et n'ont pas de section « Widgets » distincte. Au lieu de cela, ils utilisent des colonnes pour créer des zones similaires à des barres latérales, où vous pouvez y glisser-déposer des blocs.

Vous pourriez avoir besoin de changer le côté de la barre latérale pour diverses raisons. Par exemple, peut-être que votre site web s'adresse à des langues qui s'écrivent et se lisent de droite à gauche. Avoir la barre latérale sur le côté gauche correspond mieux au flux de lecture naturel de vos utilisateurs.

Ou vous voulez améliorer l'expérience utilisateur. Peut-être que vous gérez un site e-commerce et que vous remarquez que les clients potentiels parcourent souvent vos pages web d'une certaine manière. Vous voulez accommoder ce comportement afin qu'ils se sentent plus à l'aise pour faire des achats sur votre site.

Avec tout cela à l'esprit, examinons comment changer le côté de la barre latérale sur votre blog ou site web WordPress. Nous avons trouvé 3 méthodes faciles, et vous pouvez utiliser les liens rapides ci-dessous pour passer à celle que vous préférez :

• Méthode 1 : Comment changer le côté de la barre latérale avec le personnaliseur WordPress (Thèmes classiques)
• Méthode 2 : Comment changer le côté de la barre latérale avec du code (Thèmes classiques)
• Méthode 3 : Comment changer le côté de la barre latérale avec FSE (Thèmes de blocs)
• Méthode 4 : Comment changer le côté de la barre latérale avec CSS Hero (Tous les thèmes)
• Alternative : Créer des barres latérales personnalisées avec un plugin de constructeur de pages WordPress

Méthode 1 : Comment changer le côté de la barre latérale avec le personnaliseur WordPress (Thèmes classiques)

Cette méthode s'adresse aux personnes utilisant un thème classique. Cela signifie que vous pouvez toujours utiliser le personnaliseur WordPress pour styliser le design de votre site, et que la section Widgets du menu Apparence de l'administration WordPress existe toujours.

Si le personnaliseur de thème est manquant dans votre tableau de bord WordPress, vous utilisez probablement un thème de blocs et devez passer à la troisième méthode.

Parfois, les développeurs de thèmes classiques proposent plusieurs emplacements de barre latérale parmi lesquels vous pouvez choisir. Vous pouvez confirmer si c'est le cas en utilisant le personnaliseur WordPress et en y choisissant la position de barre latérale que vous préférez.

Tout d'abord, allez dans Apparence » Personnaliser. Nous utilisons le thème Hestia comme exemple.

Ici, dirigez-vous vers la page Paramètres d'apparence » Paramètres généraux dans la colonne de gauche

Comme vous pouvez le voir, Hestia propose trois modèles de barre latérale : un sans barre latérale, un avec une barre latérale gauche et un avec une barre latérale droite. Cela nous permet de changer le côté de la barre latérale en un clic. Ici, nous avons changé le côté de la barre latérale vers la gauche.

Ce paramètre contrôle la mise en page par défaut de la barre latérale pour l'ensemble de votre site Web. Cependant, Hestia vous permet également de personnaliser la position de la barre latérale du blog séparément, de sorte qu'elle n'affecte que vos articles de blog ou la page des articles.

Une fois que vous avez apporté les modifications, vous pouvez ajouter les widgets disponibles à la barre latérale comme d'habitude. Pour plus d'informations, consultez notre guide sur comment ajouter et utiliser des widgets dans WordPress.

Ensuite, cliquez simplement sur « Publier ».

Bien que ce soit une fonctionnalité pratique, tout dépend du thème. Nous vous recommandons vivement de consulter la documentation de votre thème pour voir si vous pouvez changer la barre latérale à l'aide du personnaliseur.

Sinon, passez à la méthode suivante.

Méthode 2 : Comment changer le côté de la barre latérale avec du code (Thèmes classiques)

Si votre thème classique n'offre pas plusieurs barres latérales parmi lesquelles choisir, vous pouvez changer le côté de la barre latérale manuellement à l'aide de code CSS.

Nous vous recommandons d'utiliser un site de staging et/ou un thème enfant pour expérimenter cette méthode. De cette façon, si une erreur se produit, elle n'affectera pas votre thème parent et/ou votre site Web en direct.

De plus, l'utilisation d'un thème enfant peut empêcher vos modifications d'être écrasées lors d'une mise à jour du thème.

Étape 1 : Utilisez l'outil d'inspection pour localiser la classe CSS de votre barre latérale

La première chose que vous ferez est d'ouvrir votre site Web. Ensuite, survolez la zone de votre barre latérale et utilisez l'outil d'inspection de votre navigateur.

Si vous utilisez Chrome, vous pouvez simplement faire un clic droit sur la zone et sélectionner « Inspecter ».

Pour plus d'informations, vous pouvez consulter notre guide sur les bases de l'élément d'inspection.

Maintenant, ce que vous voulez faire, c'est survoler les lignes HTML et CSS en haut à droite de la page avec votre curseur.

Lorsque vous voyez que toute la zone de votre barre latérale est mise en surbrillance, cliquez sur cette ligne. Pour nous, c'était <aside id="secondary" class="sidebar widget-area">.

L'onglet « Styles » en bas de la page contient toutes les propriétés CSS relatives à la barre latérale.

Dans notre cas, nous avons vu que la classe CSS de la zone de la barre latérale est .sidebar. Il existe également des règles qui déterminent la position de la barre latérale, qui dans ce cas, est le côté gauche.

Nous le savons car lorsque nous décochons la règle margin-left, la barre latérale se déplace de l'autre côté.

Voici le code de la zone de la barre latérale de notre thème :

.sidebar {
float: left;
margin-left: 75%;
padding: 0;
width: 25%;
}

Vous pouvez copier et coller ce code dans un éditeur de texte car nous en aurons besoin pour une étape ultérieure. Ou, vous pouvez simplement laisser cet onglet ouvert pour plus tard.

Maintenant que nous connaissons la classe CSS de la zone de la barre latérale, nous devons également trouver la classe de la zone de contenu principale qui affiche tous vos articles ou le contenu des articles.

Ce que vous pouvez faire, c'est survoler les lignes HTML et CSS pour voir quelle ligne met en surbrillance la zone de contenu principale. Ici, nous avons découvert que c'était la ligne <div id="primary" class="content-area">.

Comme précédemment, vous pouvez faire défiler vers l'onglet « Styles » pour voir quelle est la classe CSS de cette zone. Dans ce cas, c'était .content-area. Voici le code correspondant :

.content-area {
float: left;
margin-right: -100%;
width: 70%;
}

Encore une fois, vous pouvez copier-coller le code CSS de votre zone de contenu dans un éditeur de texte ou laisser cet onglet ouvert pour l'étape suivante.

Maintenant que nous connaissons les classes CSS de votre barre latérale et de votre zone de contenu, nous pouvons modifier votre fichier style.css de thème pour changer le côté de la barre latérale.

Étape 2 : Personnaliser le fichier style.css de votre thème

Habituellement, vous devrez modifier votre style.css directement à l'aide du gestionnaire de fichiers de votre hébergeur web ou d'un client FTP. Cependant, le fichier style.css peut être assez long, et si vous faites une erreur, cela pourrait affecter la conception de votre site web entier et ruiner votre expérience utilisateur.

C'est pourquoi nous recommandons d'utiliser WPCode. Après des tests approfondis, nous avons conclu que c'est le moyen le plus sûr et le plus simple de personnaliser votre fichier style.css sans avoir à le modifier directement.

Si vos modifications de code entraînent des erreurs involontaires, vous pouvez les désactiver en un seul clic et votre site web reviendra à la normale.

Pour en savoir plus, consultez notre avis sur WPCode.

Tout d'abord, installez WPCode sur votre WordPress. Si vous avez besoin d'instructions étape par étape, lisez notre guide sur comment installer un plugin WordPress.

Une fois terminé, allez dans Snippets de code » + Ajouter un snippet. Sélectionnez ensuite « Ajouter votre code personnalisé (Nouveau snippet) » et cliquez sur le bouton « + Ajouter un snippet personnalisé ».

Maintenant, tapez un titre pour votre code personnalisé. Il peut s'agir de quelque chose comme « Modifier la position de la barre latérale ».

Ensuite, changez le type de code en « Snippet CSS ».

Une fois terminé, vous devez insérer les extraits de code CSS de votre barre latérale et de vos zones de contenu dans la boîte d'aperçu du code.

Vous pouvez les séparer par un espace vide pour qu'il soit facile de les identifier, comme ceci :

.sidebar {
float: left;
margin-left: 75%;
padding: 0;
width: 25%;
}

.content-area {
float: left;
margin-right: -100%;
width: 70%;
}

Maintenant, personnalisons ce code CSS. Ce que vous voulez faire, c'est modifier les propriétés CSS qui définissent les emplacements de la barre latérale et du contenu principal.

Dans notre cas, ces classes CSS ont les propriétés float, margin, padding et width, mais cela peut être différent selon votre thème.

Pour notre zone de barre latérale, nous avons changé left en right dans les propriétés float et margin. Cela signifie que la zone de la barre latérale sera dans la direction opposée à son emplacement d'origine.

.sidebar {
float: right;
margin-right: 75%;
padding: 0;
width: 25%;
}

Une fois cette partie terminée, changeons l'emplacement de la zone de contenu. Ce qui a fonctionné pour nous, c'est que nous avons changé float: left en float: right et margin-right en margin-left. Cela indique à WordPress de déplacer la zone de contenu vers la droite.

De plus, nous avons ajouté les propriétés position: relative et right: 100%. Celles-ci garantissent que notre zone de contenu ne s'éloigne pas trop sur le côté droit.

.content-area {
float: right;
margin-left: -100%;
width: 70%;
position: relative;
right: 100%;
}

Encore une fois, ce qui fonctionne pour notre thème peut ne pas fonctionner pour le vôtre car chaque thème a des noms différents pour ses classes CSS et utilise des propriétés différentes. Nous vous recommandons de consulter cette référence CSS complète pour déterminer ce qui convient le mieux à votre thème.

De plus, n'hésitez pas à jouer avec les pourcentages de la largeur et des marges dans le code pour ajuster le placement de la barre latérale.

Une fois que vous avez modifié votre extrait de code, faites défiler vers le bas jusqu'à la section Insertion. Assurez-vous que la méthode d'insertion est 'Insertion automatique'.

Quant à l'emplacement, sélectionnez 'Pied de page de tout le site' afin que votre code puisse remplacer le code existant dans votre fichier style.css.

Maintenant, vous pouvez cliquer sur le commutateur en haut à droite pour rendre le code 'Actif' et cliquer sur 'Enregistrer l'extrait'. Ensuite, prévisualisez votre site Web pour voir les résultats.

Si vous regardez les captures d'écran ci-dessus, vous pouvez voir que la barre latérale sur notre site Web de démonstration était sur le côté droit.

Après avoir modifié le code dans style.css, le thème a maintenant une barre latérale gauche :

Maintenant que vous avez changé le côté de la barre latérale, vous pouvez commencer à modifier ou à ajouter plus de contenu à la barre latérale. Voici quelques idées pour vous aider :

• Comment ajouter une image dans un widget de la barre latérale WordPress
• Comment ajouter un lien aux titres de widgets dans WordPress
• Comment ajouter des styles personnalisés aux widgets WordPress
• Comment désactiver les widgets indésirables dans WordPress
• Comment personnaliser l'affichage des archives WordPress dans votre barre latérale

Méthode 3 : Comment changer le côté de la barre latérale avec FSE (Thèmes de blocs)

Si vous utilisez un thème de blocs, vous ne verrez pas de section Widgets dans votre administration WordPress. Vous vous demandez peut-être comment changer le côté de la barre latérale si ce menu n'existe pas.

Heureusement, le processus est beaucoup plus simple que celui des thèmes classiques. C'est parce que les thèmes de blocs utilisent les blocs Gutenberg, et vous pouvez simplement glisser-déposer les éléments pour changer leur position en utilisant l'éditeur complet du site (FSE).

Deuxièmement, les thèmes de blocs auront généralement un modèle qui inclut une barre latérale. Il suffit de la modifier, et toutes les pages utilisant ce modèle seront affectées. Vous pouvez consulter la documentation de votre thème pour savoir comment il s'appelle afin d'y accéder.

Pour la démonstration, nous utiliserons le thème Twenty Twenty-Four, qui possède une page avec un modèle de barre latérale.

Tout d'abord, allez dans Apparence » Éditeur dans votre tableau de bord.

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

Sélectionnez « Modèles ».

Maintenant, trouvez le modèle avec la barre latérale que vous souhaitez modifier.

Dans Twenty Twenty-Four, il s'agit de « Page avec barre latérale » et « Article avec barre latérale ». Selon votre thème, le nom du modèle ne mentionnera peut-être pas clairement qu'il a une barre latérale, donc encore une fois, vous devriez consulter la documentation de votre thème.

Allez-y et sélectionnez ce modèle de barre latérale.

Généralement, les thèmes de blocs incluent la barre latérale et la zone de contenu principale dans un bloc de colonnes. Cela permet de garder tout propre, organisé et bien séparé les uns des autres.

Pour changer le côté de la barre latérale, il suffit de sélectionner la colonne qui compose la barre latérale et de la déplacer.

La façon la plus simple de le faire est de cliquer sur la fonctionnalité « Vue de liste » sur le côté gauche de la page.

Ensuite, cliquez sur le bloc « Colonnes » pour le développer et survolez son contenu jusqu'à ce que vous trouviez la colonne qui contient les éléments de la barre latérale.

Dans notre cas, cela a été facilité par le fait que le thème Twenty Twenty-Four possède une partie de modèle appelée « Sidebar », il a donc été facile de l'identifier. Cela dit, certains thèmes peuvent simplement inclure un groupe de blocs ordinaire, sans nom, qui constituent la barre latérale.

Vous saurez que vous avez sélectionné la bonne colonne lorsqu'un surlignage rectangulaire et une barre d'outils apparaîtront autour de l'ensemble du groupe de blocs de la barre latérale.

Maintenant, dans la barre d'outils de la colonne latérale, vous verrez des flèches que vous pouvez utiliser pour modifier la position de la colonne.

Cliquez dessus, et selon la conception du bloc Colonnes, vous devrez peut-être jouer avec la position jusqu'à ce que vous trouviez le bon ajustement.

Le développeur du thème a peut-être ajouté des colonnes vides pour créer un espace entre la zone de contenu principale et la zone de la barre latérale.

Si vous souhaitez la supprimer, trouvez simplement la bonne colonne vide en utilisant la vue Liste comme précédemment. Ensuite, dans la barre d'outils du bloc, cliquez sur le menu à trois points et sélectionnez « Supprimer ».

Ou si vous souhaitez créer plus d'espace entre la zone de la barre latérale et la zone de contenu, vous pouvez ouvrir l'onglet des paramètres du bloc et passer à la section « Styles ».

Ensuite, dans la section « Dimensions », vous pouvez faire glisser le curseur pour le remplissage, la marge, ou l'espacement des blocs.

Une fois terminé, cliquez sur « Enregistrer ».

Ensuite, vous pouvez prévisualiser toutes les pages sur mobile et sur ordinateur qui utilisent le modèle que vous venez de modifier pour voir à quoi cela ressemble.

Et si vous avez modifié le modèle, mais que vos pages ou articles ne l'utilisent pas ?

Tout ce que vous avez à faire est d'ouvrir la page ou l'article dans l'éditeur de blocs. Ensuite, dans le panneau des paramètres de l'article, cliquez sur le lien dans le champ « Modèle » et sélectionnez « Échanger le modèle ».

Maintenant, choisissez simplement le modèle qui utilise la barre latérale.

Après cela, vous pouvez mettre à jour la page ou l'article.

Pour plus de conseils et d'astuces sur l'utilisation de l'éditeur complet ou de l'éditeur de blocs, consultez ces guides :

• Comment modifier un site Web WordPress (Guide ultime)
• Comment personnaliser les couleurs de votre site WordPress

Méthode 4 : Comment changer le côté de la barre latérale avec CSS Hero (Tous les thèmes)

La méthode suivante utilise un plugin payant appelé CSS Hero, qui est le meilleur plugin WordPress pour l'édition visuelle de CSS. Ce plugin permet de personnaliser le CSS de votre thème sans toucher au code, ce qui le rend idéal pour les débutants.

Cette méthode fonctionne également avec tous les thèmes, donc si vous trouvez que les méthodes précédentes sont légèrement limitantes, vous pouvez utiliser celle-ci à la place. Cela dit, il n'existe pas de version gratuite du plugin, vous devez donc acheter un plan payant.

Pour plus d'informations sur le plugin et ses tarifs, consultez notre avis sur CSS Hero.

Tout d'abord, téléchargez le plugin sur votre ordinateur et installez-le sur votre site WordPress. Pour des instructions étape par étape, consultez notre guide pour débutants sur comment installer un plugin WordPress.

Une fois installé, vous verrez un menu « CSS Hero » dans la barre d'outils. Cliquez dessus pour ouvrir l'éditeur CSS visuel.

Gardez à l'esprit que, comme tous les thèmes WordPress ne fonctionnent pas de la même manière, la façon dont vous utilisez CSS Hero pour changer le côté de la barre latérale sera différente. Nous vous encourageons donc à jouer avec la plateforme pour voir ce qui vous convient le mieux.

Cela dit, nous allons vous montrer les paramètres que nous avons personnalisés pour changer le côté de la barre latérale de droite à gauche.

Tout d'abord, cliquez sur la zone de la barre latérale sur votre page. Vous saurez que vous avez cliqué sur la bonne zone lorsque tous les éléments de votre barre latérale seront sélectionnés en groupe et auront un surlignage rectangulaire autour d'eux.

Sur le côté gauche de la page, vous verrez quelques menus pour personnaliser vos éléments.

D'après notre expérience, les paramètres qui peuvent changer le placement de la barre latérale sont Position, Mesures et Espacements.

La position détermine comment la barre latérale est placée par rapport aux autres éléments de la page. Ici, vous pouvez sélectionner « Absolu », ce qui vous donnera une certaine liberté quant à l'emplacement de la barre latérale.

À partir de là, vous pouvez modifier les pixels Haut, Droite, Bas et Gauche pour placer la barre latérale.

Vous pouvez voir que maintenant la barre latérale et la zone de contenu principal sont du même côté.

Pour résoudre ce problème, vous pouvez survoler le conteneur qui constitue la zone de contenu principal et cliquer dessus.

Maintenant, dans le panneau latéral gauche, ajustez simplement les paramètres de Position jusqu'à ce que vous trouviez le bon ajustement.

Ce que nous avons fait, c'est laisser la position sur « Relatif » et ajuster les pixels de droite.

Techniquement, c'est tout ce que vous avez à faire. Mais si vous voulez ajuster la taille de la barre latérale, sélectionnez la zone de la barre latérale et allez dans les paramètres « Mesures ».

Ici, vous pouvez modifier la largeur et la hauteur de la barre latérale.

Si vous souhaitez modifier l'espacement entre la zone de la barre latérale et la zone de contenu principal, vous pouvez aller dans « Espacements ».

Vous verrez ici des curseurs pour ajuster le remplissage et la marge de l'élément.

Encore une fois, nous vous encourageons à explorer les paramètres de ce plugin pour modifier le côté de la barre latérale selon vos préférences exactes.

Une fois que vous avez terminé, vous pouvez cliquer sur le bouton « Enregistrer » dans le coin inférieur droit de la page.

Alternative : Créer des barres latérales personnalisées avec un plugin de constructeur de pages WordPress

Jusqu'à présent, nous avons exploré des méthodes pour changer l'emplacement de la barre latérale pour l'ensemble de votre site Web. Mais que faire si vous ne voulez que des barres latérales spécifiques pour certaines pages ou certains types de publications ? Après tout, toutes les pages n'ont pas besoin du même contenu dans la barre latérale.

Par exemple, votre page d'accueil pourrait bénéficier d'une barre latérale plus générale avec des icônes de médias sociaux et un appel à l'action. Cependant, une page produit pourrait être mieux avec une barre latérale présentant des produits connexes ou des avis clients.

Dans ce cas, vous voudrez peut-être créer des barres latérales personnalisées pour votre thème WordPress. Avec des barres latérales personnalisées, vous pouvez :

• Attribuer des barres latérales spécifiques à différentes pages ou types de publications. Cela vous permet d'adapter le contenu de votre barre latérale aux besoins spécifiques de chaque page.
• Créez une expérience utilisateur plus dynamique et engageante. En proposant un contenu pertinent dans la barre latérale, vous pouvez maintenir l'intérêt des visiteurs et les inciter à explorer davantage votre site web.

C'est là qu'un plugin de constructeur de pages WordPress s'avère utile. Ces plugins offrent une fonctionnalité de glisser-déposer et des bibliothèques de modèles étendues, ce qui facilite la création de barres latérales personnalisées.

Nous vous recommandons d'utiliser SeedProd, qui est un plugin populaire et convivial de construction de pages et de thèmes. Avec SeedProd, vous pouvez facilement concevoir des pages et des thèmes personnalisés grâce à son interface conviviale.

Vous pouvez consulter ces articles pour plus d'informations :

• Comment ajouter un en-tête, un pied de page ou une barre latérale personnalisés pour chaque catégorie
• Comment afficher une barre latérale différente pour chaque article et page dans WordPress

Alternativement, vous pouvez utiliser le constructeur de pages Thrive Architect. Cet outil dispose également de nombreux kits de thèmes et de modèles de pages de destination, et offre même une fonctionnalité pour créer un widget de barre latérale flottante et fixe. Ceci est utile pour maintenir votre barre latérale fixe pendant que les utilisateurs font défiler la page.

Nous espérons que ce tutoriel WordPress vous a aidé à apprendre comment changer le côté de la barre latérale dans WordPress. Vous voudrez peut-être aussi consulter notre article sur comment ajouter un menu plein écran réactif dans WordPress et notre liste des meilleures astuces de barre latérale WordPress pour obtenir des résultats maximums.

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.