Skip to Content
WordPressPartie 14 — Mini-jeux (exploration guidée)13 — Thème enfant

Terrain 13 — Thème enfant

⏱️ TL;DR — 20 mini-jeux ⭐⭐⭐ pour surcharger un thème proprement via un thème enfant : header style.css, theme.json d’override, gabarits et parties surchargés, CSS et fonctions custom — sans jamais toucher le parent (donc sans rien perdre aux mises à jour).

💡 Pour un dev React — Le thème enfant est un override propre, pas un fork : tu ne recopies que ce que tu changes, le reste hérite du parent.

🕹️ Mini-jeu 1 — Créer le thème enfant ⭐⭐⭐ 💻

But : la structure minimale. Mission : crée themes/monenfant/style.css avec l’en-tête liant au parent. Étapes :

/*
Theme Name: Mon Enfant
Template: twentytwentyfive
Version: 0.1.0
*/

✅ Solution

Template: doit valoir le nom de dossier du thème parent (ex. twentytwentyfive). C’est ce qui fait de ce thème un enfant. style.css avec cet en-tête suffit à le faire reconnaître.

🕹️ Mini-jeu 2 — Une capture d’écran ⭐⭐ 💻

But : l’aperçu dans l’admin. Mission : ajoute screenshot.png (1200×900) au thème enfant.

✅ Solution

screenshot.png s’affiche dans Apparence → Thèmes. Facultatif mais propre. Ratio 4:3 recommandé (1200×900). Détail de finition attendu d’un thème distribuable.

🕹️ Mini-jeu 3 — Activer l’enfant ⭐⭐ 🛠️

But : le mettre en service. Mission : active « Mon Enfant » dans Apparence → Thèmes.

✅ Solution

À l’activation, le site utilise l’enfant par-dessus le parent : tout ce que l’enfant ne redéfinit pas est hérité. Si le rendu casse, c’est souvent que Template: ne correspond pas au dossier parent.

🕹️ Mini-jeu 4 — theme.json d’override ⭐⭐⭐ 💻

But : surcharger les tokens. Mission : dans l’enfant, redéfinis une couleur de palette. Étapes :

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "color": "#3858e9", "name": "Primaire" }
      ]
    }
  }
}

✅ Solution

Le theme.json de l’enfant est fusionné par-dessus celui du parent : tu ne déclares que ce que tu changes. Pour un thème par blocs, c’est la façon de personnaliser (avant tout CSS). La couleur primary change partout où elle est référencée.

🕹️ Mini-jeu 5 — Surcharger un gabarit (bloc) ⭐⭐⭐⭐ 💻

But : remplacer un template du parent. Mission : copie templates/single.html du parent dans l’enfant et modifie-le.

✅ Solution

Un fichier templates/single.html dans l’enfant prend le dessus sur celui du parent (même nom). Copie puis modifie. Vérifie l’effet en ouvrant un article. C’est la surcharge de gabarit en FSE.

🕹️ Mini-jeu 6 — Surcharger une partie de gabarit ⭐⭐⭐⭐ 💻

But : un footer à toi. Mission : crée parts/footer.html dans l’enfant.

✅ Solution

Comme les gabarits, une partie (parts/footer.html) de l’enfant remplace celle du parent. Idéal pour ton propre pied de page tout en héritant du reste. Rappel : en thème classique, on chercherait footer.php.

🕹️ Mini-jeu 7 — Charger un CSS d’enfant ⭐⭐⭐ 💻

But : styles additionnels. Mission : ajoute functions.php à l’enfant et enfile un CSS. Étapes :

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style( 'monenfant', get_stylesheet_uri(), array(), '0.1.0' );
} );

✅ Solution

get_stylesheet_uri() pointe le style.css de l’enfant. On l’enfile via le hook wp_enqueue_scripts (terrain 12, jeu 9). En thème par blocs, l’essentiel du style passe par theme.json ; le CSS reste utile pour les cas fins.

🕹️ Mini-jeu 8 — Ajouter une fonction custom ⭐⭐⭐ 💻

But : du comportement propre. Mission : dans functions.php de l’enfant, retire wp_generator (terrain 12, jeu 7).

✅ Solution

Le functions.php de l’enfant est chargé en plus de celui du parent (les deux s’exécutent). Endroit idéal pour tes hooks propres à ce site. Ne recopie pas le functions.php du parent : ajoute seulement le tien.

🕹️ Mini-jeu 9 — Un gabarit d’archive spécialisé ⭐⭐⭐⭐ 💻

But : exploiter la hiérarchie de gabarits. Mission : crée templates/category-tutoriels.html pour styliser une catégorie.

✅ Solution

La hiérarchie de gabarits cherche du plus spécifique au plus général : category-tutoriels.html > category.html > archive.html > index.html. Créer le plus spécifique cible une seule catégorie. Puissant et no-JS.

🕹️ Mini-jeu 10 — Un gabarit personnalisé ⭐⭐⭐⭐ 💻

But : un modèle assignable aux pages. Mission : déclare un customTemplate « Page pleine largeur » dans theme.json + le fichier. Étapes :

