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é sidebar 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 ergonomie pensent que les gens scannent les pages de gauche à droite. Ils recommandent de mettre 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 disposition de blog typique avec deux colonnes. Une pour le contenu et l'autre colonne pour la barre latérale.

Si vous venez de créer 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 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 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 à 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.csset il se trouve dans le répertoire racine de votre thème.

Dans ce fichier, recherchez la classe CSS pour 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 l'application de 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 travaillerez 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 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 que les zones affectées 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 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 voulez pas faire tout le travail de code manuel, vous pouvez essayer CSS Hero. Il vous permet d'éditer du 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 barre latérale WordPress pour obtenir un maximum de résultats.

Si cet article vous a plu, abonnez-vous à notre Chaîne Youtube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.