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

Vous souhaitez changer la couleur d'arrière-plan de l'éditeur Gutenberg dans WordPress pour qu'elle corresponde aux couleurs de l'image de marque du site et qu'elle mette en avant la culture du site. Tutoriel détaillé aujourd'hui c'est ici !

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

Il existe de nombreuses raisons de vouloir modifier la couleur d'arrière-plan. Cependant, la plupart desThèmes WordPressTous utilisent les mêmes couleurs d'arrière-plan de l'éditeur de blocs que le site en ligne, notammentAstraetOceanWPetGeneratePressetc.

Toutefois, si le thème WordPress n'utilise pas les mêmes couleurs, l'apparence de l'article dans l'éditeur ne sera pas la même que celle que l'utilisateur verra sur le site réel.

Il peut également être modifié à votre guise.

Par exemple, l'éditeur de blocs utilise par défaut un arrière-plan blanc. Certains utilisateurs peuvent trouver un peu stressant de fixer un écran blanc pendant de longues périodes. La fatigue oculaire est gênante pour de nombreuses personnes et l'arrière-plan blanc par défaut n'est pas confortable pour les yeux.

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

Pour ce faire, il suffit d'envoyer un message à l'adressefichier functions.phpAjouter un code personnalisé pour changer la couleur d'arrière-plan de l'éditeur WordPress.

Toutefois, les modifications à apporterfichier functions.phpAttention, la moindre erreur dans le code peut rendre un site web inaccessible.

C'est pourquoi nombre de nos tutoriels recommandent d'utiliser la fonctionWPCodeLa raison d'être du plugin. C'est le meilleur plugin de snippet WordPress sur le marché aujourd'hui et le moyen le plus facile et le plus sûr d'ajouter du code personnalisé à votre site WordPress.

Tout d'abord, installez et activez le plugin WPCode.

Une fois activé, vous pouvez y accéder à partir de la barre latérale d'administration de WordPress.Code Snippet" + Add Code Snippet page.

A partir de là, cliquez "Ajouter un code personnalisé (nouvel extrait de code)"sous l'option "Utilisation d'extraits de code"Bouton.

Il sera placé dans la rubrique "Création d'extraits de code personnalisés"où vous pouvez saisir le nom de l'extrait de code. Il peut s'agir de n'importe quel nom permettant d'identifier le code.

Ensuite, dans le menu déroulant situé dans le coin supérieur droit de l'écran, sélectionnez "Extrait PHP"comme"type de code".

Ensuite, copiez et collez le code suivant dans le champ "Aperçu du code" :

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

Lorsque vous avez terminé, recherchez le code suivant dans l'extrait de code PHP que vous venez de coller :

  couleur de fond : #bee0ec ;
  couleur de fond : #bee0ec ;
	couleur de fond : #bee0ec ;

Ensuite, le code hexadécimal de la couleur préférée doit être ajouté à côté de l'option de couleur d'arrière-plan. Si vous ne souhaitez pas utiliser de code hexadécimal, vous pouvez utiliser un nom de couleur de base tel que "fig. réactionnaire"ou"bleu (couleur)".

Note : Le nom de la couleur ajoutée ici doit être en anglais.

Ensuite, faites défiler vers le bas jusqu'à "bâton"section et sélectionnez "Insertion automatique"Options.

Ensuite, dans le menu déroulant, sélectionnez l'élément "placement"pour"Administrateurs uniquement".

Ensuite, revenez en haut de la page et mettez "inactif"Le commutateur passe à "fonction".

Enfin, n'oubliez pas de cliquer sur "Sauvegarde des extraits de code"pour enregistrer les modifications.

L'éditeur de blocs est désormais accessible depuis la barre latérale d'administration.

Voici comment l'éditeur de blocs apparaît sur le site après l'ajout de l'extrait de code PHP.

Si vous souhaitez modifier la couleur d'arrière-plan de votre site web, vous pouvez le faire en accédant à la sectionL'écran de personnalisation de l'apparence pour apporter des modifications.

Ceci lancera le personnalisateur de thème, cliquez sur "Modes couleur et sombreOnglet ". Note : Le personnalisateur peut varier en fonction du thème utilisé.

Un nouveau panneau s'ouvre dans la barre latérale, dans lequel il faut cliquer sur "Choisissez une couleur"Options.

Le sélecteur de couleurs s'ouvre alors à l'écran et vous pouvez sélectionner la couleur d'arrière-plan de votre choix. Une fois la couleur sélectionnée, n'oubliez pas de cliquer sur le bouton "poste"Bouton.

Il est également possible de modifier la couleur du texte, la couleur de surbrillance, la couleur des boutons, etc. à partir du Customizer du thème. Cependant, si vous utilisez le
ces modifications doivent être effectuées dans l'éditeur de site complet.