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­ti­cle Per­son­nalis­er Twen­ty Nine­teen, j’ai voulu offrir un thème enfant à mes lecteurs, tout comme je l’avais fait avec Twen­ty Sev­en­teen.

Je n’ai pas de sta­tis­tiques pré­cis­es sur le nom­bre d’in­stal­la­tions actives, ni sur le nom­bre total de télécharge­ments de ce pre­mier thème enfant, extrême­ment basique, mais je trou­ve par­fois au détour de mes recherch­es un site qui l’u­tilise, le site de Lau­rent Boutros ou le blog de Nogent le Rotrou par exem­ple.

Pour Twen­ty Nine­teen, j’ai voulu aller plus loin et pro­pos­er un thème plus abouti, tout au moins en ce qui con­cerne l’u­til­i­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­mence­ment donc était…

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

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

Pas for­cé­ment déplaisant, mais déroutant.

Un con­teneur plutôt étroit, qui n’ex­ploite pas l’e­space mis à dis­po­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é­ciale­ment clair, un peu… beau­coup… beau­coup trop tassé. Entre l’el­lipse pour les élé­ments en trop dans l’e­space 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 recherch­es, pour trou­ver…

Comment changer l’apparence de Twenty Nineteen

Le thème est encore tout neuf, il n’y a pas beau­coup d’ar­ti­cles qui lui soient con­sacrés, et on trou­ve peu d’ex­ten­sions ou de thèmes enfants dans le dépôt Word­Press ni même ailleurs. Tout ce que j’ai trou­vé, vous le trou­verez dans l’ar­ti­cle cité dans l’introduction, Person­nalis­er Twen­ty Nine­teen.

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­nalis­er. Voyez par vous-même le ren­du d’un arti­cle avec Twen­ty Nine­teen et avec i2019 :

Les points en rouge vous indiquent les prin­ci­pales mod­i­fi­ca­tions apportées à Twen­ty Nine­teen.

Une fois ces ajuste­ments trou­vés, je les ai inté­grés à l’ar­ti­cle que je rédi­geais. Et je me suis attaqué à…

La création du thème enfant

À ce moment-là, je ne savais pas encore ce que j’al­lais inté­gr­er dans le thème enfant. Je ne pen­sais pas à inté­gr­er l’ensem­ble des mod­i­fi­ca­tions, encore moins à les ren­dre facile­ment acces­si­bles depuis l’outil de per­son­nal­i­sa­tion. Et surtout pas à ajouter des fonc­tion­nal­ités sup­plé­men­taires.

Après tout, il ne s’agis­sait que d’un canevas des­tiné à faciliter l’u­til­i­sa­tion de ces bouts de code par mes lecteurs.

Que dire du nom ? Il n’é­tait pas encore à l’or­dre 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 nom­mé tsw2019 pour Tout Sur Word­Press Twen­ty Nine­teen, parce que j’avais besoin d’un nom pour génér­er le thème enfant via une exten­sion telle que Child Theme Gen­er­a­tor. Une exten­sion sim­ple à utilis­er. Et que j’ai dés­ac­tivée et sup­primée une fois le thème enfant créé.

Un thème enfant, au tout départ de l’aven­ture, c’est la copie con­forme du thème par­ent. Pour le per­son­nalis­er, il me fal­lait…

Rassembler les bouts de code

Je les ai mis en vrac dans le fichi­er style.css et dans le fichi­er des fonc­tions, functions.php. Avec un com­men­taire expli­catif à chaque fois, dis­ant que pour tel usage il fal­lait garder ou sup­primer le code suiv­ant.

Il fal­lait égale­ment…

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

Il fal­lait effec­tive­ment mod­i­fi­er le code de cer­tains mod­èles. Donc sup­primer du code, opér­er cer­tains ajuste­ments.

Mais tout le monde ne veut pas for­cé­ment la même chose. Je ne me voy­ais pas pro­pos­er 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 mod­i­fiés. Et le thème était pour les débu­tants, tout autant que pour un développeur à 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 ajouter chaque mod­i­fi­ca­tion sous forme d’une option activable via l’outil de con­fig­u­ra­tion, en les regroupant par thème : CSS, page d’archive, page d’ar­ti­cle, pied de page, etc.

