Formation « Créer des blocs avec Gutenberg »

Personnaliser les couleurs de la palette Gutenberg

Lecture : 2 minutes • 0

Gutenberg propose plein de composants de réglages dont la palette de couleurs. Il est possible de la personnaliser afin de la limiter à la charte du site, via un petit hook à placer dans votre functions.php.

La formation en vidéo

Suivez la formation en vidéo !

Pour visionner cette vidéo vous devez acheter cette formation.
Déjà achetée ? Connectez-vous !

Acheter Connexion

La palette de couleurs

Gutenberg nous permet de réutiliser facilement les composants de l’interface visuelle, dont les différents champs de réglages comme la réglette (range), les interrupteur on/off, mais aussi la palette de couleur.

Cette dernière est très bien conçue et elle est même personnalisable. Voici la palette de couleurs par défaut :

Palette de couleur

L’idée est de définir un set de couleurs qui collent à la charte graphique du site. Voici la palette spéciale Capitaine WP :

Palette de couleur personnalisée

Personnaliser la palette de couleurs

Pour cela c’est tout simple, il suffit de placer ce hook dans le fichier functions.php de votre thème (parent ou enfant) :

PHP
functions.php

Vous pouvez définir autant de couleurs que vous le souhaitez, mais résistez tout de même à l’envie d’en mettre 50.

Désactiver le choix de couleur personnalisée

Si vous ne voulez pas que votre utilisateur s’amuse à détruire toute l’harmonie de votre charte, vous pouvez désactiver le dernier cercle « couleur personnalisée » afin de limiter la sélection aux couleurs définies juste avant.

Retirer le choix de la couleur personnalisée

Pour cela il suffit d’ajouter la ligne suivante dans le même hook  :

PHP
functions.php

Récupérer les couleurs du Customizer

Pour terminer, il est possible de récupérer les couleurs définies dans le Customizer WordPress (Apparence > Personnaliser).

Merci à Thomas Villain pour l’astuce !

PHP

Ces fonctions sont très pratiques pour personnaliser la charte et limiter les possibilités de vos utilisateurs !

0

Questions, réponses et commentaires

    Laisser un commentaire