Skip to Content
WordPressPartie 14 — Mini-jeux (exploration guidée)14 — Développer un thème (FSE)

Terrain 14 — Développer un thème (FSE)

⏱️ TL;DR — 25 mini-jeux ⭐⭐⭐→⭐⭐⭐⭐ pour construire un thème par blocs (FSE) de zéro : theme.json (design tokens), gabarits, parties, motifs, variations de style, polices locales. À la fin, tu livres un thème moderne, léger et personnalisable — la compétence design premium de la Partie 6.

🕹️ Mini-jeu 1 — Le thème bloc minimal ⭐⭐⭐ 💻

But : le plus petit thème FSE qui marche. Mission : crée un thème avec 3 fichiers : style.css, theme.json, templates/index.html. Étapes :

montheme/
  style.css        (en-tête Theme Name)
  theme.json       ({ "version": 3 })
  templates/
    index.html     (<!-- wp:template-part {"slug":"header"} /--> ...)

✅ Solution

Un thème par blocs est reconnu dès qu’il a un templates/index.html. style.css porte l’en-tête (Theme Name…), theme.json la config. Pas de PHP obligatoire. Minimalisme radical vs thème classique.

🕹️ Mini-jeu 2 — Structure de theme.json ⭐⭐⭐ 💻

But : les 3 grandes clés. Mission : pose le squelette settings / styles. Étapes :

{
  "version": 3,
  "settings": {},
  "styles": {}
}

✅ Solution

settings = ce qui est permis/disponible (palette, tailles, options d’éditeur) ; styles = ce qui est appliqué par défaut (couleurs, typo du site). Plus templateParts et customTemplates. C’est le cœur d’un thème FSE.

🕹️ Mini-jeu 3 — Une palette de couleurs ⭐⭐⭐ 💻

But : des design tokens couleur. Mission : déclare 3 couleurs nommées. Étapes :

"settings": {
  "color": {
    "palette": [
      { "slug": "base", "color": "#ffffff", "name": "Fond" },
      { "slug": "contrast", "color": "#111111", "name": "Texte" },
      { "slug": "primary", "color": "#3858e9", "name": "Primaire" }
    ]
  }
}

✅ Solution

Chaque couleur nommée devient un token réutilisable partout (éditeur + code via var(--wp--preset--color--primary)). C’est ton système de design centralisé — comme des variables Tailwind/CSS. Un point de vérité.

🕹️ Mini-jeu 4 — Des tailles de police fluides ⭐⭐⭐⭐ 💻

But : une échelle typographique responsive. Mission : déclare des fontSizes avec fluid. Étapes :

"typography": {
  "fluid": true,
  "fontSizes": [
    { "slug": "medium", "size": "1.125rem", "name": "M" },
    { "slug": "x-large", "size": "2.5rem", "fluid": { "min": "2rem", "max": "3rem" }, "name": "XL" }
  ]
}

✅ Solution

Les tailles fluides interpolent entre min et max selon la largeur d’écran (clamp() généré). Typo responsive sans media query. Encore un token, cohérent partout. FSE moderne.

🕹️ Mini-jeu 5 — La largeur de mise en page ⭐⭐⭐ 💻

But : cadrer le contenu. Mission : définis contentSize et wideSize. Étapes :

"layout": { "contentSize": "660px", "wideSize": "1200px" }

✅ Solution

contentSize = colonne de lecture par défaut ; wideSize = largeur des blocs alignwide. Ces valeurs pilotent la mise en page globale (terrain 07, jeu 16) et donnent des alignements cohérents à tous les blocs.

🕹️ Mini-jeu 6 — Styles globaux par défaut ⭐⭐⭐ 💻

But : appliquer les tokens. Mission : applique fond/texte et une police de corps par défaut. Étapes :

"styles": {
  "color": { "background": "var(--wp--preset--color--base)", "text": "var(--wp--preset--color--contrast)" },
  "typography": { "fontSize": "var(--wp--preset--font-size--medium)" }
}

✅ Solution

settings offre les tokens, styles les applique. Ici le site utilise par défaut fond clair, texte foncé, taille moyenne. Réutiliser les variables preset garde tout cohérent et modifiable d’un endroit.

🕹️ Mini-jeu 7 — Styliser les éléments ⭐⭐⭐⭐ 💻

But : liens, boutons, titres. Mission : donne une couleur aux liens et un style aux boutons. Étapes :

"styles": {
  "elements": {
    "link": { "color": { "text": "var(--wp--preset--color--primary)" } },
    "button": { "color": { "background": "var(--wp--preset--color--primary)", "text": "#fff" } }
  }
}

✅ Solution

