# Per-template style variations de WordPress 6.6 en pratique

> Un blog et des pages produit qui doivent visuellement se distinguer sans dupliquer tout le thème : WordPress 6.6 permet enfin des styles propres à un seul template.

- Auteur : Clément Hadrot
- Publié le : 2024-09-10
- Mis à jour le : 2024-09-10
- Catégorie : Thèmes
- URL : https://wpmoderne.dev.wordpress-developpement.fr/themes/per-template-style-variations-6-6/

## L’essentiel

- Une variation de style peut cibler un seul template
- Le fichier vit dans styles/ avec un slug de template précis
- Le panneau Styles propose la variation par contexte

Un client vendait à la fois du contenu éditorial (un blog technique) et des fiches produit sur la même installation WordPress, avec une exigence claire : le blog devait respirer, sobre et lisible, tandis que les pages produit avaient besoin d'un ton plus dense et commercial, avec des couleurs d'accent différentes. Avant WordPress 6.6, répondre à ce besoin proprement demandait des ruses : classes CSS conditionnelles, styles ciblés par sélecteur de template, parfois un thème enfant partiel.

WordPress 6.6 a introduit une réponse native à ce problème précis : les variations de style par template, qui permettent d'appliquer une palette, une typographie ou des espacements différents à un seul template, sans toucher au reste du thème.

## Le principe des variations liées à un template

Une variation de style classique, stockée dans le dossier `/styles` du thème, s'applique globalement à l'ensemble du site une fois sélectionnée dans le panneau Styles de l'éditeur de site. Depuis la 6.6, il est possible de restreindre une variation à un template précis, en ajoutant la clé `slug` qui correspond au nom du fichier de template ciblé, dans le fichier JSON de la variation.

```
{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "title": "Fiche produit accentuée",
  "slug": "single-produit",
  "settings": {
    "color": {
      "palette": [
        { "slug": "accent-produit", "color": "#c2410c", "name": "Accent produit" }
      ]
    }
  },
  "styles": {
    "elements": {
      "button": {
        "color": { "background": "var(--wp--preset--color--accent-produit)" }
      }
    }
  }
}
```

Ce fichier, placé dans `styles/single-produit.json`, ne s'applique qu'au template `single-produit.html` du thème, tant que ce nom de fichier correspond exactement au template visé.

## Où et comment l'activer dans l'éditeur

> L'essentiel à retenir : Une variation de style peut cibler un seul template ; Le fichier vit dans styles/ avec un slug de template précis ; Le panneau Styles propose la variation par contexte

Dans le panneau Styles de l'éditeur de site, ces variations liées à un template apparaissent désormais regroupées par contexte plutôt que mélangées avec les variations globales : l'utilisateur voit clairement quelles variations s'appliquent à l'ensemble du site et lesquelles sont réservées à un template spécifique.

- Les variations globales restent affichées en premier, comme avant la 6.6.
- Les variations liées à un template apparaissent dans une section dédiée, visible seulement quand on édite ce template précis.
- Une variation par template peut elle-même définir sa propre sous-échelle de couleurs et de typographie, héritée du thème mais surchargeable localement.

## Ce que ça change pour la structure du projet

Sur le projet du client mentionné plus haut, cette fonctionnalité a permis de retirer une bonne partie du CSS conditionnel écrit à la main pour distinguer visuellement le blog des fiches produit. Le fichier `styles/single-produit.json` porte désormais explicitement l'intention de design, ce qui rend le projet plus lisible pour quiconque le reprend ensuite : l'information n'est plus dispersée dans des sélecteurs CSS conditionnels, mais centralisée dans un fichier au rôle explicite.

## Limites constatées à l'usage

Cette fonctionnalité reste liée au nom exact du fichier de template : un changement de structure de template (passage d'un template générique à un template spécifique à un type de contenu) oblige à renommer le fichier de variation correspondant, sous peine de perdre silencieusement le lien. Par ailleurs, ces variations par template héritent des réglages globaux du thème mais ne peuvent pas, à ce jour, hériter d'une autre variation de style : chaque fichier reste autonome, ce qui peut entraîner une duplication de réglages communs entre plusieurs variations proches.

> Sur nos projets, nous documentons systématiquement, en commentaire dans le fichier de thème principal, la liste des variations par template actives : sans ce repère, l'origine d'un style spécifique à une seule page devient vite un mystère pour qui reprend le projet.

## En résumé

Les variations de style par template de WordPress 6.6 comblent un vrai manque pour les sites qui combinent plusieurs contextes éditoriaux distincts sous un même thème. Elles évitent le recours à du CSS conditionnel bricolé et rendent l'intention de design explicite dans la structure même du thème. Leur principale contrainte reste la dépendance stricte au nom du fichier de template ciblé, à garder en tête lors de toute réorganisation ultérieure des templates.