Comment personnaliser la couleur d'arrière-plan de l'éditeur de blocs WordPress

Il fut un temps où changer les couleurs d'arrière-plan dans WordPress signifiait plonger dans le code et espérer que rien ne casse. Nous nous souvenons bien de ces jours. WordPress a parcouru un long chemin depuis, et l'éditeur de blocs a rendu la personnalisation plus facile que jamais.

Pourtant, de nombreux propriétaires de sites Web ont du mal à obtenir les couleurs d'arrière-plan parfaites.

Après avoir géré plusieurs sites WordPress et aidé des milliers d'utilisateurs, nous avons appris les moyens les plus simples et les plus fiables de gérer ces changements.

Dans ce guide, nous vous montrerons exactement comment changer les couleurs d'arrière-plan dans l'éditeur de blocs WordPress en utilisant des méthodes qui fonctionnent pour n'importe quel thème et niveau de compétence.

Pourquoi changer la couleur d'arrière-plan de l'éditeur de blocs dans WordPress ?

Vous pourriez vouloir changer la couleur d'arrière-plan de l'éditeur de blocs WordPress pour un certain nombre de raisons.

Par exemple, la plupart des thèmes WordPress modernes utilisent la même couleur d'arrière-plan pour l'éditeur de blocs que pour le site Web en direct, y compris OceanWP, GeneratePress, et plus encore.

Cependant, si votre thème WordPress n'utilise pas les mêmes couleurs, l'apparence de votre article dans l'éditeur sera très différente de ce que vos utilisateurs verront sur le site web en direct.

Une autre raison pourrait simplement être votre confort personnel.

Si vous passez de nombreuses heures à écrire, fixer un écran blanc lumineux peut être éprouvant pour les yeux. Changer la couleur de fond de l'éditeur en une couleur plus douce peut rendre votre temps de travail beaucoup plus agréable.

Cela étant dit, voyons comment vous pouvez facilement changer la couleur de fond de l'éditeur WordPress.

Comment changer la couleur de fond de l'éditeur WordPress

Vous pouvez changer la couleur de fond de l'éditeur WordPress en ajoutant du code personnalisé au fichier functions.php de votre thème.

Cependant, même la plus petite erreur dans le code peut casser votre site web et le rendre inaccessible.

C'est pourquoi nous recommandons d'utiliser le plugin WPCode.

Après des tests approfondis, nous avons conclu que c'est le moyen le plus simple et le plus sûr d'ajouter du code personnalisé à votre site web WordPress. Pour en savoir plus, consultez notre avis sur WPCode.

Tout d'abord, vous devez installer et activer le plugin WPCode. Pour plus d'instructions, veuillez consulter notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, visitez la page Extraits de code » +Ajouter un extrait depuis la barre latérale d'administration de WordPress.

À partir d'ici, cliquez sur le bouton « Utiliser un extrait » sous l'option « Ajouter votre code personnalisé (Nouvel extrait) ».

Cela vous mènera à la page « Créer un extrait personnalisé », où vous pourrez commencer par taper un nom pour votre extrait de code. Ceci est uniquement pour vous et peut être n'importe quoi qui vous aidera à identifier le code.

Ensuite, sélectionnez « Extrait PHP » dans le menu qui apparaît après avoir cliqué sur le menu « Type de code » dans le coin supérieur droit de l'écran

Après cela, copiez et collez le code suivant dans la boîte « Aperçu du code » :

add_action( 'admin_footer', function() {
	?>
	<style>
		.editor-styles-wrapper {
			background-color: #bee0ec;
		}
	</style>
	<?php
});

Ce fragment de code fait deux choses simples. La partie add_action indique à WordPress d'ajouter notre style personnalisé au pied de page de la zone d'administration.

À l'intérieur, le code CSS cible le conteneur principal de l'éditeur de blocs (.editor-styles-wrapper) et définit sa background-color sur un nouveau code hexadécimal.

Une fois que vous avez fait cela, recherchez le code suivant dans l'extrait PHP que vous venez de coller :

background-color: #bee0ec;

Ensuite, vous devez ajouter le code hexadécimal de votre couleur préférée à côté de l'option de couleur de fond.

Si vous ne souhaitez pas utiliser un code hexadécimal, vous pouvez utiliser des noms de couleurs de base, tels que « white » ou « blue » à la place.

Après cela, faites défiler jusqu'à la section « Insertion » et choisissez l'option « Insertion automatique ».

Ensuite, vous devez sélectionner l'option « Emplacement » de l'extrait de code comme « Admin uniquement » dans le menu déroulant.

Après cela, revenez en haut de la page et basculez le commutateur « Inactif » sur « Actif ».

Enfin, n'oubliez pas de cliquer sur le bouton « Enregistrer l'extrait » pour enregistrer vos modifications.

Maintenant, visitez l'éditeur de blocs depuis la barre latérale d'administration.

Voici à quoi ressemblait l'éditeur de blocs sur notre site après l'ajout de l'extrait de code PHP.

Tutoriel vidéo

Si vous préférez regarder une vidéo, consultez notre tutoriel YouTube sur la façon de personnaliser la couleur d'arrière-plan de l'éditeur de blocs WordPress :

