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 vou­lu offrir un thème enfant à mes lec­teurs, tout comme je l’a­vais fait avec Twenty Seventeen.

Je n’ai pas de sta­tis­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 pre­mier thème enfant, extrê­me­ment basique, mais je trouve par­fois au détour de mes recherches un site qui l’u­ti­lise, le site de Laurent Boutros ou le blog de Nogent le Rotrou par exemple.

Pour Twenty Nineteen, j’ai vou­lu aller plus loin et pro­po­ser un thème plus abou­ti, tout au moins en ce qui concerne l’u­ti­li­sa­tion et la mise à jour. C’est ain­si qu’est né i2019 (pour i[mproved]2019).

Je vous livre ici les dif­fé­rentes étapes de la créa­tion de ce thème. Au com­men­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 for­cé­ment déplai­sant, mais déroutant. 

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

Un menu pas spé­cia­le­ment clair, un peu… beau­coup… beau­coup trop tas­sé. Entre l’el­lipse pour les élé­ments en trop dans l’es­pace réser­vé et le manque de sépa­ra­tion visuelle entre chaque entrée, on n’a pas vrai­ment l’im­pres­sion d’a­voir 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 trou­vé, 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 per­son­na­li­ser. Voyez par vous-même le ren­du 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 pen­sais 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 per­son­na­li­sa­tion. Et sur­tout pas à ajou­ter des fonc­tion­na­li­tés supplémentaires.

Après tout, il ne s’a­gis­sait que d’un cane­vas des­ti­né à faci­li­ter l’u­ti­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 der­niers points sur les­quels je me suis arrêté. 

Je l’ai rapi­de­ment nom­mé tsw2019 pour Tout Sur WordPress Twenty Nineteen, parce que j’a­vais 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 à uti­li­ser. Et que j’ai désac­ti­vée et sup­pri­mée une fois le thème enfant créé.

Un thème enfant, au tout départ de l’a­ven­ture, c’est la copie conforme du thème parent. Pour le per­son­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 com­men­taire expli­ca­tif à chaque fois, disant que pour tel usage il fal­lait gar­der ou sup­pri­mer le code suivant.

Il fal­lait également…

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

Il fal­lait effec­ti­ve­ment modi­fier le code de cer­tains modèles. Donc sup­pri­mer du code, opé­rer cer­tains ajustements.

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

Tout le monde n’a pas les com­pé­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éci­dé 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, impo­sé par WordPress pour les thèmes inclus dans son dépôt, n’a pas fait l’u­na­ni­mi­té lors de sa mise en place. Mais on ne tou­chait pas au cœur du sys­tème. C’est la grande dif­fé­rence avec Gutenberg. Les Certains déve­lop­peurs ont râlé, mais l’u­ti­li­sa­teur y trou­vait son compte. Et quelques années plus tard, qui vou­drait reve­nir en arrière ?

Le thème com­men­ç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 vir­gule en trop ou man­quante, une acco­lade mal pla­cée… le thème est cas­sé et n’est pas uti­li­sable. Et cer­tains ajus­te­ments peuvent ne pas avoir un effet très heureux.

Le test fait par­tie inté­grante du pro­ces­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 cor­rec­te­ment, la rédac­tion de l’ar­ticle tou­chait à sa fin. Le temps était venu de pas­ser à l’é­tape suivante…

Le lancement du thème i2019

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

Mais l’ar­ticle était en ligne, le thème lan­cé et pro­po­sé dans l’ar­ticle. Vous pou­vez 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­ri­té des uti­li­sa­teurs de WordPress parlent plu­tô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 pro­mo­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 uti­li­sable), mon thème enfant et Elementor. C’est à peu près tout ce dont j’a­vais besoin pour mettre en ligne le site. D’autres exten­sions sont venues se gref­fer sur ce noyau dur, mais j’a­vais déjà l’es­sen­tiel pour créer mon site — qui me ser­vait par la même occa­sion de test et de démo.

Et bien évi­dem­ment, WordPress ver­sion d’o­ri­gine, en anglais. Avec des textes en anglais.

Forcément, arri­vé à ce point, il me fal­lait des visuels. Ce fut donc l’é­tape suivante.