Cet out­il, imposé par Word­Press pour les thèmes inclus dans son dépôt, n’a pas fait l’u­na­nim­ité lors de sa mise en place. Mais on ne touchait pas au cœur du sys­tème. C’est la grande dif­férence avec Guten­berg. Les Cer­tains développeurs ont râlé, mais l’u­til­isa­teur y trou­vait son compte. Et quelques années plus tard, qui voudrait revenir en arrière ?

Le thème com­mençait à pren­dre forme, mais il était indis­pens­able 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 placée… le thème est cassé et n’est pas util­is­able. Et cer­tains ajuste­ments peu­vent ne pas avoir un effet très heureux.

Le test fait par­tie inté­grante du proces­sus de développe­ment, que le temps de développe­ment se compte en min­utes, en heures, en jours, en mois ou en années / homme, qu’il y ait un ou cent développeurs qui soient affec­tés à ce pro­jet.

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

Tout fonc­tion­nait cor­recte­ment, la rédac­tion de l’ar­ti­cle touchait à sa fin. Le temps était venu de pass­er à l’é­tape suiv­ante…

Le lancement du thème i2019

Au moment de pub­li­er l’ar­ti­cle Per­son­nalis­er Twen­ty Nine­teen, 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 cap­ture d’écran pour rem­plac­er le fichi­er screenshot.png du thème par­ent.

Mais l’ar­ti­cle était en ligne, le thème lancé et pro­posé dans l’ar­ti­cle. Vous pou­vez d’ailleurs le télécharg­er, que ce soit depuis l’ar­ti­cle Per­son­nalis­er Twen­ty Nine­teen, ou depuis la page d’ac­cueil du site de démo.

Mais je n’é­tais pas vrai­ment sat­is­fait, vu que mon blog est en français, et que la grande majorité des util­isa­teurs de Word­Press par­lent plutôt anglais (que ce soit leur langue mater­nelle, ou parce qu’ils ont l’habi­tude de chercher l’in­for­ma­tion là où elle est la plus acces­si­ble).

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

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

Je venais de renou­vel­er un nom de domaine, wp-xp.xyz — sans savoir ce que je pour­rais bien en faire (WP XP comme WordPress eXPeri­ence). J’ai donc créé un mini-site pro­mo­tion­nel en sous-domaine, i2019.wp-xp.xyz.

Word­Press 5 et Guten­berg, Twen­ty Nine­teen (le thème enfant a besoin du thème par­ent pour être util­is­able), mon thème enfant et Ele­men­tor. C’est à peu près tout ce dont j’avais besoin pour met­tre en ligne le site. D’autres exten­sions sont venues se gref­fer sur ce noy­au dur, mais j’avais déjà l’essen­tiel pour créer mon site — qui me ser­vait par la même occa­sion de test et de démo.

Et bien évidem­ment, Word­Press ver­sion d’o­rig­ine, en anglais. Avec des textes en anglais.

For­cé­ment, arrivé à ce point, il me fal­lait des visuels. Ce fut donc l’é­tape suiv­ante.

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 choisi une image d’ar­rière plan pour don­ner une iden­tité graphique au thème, pour pro­pos­er une cap­ture d’écran dif­férente de celle du thème par­ent, qui per­me­tte de dif­férenci­er les deux thèmes dans l’in­ter­face d’ad­min­is­tra­tion de Word­Press :