Méthode bonus : Changer la couleur de fond sur votre site web en direct

Si vous souhaitez changer la couleur de fond que vos visiteurs voient sur votre site web en direct, la méthode dépendra de votre thème WordPress.

WordPress a deux types de thèmes : les thèmes classiques et les thèmes de blocs plus récents. Nous vous montrerons les deux méthodes.

Méthode 1 : Utilisation du personnalisateur de thème (pour les thèmes classiques)

La plupart des thèmes classiques utilisent le personnalisateur de thème pour les changements de couleur. Vous pouvez y accéder en naviguant vers Apparence » Personnaliser depuis votre tableau de bord WordPress.

Une fois le personnalisateur chargé, recherchez une section intitulée « Couleurs », « Couleurs & Mode sombre », ou quelque chose de similaire. Le nom exact et l'emplacement de ces paramètres peuvent varier d'un thème à l'autre.

À l'intérieur, vous devriez trouver une option « Couleur d'arrière-plan » qui vous permettra d'utiliser un sélecteur de couleurs pour apporter vos modifications. Lorsque vous êtes satisfait du résultat, cliquez simplement sur le bouton « Publier » pour enregistrer.

Méthode 2 : Utilisation de l'éditeur de site complet (pour les thèmes de blocs)

Si vous utilisez un thème de blocs moderne, vous apporterez ces modifications dans l'éditeur de site complet. Pour y accéder, allez dans Apparence » Éditeur dans la barre latérale de votre administration.

Dans l'éditeur, cliquez sur l'icône « Styles » sur le côté droit (elle ressemble à un cercle à moitié rempli). Cela ouvrira le panneau des styles globaux.

À partir de là, cliquez sur « Couleurs », puis sélectionnez l'option « Arrière-plan ».

Vous pouvez maintenant choisir une nouvelle couleur d'arrière-plan pour l'ensemble de votre site. L'éditeur vous montrera un aperçu en direct, et vous pourrez cliquer sur « Enregistrer » lorsque vous aurez terminé.

Pour un guide plus détaillé sur les deux méthodes, vous pouvez consulter notre guide pour débutants sur comment personnaliser les couleurs de votre site WordPress.

Foire aux questions sur la modification de l'arrière-plan de l'éditeur

Voici quelques questions que nos lecteurs posent fréquemment sur la modification de la couleur d'arrière-plan de l'éditeur WordPress :

Ce extrait de code ralentira-t-il mon site web ?

Non, ce code spécifique ne ralentira pas votre site web. Parce que nous avons configuré l'extrait WPCode pour qu'il ne se charge que dans la zone « Admin uniquement », il n'ajoute aucun code supplémentaire à l'avant de votre site. Il ne se charge que pour les utilisateurs connectés qui utilisent activement l'éditeur de blocs.

Puis-je utiliser un dégradé ou une image pour l'arrière-plan de l'éditeur au lieu d'une couleur unie ?

Oui, vous le pouvez. Cela nécessite une petite modification du code CSS. Au lieu de background-color, vous utiliseriez la propriété background.

Par exemple, pour ajouter un simple dégradé linéaire, votre CSS à l'intérieur de l'extrait pourrait ressembler à ceci :

.editor-styles-wrapper { background: linear-gradient(to right, #e6dada, #274046); }

Vous pouvez utiliser des générateurs de dégradés CSS en ligne pour créer des styles plus complexes.

Le code n'a pas fonctionné. Que dois-je vérifier en premier ?

Si la couleur ne change pas, vérifiez d'abord les paramètres de votre extrait WPCode. Assurez-vous que le commutateur en haut est réglé sur « Actif » et que l'emplacement d'insertion est réglé sur « Admin uniquement ».

Vérifiez également le code lui-même pour toute faute de frappe, en particulier dans le sélecteur CSS (.editor-styles-wrapper) et le code couleur hexadécimal.

Comment trouver le code hexadécimal d'une couleur spécifique que je veux utiliser ?

Le moyen le plus simple est d'utiliser un outil de sélection de couleurs en ligne. Des sites Web comme le sélecteur de couleurs de Google, HTML Color Codes ou Adobe Color vous permettent de sélectionner visuellement n'importe quelle couleur. Ils vous fourniront instantanément le code hexadécimal correct (par exemple, #1a457c) à copier et coller dans l'extrait de code.

Si je mets à jour mon thème, vais-je perdre la modification de la couleur d'arrière-plan de l'éditeur de blocs ?

Non, vous ne perdrez pas les modifications. C'est le plus grand avantage d'utiliser un plugin comme WPCode au lieu de modifier directement le fichier functions.php de votre thème. L'extrait de code est enregistré indépendamment de votre thème, il continuera donc à fonctionner même après les mises à jour du thème.

Nous espérons que cet article vous a aidé à apprendre comment changer facilement la couleur d'arrière-plan de l'éditeur WordPress. Vous voudrez peut-être aussi consulter notre guide ultime sur comment désactiver l'éditeur plein écran dans WordPress, ou jeter un œil à notre sélection des meilleurs plugins de blocs Gutenberg pour WordPress.

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.