Terrain 07 — Apparence & personnalisation

Les Styles globaux pilotent couleurs, typo, mise en page pour tout le site, en un endroit. C’est l’UI qui écrit dans theme.json (terrain 14). Thème classique : cet équivalent est éclaté dans le Customizer.

Changer une couleur de palette la répercute partout où elle est utilisée (boutons, liens…). C’est la force des couleurs nommées (design tokens) : un point de vérité. Ne code jamais une couleur en dur si un token existe.

Les Styles gèrent familles, tailles, graisses, interlignage — globalement puis par élément (titres, corps, liens, boutons). Les polices dispo viennent du thème (et du gestionnaire de polices, jeu 22).

Une variation de style est un jeu couleurs+typo prédéfini du thème (ex. clair/sombre/coloré). Un clic transforme tout le site sans rien casser. Twenty Twenty-Four/Five en offrent plusieurs.

Le header est une partie de gabarit (template part) réutilisée sur toutes les pages : la modifier m’update partout. Composé de blocs (logo, nav, recherche). Idem pour le footer.

Le footer (partie de gabarit) contient souvent un crédit « Propulsé par WordPress » — remplaçable par blocs. Astuce : mets l’année via un bloc dynamique ou laisse une mention statique.

Chaque gabarit (single, page, archive, home, 404…) définit la mise en page d’un type de vue. Édité en blocs (titre = bloc « Titre de l’article », contenu = bloc « Contenu de l’article »). C’est la hiérarchie de gabarits en version visuelle.

L’accueil utilise Front Page ou Home (blog) selon Réglages → Lecture. Comprendre lequel s’applique évite de longues minutes à éditer le mauvais gabarit. La liste des Modèles montre lesquels sont personnalisés.

Le gabarit Archive rend les listes (catégories, étiquettes, auteurs, dates). Il contient une Boucle de requête qui hérite du contexte (la catégorie courante). Un seul gabarit sert toutes les archives, sauf spécialisation.

Le gabarit 404 s’affiche pour une URL introuvable. Le soigner (message clair, recherche, liens) rattrape le visiteur perdu. Souvent négligé — un détail qui distingue un site pro.

Les parties de gabarit (header, footer, ou custom) factorisent des sections réutilisées entre gabarits. Modifier la partie m’update partout — comme un composant partagé. Base de la maintenabilité en FSE.

Le CSS additionnel applique tes règles par-dessus le thème (Customizer pour les classiques). En FSE pur, on préfère theme.json + styles de blocs ; le CSS custom passe souvent par un thème enfant ou une extension. Utile pour les 5 % que l’UI ne couvre pas.

Le logo du site est une donnée globale (réutilisée par le bloc Logo partout). Distinct du titre textuel. Change une fois, s’applique partout où le bloc Logo est présent.

L’icône du site (site icon / favicon) apparaît dans l’onglet du navigateur et en marque-page. Format carré (512×512 recommandé). Petit détail, grosse impression de finition.

Styles → Couleurs → Arrière-plan. S’applique globalement (surchargé par les fonds de sections/Groupes). Assure-toi du contraste texte/fond (accessibilité).

La largeur de contenu définit la colonne de lecture ; « Large » est le débordement des blocs alignwide. Ces valeurs viennent de theme.json et cadrent tout le site. Trop large nuit à la lisibilité.

Les Styles permettent de cibler des éléments (liens, titres, légendes, boutons) et des blocs spécifiques (ex. tous les boutons), pas seulement le global. Granularité proche du CSS, sans écrire de CSS.

Les widgets (Apparence → Widgets) peuplent des zones (sidebar, footer) sur les thèmes classiques. Depuis 5.8, ce sont des blocs. En FSE, les widgets sont remplacés par des blocs dans les parties de gabarit. Encore très présent sur l’existant.

Le Customizer (Apparence → Personnaliser) édite un thème classique avec aperçu temps réel (identité, couleurs, menus, widgets, CSS). Remplacé par l’Éditeur de site en FSE, mais indispensable à connaître pour les milliers de thèmes classiques.

L’Éditeur de site (et le Customizer) offrent un aperçu responsive (desktop/tablette/mobile). Vérifie surtout header/nav et les colonnes. La majorité du trafic est mobile : ce réflexe est non négociable.

Un gabarit modifié en FSE est stocké en base (il surcharge celui du thème). « Effacer les personnalisations » restaure la version du thème. Utile quand une expérimentation a mal tourné — rien n’est perdu côté thème.

Le Font Library (6.5+) installe des polices (Google Fonts ou fichiers locaux) réutilisables dans les Styles. Héberger localement les polices = meilleure perf et conformité RGPD (pas d’appel à Google).

L’export produit un thème (theme.json + gabarits + parties) intégrant tes changements : base d’un thème custom distribuable (terrain 14). Le pont entre personnalisation UI et vrai développement de thème.

Une page peut utiliser un gabarit spécifique (pleine largeur, sans titre…) sans toucher les autres. Les gabarits proposés viennent du thème (ou des tiens, terrain 14). La bonne granularité : global (Styles) vs local (gabarit de page).

Tu sais habiller un site de bout en bout sans coder, et tu comprends que tout ça vit dans theme.json + gabarits — donc exportable en thème. Prochaine étape naturelle : le code (terrains 11+). Avant : les extensions (terrain 08).