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 le côté de la barre latérale dans WordPress
Les experts en utilisabilité pensent 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, cela pourrait être inversé si votre site est dans une langue écrite de droite à gauche.
De nombreux sites WordPress utilisent la mise en page de blog typique avec deux colonnes. Une pour le contenu et l’autre colonne pour la barre latérale.
Si vous venez de démarrer 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 ont des options pour changer les côtés de la barre latérale à partir des paramètres de thème. Cependant, si votre thème n’a pas cette option, vous devrez alors changer les côtés de la barre latérale manuellement.
Cela dit, voyons comment vous pouvez facilement changer 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 en utilisant 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 éditer 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 est généralement situé à :
/yourwebsite/wp-content/themes/your-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 il se trouve dans le répertoire racine de votre thème.
Dans ce fichier, recherchez la classe CSS de votre barre latérale. C’est généralement .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 pour qu’il flotte à droite et à gauche 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 voir, nous avons changé de côté pour les zones de contenu et de barre latérale. Cependant, il y a toujours un bloc blanc sur la gauche.
Vous rencontrerez de telles choses lorsque vous travaillez avec CSS. Il faudra un travail de détective pour comprendre ce qui cause cela et comment l’ajuster.
Utilisez l’outil « Inspecter » de votre navigateur pour consulter le code source. Pointez votre souris sur la région affecté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 qu’elle affecte en surbrillance 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 doit ê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 de 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 voulez pas faire tout le travail de code manuel, vous pouvez essayer CSS Hero. Il vous permet d’éditer CSS sans écrire de code, et il fonctionne avec tous les thèmes WordPress.
Nous espérons que cet article vous a aidé à changer le côté de la barre latérale dans WordPress. Vous pouvez également consulter notre liste de 12 astuces de la barre latérale WordPress pour obtenir un maximum de résultats.
