Elite Gamers
Une publication gaming complète — actualités, tests de jeux, couverture vidéo, matériel, guides pas à pas, événements esport, films et anime — bâtie à partir de rien sous forme de thème WordPress sur mesure. Aucun template acheté, aucune mise en page de page builder, aucune pile d'extensions. Arabe d'abord et droite-à-gauche par construction, avec un sélecteur AR / FR / EN en direct, et chaque type de contenu, champ, composant, animation et ligne de CSS écrit pour ce projet.
LE PROBLÈME
Les joueurs arabophones lisent leurs actualités et leurs tests dans des interfaces pensées d'abord pour l'anglais, où le droite-à-gauche est une arrière-pensée. Une publication pour eux avait besoin de neuf types de contenu, d'une note de test digne de confiance pour sa rédaction, et d'une recherche qui fonctionne comme l'arabe s'écrit réellement — rien de tout cela n'arrive dans un thème qu'on achète. Sous tout le reste se tenait la vraie contrainte : une publication s'édite chaque jour, pendant des années, par des gens qui ne sont pas développeurs.
LE RÉSULTAT
Un thème écrit de bout en bout : 9 types de contenu, 4 taxonomies, un moteur de notation multi-axes pondéré à source unique de vérité, une palette de commandes ⌘K avec repliement orthographique arabe, et un sélecteur AR / FR / EN en direct. Environ 1,7 Mo retirés de la charge initiale du hero, et un audit après achèvement sur 11 domaines — 96 constats confirmés et résolus, zéro critique.
CE QUI A ÉTÉ LIVRÉ
Ce que j'ai refusé d'installer.
Trois règles posées avant le premier commit, et tenues jusqu'au dernier. Chacune a coûté plus cher à tenir qu'à rompre — c'est la seule raison pour laquelle elles méritent d'être énoncées.
Aucune extension dont le thème dépende
Rien à acheter, à renouveler, ou à voir casser sous vos pieds.
Les champs personnalisés reposent sur register_post_meta natif avec des meta boxes écrites à la main — pas d'ACF. Le SEO, les données structurées, la gestion des images, la capture newsletter et l'outillage rédactionnel sont tous du code de thème de première main. Un thème qui s'appuie sur cinq extensions hérite de cinq chemins de mise à jour, cinq surfaces de sécurité et cinq licences ; celui-ci n'hérite d'aucune. L'exploitant du site a depuis installé par-dessus un formulaire de contact, des extensions de tournois et d'anti-spam — c'est son choix, et le thème ne les exige pas et ne casse pas avec elles.
Aucun CDN, et aucune requête externe depuis le thème
Rien de ce qui concerne un visiteur n'est remis à un tiers.
Chaque fonte est auto-hébergée et sous-ensemblée — 26 fichiers .woff2, 468 Ko au total. Pas de Google Fonts, pas de traceurs tiers, aucun script externe depuis le thème lui-même. Cela le rend propre au regard du RGPD par construction plutôt que par page de politique, et portable : il ne cesse pas de fonctionner parce que le service de quelqu'un d'autre s'arrête.
Aucune étape de build
Déployable en copiant un dossier, dans cinq ans encore.
Pas de webpack, pas de Sass, pas de npm install pour le faire tourner ou le maintenir. Les ressources passent proprement par wp_enqueue_script et wp_enqueue_style, avec une chaîne de dépendances explicitement imposée. La raison est la longévité, pas la paresse : une chaîne d'outils est la première chose à pourrir, et un thème qui en exige une pour être modifié est un thème que le développeur suivant ne peut pas toucher sans risque.
Rendu côté serveur d'abord, de bout en bout. Le JavaScript enrichit ce site ; il n'est jamais nécessaire pour le lire.
Chaque composant, écrit.
Neuf types de contenu, un moteur de notation, un système de design et une palette de commandes — chaque composant, chaque animation et chaque ligne de CSS écrits pour ce projet.
Architecture de contenu
Conçue autour du travail réel d'une rédaction, et non autour de ce qu'un template proposait.
- 9 types de contenu sur mesure : Tests, Vidéos, Événements esport, Matériel, Guides pas à pas, Films & Séries, Anime & Manga, Galeries et Partenaires — plus un magasin d'abonnés privé pour la newsletter.
- 4 taxonomies (Plateforme, Genre, Franchise, Marque), rattachées par type de contenu, de sorte qu'un film porte genre et franchise mais pas plateforme de console.
- Gabarits d'archives sur mesure, barres de filtres, pagination « charger plus », et composants dédiés d'état vide, d'état d'erreur et de 404.
Le moteur de notation des tests
La partie difficile du chantier, et celle qu'il fallait rendre impossible à rater.
- Notation multi-axes pondérée — gameplay, histoire, graphismes et un quatrième axe — avec des poids normalisés par leur propre somme, de sorte qu'un axe peut peser 3× sans recalculer les autres.
- Dérivation tout-ou-rien : la moyenne pondérée ne prend la main qu'une fois tous les axes remplis. Un formulaire à moitié rempli ne peut jamais réécrire silencieusement une note publiée.
- Une source unique de vérité. eg_overall_score() alimente l'anneau de score, la rangée d'étoiles, les pastilles des cartes d'archive, l'attribut de tri, la recherche, la palette de commandes et le ratingValue du JSON-LD — le donut et les étoiles ne peuvent donc pas se contredire.
- Embargo imposé au niveau du lecteur partagé plutôt que gabarit par gabarit : une note sous embargo ne peut fuiter ni par une carte, ni par un résultat de recherche, ni par les données structurées. La rédaction en est exemptée.
- Un panneau de notation complet : anneau de score circulaire animé, rangée de cinq étoiles, barres de détail par axe et légende par bandes de couleur, le tout piloté par une seule propriété personnalisée CSS.
Système de design
147 jetons en trois couches — primitive, sémantique, composant — et environ 200 propriétés personnalisées à travers les feuilles de style.
- Thèmes sombre et clair, tous deux accordés à la main. Chaque appariement de couleurs a été mesuré et non estimé à l'œil : la couleur or signature est dédoublée par thème précisément parce qu'une valeur mesurait 1,63:1 sur blanc.
- Les couleurs sémantiques sont livrées en triplets — plein, teinte légère, encre — pour qu'un texte sur fond teinté reste toujours lisible. L'ancienne valeur partagée mesurait 1,86:1 et a été remplacée.
- Quatre familles typographiques en latin et en arabe, avec remappage de jetons selon la langue pour que la copie arabe adopte automatiquement une police d'affichage arabe, et chiffres tabulaires imposés sur tous les nombres.
Droite-à-gauche, par construction
Pas un site anglais avec un correctif arabe boulonné dessus.
- Propriétés logiques partout — inline-size, margin-inline, inset-inline-start — plutôt que des valeurs gauche/droite inversées après coup.
- Les animations de défilement et de parallaxe lisent document.dir, pour qu'une animation directionnelle ne parte pas à l'envers en arabe.
- Une palette de commandes ⌘K sur un véritable combobox et listbox ARIA, alimentée par du contenu réel, avec repliement orthographique arabe sur les formes de hamza, ya et alef maqsura, et ta marbuta — pour qu'un lecteur cherchant sans diacritiques trouve quand même l'article.
- Un sélecteur AR / FR / EN en direct qui échange le contenu rédigé instantanément, sans rechargement de page.
Performance
Mesurer d'abord, corriger ensuite — dans cet ordre.
- Le carrousel hero ne charge en priorité que la couverture de la première diapositive, avec un indice de préchargement LCP ; les diapositives 2 à 8 arrivent en attributs de données et se peignent à l'activation, la suivante étant préchargée pendant la pause. Environ 1,7 Mo de charge hero immédiate supprimés.
- Couvertures photographiques normalisées en JPEG après qu'une photo livrée en PNG a été mesurée à environ 1 Mo par recadrage ; la reconversion a retiré près de 80 %.
- Le logo est passé de 2048px et 427 Ko à 168px et 12 Ko.
- prefers-reduced-motion respecté dans 11 feuilles de style et 5 modules JavaScript — chaque animation, sans exception.
- Mouvement bâti sur GSAP, ScrollTrigger et Lenis, auto-hébergés et chargés conditionnellement plutôt que globalement.
SEO et données structurées, de première main
Douze types Schema.org écrits à la main, sans aucune extension SEO dans le thème.
- Review, VideoObject, HowTo et HowToStep — les guides pas à pas émettent un vrai balisage d'étapes — puis SportsEvent, SportsTeam, Organization, WebSite avec SearchAction, BreadcrumbList, ImageObject, Person et Rating.
- URL canoniques sur mesure, génération Open Graph et carte Twitter, méta-descriptions dynamiques, fils d'Ariane et robots.txt filtré.
- Éditorial par conception : aucun prix, aucun lien d'achat et aucune offre dans les données structurées.
Ce que reçoit la rédaction
La personne qui publie chaque jour est le véritable utilisateur d'un thème de publication.
- Une couche Customizer pilotée par un seul schéma déclaratif : on ajoute une entrée au tableau, et le réglage, son contrôle, son assainisseur et son lecteur suivent automatiquement.
- Chaque option est réellement optionnelle — sans aucun réglage touché, le thème n'émet pas un octet de plus, si bien qu'une installation intacte est identique au bit près au design livré.
- La couleur d'accent choisit elle-même sa couleur de texte par calcul de luminance WCAG, pour qu'un accent pâle ne produise jamais de boutons blancs sur pâle — avec les mêmes calculs répliqués dans le JavaScript d'aperçu en direct.
- Un constructeur d'étapes de guide sans glisser-déposer, et des styles d'encadrés rédactionnels en pur PHP et CSS, pour que le contenu reste du balisage cœur valide et survive à un changement de thème.
- Un theme.json délibérément limité aux settings, mesuré à +1,1 Ko gzippé, parce qu'y ajouter une clé styles ferait émettre à WordPress une feuille de style globale concurrente.
- Un script d'auto-vérification autonome (tests/check-customizer.php) qui tourne sans WordPress, sans base de données et sans serveur, et vérifie que les valeurs propres à chaque contrôle survivent à son propre assainisseur.
Accessibilité
- Lien d'évitement, gestion du focus, rôles ARIA sur plus de 20 gabarits, et tabindex glissant sur les groupes de boutons radio.
- Le tiroir mobile est en visibility:hidden à la fermeture — la seule transform laissait 14 éléments focalisables dans l'ordre de tabulation de chaque page, y compris sur ordinateur, où le tiroir ne peut même pas s'ouvrir.
- Contraste vérifié par mesure dans les deux thèmes, pas à l'œil.
J'ai audité mon propre code.
Le chantier était fonctionnellement terminé. C'est normalement là qu'un projet est livré. Celui-ci est d'abord passé par un audit forensique de son propre code : 22 agents de revue automatisés sur 11 domaines, 101 constats soulevés, 96 confirmés sur preuves et 5 réfutés, résolus en 14 commits, avec zéro problème critique. Cinq de ses trouvailles :
- Un utilitaire de pagination qui désactivait silencieusement le « charger plus » et la pagination numérotée sur tout le site — alors que le JavaScript comme les commentaires affirmaient encore que cela fonctionnait.
- Une fonction d'échappement JSON-LD dont le str_replace avait des tableaux de recherche et de remplacement identiques octet pour octet : une non-opération documentée.
- Un sélecteur de lien pleine carte qui n'avait jamais correspondu à un seul élément depuis le jour de son écriture, parce qu'il exigeait un lien imbriqué dans un lien.
- Une estimation du temps de lecture reposant sur str_word_count(), qui travaille sur les octets et comptait l'arabe environ quatre fois de trop.
- Un assainisseur du Customizer mis en échec par la conversion silencieuse en entier des clés numériques de tableau par PHP — un bug sans aucun symptôme visible dans l'interface, que seule une assertion écrite a rattrapé.
Aucun de ces défauts n'était visible depuis la façade, et c'est exactement le propos : c'est la catégorie de défaut qui part en production, y reste, et devient le problème de celui qui reprendra le site l'an prochain. Chaque décision non évidente, chaque mesure vérifiée et chaque compromis connu est documenté dans le dépôt, aux côtés d'un canon de conception en sept fichiers — brief créatif, système de design, spécification produit, bibliothèque de composants, lignes directrices UX, lignes directrices d'animation et brief maître — rédigé avant le code.
Le thème, compté.
Le thème, en chiffres.
( LA SUITE )