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 avons souvent cette question où les utilisateurs veulent changer 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 ergonomie estiment que les utilisateurs numérisent les pages de gauche à droite. Ils recommandent de mettre le contenu important à gauche pour que les utilisateurs voient d'abord le contenu. Toutefois, cela pourrait être inversé si votre site est dans une langue écrite de droite à gauche..

De nombreux sites WordPress utilisent la mise en page typique du blog avec deux colonnes. Une pour le contenu et l'autre colonne pour la barre latérale.

Si vous commencez tout juste un site Web, vous devez sélectionner un thème WordPress comportant la barre latérale à l'emplacement de votre choix..

De nombreux thèmes ont des options pour changer les côtés de la barre latérale des paramètres du thème. Cependant, si votre thème ne dispose pas de cette option, vous devrez alors modifier 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 l'utilisation de FTP pour télécharger des fichiers sur WordPress..

Connectez-vous à votre site WordPress à l'aide du client FTP et accédez au dossier de votre thème. Il est généralement situé à:

/ votre site web / wp-content / themes / votre-dossier-theme /

Maintenant, vous devez télécharger et ouvrir la feuille de style principale de votre thème dans un éditeur de texte tel que Notepad. 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. Il est généralement .barre latérale. 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; marge droite: -100%; largeur maximale: 413 pixels; position: relative; largeur: 29,4118%;  

Comme vous pouvez le voir, la barre latérale flotte à gauche avec une marge de -100% à droite. Nous allons le changer en float right et margin-left comme ceci:

 .sidebar float: right; marge gauche: -100%; largeur maximale: 413 pixels; position: relative; largeur: 29,4118%;  

Enregistrez vos modifications et transférez le fichier style.css sur votre site Web à l'aide d'un client FTP. Maintenant, si vous visitez votre site Web, cela 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.

 .contenu du site display: block; float: gauche; marge gauche: 29,4118%; largeur: 70,5882%;  

Nous allons le changer pour déplacer le contenu vers la droite. Comme ça:

 .contenu du site display: block; float: gauche; marge droite: 29,4118%; largeur: 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 le contenu et les zones de la 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 ce qui cause cela et comment l’adapter.

Utilisez l'outil "Inspecter" de votre navigateur pour examiner le code source. Pointez votre souris sur la région affectée dans le navigateur, cliquez avec le bouton droit de la souris 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 sont mises 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é.

 Écran @média et (largeur minimale: 59.6875em) corps: avant couleur d'arrière-plan: #fff; boîte-ombre: 0 0 1px rgba (0, 0, 0, 0,15); contenu: ""; bloc de visualisation; hauteur: 100%; hauteur minimale: 100%; position: fixe; en haut: 0; gauche: 0; largeur: 29,4118%; z-index: 0; / * Corrige un bug clignotant avec le défilement sur Safari * / 

Ce code CSS ajoute un bloc de contenu vide de 29,4118% largeur et 100% largeur en haut à gauche. Voici comment nous allons le déplacer à droite.

 Écran @média et (largeur minimale: 59.6875em) corps: avant couleur d'arrière-plan: #fff; boîte-ombre: 0 0 1px rgba (0, 0, 0, 0,15); contenu: ""; bloc de visualisation; hauteur: 100%; hauteur minimale: 100%; position: fixe; en haut: 0; à droite: 0; largeur: 29,4118%; z-index: 0; / * Corrige un bug clignotant avec le défilement sur 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, essayez CSS Hero. Il vous permet d'éditer du 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 aussi voir notre liste de 12 astuces de la barre latérale de WordPress pour obtenir le maximum de résultats.

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Facebook.