Dans les cours qui vont suivre, on va intégrer notre design system dans notre thème WordPress, au travers du theme.json. Dans ce cours, on va se concentrer sur l’implémentation de la palette et autres couleurs globales de notre charte graphique.
Sommaire du cours
On va maintenant commencer à intégrer la charte graphique dans notre site WordPress. Et pour cela, on va définir nos couleurs à l’aide du fameux fichier theme.json dans la section settings > color.
Voici un aperçu des propriétés disponibles :
La palette de couleurs
On va commencer par la palette, qui est la plus importante au final. Il existe 3 types de couleurs que l’on va pouvoir définir :
- Les couleurs classiques, les plus importantes ;
- Les dégradés, si besoin ;
- Et les duotones, qui permettent d’appliquer un filtre bicolore sur les images.
Voici ce que ça donne dans le JSON :
On va se concentrer pour l’instant uniquement sur les couleurs. Voici comment déclarer chaque couleur de notre palette :
Vous devez indiquer 3 informations pour chaque couleur:
name: le nom qui sera affiché dans l’interface ;slug: le slug unique qui représente la couleur ;color: la valeur de la couleur, généralement en hexadécimal.
Vous pouvez d’ailleurs déclarer une couche d’opacité hexadécimale en ajoutant la valeur d’opacité à la fin de votre couleur : #2f1847 deviendrait par exemple #2f1847cc.
Voici à quoi va ressembler votre palette de couleurs. On peut observer nos couleurs dans la rubrique « Thème » :
Dans la suite du cours, on va voir comment retirer les couleurs par défaut de WordPress, ainsi que la possibilité de choisir une couleur personnalisée.
À vous de définir votre charte de nommage. L’essentiel est de vous y tenir.
- Le thème 2024 de WordPress utilise :
base/base-2/contrast/accent; - Le thème Ollie utilise :
primary/primary-accent/secondary/tertiary.
Ainsi, vous vous assurez que vos compositions adopteront automatiquement les couleurs de la charte sur chacun de vos sites.
Les dégradés
Tout comme pour les couleurs, on va pouvoir déclarer des dégradés dans notre thème. Ils pourront avoir 2 couleurs ou plus. On va cette fois jouer avec la propriété gradients, toujours dans la rubrique settings :
Il faudra là aussi définir un nom qui sera affiché dans l’éditeur, et un slug qui sera l’identifiant unique de votre dégradé.
Dans la propriété gradient, indiquez le CSS du dégradé que vous souhaitez appliquer.
Vous pouvez utiliser un générateur de dégradés CSS pour vous simplifier la tâche car la syntaxe n’est pas toujours évidente.
Vous devriez voir vos dégradés apparaître dans la rubrique « Thème » :
Vous pouvez appliquer tout type de dégradé compatible CSS ici : les linéaires, circulaires ou coniques.
Si besoin, consultez les documentations CSS de MDN pour en savoir plus sur la syntaxe des dégradés linéaires ou circulaires.
Les filtres d’images duotone
Le duotone est un filtre appliqué sur une image en CSS qui permet de lui donner un rendu en deux tons :
Ce n’est pas la fonctionnalité la plus utile du siècle, mais ça pourrait par exemple servir pour passer des images en noir et blanc sans les convertir en amont.
Après tout iOS, le système d’exploitation des smartphones Apple, dispose d’une fonctionnalité équivalente pour les fonds d’écran :
Pour déclarer vos propres duotones bicolores, utilisez cette fois la propriété duotone :
Indiquez un nom, un slug et 2 couleurs dans un tableau sous la propriété colors.
Pour l’instant, vos duotones seront mélangés avec ceux par défaut, mais on va justement voir d’ici la fin de ce cours comment les retirer.
Activer ou désactiver les couleurs globales
Comme on a pu le voir dans le cours sur les fonctionnalités de Gutenberg, l’éditeur de thème nous permet de configurer les couleurs globales de divers éléments primitifs du site dans Apparence > Éditeur > Styles.
Les couleurs des textes, des liens, des légendes, des boutons, du fond du site et des titres peuvent être configurées globalement, en amont même des blocs.
Pour reprendre l’approche de l’atomic design : si nos blocs sont des molécules, ces éléments primitifs sont des atomes.
Si vous souhaitez désactiver la possibilité de modifier certains de ces éléments, vous pouvez les désactiver à partir du theme.json :
En tant que développeur, on va bientôt voir comment configurer ces valeurs globales directement à partir du theme.json. Donc peu importe si on laisse ou non ces réglages dans l’éditeur.
Personnaliser les options de la palette de couleurs
On va maintenant voir quelques réglages supplémentaires pour personnaliser les options de la palette, et donc affiner l’expérience utilisateur.
Voici le rôle de chaque propriété :
custom: Désactiver le choix d’une couleur personnalisée ;customDuotone: Désactiver le choix d’un duotone personnalisé ;customGradient: Désactiver le choix d’un dégradé personnalisé ;defaultDuotone: Désactiver les duotones par défaut ;defaultGradients: Désactiver les dégradés par défaut ;defaultPalette: Désactiver les couleurs par défaut ;
Du côté de la palette de couleurs, on a ceci par défaut :
Si on passe custom et defaultPalette à false, on aura une version bien plus minimaliste de la palette :
C’est mieux non ? Désormais, votre utilisateur pourra appliquer uniquement les couleurs de la charte graphique.
Ce sera la même chose côté dégradés :
Passez customGradient et defaultGradients à false pour ne conserver que les dégradés définis dans votre charte graphique.
Enfin, du côté des images et des duotones, même combat :
Désactivez defaultDuotone et customDuotone si vous souhaitez conserver uniquement ceux définis par votre charte.
Désactiver les dégradés et les duotones
Enfin, si vous souhaitez complètement désactiver les dégradés et les duotones de votre site, vous allez devoir utiliser ces réglages :
Il faudra :
- Retirer la personnalisation des duotones / dégradés ;
- Retirer les dégradés / duotones par défaut ;
- Ne pas déclarer de dégradé / duotone ou ne pas mettre la ligne correspondante.
Votre palette va s’en retrouver bien épurée :
Avec ça, vous vous assurez de proposer uniquement les couleurs pleines, issues de votre palette.
Modifier les couleurs dans l’éditeur de styles
Vous allez pouvoir retrouver toutes les couleurs, dégradés et duotones définis précédemment dans l’éditeur de styles du FSE.
Pour cela rendez-vous dans Apparence > Éditeur > Styles. Vous pourrez voir les couleurs de votre palette à droite :
En cliquant sur l’icône en forme d’oeil en haut à droite, vous afficherez le guide de style qui vous permettra d’observer le rendu de chacun des blocs de l’éditeur.
Si vous cliquez sur la palette, vous verrez toutes vos couleurs précédemment déclarées :
Le souci c’est que vous aurez la possibilité d’ajouter de nouvelles couleurs à partir de cette interface. Bien entendu, ce n’est pas une bonne idée, car elles ne seront pas ajoutées au theme.json, mais dans la base de données de WordPress.
Il faudra donc bien se poser la question à terme : est-ce qu’on doit laisser l’accès à notre client au Full Site Editing, ou doit-on leur laisser l’accès uniquement aux contenus (pages, articles).
Pour limiter les droits de votre client, sélectionnez le rôle « éditeur » plutôt que « administrateur ».
Vous pouvez également créer un nouveau rôle sur mesure, et passer la capacité edit_theme_options à false.
Et voilà, la section couleurs du theme.json n’a désormais plus de secrets pour vous.
Ces réglages vous permettront d’offrir la meilleur expérience utilisateur possible à vos clients.
À vous de définir le bon dosage entre possibilités et contraintes, en fonction du design sur lequel vous vous basez.
Dans le prochain cours, on va se concentrer sur les réglages d’espacements.
0
Questions, réponses et commentaires