Quatre thèmes WordPress sur mesure depuis Figma.

Brief

Quatre thèmes WordPress pour les propriétés FB-Media, sport, politique, lifestyle, business, construits comme thèmes block de production. Chaque thème honore un système typographique par niche conçu en Figma. Le brief insistait sur l’absence d’overlays de thèmes tiers : les thèmes doivent être du code original, propriété du client, modifiable sans plan d’upgrade.

GDPR et spécificités du marché roumain intégrées : bannière cookies par page, encadré auteur sur chaque article, pages contact + confidentialité + cookies avec l’identité SRL en ligne.

Architecture

Chaque thème est un répertoire de thème block standalone (wp-content/themes/<site>-figma). Ils ne partagent aucun code, le compromis était délibéré. Partager un thème de base aurait signifié que les changements breaking se propagent sur quatre propriétés de production sur le même déploiement. Les thèmes indépendants signifient qu’un tweak du thème sport peut être livré sans toucher au thème politique.

Le chemin Figma → PHP utilise les Figma Variables pour les tokens (couleur, typographie, espacement) exportés vers un schéma theme.json block-editor par thème. Les patterns de blocs reflètent les composants Figma Auto-Layout 1-pour-1. Les polices sur mesure (Inter pour politique + business, Playfair Display pour lifestyle, Bebas Neue pour sport) sont auto-hébergées en woff2 préchargées.

Un petit mu-plugin par site empaquète la bannière cookies + l’encadré auteur + les shortcodes de formulaire de contact, ceux-ci vivent en dehors du thème pour qu’un changement de thème ne les casse pas.

Résultats

• 4 thèmes livrés, sport, politique, lifestyle, business.
• Code original, les clients possèdent les répertoires de thème en pleine propriété.
• Typographie par niche, chaque thème honore le langage visuel éditorial de sa niche.
• GDPR-ready, bannière cookies, encadré auteur, pages légales intégrées.
• Lighthouse mobile : au-dessus de 90 sur les quatre sites au lancement (préchargement de polices + JS minimal).

La suite

Deux éléments sur la liste de la prochaine itération :

1. Mettre en place un seul fichier CSS partagé de design-tokens consommé par les quatre thèmes, le drift typographique inter-thèmes a été le plus gros coût de QA pendant la semaine de lancement FB-Media. Un tokens.css partagé (avec des overrides par site) aurait attrapé le drift plus tôt.
2. Déplacer le code mu-plugin dans un package composer privé, actuellement chaque site a sa propre copie du code cookies + auteur + contact. Un package partagé (versionné, installable par site) permettrait aux mises à jour de couler à travers les quatre sites en une fois.