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....
Besoin d'un expert pour améliorer les performances de votre site internet ?
Contactez-moi pour en discuter ensemble !
Recevez un audit et une estimation gratuite des optimisations à apporter à votre site web.
Laisser un commentaire