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

Voulez-vous changer la couleur d’arrière-plan de l’éditeur de blocs WordPress pour les administrateurs ?

Parfois, lorsque vous travaillez sur un projet client personnalisé, vous souhaiterez peut-être modifier la couleur d’arrière-plan de l’éditeur Gutenberg dans WordPress pour qu’elle corresponde aux couleurs de leur marque.

Dans cet article, nous allons vous montrer comment personnaliser facilement la couleur d’arrière-plan de l’éditeur de blocs WordPress pour la zone d’administration.

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

Vous voudrez peut-être 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 le site Web en direct, y compris Astra, OceanWP, GeneratePress, etc.

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

Une autre raison de changer la couleur d’arrière-plan pourrait être une préférence personnelle.

Par exemple, par défaut, l’éditeur de blocs utilise un fond blanc uni. Certains utilisateurs peuvent trouver un peu stressant de regarder l’écran blanc pendant de longues heures. La fatigue oculaire peut être un vrai problème pour de nombreuses personnes, et le fond blanc par défaut n’est pas agréable pour les yeux.

Cela étant dit, voyons comment vous pouvez facilement changer la couleur d’arrière-plan de l’éditeur WordPress.

Comment changer la couleur d’arrière-plan de l’éditeur WordPress

Vous pouvez facilement changer la couleur d’arrière-plan de l’éditeur WordPress en ajoutant un code personnalisé au fichier functions.php de votre thème.

Cependant, gardez à l’esprit que même la plus petite erreur dans le code peut casser votre site Web et le rendre inaccessible. C’est pourquoi nous vous recommandons d’utiliser le plugin WPCode. C’est le meilleur plugin d’extraits de code WordPress sur le marché et c’est le moyen le plus simple et le plus sûr d’ajouter du code personnalisé à votre site Web WordPress.

Tout d’abord, vous devez installer et activer le plugin gratuit WPCode. Pour plus d’instructions, veuillez consulter notre guide étape par étape sur la façon d’installer un plugin WordPress.

Lors de l’activation, vous devez visiter le Extraits de code » + Ajouter des extraits page de la barre latérale d’administration.

À partir de là, vous devez cliquer sur le bouton “Utiliser un extrait” sous l’option “Ajouter votre code personnalisé (nouvel extrait)”.

Cela vous amènera à la page “Créer un extrait de code personnalisé” où vous pourrez commencer par saisir un nom pour votre extrait de code. Ceci est juste pour vous et peut être tout ce qui vous aidera à identifier le code.

Ensuite, vous devez choisir ‘PHP Snippet’ comme ‘Type de code’ dans le menu déroulant à droite.

Après cela, vous devez copier et coller le code suivant dans la case “Aperçu du code”.

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

Ensuite, vous devez rechercher le code suivant dans l’extrait de code 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 d’arrière-plan. Si vous ne souhaitez pas utiliser de code hexadécimal, vous pouvez utiliser à la place des noms de couleur de base tels que « blanc » ou « bleu ».

Après cela, vous devez faire défiler jusqu’à la section “Insertion” et choisir l’option “Insertion automatique”.

Ensuite, vous devez sélectionner “Emplacement” de l’extrait de code comme “Admin uniquement” dans le menu déroulant.

Après cela, vous devez revenir en haut de la page et basculer le commutateur “Inactif” sur “Actif”.

Enfin, n’oubliez pas de cliquer sur le bouton “Enregistrer l’extrait” pour enregistrer vos modifications.

Maintenant, allez visiter l’éditeur de blocs depuis la barre latérale d’administration.

Voici à quoi ressemblait l’éditeur de blocs sur notre site après avoir ajouté l’extrait de code CSS.

Nous espérons que cet article vous a aidé à apprendre à changer facilement la couleur d’arrière-plan de l’éditeur WordPress. Vous pouvez également consulter notre guide ultime sur plus de 85 raccourcis WordPress permettant de gagner du temps, ou consulter nos meilleurs choix pour les meilleurs plugins de création de pages WordPress.

Si vous avez aimé cet article, veuillez vous abonner à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.