La création d'un thème enfant

Je vous emmène aujourd'hui dans les coulisses de la création d'un thème. Vous allez suivre les étapes que j'ai moi-même suivi pour créer i2019, un thème enfant de Twenty Nineteen.

Cet article prend 9 minutes à lire et comporte 2045 mots.

Lors de la rédac­tion de l’ar­ticle Personnaliser Twenty Nineteen, j’ai voulu offrir un thème enfant à mes lecteurs, tout comme je l’avais fait avec Twenty Seventeen.

Je n’ai pas de statis­tiques précises sur le nombre d’ins­tal­la­tions actives, ni sur le nombre total de télé­char­ge­ments de ce premier thème enfant, extrê­me­ment basique, mais je trouve parfois au détour de mes recherches un site qui l’uti­lise, le site de Laurent Boutros ou le blog de Nogent le Rotrou par exemple.

Pour Twenty Nineteen, j’ai voulu aller plus loin et propo­ser un thème plus abouti, tout au moins en ce qui concerne l’uti­li­sa­tion et la mise à jour. C’est ainsi qu’est né i2019 (pour i[mproved]2019).

Je vous livre ici les diffé­rentes étapes de la créa­tion de ce thème. Au commen­ce­ment donc était…

Le thème par défaut pour WordPress 5, Twenty Nineteen

Excellent thème par défaut, géné­ra­liste (aux dires de ses créa­teurs), très bleu et très basique quand même.

Pas forcé­ment déplai­sant, mais déroutant. 

Un conte­neur plutôt étroit, qui n’ex­ploite pas l’es­pace mis à dispo­si­tion sur un écran de bureau, ni même sur une tablette prise en mode paysage. De grands espaces un peu partout.

Un menu pas spécia­le­ment clair, un peu… beau­coup… beau­coup trop tassé. Entre l’el­lipse [icon name=« ellipsis‑h »] pour les éléments en trop dans l’es­pace réservé et le manque de sépa­ra­tion visuelle entre chaque entrée, on n’a pas vrai­ment l’im­pres­sion d’avoir face à soi le menu.

J’ai donc effec­tué quelques recherches, pour trouver…

Comment changer l’apparence de Twenty Nineteen

Le thème est encore tout neuf, il n’y a pas beau­coup d’ar­ticles qui lui soient consa­crés, et on trouve peu d’ex­ten­sions ou de thèmes enfants dans le dépôt WordPress ni même ailleurs. Tout ce que j’ai trouvé, vous le trou­ve­rez dans l’ar­ticle cité dans l’introduction, Person­na­li­ser Twenty Nineteen.

Et en fin de compte, le thème n’est pas si vilain que ça, si on se donne la peine de le person­na­li­ser. Voyez par vous-même le rendu d’un article avec Twenty Nineteen et avec i2019 :

Les points en rouge vous indiquent les prin­ci­pales modi­fi­ca­tions appor­tées à Twenty Nineteen.

Une fois ces ajus­te­ments trou­vés, je les ai inté­grés à l’ar­ticle que je rédi­geais. Et je me suis atta­qué à…

La création du thème enfant

À ce moment-là, je ne savais pas encore ce que j’al­lais inté­grer dans le thème enfant. Je ne pensais pas à inté­grer l’en­semble des modi­fi­ca­tions, encore moins à les rendre faci­le­ment acces­sibles depuis l’ou­til de person­na­li­sa­tion. Et surtout pas à ajou­ter des fonc­tion­na­li­tés supplémentaires.

Après tout, il ne s’agis­sait que d’un cane­vas destiné à faci­li­ter l’uti­li­sa­tion de ces bouts de code par mes lecteurs.

Que dire du nom ? Il n’était pas encore à l’ordre du jour, je peux même dire que c’est un des derniers points sur lesquels je me suis arrêté. 

Je l’ai rapi­de­ment nommé tsw2019 pour Tout Sur WordPress Twenty Nineteen, parce que j’avais besoin d’un nom pour géné­rer le thème enfant via une exten­sion telle que Child Theme Generator. Une exten­sion simple à utili­ser. Et que j’ai désac­ti­vée et suppri­mée une fois le thème enfant créé.

Un thème enfant, au tout départ de l’aven­ture, c’est la copie conforme du thème parent. Pour le person­na­li­ser, il me fallait…

Rassembler les bouts de code

Je les ai mis en vrac dans le fichier style.css et dans le fichier des fonc­tions, functions.php. Avec un commen­taire expli­ca­tif à chaque fois, disant que pour tel usage il fallait garder ou suppri­mer le code suivant.

Il fallait également…

Créer les modèles du thème enfant

Il fallait effec­ti­ve­ment modi­fier le code de certains modèles. Donc suppri­mer du code, opérer certains ajustements.

Mais tout le monde ne veut pas forcé­ment la même chose. Je ne me voyais pas propo­ser du tout blanc ou du tout noir (ni du tout bleu). 

