Outil de personnalisation de la couleur d’arrière-plan de l’éditeur de blocs de WordPress

Vous souhaitez personnaliser 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 pouvez vouloir 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 afficher comment personnaliser facilement la couleur d’arrière-plan de l’éditeur de blocs WordPress pour la zone d’administration.

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

Vous pouvez vouloir modifier la couleur d’arrière-plan de l’éditeur de blocs de 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 direct, notamment Astra, OceanWP, GeneratePress, et bien d’autres.

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

Une autre raison de modifier la couleur de l’arrière-plan peut être une préférence personnelle.

Par défaut, l’éditeur de blocs utilise un arrière-plan blanc. Certains utilisateurs/utilisatrices peuvent trouver un peu stressant de regarder l’écran blanc pendant de longues heures. La fatigue oculaire peut être un réel problème pour de nombreuses personnes, et l’arrière-plan blanc par défaut n’est pas agréable pour les yeux.

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

Tutoriel vidéo

Si vous préférez des instructions écrites, continuez à lire.

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

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

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

C’est pourquoi nous vous recommandons d’utiliser l’extension WPCode . C’est la meilleure extension 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 WordPress.

Tout d’abord, vous devez installer et activer l’extension WPCode. Pour plus d’instructions, veuillez consulter notre guide étape par étape sur l ‘installation d’une extension WordPress.

Une fois activé, visitez la page  » +Ajouter un extrait de code  » dans la colonne latérale de l’administrateur WordPress.

Cliquez ensuite sur le bouton « Utiliser l’extrait » sous l’option « Ajouter votre code personnalisé (nouvel extrait) ».

Vous accéderez à la page « Créer un extrait personnalisé », où vous pourrez commencer par saisir un nom pour votre extrait de code. Ce nom vous est réservé et peut être n’importe quoi qui vous aidera à identifier le code.

Choisissez ensuite « PHP Snippet » comme « Code Type » dans le menu déroulant situé dans le coin droit de l’écran.

Ensuite, copiez et collez le code suivant dans la case « Prévisualisation du code » :

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

Une fois que vous avez fait cela, vous devez rechercher le code suivant dans l’extrait de 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 des noms de couleur de base tels que « blanc » ou « bleu ».

Ensuite, défilez jusqu’à la section « Insertion » et choisissez l’option « Insertion automatique ».

Sélectionné dans le menu déroulant, l’Emplacement de l’extrait de code doit être « Admin uniquement ».

Ensuite, retournez en haut de la page et permutez le commutateur « Inactif » sur « Actif ».

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

Maintenant, allez visiter l’éditeur/éditrices de blocs à partir de la colonne latérale de l’administrateur.

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

Bonus : Modifier la couleur d’arrière-plan dans WordPress

Si vous souhaitez modifier la couleur d’arrière-plan de l’interface publique de votre site, vous pouvez le faire en accédant à l’écran Apparence  » Personnaliser dans le tableau de bord WordPress.

Cela lancera le personnalisateur du thème où vous devez cliquer sur l’onglet « Couleurs et mode sombre » dans la colonne de gauche. Gardez à l’esprit que votre personnalisateur peut être différent selon le thème que vous utilisez.

Un nouveau panneau s’ouvre alors dans la colonne latérale, dans lequel vous devez cliquer sur l’option « Sélectionner une couleur ».

Le sélecteur de couleurs s’ouvre alors sur votre écran, et vous pouvez choisir votre couleur d’arrière-plan préférée. Une fois que vous avez terminé, n’oubliez pas de cliquer sur le bouton « Publier » en haut de la page pour stocker vos Réglages.

Vous pouvez également modifier la couleur du texte, la couleur de surbrillance, la couleur des boutons, et plus encore à partir du personnalisateur de thème. Cependant, si vous utilisez un thème bloc, vous devrez effectuer ces modifications dans l’éditeur de site complet.

Pour plus de détails sur tout cela, vous pouvez consulter notre guide du débutant sur la façon de personnaliser les couleurs sur votre site WordPress.

Nous espérons que cet article vous a aidé à apprendre comment modifier facilement la couleur d’arrière-plan de l’éditeur WordPress. Vous voudrez peut-être aussi consulter notre guide ultime sur les raccourcis WordPress les plus utiles et les plus efficaces pour gagner du temps ou jeter un coup d’œil à notre sélection des meilleurs plugins de constructeur de page WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.