Chapitre 3.5 — Gabarits & parties de gabarit (FSE)

⏱️ TL;DR — Dans un thème bloc, un gabarit (template) définit la structure d’un type de page (Accueil, Article seul, Archive, Page, 404…), et une partie de gabarit (template part) est un morceau réutilisable (en-tête, pied de page) inclus dans plusieurs gabarits. WordPress choisit quel gabarit utiliser selon une hiérarchie (la template hierarchy, détaillée en Partie 5). En FSE, tout ça s’édite en blocs et vit dans des fichiers templates/*.html et parts/*.html.

🎯 Objectifs

• Distinguer gabarit et partie de gabarit.
• Comprendre l’idée de hiérarchie de gabarits (quel modèle pour quelle page).
• Connaître les gabarits usuels d’un thème bloc.
• Faire le lien avec le développement de thème (Partie 6) et la boucle (Partie 5).

1. Gabarit vs partie de gabarit

• Un gabarit = la mise en page complète d’un type de vue : index, home, front-page, single, page, archive, 404, search… Fichier : templates/single.html.
• Une partie de gabarit = un fragment partagé entre gabarits : header, footer (ou un « sidebar »). Fichier : parts/header.html.

L’intérêt : l’en-tête et le pied sont définis une fois (parties) et inclus dans tous les gabarits. Modifier parts/header.html change l’en-tête partout — comme un composant de layout partagé.

2. La hiérarchie de gabarits (aperçu)

Quand une URL est demandée, WordPress détermine quel gabarit afficher selon une hiérarchie de spécificité : du plus précis au plus général. Exemple simplifié pour un article seul :

single-{post-type}-{slug}.html
  → single-{post-type}.html
    → single.html
      → singular.html
        → index.html   (le filet de sécurité universel)

Le premier gabarit existant dans le thème gagne. index.html est le dernier recours (toujours présent). C’est ce mécanisme qui permet, par exemple, un gabarit spécifique pour un type de contenu (ex. single-livre.html pour vos livres) tout en ayant un modèle générique par défaut.

💡 Pour un dev React — La template hierarchy est un système de routing par convention : selon le « type » de la ressource demandée, WordPress résout le bon modèle, en cascadant du spécifique au générique. Pensez à un routeur qui essaie single-livre puis single puis index — le premier match l’emporte. On la détaille en profondeur en Partie 5 (côté classique et bloc) ; ici, retenez juste le principe de cascade.

3. Les gabarits usuels d’un thème bloc

Un thème bloc minimal peut ne fournir que index.html ; un thème complet en propose une dizaine, plus des parties (header, footer) et souvent des motifs.

4. Éditer les gabarits (côté créateur)

Dans Apparence → Éditeur → Gabarits, on peut :

• ouvrir un gabarit et le modifier en blocs (ajouter une partie, changer la disposition) ;
• créer un nouveau gabarit (ex. pour un type de contenu ou une page précise) ;
• réinitialiser un gabarit personnalisé pour revenir à la version du thème.

Les blocs « de thème » (ch. 3.3) — Titre de l’article, Contenu, Requête, Navigation — sont les briques de ces gabarits : ils injectent les données de la page courante à l’emplacement voulu.

⚠️ Piège — Ne confondez pas modifier le contenu d’une page (l’article lui-même) et modifier son gabarit (le modèle qui l’entoure : en-tête, disposition, blocs de données). Un changement de gabarit affecte toutes les pages qui l’utilisent ; un changement de contenu, seulement cette page-là. L’éditeur les présente distinctement — repérez toujours où vous éditez.

5. Ce que ça prépare pour la Partie 6

En développant un thème bloc (Partie 6), vous écrirez ces fichiers : templates/index.html, templates/single.html, parts/header.html, parts/footer.html, le tout piloté par theme.json. La hiérarchie de gabarits (Partie 5) vous dira quel fichier créer pour cibler telle page. Vous avez maintenant le modèle mental complet : contenu (blocs) + gabarits (structure) + theme.json (design) = un site FSE.

✏️ Exercices

1. Différence entre un gabarit single et une partie de gabarit header ?
2. Un thème ne contient que index.html. Que se passe-t-il quand on affiche un article, une archive, une 404 ?
3. Vous voulez une mise en page différente pour les pages d’un futur type de contenu « Livre ». Quel fichier de gabarit viseriez-vous (idée) ?

🧠 Quiz de révision

Partie suivante : Partie 4 — Installation & environnement de développement.