Module 4Administrer un site à l'aide d'un CMS
Chapitre 15 sur 17
Personnaliser graphiquement un site à l'aide d'un CMS
Thèmes blocs et classiques, Éditeur de site, widgets, thème enfant et theme.json.
- ≈ 100 min
- 4 leçons
- 1 exercice
- TP
Module 4Administrer un site à l'aide d'un CMS
Chapitre 15 sur 17
Thèmes blocs et classiques, Éditeur de site, widgets, thème enfant et theme.json.
Objectifs
Avec ce chapitre, tu sauras…
theme.json.Leçon 1
Un thème définit l'apparence du site (mise en page, couleurs, typographie) sans toucher au contenu. Il se trouve dans wp-content/themes/. On l'installe depuis Apparence > Thèmes > Ajouter (catalogue officiel wordpress.org/themes) ou en envoyant une archive .zip.
| Thème blocs (block theme) | Thème classique | |
|---|---|---|
| exemples | Twenty Twenty-Five, Twenty Twenty-Four | Astra, OceanWP, Twenty Twenty-One |
| personnalisation | Éditeur de site (Apparence > Éditeur) : tout se modifie avec des blocs | Outil de personnalisation (Apparence > Personnaliser), widgets, menus |
| fichiers | modèles HTML (templates/, parts/) + theme.json | modèles PHP (header.php, single.php…) + functions.php |
Leçon 2
| Section | Rôle | Exemple Kitab |
|---|---|---|
| Styles | couleurs, typographies, espacements globaux (palette, police des titres) | palette rouge et crème de Kitab, police des titres |
| Navigation | le menu (bloc Navigation) | Accueil, Blog, Boutique |
| Pages | modifier les pages | la page d'accueil |
| Modèles (templates) |
Leçon 3
Leçon 4
1Twenty Twenty-Five se personnalise avec…
2L'en-tête d'un thème blocs est…
3Dans le style.css d'un thème enfant, Template: contient…
4Le fichier qui règle palette et typographie d'un thème blocs est…
5Modifier directement le thème parent…
L'essentiel du chapitre
wp-content/themes) ; installer depuis le catalogue ou un .zip ; critères : à jour, responsive, accessible, léger, jamais piraté.style.css avec Theme Name et Template: dossier-parent ; functions.php (wp_enqueue_style du parent, thème classique) ; theme.json (palette, typographie, styles) pour un thème blocs.| la structure de chaque type de page : accueil, article seul, archive, page, 404, recherche |
| modèle « Article seul » avec l'auteur et les articles liés |
| Compositions (patterns) | groupes de blocs réutilisables ; les parties de modèle (template parts) : en-tête et pied de page | un bandeau « Nouveautés » réutilisé sur plusieurs pages |
Critères de choix : compatible avec la version de WordPress, mis à jour récemment, responsive, accessible, léger, bien noté ; jamais de thème « premium » piraté (souvent porteur de code malveillant).
Apparence > Éditeur ouvre l'Éditeur de site :
a { color: #b8321f; }
.wp-block-button__link { border-radius: 4px; background: #b8321f; }Un thème enfant hérite de tout un thème parent et ne contient que les modifications. Quand le parent est mis à jour, les personnalisations du thème enfant sont conservées. Modifier directement les fichiers du thème parent, c'est perdre son travail à la prochaine mise à jour.
/*
Theme Name: Kitab enfant
Template: twentytwentyfive
Version: 1.0
Description: Thème enfant du blog Kitab
*/La ligne Template donne le nom du dossier du thème parent. Pour un thème classique, on charge en plus le style du parent dans functions.php :
<?php
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
});Pour un thème blocs, un fichier theme.json dans le thème enfant surcharge les réglages globaux :
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"color": {
"palette": [
{ "slug": "kitab-rouge", "color": "#b8321f", "name": "Rouge Kitab" },
{ "slug": "kitab-creme", "color": "#fdeeea", "name": "Crème" }
]
}
},
"styles": {
"elements": { "link": { "color": { "text": "var(--wp--preset--color--kitab-rouge)" } } }
}
}On active ensuite « Kitab enfant » dans Apparence > Thèmes.
(1) Active Twenty Twenty-Five. (2) Dans Styles, applique la palette de Kitab et une police pour les titres. (3) Modifie l'en-tête (logo, menu) et le pied de page (adresse, liens). (4) Crée une composition « Livre du mois » (image, titre, texte, bouton vers la boutique). (5) Crée le thème enfant kitab-enfant avec son theme.json et active-le.
Les changements faits dans l'Éditeur sont enregistrés en base, pas dans les fichiers du thème : une mise à jour du thème ne les efface pas. On peut revenir à l'original avec « Réinitialiser ».