Lorsque vous créez un thème, vous allez pouvoir déclarer des variantes pour basculer rapidement d’une apparence à une autre sans changer de thème. C’est très pratique si vous souhaitez vendre votre thème, mais cette option peut aussi servir pour faire un changement de style saisonnier.
Sommaire du cours
Dans ce chapitre, on a vu toutes les sections du theme.json. On a pu ainsi configurer notre thème dans les moindres détails.
Maintenant, il reste une dernière fonctionnalité sympa, c’est de donner à votre utilisateur le choix d’une variation de thème.
Ollie propose justement plusieurs déclinaisons de son thème. On peut les voir dans Apparence > Éditeur > Styles.
On peut définir :
- Des palettes de couleurs différentes ;
- Des jeux de polices d’écriture différents ;
- Ou carrément des déclinaisons complètes du thème.
C’est une fonctionnalité essentielle pour les créateurs de thèmes qui souhaitent ensuite les vendre en ligne.
Mais pour un site client classique, ce ne sera pas forcément utile.
J’y vois tout de même une utilité : si votre client a des événements saisonniers comme Halloween, Noël, le black friday… Il pourra changer d’apparence sans changer de thème.
Et surtout, sans tout casser !
Préparer un modèle basique pour l’aperçu
Pour l’instant, notre site est vide, du coup, je vous propose de créer un faux template de base histoire d’avoir des textes à afficher dans l’aperçu du Full Site Editing.
Pour cela, ouvrez /templates/index.html et ajoutez ce code sans pour l’instant tenter de le comprendre :
On va bien sûr voir tout ça en détails très bientôt dans le chapitre sur les templates de WordPress.
Préparer nos variations
Pour déclarer une variation de style de thème, il faut commencer par ajouter un dossier /styles à la racine de votre thème, afin d’y créer ensuite des fichiers .json à l’intérieur.
Dans ces fichiers JSON, on pourra ensuite déclarer nos déclinaisons en suivant le même schéma que notre theme.json originel.
Créer des déclinaisons de palettes
Commençons par créer une simple déclinaison de palette. Je vais créer un nouveau fichier que j’appellerai /styles/estival.json et dans laquelle je vais appliquer cette palette :
Enregistrez votre fichier et retournez dans Apparence > Éditeur > Styles, votre nouvelle palette devrait être disponible, WordPress l’ayant détectée automatiquement :
Pensez à faire une équivalence des couleurs : si dans votre première palette le slug « contrast » correspond à un gris léger, veillez à ce que soit également une couleur neutre utilisée dans la nouvelle palette afin d’être cohérent. Idem pour les couleurs destinées aux titres et aux textes.
Sinon, ça risque de piquer les yeux comme dans mon exemple. Ainsi, vous n’aurez pas besoin de configurer les couleurs de chaque éléments s’ils sont directement cohérents.
Vous pouvez également ajouter des variations de duotone et de dégradés en suivant la même logique.
Si besoin, vous pouvez changer les couleurs appliquées globalement, de la même manière qu’on a vu dans le cours précédent sur les réglages globaux du theme.json.
Attention cependant à surcharger avec la même précision (racine / élément / block) que votre theme.json originel. Si vous avez défini une couleur sur les textes dans elements, il faudra la déclarer là aussi dans elements dans votre variation.
Bien sûr, si vous appliquez une couleur depuis Gutenberg sur un texte, il ne prendra pas en compte votre réglage de votre fichier JSON. Ça peut vite se transformer en piège alors pensez-y !
Ajouter des déclinaisons de polices
Maintenant, on va voir pour faire la même chose avec les polices. Dans mon thème principal, j’ai déclaré Open Sans comme police générale (titres et textes).
Je vais proposer un nouveau set de polices Borel et ACME, toutes deux disponibles sur Google Fonts.
Je vais appliquer la technique que l’on a apprise plus tôt dans la formation pour télécharger et installer les polices depuis Google Font et je vais ensuite créer un fichier /styles/cartoon.json :
Contrairement à mon thème originel, je vais déclarer cette fois 2 polices différentes dans settings > typography > fontFamilies.
Pensez à bien déclarer le bon nom de fichier dans src.
Maintenant, retournez dans l’éditeur de styles et vous devriez voir apparaitre votre déclinaisons de polices :
Vous pourriez très bien profiter de ce fichier pour modifier les tailles de texte par la même occasion :
Et pour pousser le bouchon encore plus loin, vous pouvez également modifier les styles par défaut appliqués aux blocs et éléments.
Par exemple, je vais indiquer que je veux la police secondaire ACME sur mes titres de niveau 1 :
Les variations de styles de thèmes vous donnent donc un contrôle complet pour surcharger le theme.json !
Créer des déclinaisons complètes
On vient de voir qu’on peut créer des déclinaisons de palettes et de polices de manière séparée.
Maintenant, il est tout à fait possible de déclarer une déclinaison complète de votre thème.
Je créé pour l’occasion un fichier /styles/halloween.json et je vais déclarer une typographie et une palette en même temps :
Cette fois, si je retourne dans l’éditeur de sites, je vois bien ma nouvelle déclinaison :
Si vous cliquez sur le stylo en haut à droite de la colonne, vous pourrez modifier la variation (ne le faites pas via l’interface cela dit) et voir la nouvelle palette de couleur utilisée pour l’occasion :
Et on retrouve même les autres palettes disponibles en bas, ce qui nous permettrait de basculer rapidement de l’une à l’autre.
À vous de décider si vous voulez décorréler la police et les couleurs, ou tout réunir dans une variation.
Et voici qui clôt le chapitre sur le theme.json. C’est un gros morceau qui prend du temps en configuration, mais vous allez voir que grâce à ça, tout va maintenant aller plus vite.
On va maintenant pouvoir attaquer la deuxième phase de création d’un site en Full Site Editing avec WordPress avec les variations de styles de blocs cette fois.
0
Questions, réponses et commentaires