Éditeur Gutenberg de WordPress : Personnaliser les couleurs par défauts de la palette

Éditeur Gutenberg de WordPress : Personnaliser les couleurs par défauts de la palette
WordPress Lecture 2 minutes • 26 décembre 2023

Tuto rapide et très simple pour personnaliser les couleurs par défauts dans l'éditeur Gutenberg. WordPress nous permet de paramétrer nos choix de coloris préférés. C'est aussi l'idéal lorsqu'on créé des thèmes sur-mesure, car notre client dispose alors des couleurs correspondantes à sa charte graphique !

La fonction magique pour ajouter vos couleurs persos à l'éditeur Gutenberg de WordPress !

Rien de plus facile, il suffit d'ajouter le code suivant dans le fichier functions.php de votre thème WordPress.

function replace_default_gutenberg_colors() {
    $newColorPalette = [
        [
            'name' => esc_attr__('Bleu foncé', 'default'),
            'slug' => 'bleufonce',
            'color' => '#2F2E41',
        ],
        [
            'name' => esc_attr__('Gris foncé', 'default'),
            'slug' => 'grisfonce',
            'color' => '#455A64',
        ],
        [
            'name' => esc_attr__('Orange foncé', 'default'),
            'slug' => 'orangefonce',
            'color' => '#D28B58',
        ],
        [
            'name' => esc_attr__('Blanc', 'default'),
            'slug' => 'blanc',
            'color' => '#ffffff',
        ],
        [
            'name' => esc_attr__('Noir', 'default'),
            'slug' => 'noir',
            'color' => '#000000',
        ],
    ];

    add_theme_support( 'editor-color-palette', $newColorPalette);
}
add_action( 'after_setup_theme', 'replace_default_gutenberg_colors' );

L'exemple ci-dessus montre une palette de 5 couleurs :

  • Bleu foncé
  • Gris foncé
  • Orange foncé
  • Blanc
  • Noir

À vous d'indiquer les vôtres en précisant à chaque fois les champs 'name', 'slug' et 'color'.
Vous pouvez aussi supprimer ou ajouter des couleurs, si vous en souhaitez moins ou plus que 5.

Résultat des couleurs persos dans l'éditeur Gutenberg de WordPress

Et voici le résultat directement dans l'édition de vos Pages et Article WordPress ! (cliquez sur l'image pour agrandir).

Votre choix de couleurs est maintenant disponible dans l'éditeur Gutenberg, il n'y a plus qu'à les utiliser dans vos blocs titres, textes, tableau, listes, citations....

Résultat de la personnalisation des couleurs par défaut de l'éditeur Gutenberg de WordPress
Résultat de la personnalisation des couleurs dans l'éditeur Gutenberg de WordPress

Si cet article vous a aidé, lâchez votre plus bel applaudissement en remerciement ! 🤗