Comment personnaliser le texte dans l'éditeur WordPress Gutenberg (zone back-end)

Publié: 2024-12-09

L'éditeur WordPress Gutenberg est un outil puissant pour la création de contenu, mais son interface back-end par défaut ne répond pas toujours aux besoins spécifiques de chaque utilisateur.

Alors que de nombreux utilisateurs de WordPress se concentrent sur la conception frontale, la zone back-end – l’éditeur lui-même – offre également des possibilités de personnalisation pour rationaliser le flux de travail et améliorer l’expérience d’édition.

Cet article explique comment personnaliser le texte dans le backend de l'éditeur Gutenberg en ajoutant des extraits PHP personnalisés et des modifications CSS que vous pouvez appliquer à n'importe quel thème WordPress que vous utilisez.

Que vous soyez développeur ou passionné de WordPress, ce guide vous aidera à créer un environnement d'édition sur mesure qui vous convient.

Étapes pour personnaliser le texte dans la zone back-end de l'éditeur WordPress Gutenberg

Étape 1 : Ajoutez le code personnalisé au fichier function.php

Tout d’abord, vous devez ajouter du code personnalisé pour modifier l’éditeur de blocs WordPress (Gutenberg) afin d’obtenir un meilleur alignement visuel entre l’éditeur (backend) et le front-end du site Web.

Sur votre tableau de bord WordPress, accédez à Apparence > Theme File Editor . Vous pouvez trouver l'éditeur de fichiers de thème dans le menu Outils si vous utilisez un thème de bloc.

Une fois que vous entrez dans la page de l'éditeur de fichiers de thème, sélectionnez le fichier fonctions.php . Ensuite, collez l'extrait PHP ci-dessous à la fin du contenu du fichier function.php . Ensuite, mettez à jour le fichier de thème en cliquant sur le bouton Mettre à jour le fichier .

 // Ajoutez du CSS personnalisé à l'éditeur Gutenberg
fonction custom_gutenberg_editor_styles() {
    add_theme_support('styles-éditeur'); // Activer les styles d'éditeur
    add_editor_style('custom-editor-style.css'); // Met en file d'attente le fichier CSS personnalisé
}
add_action('after_setup_theme', 'custom_gutenberg_editor_styles');

