Ce qui se règle une fois, et ce qui se refait à chaque page
Au sommaire, 9 sections
Où nous en sommes
Avant-hier, vous avez choisi un thème et mesuré ce qu’il coûterait d’en sortir. Aujourd’hui, vous vous en servez.
Deux temps. Le matin, ce qui décide de l’apparence de tout le site en une seule fois : les gabarits et les styles globaux. C’est là qu’une charte de marque s’applique correctement, ou qu’elle se répète cinquante fois à la main.
L’après-midi, la page elle-même : structurer une mise en page qui tient, et fabriquer des sections réutilisables. C’est la compétence la plus directement employable de tout le bloc, et celle qui sera notée à la fin du mois.
Ce que vous saurez à la fin de cette séance
- Dire quel gabarit gouverne quelle page, et le vérifier
- Poser une charte de marque une seule fois, et qu’elle s’applique partout
- Structurer une page avec les blocs de mise en page, sans empiler au hasard
- Fabriquer une section réutilisable, et savoir laquelle des deux formes employer
- Arbitrer entre l’éditeur natif et un constructeur tiers, sur des critères qui tiennent
Reprise
Trois questions, et une vérification sur poste.
- Que survit-il toujours à un changement de thème, et qu’est-ce qui peut partir ?
- Comment reconnaît-on un thème de blocs en deux secondes ?
- Dans quels cas un thème enfant ne sert-il à rien ?
Puis chacun ouvre son site et vérifie que le thème retenu avant-hier est bien actif, et que le thème enfant, s’il en a créé un, ne casse rien.
1. Les gabarits : ce qu’ils décident
1.1 La question que personne ne pose
Vous ouvrez une page de votre site. Qu’est-ce qui décide de la place du titre, de la présence d’une barre latérale, de l’affichage de la date ?
Pas la page. Le gabarit qui la gouverne.
Une page n’est qu’un contenu. Le gabarit est le moule qui l’affiche, et il est partagé par toutes les pages du même type.
1.2 La hiérarchie, en pratique
WordPress choisit le gabarit selon des règles précises, du plus spécifique au plus général. Vous n’avez pas à les connaître par cœur : vous avez à savoir qu’elles existent, et qu’elles expliquent pourquoi une page ne ressemble pas à une autre.
| Ce que vous affichez | Le gabarit employé |
|---|---|
| La page d’accueil | Celui de l’accueil, ou celui d’une page si vous avez désigné une page |
| Une page | Celui des pages, sauf si vous en avez choisi un autre pour elle |
| Un article | Celui des articles, ou un gabarit propre à son type |
| Une liste par catégorie | Celui des archives |
| Une adresse inexistante | Celui de la page introuvable |
Le dernier est celui qu’on oublie, et c’est celui que rencontrent vos visiteurs après une refonte mal redirigée. Il mérite dix minutes de soin : un titre clair, un lien vers l’accueil, une recherche, et éventuellement vos pages principales.
1.3 Ce que cela change pour vous
Modifier une page change une page. Modifier un gabarit change toutes les pages de ce type, y compris celles que vous n’avez pas encore écrites.
C’est un gain de temps considérable et un risque réel, et les deux vont ensemble. Le geste à prendre : après toute modification de gabarit, vérifier trois pages différentes de ce type, dont une ancienne.
1.4 Les parties de modèle
L’en-tête et le pied de page ne sont pas des gabarits : ce sont des parties, réutilisées par tous les gabarits.
C’est pour cela qu’on les modifie une fois pour tout le site, et c’est aussi pour cela qu’une erreur y est visible partout en même temps. C’est le seul endroit du site où une modification touche littéralement toutes les pages.
2. La charte, posée une seule fois
2.1 Le défaut le plus coûteux, et le plus fréquent
Une couleur de marque appliquée page par page, à la main. Cinquante pages, cinquante applications, et le jour où la charte évolue, cinquante corrections.
Ce n’est pas un défaut de débutant : c’est le défaut ordinaire des sites d’entreprise, y compris de ceux qu’un prestataire a livrés.
2.2 Les styles globaux
Un thème de blocs centralise les couleurs, les typographies et les espacements en un seul endroit. Vous y déclarez la charte, et tout le site s’y conforme.
Ce qui s’y règle, et qui couvre l’essentiel d’une charte :
- La palette : les couleurs nommées de la marque, et leurs usages par défaut.
- La typographie : les familles, les tailles, les graisses, l’interlignage.
- Les espacements : l’échelle qui donne au site son rythme.
- Les styles par élément : à quoi ressemble un bouton, un lien, un titre de niveau deux.
Le dernier point est celui qui fait la différence : régler une fois l’apparence des boutons évite de la régler à chaque bouton.
2.3 Nommer les couleurs, et pourquoi cela compte
Une couleur nommée « Accent principal » se change une fois et se propage. La même couleur choisie au sélecteur, page par page, ne se propage pas.
Nommez selon l’usage, pas selon la teinte. « Accent principal » survit à une charte qui passe du bleu au vert ; « Bleu marque » devient un mensonge le jour où la charte change, et il faudra le renommer partout.
À retenir. Le test qui vérifie qu’une charte est bien posée : changer la couleur d’accent dans les styles globaux, et regarder le site. Si tout suit, la charte est posée. Si trois éléments seulement changent, elle a été appliquée à la main ailleurs, et vous venez de trouver votre dette.
2.4 Ce qui échappe encore aux styles globaux
Soyons honnêtes : certaines choses résistent. Les images, évidemment. Les couleurs codées dans des extensions. Et les blocs propres au thème, qui ont parfois leurs propres réglages.
Le savoir évite de chercher pendant une heure pourquoi un élément ne suit pas.
Atelier 1, poser votre charte
Sur poste, individuellement. Trente minutes de travail, dix de mise en commun.
Vous allez poser une charte complète, une fois, et vérifier qu’elle tient.
- Choisissez une charte : celle de votre entreprise d’accueil, ou une charte simple que vous inventez. Trois couleurs suffisent, plus deux familles de caractères.
- Déclarez la palette dans les styles globaux, avec des noms d’usage : accent principal, accent secondaire, fond, texte.
- Réglez la typographie : titres et corps de texte, avec leurs tailles.
- Réglez l’apparence des boutons et des liens, une fois pour toutes.
- Créez deux pages rapidement, avec un titre, du texte, un bouton.
- Faites le test : changez la couleur d’accent principal. Tout doit suivre, sur les deux pages, sans y toucher.
- Notez ce qui n’a pas suivi, et cherchez pourquoi.
Le point 6 est l’exercice. Le point 7 est la leçon : ce qui ne suit pas est exactement ce qui vous coûtera du temps dans six mois.
Version courte : points 1, 2, 5 et 6.
3. Structurer une page
3.1 Le défaut de la page empilée
La page la plus fréquente sur le web est une pile : un titre, un paragraphe, une image, un paragraphe, un bouton. Cela fonctionne, et cela ne structure rien.
Une page structurée se compose de sections, et chaque section a une fonction : accrocher, expliquer, prouver, rassurer, demander l’action. Le visiteur ne les nomme pas, il les ressent, et il s’oriente.
3.2 Les blocs qui structurent, et à quoi ils servent
| Bloc | Ce qu’il fait | Quand l’employer |
|---|---|---|
| Groupe | Réunit des blocs, et leur donne un fond, une largeur, un espacement | Pour faire une section |
| Colonnes | Place des blocs côte à côte | Comparaisons, listes de trois |
| Pile | Empile, en contrôlant l’espacement | Un bloc de texte serré |
| Ligne | Aligne horizontalement, et passe à la ligne si besoin | Boutons, étiquettes |
| Couverture | Une image de fond, du contenu par-dessus | Une accroche |
Le groupe est le bloc le plus important, et le plus sous-employé. C’est lui qui fait une section : sans lui, on obtient une suite de blocs, et non une page.
3.3 La règle des trois niveaux
Une page lisible se structure sur trois niveaux, pas davantage :
- La section : un groupe, avec son fond et sa largeur.
- La disposition : à l’intérieur, des colonnes ou une pile.
- Le contenu : titre, texte, image, bouton.
Au-delà de trois niveaux d’imbrication, la page devient difficile à modifier, et impossible à confier à quelqu’un d’autre. C’est un critère de qualité aussi important que l’apparence.
3.4 Ce qu’il faut vérifier avant de publier
Trois contrôles, dans cet ordre, et ils prennent deux minutes :
- Sur téléphone. La majorité de vos visiteurs. Les colonnes doivent s’empiler dans un ordre qui garde le sens.
- La hiérarchie des titres. Un seul titre de niveau un, puis des niveaux deux, sans sauter de niveau. C’est ce qui rend la page lisible par un lecteur d’écran, et compréhensible par un moteur.
- Les contrastes. Un texte clair sur une image, sans voile, est illisible dès qu’on projette la page ou qu’on la regarde au soleil.
4. Les sections réutilisables
4.1 Deux formes, et il faut savoir laquelle
C’est une distinction que presque personne ne maîtrise, et elle décide de beaucoup.
| Le motif, non synchronisé | La composition synchronisée | |
|---|---|---|
| Ce qui se passe à l’insertion | Une copie indépendante | Une référence à l’original |
| Si vous modifiez l’original | Les copies ne bougent pas | Toutes les occurrences changent |
| L’usage | Un point de départ à adapter | Un élément identique partout |
| L’exemple | Une mise en page de page de service | Un encart de contact, un avertissement légal |
La règle qui tranche : ce qui doit rester identique partout se fait en composition synchronisée ; ce qui sert de point de départ se fait en motif.
Se tromper coûte cher dans les deux sens. Un encart de contact en motif, et vous modifiez trente pages le jour où le numéro change. Une mise en page en composition synchronisée, et vous ne pouvez plus l’adapter page par page.
4.2 Ce qu’il faut en faire, concrètement
Une équipe marketing qui travaille bien dispose d’une petite bibliothèque de sections, prêtes à insérer : une accroche, un bloc de preuves, un encart d’appel à l’action, un bandeau de contact.
Cela prend une demi-journée à fabriquer, et cela fait gagner du temps à chaque page, en garantissant que toutes se ressemblent. C’est le même principe que la bibliothèque de consignes.
Atelier 2, une section réutilisable
Sur poste, individuellement. Trente minutes de travail, dix de mise en commun.
- Construisez une section d’appel à l’action : un groupe avec un fond de couleur d’accent, un titre, une phrase, un bouton.
- Vérifiez sur téléphone avant d’aller plus loin.
- Enregistrez-la sous les deux formes, sous deux noms différents.
- Insérez-les toutes les deux dans une page.
- Modifiez l’original, et observez laquelle a suivi.
- Écrivez en deux lignes : dans votre entreprise, quelle section feriez-vous en synchronisé, et laquelle en motif ?
Le point 5 est la démonstration. Le point 6 est la décision, et c’est elle qu’on vous demandera.
Version courte : points 1, 3, 4 et 5.
5. Les constructeurs tiers, et l’arbitrage
Vous entendrez parler de constructeurs de pages qui remplacent l’éditeur natif. Ils existent, ils sont répandus, et la question n’est pas de savoir s’ils sont bons.
La question est celle de la réversibilité, et vous savez maintenant la poser : que reste-t-il de vos pages le jour où vous les désinstallez ?
Ce qu’ils apportent réellement : davantage de contrôle sur la mise en page, des composants prêts à l’emploi, et une prise en main souvent jugée plus simple.
Ce qu’ils coûtent : un verrouillage plus fort que celui d’un thème, un poids supplémentaire sur chaque page, et une dépendance à un éditeur pour la durée de vie du site.
La position raisonnable : commencer par l’éditeur natif, qui suffit à la grande majorité des sites de marque, et n’aller vers un constructeur que si un besoin précis le justifie, en ayant mesuré le coût de sortie. C’est exactement la méthode d’avant-hier, appliquée à autre chose.
Synthèse
- Une page n’est qu’un contenu. Le gabarit est le moule, et il est partagé par tout un type.
- Modifier un gabarit change toutes les pages de ce type, y compris celles qui n’existent pas encore.
- L’en-tête et le pied de page sont des parties : une erreur y est visible partout à la fois.
- Une charte se pose une fois dans les styles globaux, avec des noms d’usage et non de teinte.
- Le test : changer la couleur d’accent. Ce qui ne suit pas est votre dette.
- Le groupe est le bloc qui fait une section. Trois niveaux d’imbrication, pas davantage.
- Composition synchronisée pour ce qui doit rester identique, motif pour ce qui sert de départ.
- Un constructeur tiers se juge d’abord sur sa réversibilité.
Sources
Séance vérifiée le 28 août 2026.
