Comment changer le côté de la barre latérale dans WordPress
Récemment, un de nos lecteurs nous a demandé comment changer le côté de la barre latérale dans un thème WordPress. Nous recevons souvent cette question lorsque les utilisateurs souhaitent modifier leur barre latérale de gauche à droite ou de droite à gauche. Dans cet article, nous allons vous montrer comment changer le côté de la barre latérale dans WordPress.
Pourquoi changer la barre latérale dans WordPress
Les experts en convivialité estiment que les gens numérisent les pages de gauche à droite. Ils recommandent de placer le contenu important sur la gauche afin que les utilisateurs voient le contenu en premier. Cependant, cette situation pourrait être inversée si votre site est rédigé dans une langue écrite de droite à gauche.
De nombreux sites WordPress utilisent la présentation typique d’un blog avec deux colonnes. Une pour le contenu et l’autre colonne pour la barre latérale.
Si vous démarrez tout juste un site Web, vous devez sélectionner un thème WordPress dont la barre latérale se trouve à votre emplacement préféré.
De nombreux thèmes disposent d'options permettant de changer de côté de la barre latérale à partir des paramètres du thème. Cependant, si votre thème ne dispose pas de cette option, vous devrez alors modifier manuellement les côtés de la barre latérale.
Cela dit, voyons comment vous pouvez facilement modifier le côté de la barre latérale dans WordPress en utilisant un peu de CSS.
Changer le côté de la barre latérale dans WordPress à l'aide de CSS
Avant d’apporter des modifications à votre thème, vous devez d’abord envisager de créer un thème enfant. En utilisant un thème enfant, vous pourrez mettre à jour votre thème parent sans perdre vos modifications.
Deuxièmement, vous devez toujours créer une sauvegarde de votre site WordPress lorsque vous apportez des modifications directes à votre thème WordPress actif.
Vous aurez besoin d'un client FTP pour modifier vos fichiers de thème. Consultez notre guide du débutant sur la façon d’utiliser FTP pour télécharger des fichiers sur WordPress.
Connectez-vous à votre site WordPress à l'aide du client FTP et accédez à votre dossier de thème. Il se situe généralement à :
/votresiteweb/wp-content/themes/votre-theme-folder/
Vous devez maintenant télécharger et ouvrir le fichier de feuille de style principal de votre thème dans un éditeur de texte brut comme le Bloc-notes. Ce fichier s'appelle style.css et se trouve dans le répertoire racine de votre thème.
Dans ce fichier, recherchez la classe CSS pour votre barre latérale. Il s'agit généralement de .sidebar. Dans cet exemple, nous utilisons le thème WordPress par défaut Twenty Fifteen qui a ce CSS pour définir la barre latérale :
.sidebar {
float: left;
margin-right: -100%;
max-width: 413px;
position: relative;
width: 29.4118%;
}
Comme vous pouvez le voir, la barre latérale flotte vers la gauche avec une marge de -100 % vers la droite. Nous allons le changer en float right et margin-left comme ceci :
.sidebar {
float: right;
margin-left: -100%;
max-width: 413px;
position: relative;
width: 29.4118%;
}
Enregistrez vos modifications et téléchargez le fichier style.css sur votre site Web à l'aide du client FTP. Maintenant, si vous visitez votre site Web, il ressemblera à ceci :
C'est parce que nous avons déplacé la barre latérale mais nous n'avons pas déplacé la zone de contenu. Twenty Fifteen utilise ce CSS pour définir la position de la zone de contenu.
.site-content {
display: block;
float: left;
margin-left: 29.4118%;
width: 70.5882%;
}
Nous allons le modifier pour déplacer le contenu vers la droite. Comme ça:
.site-content {
display: block;
float: left;
margin-right: 29.4118%;
width: 70.5882%;
}
Voici à quoi ressemblait notre site Web après avoir appliqué ce CSS.
Comme vous pouvez le constater, nous avons changé de côté pour les zones de contenu et de barre latérale. Cependant il reste encore un bloc blanc à gauche.
Vous rencontrerez de telles choses lorsque vous travaillerez avec CSS. Il faudra un travail de détective pour comprendre la cause de ce problème et comment y remédier.
Utilisez l’outil « Inspecter » de votre navigateur pour examiner le code source. Pointez votre souris sur la région concernée dans le navigateur, cliquez avec le bouton droit et sélectionnez Inspecter dans le menu du navigateur.
Lorsque vous déplacez votre souris dans la vue du code source, vous remarquerez les zones affectées mises en évidence dans l'aperçu en direct. Dans le volet de droite, vous pourrez voir le CSS utilisé pour cet élément sélectionné.
Nous avons compris que ce CSS dans notre feuille de style devait être ajusté.
@media screen and (min-width: 59.6875em) {
body:before {
background-color: #fff;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
content: "";
display: block;
height: 100%;
min-height: 100%;
position: fixed;
top: 0;
left: 0;
width: 29.4118%;
z-index: 0; /* Fixes flashing bug with scrolling on Safari */
}
Ce code CSS ajoute un bloc de contenu vide de 29,4118 % de largeur et 100 % de largeur en haut à gauche. Voici comment nous allons le déplacer vers la droite.
@media screen and (min-width: 59.6875em) {
body:before {
background-color: #fff;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
content: "";
display: block;
height: 100%;
min-height: 100%;
position: fixed;
top: 0;
right: 0;
width: 29.4118%;
z-index: 0; /* Fixes flashing bug with scrolling on Safari */
}
Après avoir enregistré et téléchargé la feuille de style sur le serveur, voici à quoi ressemblait notre site Web.
Travailler avec CSS peut être déroutant pour les débutants. Si vous ne souhaitez pas effectuer tout le travail de code manuel, vous pouvez essayer CSS Hero. Il vous permet de modifier le CSS sans écrire de code et fonctionne avec tous les thèmes WordPress.
Nous espérons que cet article vous a aidé à modifier le côté de la barre latérale dans WordPress. Vous voudrez peut-être également consulter notre liste de 12 astuces dans la barre latérale WordPress pour obtenir un maximum de résultats.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.