// Mettre directement en file d'attente les styles d'éditeur personnalisés
fonction enqueue_custom_editor_css() {
    wp_enqueue_style(
        'styles d'éditeur personnalisés', 
        get_template_directory_uri() . '/style-éditeur-personnalisé.css',
        tableau(),
        '1.0'
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_editor_css');

Étape 2 : ajoutez le fichier CSS dans votre répertoire de thèmes ( custom-editor-style.css )

Ensuite, vous devez créer un fichier CSS nommé custom-editor-style.css dans votre répertoire de thème (par exemple, wp-content/themes/your-theme/).

1 : Installez un gestionnaire de fichiers pour WordPress

Pour créer un nom de fichier CSS dans votre répertoire de thème, vous pouvez utiliser n'importe quel gestionnaire de fichiers pour WordPress disponible dans le répertoire du plugin WordPress.

Veuillez l'installer et l'activer, puis commencez à créer un nouveau fichier CSS nommé custom-editor-style.css dans votre répertoire de thème. Pour cet exemple, nous utilisons le plugin Advanced File Manager et notre thème WordPress actuel est Astra donc le chemin sera comme ceci : wp-content/themes/astra/custom-editor-style.css

2 : Ajoutez l'extrait CSS au fichier custom-editor-style.css

Ensuite, ajoutez les styles personnalisés à ce fichier pour modifier le texte dans la zone back-end de Gutenberg. Copiez l'extrait CSS ci-dessous et collez-le dans le champ de saisie.

Voici l'extrait CSS que vous pouvez utiliser :

 /* Personnaliser la taille de la police des paragraphes et la hauteur des lignes */
.editor-styles-wrapper p {
    taille de police : 18px !important ;
    hauteur de ligne : 1,6 !important ;
    couleur : #000000 !important ;
    poids de la police : 400 !important ;
}



/* Personnaliser le titre du message de l'éditeur (H1) */
.editor-post-title__input {
    famille de polices : 'Arial', sans-serif !important;
    taille de police : 40px !important ;
    couleur : #000000 !important ;
    poids de la police : 700 !important ;
    hauteur de ligne : 1,6 !important ;
}

/* Personnaliser les blocs de titre (H2, H3, H4, H5) */

.editor-styles-wrapper h2{
    famille de polices : 'Arial', sans-serif !important;
    taille de police : 36px !important ;
    couleur : #000000 !important ;
    poids de la police : 700 !important ;
    hauteur de ligne : 1,6 !important ;
}

.editor-styles-wrapper h3{
    famille de polices : 'Arial', sans-serif !important;
    taille de la police : 32px !important ;
    couleur : #000000 !important ;
    poids de la police : 700 !important ;
    hauteur de ligne : 1,6 !important ;
}

.editor-styles-wrapper h4{
    famille de polices : 'Arial', sans-serif !important;
    taille de police : 30px !important ;
    couleur : #000000 !important ;
    poids de la police : 700 !important ;
    hauteur de ligne : 1,6 !important ;
}

.editor-styles-wrapper h5{
    famille de polices : 'Arial', sans-serif !important;
    taille de la police : 28px !important ;
    couleur : #000000 !important ;
    poids de la police : 700 !important ;
    hauteur de ligne : 1,6 !important ;
}


/* Style pour les listes non ordonnées */
.editor-styles-wrapper ul {
    marge gauche : 20 px ;
    remplissage à gauche : 20 px ;
    type de style de liste : disque ;
    taille de police : 18px !important ;
    hauteur de ligne : 1,6 !important ;
    famille de polices : 'Arial', sans-serif !important;
    couleur : #000000 !important ;
    poids de la police : 400 !important ;
}

/* Style pour les éléments de la liste */
.editor-styles-wrapper ul li {
    marge inférieure : 10 px ;
    taille de police : 18px !important ;
    couleur : #000000 !important ;
    poids de la police : 400 !important ;
}

/* Styles de listes imbriquées */
.editor-styles-wrapper ul ul {
    marge gauche : 20 px ;
    type de style de liste : cercle ;
}

/* Styles supplémentaires pour les listes ordonnées si nécessaire */
.editor-styles-wrapper ol {
    marge gauche : 20 px ;
    remplissage à gauche : 20 px ;
    type de style de liste : décimal ;
    taille de police : 18px !important ;
    hauteur de ligne : 1,6 !important ;
    famille de polices : 'Arial', sans-serif !important;
    couleur : #000000 !important ;
    poids de la police : 400 !important ;
}

Une fois que vous avez ajouté l'extrait CSS au fichier custom-editor-style.css , vous pouvez vérifier si vos personnalisations dans la zone back-end de l'éditeur Gutenberg sont appliquées avec succès.

Accédez à l’éditeur WordPress Gutenberg en créant un nouveau type de publication (page ou publication) ou en sélectionnant celui existant.

Qu'a fait le code ?

1 : Code personnalisé dans le fichier function.php

Première fonction

 fonction custom_gutenberg_editor_styles() {
    add_theme_support('styles-éditeur'); // Activer les styles d'éditeur
    add_editor_style('custom-editor-style.css'); // Met en file d'attente le fichier CSS personnalisé
}
add_action('after_setup_theme', 'custom_gutenberg_editor_styles');

Cette fonction indique à WordPress d'utiliser un fichier CSS personnalisé ( custom-editor-style.css ) dans l'éditeur Gutenberg.

Deuxième fonction

 fonction enqueue_custom_editor_css() {
    wp_enqueue_style(
        'custom-editor-styles', // Nom unique de la feuille de style.
        get_template_directory_uri() . '/custom-editor-style.css', // Chemin d'accès à votre fichier CSS.
        array(), // Aucune dépendance.
        '1.0' // Version du fichier CSS.
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_editor_css');

Cette fonction charge directement le fichier custom-editor-style.css dans l'éditeur.

Pourquoi deux fonctions ?

La première fonction ajoute une prise en charge de thème de base pour styliser l'éditeur WordPress Gutenberg.
La deuxième fonction contrôle comment et quand le fichier CSS est chargé.

2 : extrait CSS dans le fichier custom-editor-style.css

Personnaliser le texte du paragraphe (p)

 .editor-styles-wrapper p {
    taille de police : 18px !important ;
    hauteur de ligne : 1,6 !important ;
    couleur : #000000 !important ;
    poids de la police : 400 !important ;
}

Ce qu'il fait :

Modifie la taille de la police des paragraphes à 18px.
Définit la hauteur de ligne à 1,6 pour une meilleure lisibilité.
Applique la couleur du texte noir #000000.
Utilise un poids de police normal (400).
!important : garantit que ces styles remplacent tous les styles en conflit.

Personnaliser le titre du message (H1)

 .editor-post-title__input {
    famille de polices : 'Arial', sans-serif !important;
    taille de police : 40px !important ;
    couleur : #000000 !important ;
    poids de la police : 700 ;
    hauteur de ligne : 1,6 ;
}

Ce qu'il fait :

Modifie la police du titre de l'article en Arial avec une solution de secours sans empattement.
Définit une grande taille de police de 40 px.
Garantit que le texte est en gras (poids de la police : 700) et utilise la couleur noire.
Maintient une hauteur de ligne constante.

Personnaliser les blocs de titre (H2, H3, H4, H5)

 .editor-styles-wrapper h2 {
    famille de polices : 'Arial', sans-serif !important;
    taille de police : 36px !important ;
    couleur : #000000 !important ;
    poids de la police : 700 ;
    hauteur de ligne : 1,6 ;
}

Des styles similaires sont appliqués pour H3, H4 et H5 avec des tailles de police décroissantes :

H2 : 36 px
H3 : 32 px
H4 : 30 px
H5 : 28 px

Ce qu'il fait :

Standardise la famille de polices, la couleur, l’épaisseur et la hauteur de ligne sur tous les niveaux de titre.
Assure une hiérarchie claire en ajustant la taille des polices.

Style pour les listes non ordonnées (ul)

 .editor-styles-wrapper ul {
    marge gauche : 20 px ;
    remplissage à gauche : 20 px ;
    type de style de liste : disque ;
    taille de police : 18px !important ;
    hauteur de ligne : 1,6 !important ;
    famille de polices : 'Arial', sans-serif !important;
    couleur : #000000 !important ;
    poids de la police : 400 !important ;
}

Ce qu'il fait :

Ajoute un espacement à gauche des listes non ordonnées (indentation).
Garantit que les éléments de la liste utilisent le style de puce de disque.
Applique une taille de police, une couleur et une hauteur de ligne cohérentes pour correspondre au texte du paragraphe.

Style pour les éléments de liste (ul li)

 .editor-styles-wrapper ul li {
    marge inférieure : 10 px ;
    taille de police : 18px !important ;
    couleur : #000000 !important ;
    poids de la police : 400 !important ;
}

Ce qu'il fait :

Ajoute un espacement entre les éléments de la liste pour plus de lisibilité (marge inférieure : 10 px).
Garantit que les styles de texte correspondent à la conception globale.

Styles de liste imbriquée

 .editor-styles-wrapper ul ul {
    marge gauche : 20 px ;
    type de style de liste : cercle ;
}

Ce qu'il fait :

Ajuste l'indentation pour les listes non ordonnées imbriquées.
Change le style de puce des listes imbriquées en cercle.

Style pour les listes ordonnées (ol)

 .editor-styles-wrapper ol {
    marge gauche : 20 px ;
    remplissage à gauche : 20 px ;
    type de style de liste : décimal ;
    taille de police : 18px !important ;
    hauteur de ligne : 1,6 !important ;
    famille de polices : 'Arial', sans-serif !important;
    couleur : #000000 !important ;
    poids de la police : 400 !important ;
}

Ce qu'il fait :

Ajoute un espacement et utilise une numérotation décimale pour les listes ordonnées.
Garantit que les listes ordonnées suivent la même typographie que les paragraphes et les listes non ordonnées.

L'essentiel

Cet article montre avec quelle facilité vous pouvez personnaliser le texte dans la zone back-end de l’éditeur WordPress Gutenberg. Comme nous l'avons mentionné au début de cet article, la personnalisation du texte dans la zone back-end de Gutenberg améliorera votre expérience d'édition. L'amélioration de l'expérience d'édition dans WordPress est cruciale car elle a un impact direct sur notre efficacité, notre créativité et notre satisfaction en tant que créateurs de contenu.

L'implémentation de la méthode décrite dans cet article (ajouter le code personnalisé au fichier function.php et ajouter le fichier CSS dans votre répertoire de thème) vous permet de personnaliser le texte dans la zone back-end de Gutenberg, quel que soit le thème WordPress que vous utilisez. Cette approche garantit que vos modifications restent cohérentes entre les différents thèmes et mises à jour.

N'hésitez pas à ajuster les valeurs dans l'extrait CSS pour obtenir la meilleure apparence de votre texte dans la zone back-end de Gutenberg. Vous pouvez modifier les valeurs des propriétés telles que la taille de la police, la hauteur des lignes, la couleur et les marges pour garantir que le contenu est lisible et visuellement attrayant. Par exemple, changer la famille de polices pour une police plus lisible ou définir une hauteur de ligne qui améliore la lisibilité peut améliorer l'expérience d'édition. De plus, l'ajustement des propriétés de remplissage et de marge peut aider à espacer les éléments plus efficacement, évitant ainsi que la mise en page ne semble trop surpeuplée.