{
  "version": 3,
  "customTemplates": [
    { "name": "page-large", "title": "Page pleine largeur", "postTypes": ["page"] }
  ]
}

✅ Solution

Déclaré dans theme.json + fichier templates/page-large.html, il apparaît dans le sélecteur Modèle d’une page (terrain 03, jeu 14). C’est ainsi qu’on offre des mises en page alternatives à l’éditeur.

🕹️ Mini-jeu 11 — Un motif d’enfant ⭐⭐⭐⭐ 💻

But : un pattern réutilisable. Mission : crée patterns/carte-cta.php avec l’en-tête de motif. Étapes :

<?php
/**
 * Title: Carte CTA
 * Slug: monenfant/carte-cta
 * Categories: call-to-action
 */
?>
<!-- wp:group --> ... <!-- /wp:group -->

✅ Solution

Un fichier PHP dans patterns/ avec l’en-tête devient un motif insérable (terrain 05, jeu 23). Le corps = du markup de blocs. Auto-enregistré par WordPress (thèmes par blocs). Idéal pour tes sections récurrentes.

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

But : un « skin » commutable. Mission : ajoute styles/sombre.json (une variation sombre).

✅ Solution

Un fichier dans styles/ (même schéma que theme.json) devient une variation proposée dans Styles → Parcourir (terrain 07, jeu 4). Tu offres un thème clair et sombre sans dupliquer le thème. Très apprécié.

🕹️ Mini-jeu 13 — Tester l’héritage ⭐⭐⭐ 💻

But : prouver que l’enfant surcharge. Mission : modifie une couleur dans l’enfant, confirme qu’elle bat le parent.

✅ Solution

Ce que l’enfant définit gagne ; le reste vient du parent. C’est la cascade de thèmes. Comprendre cette priorité évite de dupliquer inutilement (ne copie que ce que tu changes).

🕹️ Mini-jeu 14 — Désactiver → parent intact ⭐⭐⭐ 🛠️

But : la garantie de sécurité. Mission : repasse au parent : vérifie qu’il est inchangé.

✅ Solution

Le parent n’a jamais été modifié : le désactiver de l’enfant le retrouve intact. C’est toute la raison d’être du thème enfant : personnaliser sans risque, et survivre aux mises à jour du parent.

🕹️ Mini-jeu 15 — Pourquoi ne pas éditer le parent ⭐⭐ 💻

But : ancrer la règle d’or. Mission : explique ce qui se passe si tu modifies le parent puis le mets à jour.

✅ Solution

Une mise à jour du parent écrase tes modifications (perdues). D’où le thème enfant : tes changements vivent ailleurs. Même logique que « ne jamais hacker le cœur » (Partie 6). Règle absolue.

🕹️ Mini-jeu 16 — Mettre à jour le parent ⭐⭐⭐ 🛠️

But : vérifier la robustesse. Mission : simule/mets à jour le thème parent, vérifie que l’enfant tient.

✅ Solution

L’enfant continue de fonctionner après MAJ du parent (sauf changement majeur de structure de gabarits côté parent). Tu récupères les correctifs du parent sans perdre ta personnalisation. C’est le bénéfice concret.

🕹️ Mini-jeu 17 — Copier un gabarit proprement ⭐⭐⭐ 💻

But : la bonne méthode de surcharge. Mission : utilise l’Éditeur de site pour « détacher » et éditer un gabarit, puis exporte.

✅ Solution

Plutôt que copier des fichiers à la main, l’Éditeur de site permet d’éditer un gabarit (stocké en base) puis d’exporter le thème (terrain 07, jeu 23) : tu récupères les fichiers HTML à placer dans ton enfant. Flux moderne UI → fichiers.

🕹️ Mini-jeu 18 — Support de thème (classique) ⭐⭐⭐ 💻

But : connaître add_theme_support. Mission : dans un enfant de thème classique, ajoute le support des images à la une. Étapes :

add_action( 'after_setup_theme', function () {
    add_theme_support( 'post-thumbnails' );
} );

✅ Solution

add_theme_support() (sur after_setup_theme) active des fonctionnalités (thumbnails, title-tag, HTML5, wide/full…). Les thèmes par blocs en activent beaucoup automatiquement ; utile surtout pour les thèmes classiques.

🕹️ Mini-jeu 19 — Distribuer l’enfant ⭐⭐⭐ 💻

But : l’empaqueter. Mission : zippe le dossier monenfant/ pour l’installer ailleurs.

✅ Solution

Un thème enfant se distribue comme n’importe quel thème (zip installable). ⚠️ Il exige que le thème parent soit aussi installé. Documente cette dépendance dans le style.css/readme. Base d’un thème client réutilisable.

🕹️ Mini-jeu 20 — Récap thème enfant ⭐⭐⭐ 💻

But : valider le terrain. Mission : un enfant complet : theme.json d’override, un gabarit + une partie surchargés, un motif, une variation sombre, du CSS et un hook — le parent restant intact au désactivage.

✅ Solution

Tu personnalises un thème sans risque et de façon maintenable. C’est la compétence attendue en mission (« adaptez ce thème »). Étape suivante : construire un thème de zéro (terrain 14).

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

12 — Premier code : hooks & functions.php14 — Développer un thème (FSE)