Les développeurs de thèmes WordPress peuvent utiliser un fichier theme.json pour rationaliser un processus qui reposait auparavant en grande partie sur le PHP. Cependant, vous pouvez toujours utiliser vos compétences en HTML, JavaScript et PHP pour construire vos thèmes – et CSS ne fait pas exception. En fait, vous pouvez utiliser les propriétés CSS personnalisées dans theme.json, ce qui peut améliorer la phase de conception et offrir une plus grande flexibilité.
Dans ce guide, nous abordons les propriétés CSS personnalisées de front pour explorer comment elles fonctionnent avec WordPress et theme.json. Mais avant d’en arriver là, résumons theme.json, l’édition complète du site (FSE) et la manière dont CSS s’intègre dans cette nouvelle approche de la conception.
Comment theme.json fonctionne avec WordPress
Le fichier theme.json est apparu pour la première fois dans WordPress 5.8. Il s’agit d’une manière révolutionnaire de concevoir les thèmes WordPress, en utilisant la syntaxe JSON pour construire un fichier de configuration. WordPress le lit et applique les résultats sans avoir besoin de beaucoup de PHP, CSS ou JavaScript.
Les réglages globaux et les styles de FSE contrôlent divers aspects visuels de votre thème. Il peut s’agir de palettes de couleurs typiques et de typographie, mais aussi d’options de mise en page et de styles de blocs et d’éléments individuels.
Si FSE est intuitif, puissant, adaptable et facile à utiliser, theme.json peut aider à combler le fossé entre l’utilisateur final et le développeur. Presque toutes les options offertes par theme.json sont également visibles dans l’éditeur de site.
L’utilisation de theme.json présente de nombreux avantages pour la création de thèmes WordPress. Il y a plusieurs raisons à cela :
- Vous disposez d’un emplacement central pour la configuration du design de votre thème, ce qui facilite sa gestion et sa mise à jour.
- Il y a moins d’obscurité entre l’expérience frontend, l’éditeur de site, et la base de code d’un thème.
- L’utilisation de
theme.jsonoffre une compatibilité avec l’avenir du développement et de la conception de WordPress. - La fonctionnalité intégrée de WordPress signifie que vous réduisez la nécessité pour l’utilisateur d’appliquer des feuilles de style CSS personnalisées.
Voyons comment theme.json est lié aux réglages et styles globaux de FSE.
Un aperçu des réglages globaux et des styles de FSE
FSE représente une nouvelle ère dans le développement de thèmes WordPress, et les réglages et styles globaux en sont le fer de lance. Cela permet aux utilisateurs de personnaliser presque tous les aspects de l’apparence d’un site grâce à la fonctionnalité de l’éditeur de site.
Ici, vous pouvez ajuster certains aspects de la mise en page de votre thème à l’aide d’options qui nécessitaient auparavant un CSS ou une extension de construction de pages tiers. La modification des marges, de la marge intérieure et des bordures en sont des exemples, mais il y en a bien d’autres.
Vous pouvez même activer ou désactiver la plupart de ces fonctionnalités sur theme.json (ou dans le fichier block.json d’un bloc). Cela permet de personnaliser l’interface utilisateur en même temps que la conception générale du site.
Cependant, les options à votre disposition, bien que nombreuses, ne couvrent pas tous les besoins. C’est particulièrement vrai si vous créez un thème à partir de zéro. Les propriétés CSS personnalisées peuvent vous aider à résoudre ce problème.
Comprendre les propriétés CSS personnalisées
En PHP, en JavaScript et dans presque tous les langages de programmation, les variables contiennent les valeurs de divers éléments de votre code. Par exemple, vous pouvez stocker des valeurs telles que des noms, des dates et des nombres et les utiliser dans votre programme.
Les variables CSS3 – ou propriétés personnalisées CSS, comme nous les appelons dans cet article – sont prises en charge par la plupart des navigateurs actuels. Internet Explorer ne les prend pas en charge, pas plus qu’Opera Mini. Cependant, les principaux navigateurs les prennent tous en charge.
Les propriétés personnalisées CSS vous permettent de stocker des valeurs à réutiliser dans votre feuille de style. Il s’agit d’un moyen puissant de créer des feuilles de style CSS plus dynamiques et plus souples. Vous pouvez mettre à jour plusieurs règles de style en modifiant une seule valeur.
Le concept de variables CSS n’est pas entièrement nouveau. Les pré-processeurs tels que Sass utilisent une fonctionnalité similaire. Par exemple, prenez l’exemple suivant de Sass :
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-colorCe traitement est un CSS typique :
body {
font: 100% Helvetica, sans-serif;
color: #333;
}Toutefois, les propriétés CSS personnalisées transmettent directement ces données au navigateur. Cela présente certains avantages :
- Mises à jour dynamiques. Contrairement à la plupart des variables de pré-processeur, vous pouvez mettre à jour les propriétés CSS personnalisées « à la volée » à l’aide de JavaScript.
- Nature en cascade. Les propriétés personnalisées suivent la cascade CSS, ce qui vous offre une plus grande flexibilité et une meilleure prise en compte du contexte.
Les propriétés personnalisées seront également plus performantes en réduisant la redondance du code. Des feuilles de style plus petites se traduisent par des temps de chargement plus rapides.
Syntaxe des propriétés CSS personnalisées
Comme pour les variables typiques du pré-processeur, la syntaxe des propriétés CSS personnalisées est simple. Elle utilise des doubles traits d’union plutôt que des signes de dollar pour spécifier une propriété :
:root {
--primary-color: #007bff;
}À partir de là, vous utilisez la fonction var() pour attribuer ces propriétés aux éléments :
.button {
background-color: var(--primary-color);
}Notez que vous pouvez également attribuer des propriétés personnalisées à l’aide de la propriété @. Cependant, comme vous le comprendrez bientôt, WordPress simplifie l’ensemble de ce processus.
Où pouvez-vous utiliser les propriétés CSS personnalisées ?
La polyvalence est de mise lorsqu’il s’agit de propriétés personnalisées CSS. Avec WordPress et theme.json, vous avez plusieurs façons de les utiliser :
- Pré-réglages : Vous pouvez définir des pré-réglages de couleur, de police et d’espacement.
- Styles de blocs : Les blocs individuels peuvent utiliser des propriétés personnalisées pour un style cohérent.
- Styles globaux : Les propriétés personnalisées sont très utiles pour la conception de sites entiers.
Vous pouvez créer des propriétés entièrement personnalisées pour l’usage que vous souhaitez. Examinons un exemple pratique de l’utilisation des propriétés personnalisées dans votre fichier theme.json:
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#007bff",
"name": "Primary"
}
]
},
"custom": {
"line-height": {
"body": 1.5,
"heading": 1.2
}
}
},
"styles": {
"typography": {
"lineHeight": "var(--wp--custom--line-height--body)"
},
"blocks": {
"core/heading": {
"typography": {
"lineHeight": "var(--wp--custom--line-height--heading)"
}
}
}
}
}Ici, nous définissons une couleur pré-définie et utilisons la propriété custom pour définir les valeurs line-height pour les titres et le corps de la page. WordPress génère des propriétés CSS pour les éléments que vous définissez à l’aide de custom. Plus loin, nous pouvons assigner ces propriétés personnalisées à différents styles, réglages, blocs, etc.
Les avantages de l’utilisation des propriétés CSS personnalisées
Vous avez peut-être déjà une idée de la manière dont les propriétés CSS personnalisées peuvent vous aider à développer des thèmes. Néanmoins, il y a de nombreux avantages à noter.
Nous avons déjà parlé de modularité et de réutilisation. Toutes les valeurs communes que vous définissez en tant que propriétés personnalisées favorisent la cohérence et réduisent la redondance. Cette redondance se traduira par de meilleures performances potentielles pour votre thème.
Pour l’utilisateur final, les propriétés personnalisées offrent plusieurs avantages :
- Une personnalisation simplifiée. Les utilisateurs et les propriétaires de sites peuvent personnaliser un thème sans avoir besoin de connaissances CSS complexes. Une fois que vous avez exposé les variables via
theme.json, les utilisateurs peuvent accéder aux réglages via l’éditeur de site. - Meilleure compatibilité avec FSE. Les propriétés personnalisées s’alignent sur les principes FSE, ce qui vous permet de créer des thèmes plus souples et plus dynamiques.
- Maintenance et mises à jour plus faciles. Si vous devez mettre à jour des valeurs communes à l’ensemble de votre thème, une propriété personnalisée vous permet de les modifier à un seul endroit. Cela rationalise votre maintenance et rend les mises à jour et les ajustements plus faciles à gérer.
Dans l’ensemble, les propriétés personnalisées peuvent améliorer le flux de travail du développement de votre thème. Leur détermination est également plus simple que l’utilisation de variables CSS typiques.
Comment définir des propriétés CSS personnalisées dans theme.json ?
Entrons dans les aspects pratiques de la définition et de l’utilisation des propriétés CSS personnalisées dans theme.json. La première étape est d’apprendre à les écrire.
Syntaxe et conventions de nommage
WordPress propose la propriété custom pour faciliter les définitions. Elle est légèrement plus facile à utiliser que la propriété @ ou les définitions dans les pseudo classes, et utilise le format standard clé/valeur :
{
"settings": {
"custom": {
"property-name": "value"
}
}
}Dans les coulisses, WordPress traitera cette définition et génèrera une propriété CSS personnalisée utilisant des doubles traits d’union :
--wp--custom--<custom-element>--wp--custom-- fera toujours partie de votre propriété CSS et n’utilisera pas la casse camel. Par exemple, si vous définissez lineHeight comme une propriété personnalisée, WordPress la transformera en « casse kebab »
--wp--custom--line-heightEn ce qui concerne les conventions de nommage, vous pouvez utiliser la casse camel si vous le souhaitez, mais nous vous conseillons d’utiliser la casse kebab pour les noms de vos propriétés personnalisées. Ceci est cohérent avec les conventions de nommage de WordPress, améliore la lisibilité et réduit les erreurs de traitement.
Remarque : les propriétés personnalisées CSS utilisent des doubles tirets car le groupe de travail CSS du W3C souhaite également vous encourager à utiliser Sass (qui utilise des signes de dollar pour définir les propriétés). Ainsi, vous avez la possibilité d’utiliser les deux pour améliorer vos conceptions.
WordPress définit déjà certaines propriétés personnalisées – ou du moins, les thèmes ont la possibilité de le faire. Cela signifie que vous verrez des variables CSS dans theme.json sans déclaration explicite :
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "var(--wp--preset--color--primary)",
"name": "Primary"
}
]
},
"custom": {
"spacing": {
"small": "1rem",
"medium": "2rem",
"large": "3rem"
}
}
},
"styles": {
"spacing": {
"blockGap": "var(--wp--custom--spacing--medium)"
}
}
}Dans cet exemple, nous définissons une couleur primaire en utilisant une couleur prédéfinie existante. Ensuite, nous définissons des propriétés d’espacement personnalisées, puis nous les définissons à l’aide de var().
Cela signifie que nous n’avons pas besoin de coder les valeurs en dur dans theme.json. De plus, les utilisateurs peuvent mettre à jour ces valeurs dans l’éditeur de site et les propager dans l’ensemble du thème.
Pré-réglages et propriétés personnalisées
Bien entendu, theme.json vous permet également de définir des pré-réglages pour les couleurs, les tailles de police et d’autres éléments communs du thème. D’autre part, vous pouvez utiliser des propriétés personnalisées pour toute valeur que vous souhaitez réutiliser dans votre thème.
La principale différence réside dans les conventions d’appellation et l’accessibilité. Les utilisateurs ne pourront pas accéder aux propriétés personnalisées dans l’éditeur de site sans un travail supplémentaire de votre part. Avec les pré-réglages, WordPress génère du CSS qui ressemble à la façon dont il traite les propriétés personnalisées :
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#007bff",
"name": "Primary"
}
]
},
"custom": {
"fontFamily": {
"base": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
"headings": "'Helvetica Neue', Helvetica, Arial, sans-serif"
}
}
}
}Une fois que WordPress les a traitées, vous pouvez voir les différences inhérentes :
--wp--preset--primary: #007bff;
--wp--custom--font-family--base: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
--wp--custom--font-family--headings: "'Helvetica Neue', Helvetica, Arial, sans-serif";Notez que l’imbrication ultérieure des propriétés utilisera des traits d’union doubles, même après avoir converti la casse camel en casse kebab.
CSS global et spécifique à un bloc vs propriétés CSS personnalisées
Avec WordPress classique, vous utilisiez des feuilles de style CSS supplémentaires et personnalisées pour concevoir les éléments de votre thème. C’est toujours le cas avec theme.json et FSE, bien que l’approche soit différente des propriétés CSS personnalisées.
Si vous vous rendez dans l’éditeur de site et que vous accédez à l’écran Styles, vous remarquerez la section CSS supplémentaires. Cette section fonctionne de la même manière que le panneau CSS personnalisé dans les installations WordPress classiques :
Il s’agit d’un moyen d’ajouter une personnalisation CSS globale à un thème. Cependant, il s’agit en fait d’un moyen de donner aux utilisateurs la possibilité d’ajouter des feuilles de style CSS. Vous pouvez également l’utiliser pour apporter de petites modifications mineures qui ne justifient pas une feuille de style complète.
Dans theme.json, vous utilisez la propriété css pour définir toute feuille de style CSS supplémentaire que vous souhaitez ajouter :
{
"version": 3,
"styles": {
"css": "margin: 0"
}
}Notez qu’il n’est pas nécessaire d’utiliser des points-virgules pour terminer les déclarations CSS. Vous pouvez également définir des feuilles de style CSS personnalisées pour les blocs :
{
"version": 2,
"styles": {
"blocks": {
"core/post-title": {
"css": "letter-spacing: 1px;"
}
}
}
}Chaque fois que vous définissez une feuille de style CSS de cette manière dans theme.json, vous la verrez dans les champs CSS supplémentaires de l’éditeur de site. Toutefois, n’oubliez pas que rien de ce que vous déclarez à l’aide de css n’est une propriété CSS personnalisée.
Utiliser le sélecteur esperluette (&)
Tout comme Sass, WordPress supporte également le sélecteur esperluette, à quelques différences près. Dans ce cas, c’est un excellent moyen de cibler des éléments et des propriétés imbriqués. Cela peut être utile si vous choisissez de déclarer des propriétés CSS personnalisées pour des blocs individuels.
Par exemple, prenez ce qui suit :
…
"styles": {
"blocks": {
"core/table": {
"css": "color:#333 & th{ background:#f5f5f5; }"
}
…Ceci définit une couleur de texte et une couleur d’arrière-plan pour l’élément d’en-tête du tableau. Une fois que WordPress l’a traité, vous obtenez un CSS propre et simple :
.wp-block-table > table {
color: #333;
}
.wp-block-table > table th {
background: #f5f5f5;
}Les sélecteurs esperluette sont excellents si vous souhaitez étendre le CSS que vous ciblez. Une façon compréhensible de penser au sélecteur est qu’il aide à séparer vos éléments CSS. Prenez l’exemple suivant :
{
"version": 3,
"styles": {
"blocks": {
"core/avatar": {
"css": "& img {border-radius: 999px}"
}
}
}
}Ceci ajoute un rayon de bordure à un avatar et produit le CSS comme vous vous y attendez :
.wp-block-image img {
border-radius: 999px;
}Cependant, sans l’esperluette, WordPress joindrait vos déclarations :
…
.wp-block-imageimg
…L’utilisation du sélecteur d’esperluette pour vos propriétés CSS personnalisées sera quelque chose que vous ferez régulièrement.
Le rôle de Kinsta dans le soutien au développement moderne de WordPress
Votre choix d’hébergement est tout aussi important que n’importe quel langage de codage, pré-processeur ou autre élément technique. Sans un hébergeur de qualité à vos côtés, vous ne pourrez pas bénéficier des performances et des outils de theme.json ou FSE.
Kinsta peut être au cœur de votre flux de travail, grâce à nos outils de développement. Vous pouvez commencer avec DevKinsta – notre environnement de développement local qui utilise des conteneurs Docker pour isoler votre installation WordPress :
Une fonctionnalité utile est la capacité de DevKinsta à pousser et à tirer des données entre votre machine locale et vos environnements de staging Kinsta :
Cela vous permet de tester vos thèmes dans un environnement de production avant de commencer à les distribuer. Lorsque vous travaillez avec des propriétés CSS personnalisées, vous pouvez vous assurer qu’elles fonctionnent dans différents contextes. L’API de Kinsta peut prendre en charge votre pipeline CI/CD lorsque vous êtes prêt à passer en production.
D’autres aspects de l’architecture de Kinsta vous aideront dans l’ensemble de votre configuration de développement. Par exemple, Kinsta supporte Git, ce qui facilite le contrôle de version de vos fichiers de thème, y compris theme.json. Pour l’itération des propriétés personnalisées, ou simplement l’expérimentation de différentes configurations, vous voudrez savoir que vous disposez d’une option de retour en arrière.
Enfin, si vous choisissez d’utiliser votre thème sur un serveur Kinsta, notre cache Edge augmente les performances de theme.json jusqu’à 80 %. Le fait d’avoir un site web qui fonctionne rapidement, quel que soit le navigateur de l’utilisateur, vous permettra de vous assurer que vos ajouts personnalisés s’affichent rapidement.
Résumé
Tout comme theme.json est un puissant fichier de configuration pour créer des thèmes WordPress flexibles et faciles à entretenir, les propriétés CSS personnalisées sont cruciales pour le flux de travail. C’est ainsi que vous construirez et déclarerez les CSS pour les éléments que l’éditeur de site n’atteint pas. Elles seront également essentielles si vous construisez vos propres blocs ou si vous souhaitez simplement développer des thèmes WordPress uniques avec une profondeur de personnalisation ultime. De plus, vous avez également la possibilité de partager ce CSS avec les utilisateurs par le biais de l’éditeur de site.
Les propriétés CSS personnalisées feront-elles partie de votre flux de travail pour le développement de votre thème ? Si oui, comment allez-vous les utiliser ? Faites-nous part de vos commentaires dans la section ci-dessous !
Laisser un commentaire