Je ne suis pas graphiste, je n’ai pas la pré­ten­tion de faire beau. Mais j’ai ten­té. J’ai choisi la police Saint George, et j’ai gardé la couleur bleue qui rap­pelait la démo du thème par­ent (la cap­ture d’écran de Twen­ty Nine­teen 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 “enrichi” pour le texte et un blanc “adouci” pour l’ar­rière plan (les couleurs util­isées dans cet encart).

Avoir le logo et la cap­ture 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 arti­cles pour mon­tr­er les archives et le blog, et une page, a min­i­ma. J’au­rais éventuelle­ment pu créer la page d’ac­cueil avec Guten­berg, mais j’ai préféré utilis­er…

Elementor pour la page d’accueil

Et mon­tr­er ain­si que le con­struc­teur de page — même en ver­sion gra­tu­ite — est par­fait pour créer des mis­es en page com­plex­es avec le thème i2019. Avec Twen­ty Nine­teen aus­si, mais avec le thème par­ent, sans per­son­nal­i­sa­tion, vous serez lim­ité à une largeur de moitié.

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

Gutenberg pour les pages et les articles

Twen­ty Nine­teen est prévu pour être util­isé avec Guten­berg. Pour un site qui servi­ra de démo, autant mon­tr­er ce qui est pos­si­ble avec cet édi­teur. Il y a un moment que je n’u­tilise plus que lui pour rédi­ger mes arti­cles, 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 Guten­berg cor­rigeant les bugs, l’ex­péri­ence devient agréable et bien plus flu­ide. Et force est de con­stater que ses capac­ités et l’ex­péri­ence util­isa­teur sont sans com­mune mesure avec l’édi­teur clas­sique.

Il n’y a pas 36 pages et arti­cles sur ce nou­veau site. Il faut un début à tout, alors j’ai pris le par­ti de met­tre en place l’essen­tiel. Page de con­tact, page d’er­reur 404, page d’ac­cueil. Un arti­cle avec image mise en avant pour présen­ter la genèse du thème, une sans pour informer des mod­i­fi­ca­tions. Une page d’archive générée automa­tique­ment à par­tir des entrées du blog.

Ele­men­tor donc, Guten­berg, 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’ad­min­is­tra­tion).

Il y a évidem­ment les indis­pens­ables, pour la sécu­rité, le blocage des spams, la mise en cache, le for­mu­laire de con­tact, le poids des images… et celles dont j’avais besoin pour des actions spé­ci­fiques, comme un ges­tion­naire de télécharge­ments, ou pour l’ap­parence, comme celle qui donne un look mate­r­i­al design au for­mu­laire de con­tact.

Grâce à Perf­mat­ters, je ne charge sur chaque page que les exten­sions néces­saires pour celle-ci. Ce qui réduit con­sid­érable­ment l’empreinte des exten­sions dans le poids total de la page, et donc accélère son charge­ment.

Voyez plutôt les per­for­mances relevées pour le thème par­ent et pour i2019, avec GTmetrix :

Hon­nête­ment, je ne suis pas mécon­tent de voir les temps de charge­ment et le score Page­Speed pour une page créée avec Ele­men­tor.

Voila pour la par­tie tech­nique. Mais le lance­ment d’un pro­duit, c’est créer le pro­duit, y associ­er un mini-site, et atten­dre en faire la pro­mo­tion. C’est donc l’é­tape suiv­ante.

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 con­seils en mar­ket­ing, je passe mon tour. Ce ne sont pas les quelques arti­cles, tweets, pub­li­ca­tions sur LinkedIn, Face­book qui font de moi un expert dans ce domaine, ni qui suf­firont à assur­er 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­ket­ing passe par là et est intéressé par une col­lab­o­ra­tion, je suis ouvert à toute propo­si­tion (hon­nête, il va de soi). Le for­mu­laire de con­tact est opéra­tionnel, tout indiqué pour cela, et je répondrais aus­si rapi­de­ment que pos­si­ble.

Et après…

Un thème n’est jamais fini. D’une part, il y a tou­jours la pos­si­bil­ité de décou­vrir un bug, même si le risque est moin­dre dans un thème enfant — la majorité des fonc­tion­nal­ités vien­nent du thème par­ent.

Mais il y a aus­si les amélio­ra­tions que l’on peut apporter à son pro­pre code, et les fonc­tion­nal­ités sup­plé­men­taires que l’on va ajouter au thème.

Depuis la ver­sion de lance­ment (1.0), il y a eu 6 ver­sions appor­tant cha­cune son lot d’a­juste­ments et de nou­velles fonc­tion­nal­ités, dont l’af­fichage du nom­bre de mots et du temps de lec­ture, le réglage des couleurs du texte et de l’ar­rière plan, la mise à jour automa­tisée depuis l’in­ter­face d’ad­min­is­tra­tion de votre site… et d’autres mod­i­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 partager votre pro­pre expéri­ence de la créa­tion de thème ou de l’u­til­i­sa­tion du thème i2019 (ou d’un autre thème enfant), l’ar­ti­cle con­tin­ue dans les com­men­taires !