Projet Niveau 1 — Thème enfant & portfolio structuré

⏱️ TL;DR — Premier contact avec le code de présentation. Vous créez un thème enfant d’un thème par blocs, vous surchargez un gabarit, vous réglez couleurs/typo via theme.json, et vous montez un portfolio avec une page d’accueil en Query Loop. But : comprendre la hiérarchie de gabarits et où WordPress va chercher chaque template — sans encore écrire de PHP applicatif.

🎯 Niveau & objectifs

• Niveau : 1 (débutant). Prérequis : Niveau 0 terminé ; savoir éditer un fichier texte dans le dossier du thème.
• Durée indicative : 3–5 h.
• Vous allez pratiquer : thème enfant, theme.json, gabarits FSE (templates/, parts/), motifs (patterns/), Query Loop, hiérarchie de gabarits.

📋 Cahier des charges

Contexte — Vous montez votre portfolio de développeur (il servira aussi à décrocher des missions, Partie 13). Vous voulez un rendu à vous, sans repartir de zéro : donc un thème enfant d’un thème par blocs solide.

Objectif — Un thème enfant fonctionnel qui personnalise un thème parent et fournit au moins un gabarit surchargé et un motif réutilisable.

Périmètre inclus

1. Un thème enfant valide : style.css (en-tête Template:) + theme.json + functions.php minimal.
2. Un theme.json qui définit une palette custom, une échelle typographique, et des réglages de mise en page (largeur de contenu).
3. Un gabarit surchargé : par ex. templates/single.html (article) ou archive.html personnalisé.
4. Une partie de gabarit (parts/header.html ou footer.html) à votre image.
5. Une page d’accueil listant les projets via un bloc Query Loop (CPT natif Article ou pages, au choix).
6. Un motif (patterns/) « carte de projet » réutilisable.
7. Le thème enfant activé, le parent restant intact.

Périmètre exclu — Pas de bloc custom en React (c’est le Niveau 3), pas de CPT custom (Niveau 2), pas de JavaScript applicatif. On reste thème + configuration.

Contraintes

• Thème parent = un thème par blocs (FSE) récent.
• Aucune modification du thème parent (tout dans l’enfant).
• theme.json version 3.

Livrables

• Le dossier du thème enfant (zippable).
• Une capture avant/après montrant l’effet du theme.json.

✅ Critères de réussite

• Le thème enfant apparaît dans Apparence → Thèmes et s’active sans erreur.
• Changer une couleur dans theme.json se répercute sur le site.
• Le gabarit surchargé est bien celui qui s’affiche (vérifiable en le modifiant).
• Le Query Loop de la home affiche les bons éléments, paginés.
• Le motif « carte de projet » est insérable depuis l’inserter.
• Désactiver le thème enfant fait réapparaître le parent intact.

🗺️ Endroits à visiter

💡 Pour un dev React — theme.json est vos design tokens centralisés (couleurs, espacements, typo), et les gabarits FSE sont des layouts déclaratifs (comme des layout.tsx par route). La hiérarchie de gabarits est l’équivalent du routing par convention : single.html ↔ app/blog/[slug]/page.tsx. Le thème enfant, lui, c’est un override propre, pas un fork.

⚠️ Piège — Dans un thème par blocs, la surcharge ne passe pas par la copie de functions.php comme dans les thèmes classiques : ce sont les fichiers HTML de templates/ et parts/ de l’enfant qui prennent le dessus sur ceux du parent. Ne cherchez pas un header.php : cherchez parts/header.html.

🚀 Étapes suggérées

1. Créer le dossier enfant + style.css avec l’en-tête Template: <parent>.
2. Copier un theme.json minimal, activer, vérifier.
3. Définir palette + typo dans theme.json, observer l’effet.
4. Copier un gabarit du parent dans l’enfant, le modifier, confirmer qu’il s’affiche.
5. Créer un motif patterns/carte-projet.php.
6. Monter la home avec un Query Loop utilisant le motif.
7. Tester activation/désactivation.

🎁 Bonus

• Ajoutez un gabarit personnalisé (customTemplates dans theme.json) assignable à une page.
• Créez une variation de style (styles/ dans le thème) : un thème « sombre » commutable.
• Enqueue une petite feuille CSS conditionnelle via functions.php.

🔗 Chapitres du cours liés

• Partie 3 — Gutenberg & éditeur de site
• Partie 6 — Développer des thèmes

Projet suivant : Niveau 2 — Plugin « Bibliothèque » (CPT Livre).