theme.json : habiller la boutique sans écrire de CSS

3.1Le fichier complet

Voilà le theme.json du thème du labo, tel qu'il a tourné. On le décortique juste après.

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"color": {
			"custom": false,
			"customGradient": false,
			"defaultGradients": false,
			"defaultPalette": false,
			"palette": [
				{ "slug": "encre", "color": "#16181d", "name": "Encre" },
				{ "slug": "vert", "color": "#87d01e", "name": "Vert" },
				{ "slug": "vert-pale", "color": "#f3fbe6", "name": "Vert pâle" },
				{ "slug": "blanc", "color": "#ffffff", "name": "Blanc" }
			]
		},
		"layout": { "contentSize": "720px", "wideSize": "1200px" },
		"typography": {
			"defaultFontSizes": false,
			"fluid": true,
			"fontFamilies": [
				{ "slug": "systeme", "name": "Police du système", "fontFamily": "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" }
			],
			"fontSizes": [
				{ "slug": "small", "size": "0.9375rem", "name": "Petite" },
				{ "slug": "medium", "size": "1.125rem", "name": "Moyenne" },
				{ "slug": "large", "size": "1.5rem", "name": "Grande" },
				{ "slug": "x-large", "size": "2.5rem", "name": "Très grande", "fluid": { "min": "1.875rem", "max": "2.5rem" } }
			]
		},
		"useRootPaddingAwareAlignments": true
	},
	"styles": {
		"color": { "background": "var:preset|color|blanc", "text": "var:preset|color|encre" },
		"spacing": { "padding": { "left": "1.25rem", "right": "1.25rem" }, "blockGap": "1.25rem" },
		"typography": { "fontFamily": "var:preset|font-family|systeme", "fontSize": "var:preset|font-size|medium", "lineHeight": "1.6" },
		"elements": {
			"link": { "color": { "text": "var:preset|color|encre" } },
			"heading": { "typography": { "fontWeight": "800", "lineHeight": "1.15" } },
			"h1": { "typography": { "fontSize": "var:preset|font-size|x-large" } },
			"button": {
				"color": { "background": "var:preset|color|encre", "text": "var:preset|color|blanc" },
				"border": { "radius": "999px" },
				"typography": { "fontWeight": "700" },
				":hover": { "color": { "background": "var:preset|color|vert", "text": "var:preset|color|encre" } }
			}
		},
		"blocks": {
			"woocommerce/product-price": { "typography": { "fontWeight": "700" } }
		}
	},
	"templateParts": [
		{ "name": "header", "title": "En-tête", "area": "header" },
		{ "name": "footer", "title": "Pied de page", "area": "footer" }
	]
}

Deux parties : settings, ce que l'éditeur propose (les couleurs, les polices, les tailles), et styles, ce qui s'applique d'office. La troisième, templateParts, déclare l'en-tête et le pied de page du chapitre précédent.

3.2Une palette fermée

Quatre couleurs, pas une de plus : l'encre, le vert, le vert pâle et le blanc. Et surtout ces trois lignes : "defaultPalette": false, "custom": false et "defaultGradients": false. Elles retirent de l'éditeur la palette de WordPress, le sélecteur de couleur libre et les dégradés.

Pourquoi fermer ? Parce qu'une boutique, c'est souvent plusieurs personnes qui créent des pages et des fiches. Avec une palette fermée, personne ne peut glisser un rouge vif dans une description produit. Ta charte se défend toute seule.

3.3La police du système

Au lieu de charger une police depuis un fichier, le thème du labo utilise celle du système de chaque visiteur : system-ui, puis -apple-system, Segoe UI et Roboto selon l'appareil. C'est un choix de style, et c'est surtout un choix de poids.

Si ta marque a une police à elle, garde-la, bien sûr : theme.json sait déclarer un fichier de police avec fontFace. Mais charge un seul fichier, au format woff2, et pas quatre graisses que tu n'utilises pas.

3.4Les boutons, ceux de WooCommerce compris

C'est la partie la plus satisfaisante. La section styles.elements.button définit l'apparence de tous les boutons du site : fond encre, texte blanc, coins entièrement arrondis, texte en gras, et passage au vert au survol. Les boutons de WooCommerce, qui sont des blocs, la suivent.

Au labo, sans une ligne de CSS, les boutons « Ajouter au panier » de la page Boutique sont devenus noirs et arrondis, et celui de la fiche produit a pris le même arrondi. Avec le thème classique du chapitre 1, le même bouton restait violet et carré : ce sont les styles d'origine de WooCommerce, que theme.json ne pilote pas.

3.5Régler un bloc de WooCommerce par son nom

Dernière section de styles : blocks. On y règle un bloc précis, par son nom. Une seule ligne au labo : "woocommerce/product-price", avec une graisse de 700. Résultat, tous les prix de la boutique, dans la grille comme sur la fiche, sont passés en gras.

Le principe vaut pour n'importe quel bloc de WooCommerce : le titre d'un produit, son image, le bouton, le mini-panier. Le nom du bloc, tu le trouves dans la référence des blocs de WooCommerce. C'est plus solide qu'une règle CSS qui vise une classe susceptible de changer à la prochaine version.

3.6Tailles et mise en page

Les tailles de texte sont fluides ("fluid": true) : la plus grande, celle des titres, varie entre 1,875 et 2,5 rem selon la largeur de l'écran. Le contenu courant est limité à 720 px de large, et les éléments larges (la grille de produits, la fiche) à 1 200 px. Les modèles de la boutique, au chapitre suivant, utilisent cette largeur de 1 200 px pour leur partie principale.

Le thème est habillé. Reste le gros morceau : les modèles de WooCommerce, et les trois libellés anglais de la fiche produit.

Co-fondateur de Kōeki · Consultant SEO et IA

Sébastien Grillot

Consultant SEO depuis 2009 : c'est ici, sur Inside da WeB, qu'il a monté sa première agence, spécialisée dans l'e-commerce sous WordPress. Il construit aujourd'hui ses propres outils, thèmes compris, avec l'IA.

Son parcours completDiscuter de ta boutique avec KōekimIAou, ma newsletter IA