styles.elements cible des éléments transverses (link, button, heading, caption). Plus fin que le global, sans CSS. C’est l’équivalent déclaratif d’une feuille de style de base.

🕹️ Mini-jeu 8 — Styliser un bloc précis ⭐⭐⭐⭐ 💻

But : style par type de bloc. Mission : donne un fond à tous les blocs Citation. Étapes :

"styles": {
  "blocks": {
    "core/quote": { "color": { "background": "#f2f4ff" }, "spacing": { "padding": "1rem" } }
  }
}

✅ Solution

styles.blocks cible un type de bloc (core/quote, core/button…) partout. Tu définis l’apparence par défaut de chaque bloc du site. C’est le niveau le plus granulaire de theme.json.

🕹️ Mini-jeu 9 — Le gabarit index ⭐⭐⭐ 💻

But : le fallback universel. Mission : compose templates/index.html (header + contenu + footer). Étapes :

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group"><!-- wp:post-content /--></main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

✅ Solution

index.html est le gabarit de repli (tout en découle). Il assemble des parties (header/footer) et des blocs de données (post-content, query…). Le markup de blocs remplace le PHP des thèmes classiques.

🕹️ Mini-jeu 10 — Le gabarit single ⭐⭐⭐⭐ 💻

But : l’affichage d’un article. Mission : crée templates/single.html avec titre + contenu + méta.

✅ Solution

single.html utilise les blocs post-title, post-content, post-date, post-terms. Chacun hérite du contexte de l’article courant. Pas de « boucle » à écrire : les blocs la matérialisent (contraste avec WP_Query, Partie 5).

🕹️ Mini-jeu 11 — Le gabarit d’archive ⭐⭐⭐⭐ 💻

But : les listes. Mission : crée templates/archive.html avec une Boucle de requête.

✅ Solution

archive.html contient un bloc query + post-template qui boucle sur les articles du contexte (catégorie, auteur…). Un seul gabarit sert toutes les archives. La Query Loop (terrain 05, jeu 25) en markup.

🕹️ Mini-jeu 12 — Le gabarit 404 ⭐⭐⭐ 💻

But : l’erreur soignée. Mission : crée templates/404.html (message + recherche + liens).

✅ Solution

404.html s’affiche pour une URL introuvable. Inclure un bloc Recherche et des liens utiles rattrape le visiteur. Détail que les thèmes pro soignent (terrain 07, jeu 10).

🕹️ Mini-jeu 13 — Les parties header/footer ⭐⭐⭐ 💻

But : factoriser l’ossature. Mission : crée parts/header.html et parts/footer.html.

✅ Solution

Les parties de gabarit (parts/) sont réutilisées par tous les gabarits via template-part. Modifier une partie m’update partout — l’équivalent d’un composant partagé. Header = logo + nav ; footer = crédits + social.

🕹️ Mini-jeu 14 — Déclarer les parties ⭐⭐⭐⭐ 💻

But : enregistrer les zones. Mission : déclare templateParts dans theme.json. Étapes :

"templateParts": [
  { "name": "header", "title": "En-tête", "area": "header" },
  { "name": "footer", "title": "Pied de page", "area": "footer" }
]

✅ Solution

Déclarer les parties dans theme.json leur donne un titre et une zone (header/footer/general) → meilleure UX dans l’Éditeur de site. Facultatif mais professionnel.

🕹️ Mini-jeu 15 — Un motif de thème ⭐⭐⭐⭐ 💻

But : des sections prêtes. Mission : ajoute patterns/hero.php (en-tête de motif + markup).

✅ Solution

Comme au terrain 13 (jeu 11), un motif dans patterns/ est auto-enregistré. Un thème pro livre une bibliothèque de motifs (hero, tarifs, FAQ, CTA) : c’est ce qui rend un thème agréable à utiliser. Argument de vente fort.

🕹️ Mini-jeu 16 — Une variation de style ⭐⭐⭐⭐ 💻

But : plusieurs looks. Mission : ajoute styles/nuit.json (variation sombre).

✅ Solution