Tout le monde n’a pas les compé­tences tech­niques pour aller revoir le code HTML / PHP des modèles modi­fiés. Et le thème était pour les débu­tants, tout autant que pour un déve­lop­peur à qui il pour­rait plaire et qui n’au­rait pas à réin­ven­ter la roue. J’ai donc décidé de…

Définir des options activables via l’outil de personnalisation

J’ai donc créé des onglets pour ajou­ter chaque modi­fi­ca­tion sous forme d’une option acti­vable via l’ou­til de confi­gu­ra­tion, en les regrou­pant par thème : CSS, page d’ar­chive, page d’ar­ticle, pied de page, etc.

Cet outil, imposé par WordPress pour les thèmes inclus dans son dépôt, n’a pas fait l’una­ni­mité lors de sa mise en place. Mais on ne touchait pas au cœur du système. C’est la grande diffé­rence avec Gutenberg. Les Certains déve­lop­peurs ont râlé, mais l’uti­li­sa­teur y trou­vait son compte. Et quelques années plus tard, qui voudrait reve­nir en arrière ?

Le thème commen­çait à prendre forme, mais il était indis­pen­sable de…

Tester en conditions réelles d’utilisation

Parce que bien sûr, je sais coder, mais une virgule en trop ou manquante, une acco­lade mal placée… le thème est cassé et n’est pas utili­sable. Et certains ajus­te­ments peuvent ne pas avoir un effet très heureux.

Le test fait partie inté­grante du proces­sus de déve­lop­pe­ment, que le temps de déve­lop­pe­ment se compte en minutes, en heures, en jours, en mois ou en années / homme, qu’il y ait un ou cent déve­lop­peurs qui soient affec­tés à ce projet.

J’ai donc mis en ligne un site de test. Rien d’ex­tra­or­di­naire, un blog avec deux pages et trois articles.

Tout fonc­tion­nait correc­te­ment, la rédac­tion de l’ar­ticle touchait à sa fin. Le temps était venu de passer à l’étape suivante…

Le lancement du thème i2019

Au moment de publier l’ar­ticle Personnaliser Twenty Nineteen, j’ai choisi le nom du thème : i2019 pour i[mproved]2019. À ce moment-là, j’avais le nom, j’avais le thème, mais il n’y avait pas encore de logo, et encore moins une capture d’écran pour rempla­cer le fichier screenshot.png du thème parent.

Mais l’ar­ticle était en ligne, le thème lancé et proposé dans l’ar­ticle. Vous pouvez d’ailleurs le télé­char­ger, que ce soit depuis l’ar­ticle Personnaliser Twenty Nineteen, ou depuis la page d’ac­cueil du site de démo.

Mais je n’étais pas vrai­ment satis­fait, vu que mon blog est en fran­çais, et que la grande majo­rité des utili­sa­teurs de WordPress parlent plutôt anglais (que ce soit leur langue mater­nelle, ou parce qu’ils ont l’ha­bi­tude de cher­cher l’in­for­ma­tion là où elle est la plus accessible).

D’où ma déci­sion de…

Créer un site dédié au thème i2019

Je venais de renou­ve­ler un nom de domaine, wp-xp.xyz – sans savoir ce que je pour­rais bien en faire (WP XP comme WordPress eXPerience). J’ai donc créé un mini-site promo­tion­nel en sous-domaine, i2019.wp-xp.xyz.

WordPress 5 et Gutenberg, Twenty Nineteen (le thème enfant a besoin du thème parent pour être utili­sable), mon thème enfant et Elementor. C’est à peu près tout ce dont j’avais besoin pour mettre en ligne le site. D’autres exten­sions sont venues se gref­fer sur ce noyau dur, mais j’avais déjà l’es­sen­tiel pour créer mon site – qui me servait par la même occa­sion de test et de démo.

Et bien évidem­ment, WordPress version d’ori­gine, en anglais. Avec des textes en anglais.

Forcément, arrivé à ce point, il me fallait des visuels. Ce fut donc l’étape suivante.

Le logo et la capture d’écran

Il me fallait un logo. Pour le site, et pour le thème bien sûr. J’ai créé le logo, et j’ai choisi une image d’ar­rière plan pour donner une iden­tité graphique au thème, pour propo­ser une capture d’écran diffé­rente de celle du thème parent, qui permette de diffé­ren­cier les deux thèmes dans l’in­ter­face d’ad­mi­nis­tra­tion de WordPress :

Je ne suis pas graphiste, je n’ai pas la préten­tion de faire beau. Mais j’ai tenté. J’ai choisi la police Saint George, et j’ai gardé la couleur bleue qui rappe­lait la démo du thème parent (la capture d’écran de Twenty Nineteen est plutôt dans des tons de gris), et qui me plai­sait bien.

Même si j’ai gardé le bleu pour la démo, j’ai choisi un noir « enri­chi » pour le texte et un blanc « adouci » pour l’ar­rière plan (les couleurs utili­sées dans cet encart).