Le logo et la capture d’écran

Il me fal­lait un logo. Pour le site, et pour le thème bien sûr. J’ai créé le logo, et j’ai choi­si une image d’ar­rière plan pour don­ner une iden­ti­té gra­phique au thème, pour pro­po­ser une cap­ture d’é­cran dif­fé­rente de celle du thème parent, qui per­mette de dif­fé­ren­cier les deux thèmes dans l’in­ter­face d’ad­mi­nis­tra­tion de WordPress :

Je ne suis pas gra­phiste, je n’ai pas la pré­ten­tion de faire beau. Mais j’ai ten­té. J’ai choi­si la police Saint George, et j’ai gar­dé la cou­leur bleue qui rap­pe­lait la démo du thème parent (la cap­ture d’é­cran de Twenty Nineteen est plu­tôt dans des tons de gris), et qui me plai­sait bien.

Même si j’ai gar­dé le bleu pour la démo, j’ai choi­si un noir « enri­chi » pour le texte et un blanc « adou­ci » pour l’ar­rière plan (les cou­leurs uti­li­sées dans cet encart).

Avoir le logo et la cap­ture d’é­cran, c’é­tait un bon début. Mais il me res­tait à créer une page d’ap­pel (la page d’ac­cueil), quelques articles pour mon­trer les archives et le blog, et une page, a mini­ma. 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 mon­trer ain­si que le construc­teur de page — même en ver­sion gra­tuite — est par­fait pour créer des mises en page com­plexes avec le thème i2019. Avec Twenty Nineteen aus­si, mais avec le thème parent, sans per­son­na­li­sa­tion, vous serez limi­té à une lar­geur de moitié.

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

Gutenberg pour les pages et les articles

Twenty Nineteen est pré­vu pour être uti­li­sé avec Gutenberg. Pour un site qui ser­vi­ra de démo, autant mon­trer ce qui est pos­sible avec cet édi­teur. Il y a un moment que je n’u­ti­lise plus que lui pour rédi­ger mes articles, même si le début de notre his­toire n’a pas été sans ani­croches.

Mais les semaines et les mois pas­sant, l’é­quipe Gutenberg cor­ri­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 uti­li­sa­teur sont sans com­mune mesure avec l’é­di­teur classique.

Il n’y a pas 36 pages et articles sur ce nou­veau site. Il faut un début à tout, alors j’ai pris le par­ti 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 à par­tir 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 moi­tié n’est active que dans l’administration).

Il y a évi­dem­ment les indis­pen­sables, pour la sécu­ri­té, le blo­cage des spams, la mise en cache, le for­mu­laire de contact, le poids des images… et celles dont j’a­vais besoin pour des actions spé­ci­fiques, comme un ges­tion­naire de télé­char­ge­ments, ou pour l’ap­pa­rence, comme celle qui donne un look mate­rial desi­gn au for­mu­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 plu­tôt les per­for­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 par­tie tech­nique. Mais le lan­ce­ment d’un pro­duit, c’est créer le pro­duit, y asso­cier un mini-site, et attendre en faire la pro­mo­tion. C’est donc l’é­tape suivante.

La promotion… oops, vous avez dit quoi ?

La pro­mo­tion, c’est la par­tie que je ne maî­trise pas vrai­ment. Pour les conseils en mar­ke­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 suf­fi­ront à assu­rer la pro­mo­tion d’un pro­duit, quel qu’il soit, quelle que soit sa valeur et quel que soit son prix.

Si un as du mar­ke­ting passe par là et est inté­res­sé par une col­la­bo­ra­tion, je suis ouvert à toute pro­po­si­tion (hon­nête, il va de soi). Le for­mu­laire de contact est opé­ra­tion­nel, tout indi­qué pour cela, et je répon­drais aus­si rapi­de­ment que possible.

Et après…

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

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

Depuis la ver­sion de lan­ce­ment (1.0), il y a eu 6 ver­sions appor­tant cha­cune son lot d’a­jus­te­ments et de nou­velles fonc­tion­na­li­tés, dont l’af­fi­chage du nombre de mots et du temps de lec­ture, le réglage des cou­leurs 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 cer­taines inté­grées dans le thème au fil du temps.

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