Un fichier styles/*.json (même schéma que theme.json) devient une variation commutable dans Styles → Parcourir. Offrir 2–3 variations démultiplie la valeur perçue du thème sans le dupliquer.

🕹️ Mini-jeu 17 — Un style de bloc custom ⭐⭐⭐⭐ 💻

But : ajouter une option de style à un bloc. Mission : enregistre un style « Contour » pour le bloc Bouton. Étapes :

add_action( 'init', function () {
    register_block_style( 'core/button', array(
        'name'  => 'contour',
        'label' => 'Contour',
    ) );
} );

✅ Solution

register_block_style ajoute une variation de style sélectionnable dans l’inspecteur du bloc (avec une classe is-style-contour à styler en CSS). Petit PHP dans un functions.php de thème. Enrichit l’éditeur pour l’utilisateur.

🕹️ Mini-jeu 18 — Des polices locales ⭐⭐⭐⭐ 💻

But : typo sans dépendance externe. Mission : déclare une fontFamily avec fontFace local. Étapes :

"typography": {
  "fontFamilies": [
    { "fontFamily": "Inter, sans-serif", "slug": "inter", "name": "Inter",
      "fontFace": [ { "fontFamily": "Inter", "fontWeight": "400", "src": ["file:./assets/fonts/inter.woff2"] } ] }
  ]
}

✅ Solution

Héberger les polices localement (via theme.json + fichiers) = meilleure perf et conformité RGPD (pas d’appel Google Fonts). Le file:./ référence un fichier du thème. Bonne pratique moderne et vendable.

🕹️ Mini-jeu 19 — Enfiler un CSS complémentaire ⭐⭐⭐ 💻

But : le CSS que theme.json ne couvre pas. Mission : ajoute functions.php + une petite feuille de style. Étapes :

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style( 'montheme-extra', get_theme_file_uri( 'assets/extra.css' ), array(), '1.0' );
} );

✅ Solution

theme.json couvre 90 % du style ; pour le reste (animations, sélecteurs pointus), on enfile un CSS. get_theme_file_uri() pointe un fichier du thème. Utilise aussi add_editor_style() pour l’aligner dans l’éditeur.

🕹️ Mini-jeu 20 — Aligner l’éditeur et le front ⭐⭐⭐⭐ 💻

But : WYSIWYG fidèle. Mission : assure que l’éditeur ressemble au rendu (styles chargés côté éditeur).

✅ Solution

En FSE, theme.json s’applique automatiquement dans l’éditeur (WYSIWYG natif). Pour un CSS custom, add_editor_style() (ou wp_enqueue_style avec le contexte éditeur) évite le décalage « joli en édition, cassé en ligne ».

🕹️ Mini-jeu 21 — Internationaliser le thème ⭐⭐⭐⭐ 💻

But : thème traduisible. Mission : ajoute un textdomain et charge-le. Étapes :

add_action( 'after_setup_theme', function () {
    load_theme_textdomain( 'montheme', get_template_directory() . '/languages' );
} );

✅ Solution

Chaînes via __( 'Texte', 'montheme' ), chargées depuis /languages. Les motifs peuvent aussi être traduits. Un thème distribuable doit être i18n-ready (répertoire wp.org l’exige). Détail pro.

🕹️ Mini-jeu 22 — Vérifier avec Theme Check ⭐⭐⭐⭐ 🛠️

But : conformité aux standards. Mission : installe « Theme Check » et fais passer ton thème.

✅ Solution

Theme Check (et le futur « Plugin/Theme Check ») audite ton thème selon les exigences wp.org (i18n, sécurité, fonctions interdites…). Vise le vert avant toute distribution. Contrôle qualité automatique.

🕹️ Mini-jeu 23 — Exporter/distribuer ⭐⭐⭐ 💻

But : l’empaqueter. Mission : zippe le thème et installe-le sur une autre install.

✅ Solution

Un thème par blocs se distribue en zip (avec theme.json, templates/, parts/, patterns/, styles/, assets). Léger car surtout déclaratif. Testé sur install vierge = prêt pour un client ou wp.org.

🕹️ Mini-jeu 24 — Comparer FSE et classique ⭐⭐⭐ 💻

But : situer les deux mondes. Mission : liste 3 différences entre thème par blocs et thème classique.

✅ Solution

FSE : gabarits HTML/blocs (templates/*.html), style par theme.json, édition visuelle (Site Editor), peu/pas de PHP. Classique : gabarits PHP (single.php), style CSS, Customizer, beaucoup de PHP. Tu dois savoir lire les deux (l’existant est surtout classique).

🕹️ Mini-jeu 25 — Récap thème FSE ⭐⭐⭐⭐ 💻

But : capstone du terrain. Mission : un thème complet : theme.json (palette + typo fluide + layout + styles éléments/blocs), gabarits index/single/archive/404, parties header/footer, 2 motifs, 1 variation sombre, polices locales, i18n, Theme Check vert.

✅ Solution

Tu sais créer un thème moderne de zéro — compétence design premium et rare (surtout couplée à ton React). C’est le theme-nextdev de la Partie 6. Prochaine frontière : les plugins (terrain 15).

Terrain suivant : 15 — Développer un plugin.

13 — Thème enfant15 — Développer un plugin