Avoir le logo et la capture d’écran, c’était un bon début. Mais il me restait à créer une page d’ap­pel (la page d’ac­cueil), quelques articles pour montrer les archives et le blog, et une page, a minima. J’aurais éven­tuel­le­ment pu créer la page d’ac­cueil avec Gutenberg, mais j’ai préféré utiliser…

Elementor pour la page d’accueil

Et montrer ainsi que le construc­teur de page – même en version gratuite – est parfait pour créer des mises en page complexes avec le thème i2019. Avec Twenty Nineteen aussi, mais avec le thème parent, sans person­na­li­sa­tion, vous serez limité à une largeur de moitié.

La page d’ac­cueil mise en place, j’ai pris le parti de conti­nuer avec…

Gutenberg pour les pages et les articles

Twenty Nineteen est prévu pour être utilisé avec Gutenberg. Pour un site qui servira de démo, autant montrer ce qui est possible avec cet éditeur. Il y a un moment que je n’uti­lise plus que lui pour rédi­ger mes articles, même si le début de notre histoire n’a pas été sans anicroches.

Mais les semaines et les mois passant, l’équipe Gutenberg corri­geant les bugs, l’ex­pé­rience devient agréable et bien plus fluide. Et force est de consta­ter que ses capa­ci­tés et l’ex­pé­rience utili­sa­teur sont sans commune mesure avec l’édi­teur classique.

Il n’y a pas 36 pages et articles sur ce nouveau site. Il faut un début à tout, alors j’ai pris le parti de mettre en place l’es­sen­tiel. Page de contact, page d’er­reur 404, page d’ac­cueil. Un article avec image mise en avant pour présen­ter la genèse du thème, une sans pour infor­mer des modi­fi­ca­tions. Une page d’ar­chive géné­rée auto­ma­ti­que­ment à partir des entrées du blog. 

Elementor donc, Gutenberg, et…

Les extensions nécessaires

Je n’ai pas 36 exten­sions non plus sur ce site (24 en fait, en tout et pour tout, dont plus de la moitié n’est active que dans l’administration).

Il y a évidem­ment les indis­pen­sables, pour la sécu­rité, le blocage des spams, la mise en cache, le formu­laire de contact, le poids des images… et celles dont j’avais besoin pour des actions spéci­fiques, comme un gestion­naire de télé­char­ge­ments, ou pour l’ap­pa­rence, comme celle qui donne un look mate­rial design au formu­laire de contact.

Grâce à Perfmatters, je ne charge sur chaque page que les exten­sions néces­saires pour celle-ci. Ce qui réduit consi­dé­ra­ble­ment l’empreinte des exten­sions dans le poids total de la page, et donc accé­lère son chargement.

Voyez plutôt les perfor­mances rele­vées pour le thème parent et pour i2019, avec GTmetrix :

Honnêtement, je ne suis pas mécon­tent de voir les temps de char­ge­ment et le score PageSpeed pour une page créée avec Elementor.

Voila pour la partie tech­nique. Mais le lance­ment d’un produit, c’est créer le produit, y asso­cier un mini-site, et attendre en faire la promo­tion. C’est donc l’étape suivante.

La promotion… oops, vous avez dit quoi ?

La promo­tion, c’est la partie que je ne maîtrise pas vrai­ment. Pour les conseils en marke­ting, je passe mon tour. Ce ne sont pas les quelques articles, tweets, publi­ca­tions sur LinkedIn, Facebook qui font de moi un expert dans ce domaine, ni qui suffi­ront à assu­rer la promo­tion d’un produit, quel qu’il soit, quelle que soit sa valeur et quel que soit son prix.

Si un as du marke­ting passe par là et est inté­ressé par une colla­bo­ra­tion, je suis ouvert à toute propo­si­tion (honnête, il va de soi). Le formu­laire de contact est opéra­tion­nel, tout indi­qué pour cela, et je répon­drais aussi rapi­de­ment que possible.

Et après…

Un thème n’est jamais fini. D’une part, il y a toujours la possi­bi­lité de décou­vrir un bug, même si le risque est moindre dans un thème enfant – la majo­rité des fonc­tion­na­li­tés viennent du thème parent.

Mais il y a aussi les amélio­ra­tions que l’on peut appor­ter à son propre code, et les fonc­tion­na­li­tés supplé­men­taires que l’on va ajou­ter au thème.

Depuis la version de lance­ment (1.0), il y a eu 6 versions appor­tant chacune son lot d’ajus­te­ments et de nouvelles fonc­tion­na­li­tés, dont l’af­fi­chage du nombre de mots et du temps de lecture, le réglage des couleurs du texte et de l’ar­rière plan, la mise à jour auto­ma­ti­sée depuis l’in­ter­face d’ad­mi­nis­tra­tion de votre site… et d’autres modi­fi­ca­tions sont à l’étude, et seront pour certaines inté­grées dans le thème au fil du temps.

Et si vous avez des ques­tions, ou envie de parta­ger votre propre expé­rience de la créa­tion de thème ou de l’uti­li­sa­tion du thème i2019 (ou d’un autre thème enfant), l’ar­ticle conti­nue dans les commentaires !