Refonte de votre blog WordPress : dix étapes pour la mener à bien

Vous avez décidé la refonte de votre blog. Ou vous y pensez. Mais une refonte n'est pas une opération anodine, elle ne s'improvise pas. Passons en revue les étapes essentielles à la réussite de ce projet.

Cet article prend 12 minutes à lire et comporte 2781 mots.

Décider de la refonte d’un site ou d’un blog n’est jamais une déci­sion anodine. Vous avez un lec­torat, et un référence­ment naturel acquis au fil des mois et des années. Et bien sûr, vous ne voulez per­dre ni l’un, ni l’autre.

Si vous avez déjà ten­té des mod­i­fi­ca­tions, même rel­a­tive­ment légères (comme un change­ment d’ex­ten­sion), vous avez pu vous en ren­dre compte : ce n’est pas for­cé­ment aus­si sim­ple que ça en a l’air.

Tech­nique­ment déjà : il faut véri­fi­er chaque page poten­tielle­ment impactée par la mod­i­fi­ca­tion, procéder éventuelle­ment à des ajuste­ments — et par­fois même (dans de rares cas) vous aurez à faire machine arrière.

Et psy­chologique­ment aus­si : le lecteur peut-être désori­en­té, refuser l’évo­lu­tion, surtout en France où nous sommes tous plus ou moins râleurs (plutôt plus que moins, d’ailleurs), ques­tion de principe — il ne faudrait pas délaiss­er un sport nation­al ?

Phases préliminaires

Alors une refonte, ce n’est pas une sim­ple opéra­tion de main­te­nance que l’on va pro­gram­mer pour le lende­main. Avant même de la lancer…

1 — Prenez le temps de la réflexion

Exacte­ment comme vous feriez pour le lance­ment d’un nou­veau site, d’un nou­veau pro­duit. Il y a des enjeux, la refonte a un prix et il faut cal­culer ce coût avant tout.

Par coût, je ne pense pas unique­ment à l’aspect financier du pro­jet. Il va fal­loir égale­ment inve­stir des ressources humaines. Même pour votre blog per­so, vous aurez a min­i­ma à vous inve­stir per­son­nelle­ment.

La refonte n’est pas une fin en soi, si vous la souhaitez c’est pour obtenir des résul­tats. Alors posez-vous les bonnes ques­tions :

1. Est-ce le bon moment pour lancer la refonte ?
2. Pourquoi ai-je besoin de refon­dre ou de restruc­tur­er mon blog ?  Qu’est-ce que j’at­tends de cette opéra­tion ?
3. De quelles nou­velles fonc­tion­nal­ités ai-je besoin pour attein­dre mes objec­tifs ?
4. Et quelles sont les fonc­tion­nal­ités dont je n’ai plus besoin (inutiles ou con­tre-pro­duc­tives) ?
5. Quels sont les points annex­es que je peux chang­er ou amélior­er (autant prof­iter de la refonte) ?

De la réponse à ces pre­mières ques­tions, vous pour­rez déjà tir­er une ligne direc­trice. Si vous n’avez pas de réponse à plusieurs ques­tions, et surtout aux ques­tions 1 et 2, c’est que la refonte n’est cer­taine­ment pas une pri­or­ité pour vous. Et tant que vous n’au­rez pas de réponse, inutile de vous lancer dans un tel pro­jet.

Prenez une feuille, un sty­lo et notez tout ce qui vous passe par la tête [ en rap­port avec le pro­jet — si vous vous sou­venez qu’il faut organ­is­er la fête d’an­niver­saire de la petite dernière, prenez une autre feuille, votre site n’a pas besoin de con­fet­tis et votre adorable pim­prenelle n’a pas à être référencée sur Google 😉 ]

Utilisez des post-it : un par idée pour pou­voir les class­er ensuite (impor­tant, sec­ondaire, à con­serv­er, à revoir…). Vous pou­vez même utilis­er des post-it de couleurs dif­férentes pour class­er par domaine (graphique, struc­turel, fonc­tion­nel, etc.) ou en fonc­tion de la per­son­ne qui a pro­posé la mod­i­fi­ca­tion.

N’hésitez pas non plus à en par­ler autour de vous, et pas unique­ment au pre­mier cer­cle de per­son­nes qui gravite autour de ce pro­jet (votre moitié ou vos col­lab­o­ra­teurs ne vont pas être objec­tifs). Notez bien les remar­ques que l’on vous fait sur une feuille — que ces remar­ques vous parais­sent per­ti­nentes ou non. Vous y revien­drez ultérieure­ment.

Quand j’ai décidé la refonte de mon blog, j’ai posé des ques­tions à des lecteurs, à des amis, à des pro­fes­sion­nels dans mon entourage, con­cer­nant leur ressen­ti par rap­port aux points que je souhaitais mod­i­fi­er. Ce sont eux qui m’ont per­mis de valid­er le bien fondé de ma réflex­ion, et qui m’ont fait met­tre le doigt sur des points aux­quels je n’avais pas même pen­sé.

Vous n’en êtes peut-être pas non plus à votre pre­mière refonte, et vous avez dans ce cas à l’e­sprit les erreurs com­mis­es précédem­ment : notez-les, afin d’éviter de les refaire (vous en fer­ez de toute façon, les mêmes ou d’autres).

Votre feuille est toute gri­bouil­lée ? Plus rien à rajouter, a pri­ori ? Alors utilisez-la et…

2 — Rédigez un cahier des charges

Il peut être très suc­cinct, tenir en trois lignes ou en trois pages en fonc­tion de votre pro­jet de refonte : sim­ple refonte visuelle, refonte struc­turelle (avec change­ment dans la struc­ture des permaliens par exem­ple) ou refonte totale (visuelle, fonc­tion­nelle, struc­turelle…), et en fonc­tion de chaque élé­ment iden­ti­fié.

Si vous gardez le même thème par exem­ple, une ligne suf­fi­ra pour en faire état. Et si vous repensez la struc­ture com­plète (rubriques, hiérar­chie des pages…) il va fal­loir décrire la nou­velle struc­ture en détail, indi­quer les cor­re­spon­dances et les dif­férences avec la struc­ture actuelle.

Pensez aus­si aux impli­ca­tions qu’au­ront ces mod­i­fi­ca­tions sur votre référence­ment : il est indis­pens­able de créer un instan­ta­né du site avant refonte (avec le fichi­er sitemap.xml par exem­ple) pour pou­voir créer les redi­rec­tions qui vous per­me­t­tront de con­serv­er votre référence­ment.

Allez au-delà du périmètre ini­tial : il serait dom­mage de ne pas prof­iter de la refonte pour revoir votre stratégie SEO par exem­ple, même si elle ne fai­sait pas par­tie des points aux­quels vous aviez pen­sé ini­tiale­ment, de ne pas pren­dre en compte la qual­ité de l’héberge­ment alors que c’est un point essen­tiel tant pour amélior­er le référence­ment que pour réduire le taux de rebond.

Trois points à con­sid­ér­er, même s’il ne s’ag­it pas des points que vous con­sid­érez comme essen­tiels, ou que vous n’aviez pas prévus d’in­clure dans la refonte :

• pass­er votre blog en https
• avoir un design adap­tatif, ou mieux, pen­sé pour les ter­minaux  mobiles (mobile first)
• opti­miser la taille et le poids de vos images

Ces trois points sont essen­tiels pour votre référence­ment, alors, si votre blog n’est pas aux normes actuelles, prof­itez de la refonte pour les met­tre en place.

Après un pre­mier jet, lais­sez votre cahi­er des charges de côté quelques jours, puis revenez‑y. Vous allez le peaufin­er, y apporter des mod­i­fi­ca­tions, détailler cer­tains points, peut-être en sup­primer d’autres. Gardez-en quand même une trace, pour y revenir dans un troisième temps, avant de valid­er la ver­sion défini­tive du cahi­er des charges.

À moins que vous n’ayez déjà craqué pour un thème bien par­ti­c­uli­er ou pour une exten­sion spé­ci­fique, ce n’est pas le moment de pos­er ces choix. Ils font par­tie des tâch­es que vous avez à lis­ter, en définis­sant de manière plus ou moins exhaus­tive les points essen­tiels (exem­ple : thème adap­tatif, ou ‘mobile first’, avec — ou sans — méga-menu, pré-opti­misé, ‘AMP ready’ ou pas, livré avec des exten­sions par­ti­c­ulières, etc.). N’ou­bliez pas : on est sur un cahi­er des charges, pas sur un sto­ry­board.

Lais­sez à nou­veau pass­er quelques jours (j’ai bien dit quelques jours, pas quelques heures — la refonte n’a pas lieu d’être lancée dans l’ur­gence). Reprenez vos notes ini­tiales, revoyez chaque copie du cahi­er des charges en inclu­ant les points sup­primés en cours de route, pour éla­bor­er la ver­sion finale.

À par­tir de cette étape, il vous fau­dra égale­ment décider de faire appel ou pas à un (des) professionnels(s) pour tout ou par­tie de ce pro­jet. La déci­sion peut-être prise plus tard, même après que vous ayez com­mencé la refonte en elle-même.

Cahi­er des charges validé ? Alors on passe à…

Pour cer­taines des étapes qui suiv­ent, vous trou­verez des ressources intéres­santes sur ce blog ; je les cite à la fin de chaque étape.

3 — L’état des lieux

Récupérez toutes les don­nées pos­si­bles pour la ver­sion actuelle de votre blog (les sta­tis­tiques détail­lées fer­ont l’af­faire) :

• le nom­bre de vis­i­teur par jour, semaine, mois, année
• les pages les plus con­sultées
• le taux de rebond (même si cette don­née est à analyser avec pré­cau­tion — elle n’a pas la même valeur sur un site marc­hand et sur un blog, un inter­naute qui a lu un arti­cle dans son inté­gral­ité doit-il être comp­té…)
• les clics sur vos liens internes (mots clés, barre latérale, liens dans l’ar­ti­cle, etc.)

Vous pour­rez ain­si com­par­er avec les don­nées que vous récolterez ultérieure­ment, après refonte.

Effectuez une sauve­g­arde com­plète de votre blog et récupérez un plan com­plet du site (inclu­ant toutes les pages, celles des fichiers médias inclus­es, si vous en faites usage). Vous en aurez besoin pour établir une cor­re­spon­dance exacte au niveau des liens entrants, depuis les moteurs de recherche et depuis les sites qui vous référen­cent.

Enfin, testez la rapid­ité de votre blog avec Ping­dom par exem­ple. C’est un fac­teur impor­tant, surtout pour la nav­i­ga­tion depuis un ter­mi­nal mobile.

À lire sur le blog

Héberg­er son site Word­Press sur un VPS OVH

La refonte du blog

4 — Choisissez les outils de la refonte

Avant de lancer les grands chantiers, c’est le moment de faire des choix con­crets, pour l’héberge­ment, pour le moteur de blog éventuelle­ment (mais vous avez choisi Word­Press ), pour le thème, pour les exten­sions — en fait pour chaque point listé sur votre cahi­er des charges.

Si Word­Press fait par­tie des nou­veautés pour vous (vous pou­vez très bien avoir un blog sous Medi­um, Ghost, Blog­ger, Tum­blr, Mov­able Type, Type­Pad ou Square­Space par exem­ple), il existe des out­ils pour migr­er vos don­nées. Et si par hasard vous avez décidé de quit­ter le monde mer­veilleux (même s’il n’est pas par­fait) de Word­Press, sachez que c’est incon­cev­able que c’est impos­si­ble pos­si­ble aus­si, chaque plate­forme pro­posant ses pro­pres out­ils d’im­port / export. Mais je ne pour­rais pas vous con­seiller… et toc ! 😛

En aparté, si vous avez décidé d’un choix de plate­forme autre, et si la pro­priété de vos arti­cles vous importe, lisez atten­tive­ment les con­di­tions générales avant de vous engager : cer­taines plate­formes s’ap­pro­prient votre con­tenu, une fois migré, il leur appar­tient et ils peu­vent en faire (plus ou moins) ce qu’ils veu­lent, donc par exem­ple le réu­tilis­er sans même avoir à vous con­sul­ter.

La pre­mière place de marché pour la recherche de thèmes et d’ex­ten­sions, c’est bien évidem­ment le site wordpress.org avec plus de 5 000 thèmes (dont le thème par défaut en 2017, Twen­ty Sev­en­teen) et plus de 50 000 exten­sions (même si toutes ne sont pas com­pat­i­bles avec la dernière ver­sion de Word­Press). 100% gra­tu­it, des ver­sions light de thèmes com­mer­ci­aux qui per­me­t­tent de tester avant d’a­cheter — et d’éviter ain­si les mau­vais­es sur­pris­es. Vous serez tou­jours à même d’a­cheter la ver­sion pre­mi­um une fois le thème testé.

La deux­ième place de marché sur laque­lle on trou­ve des thèmes et des exten­sions de bonne fac­ture, c’est Enva­to et ses sites dédiés The­me­for­est et Code­Canyon. Mais atten­tion ! La qual­ité y est très vari­able, on trou­ve de tout, de l’ex­cel­lent au très mau­vais pour ne pas dire médiocre. Les notes util­isa­teurs, le nom­bre de ventes et les com­men­taires vous per­me­t­tront de vous faire une idée.

Pour les thèmes, prenez en compte la date de dernière mise à jour — si plus d’un an s’est écoulé depuis, il est prob­a­ble que le thème ne soit plus main­tenu. De même pour les exten­sions, une exten­sion non com­pat­i­ble avec l’une des dernières ver­sions de Word­Press peut avoir été aban­don­née par son auteur. Vous risquez de ren­con­tr­er des prob­lèmes de com­pat­i­bil­ité à plus ou moins long terme.

Si vous devez touch­er au code du thème (au-delà de la feuille de style), vous avez le choix entre un édi­teur avancé — atom est très promet­teur, de même que brack­ets. Utilis­er l’édi­teur inté­gré à l’ad­min­is­tra­tion est forte­ment décon­seil­lé.

À lire sur le blog

Archive des thèmes
Archive des exten­sions
Des exten­sions pour faciliter l’ad­min­is­tra­tion de Word­Press
Cen­tralisez vos bouts de code avec « Code Snip­pets »
Allégez votre blog avec « Plu­g­in Orga­niz­er »

5 — La refonte elle-même

Inutile de vous rap­pel­er qu’il ne faut pas effectuer les mod­i­fi­ca­tions sur un site en pro­duc­tion, surtout si elles sont rel­a­tive­ment lour­des… mais je prends quand même sur moi de vous le rap­pel­er.

Quand on par­le desite en pro­duc­tion, on par­le du site prin­ci­pal que vis­i­tent les inter­nautes. Dans notre cas, du blog disponible à l’URL habituelle­ment util­isée.

Deux solu­tions s’of­frent à vous :

• Un site de test en ligne — c’est plus ou moins ce que pro­posent Site­ground avec l’op­tion One-click Word­Press Stag­ing disponible pour l’of­fre GoGeek et WP Serveur sur toutes leurs offres. Sur ces trois plate­formes, c’est un clon­age de votre site qui vous est pro­posé, et vous avez la pos­si­bil­ité de pass­er le site ain­si cloné en pro­duc­tion d’un sim­ple clic.
  Plesk pro­pose lui aus­si de copi­er le site à des fins de clon­age, si vous hébergez votre blog sur un VPS, mais je n’ai pas util­isé cette option (j’au­rais dû), je ne peux donc pas vous dire à quel point elle est sim­ple ou pas à utilis­er.
  Si vous êtes sur une plate­forme qui ne pro­pose pas ce ser­vice, vous pou­vez par exem­ple créer un sous-domaine dédié à la refonte et pass­er l’ensem­ble en pro­duc­tion une fois la refonte ter­minée.
• Un clone instal­lé sur votre ordi­na­teur (avec Local by Fly­Wheel par exem­ple). Vous aurez par con­tre à trans­fér­er vos fichiers par FTP avec un logi­ciel tel que Filezil­la, et votre base de don­née via PHP­MyAd­min ou Admin­er une fois la refonte ter­minée.

Au fur et à mesure de l’a­vance­ment de votre pro­jet, com­mentez chaque point lors du démar­rage, en cours d’exé­cu­tion et en fin d’exé­cu­tion. Si un point vous pose prob­lème, notez-le et véri­fiez bien en fin de refonte qu’il n’y a plus de prob­lème.

6 — Vérifiez, vérifiez, vérifiez encore

Une fois la refonte ter­minée, reprenez la liste des actions à men­er, la liste des actions menées, véri­fiez que rien ne vous a échap­pé (il y aura for­cé­ment quelque chose qui va vous échap­per, au final, mais vous aurez lim­ité la casse en cas de dys­fonc­tion­nement, en véri­fi­ant tout point par point).

7 — Effectuez une dernière sauvegarde

On n’est jamais assez pru­dent : mieux vaut avoir une sauve­g­arde de sécu­rité dont on ne se servi­ra pas que de ne pas en avoir et d’en avoir besoin. C’est le principe des assur­ances : vous ne vous assurez pas parce que vous êtes cer­tains d’avoir un acci­dent, la prob­a­bil­ité que vous en ayez un est d’ailleurs faible, mais si vous avez un acci­dent et que vous n’êtes pas assuré, c’est la cat­a­stro­phe en plus de la cat­a­stro­phe.

Juste avant de pass­er votre nou­veau blog en pro­duc­tion, une sauve­g­arde com­plète s’im­pose (fichiers et base de don­nées) au cas où vous auriez un prob­lème — un plan­tage du serveur par exem­ple, totale­ment indépen­dant de votre volon­té. Ou au cas où la nou­velle ver­sion du site ne sat­is­ferait pas à vos exi­gences une fois mise en ser­vice.

À lire sur le blog :

Pourquoi vous devez avoir une sauve­g­arde de votre blog

8 — Passez votre clone en production

Il faut se lancer, et c’est le moment cru­cial. En fonc­tion de votre héberge­ment, vous allez utilis­er le FTP et un ges­tion­naire de base de don­nées (PHP­MyAd­min est le plus répan­du), ou cli­quer su le bou­ton de mise en ligne du clone. Et voilà, votre blog en ver­sion V(n+1) est enfin en ligne !

Après la mise en ligne

9 — Vérifiez, encore, en détail

C’est le moment de tout pass­er en revue. Prenez votre check-list finale, validez chaque point.

Par­courez votre blog dans tous les sens. Passez en revue chaque page, chaque arti­cle pour être cer­tain de ne rien avoir lais­sé pass­er.

10 — Comparez les performances avant / après

Si vous avez suivi le con­seil numéro 3, vous avez les sta­tis­tiques et les per­for­mances de votre blog avant refonte.

Avez-vous gag­né en ter­mes de temps passé sur chaque page, de nou­veaux vis­i­teurs, de fidéli­sa­tion de votre lec­torat, de taux de rebond, de taux de con­ver­sion si vous pro­posez un ser­vice ou un pro­duit ?

Avez-vous gag­né quelques (milli)secondes au charge­ment des pages ?

Si oui, vous avez atteint votre but. Sinon, il vous reste à iden­ti­fi­er les éventuels obsta­cles et à cor­riger la copie, rien n’est figé.

Un exem­ple ? Lors de la refonte de ce blog, j’ai util­isé la fonc­tion par défaut incluse dans le thème pour les arti­cles liés ; le taux de rebond ayant aug­men­té de manière sig­ni­fica­tive, je suis revenu à mon exten­sion favorite (que j’avais sim­ple­ment dés­ac­tivée) : Con­tex­tu­al Relat­ed Posts, et j’ai rem­placé la fonc­tion livrée avec le thème pour récupér­er les arti­cles liés par un appel à l’API de Con­tex­tu­al Relat­ed Posts. Le taux de rebond est rapi­de­ment redescen­du, j’avais donc visé juste.

Pour la prochaine refonte

Pensez à garder les notes pris­es lors de la refonte, et à les met­tre au pro­pre si néces­saire : elles vous servi­ront pour la prochaine refonte, même si elle n’est pas prévue dans l’im­mé­di­at (en principe).

Et pourquoi ne pas utilis­er ces notes pour un arti­cle, même si la thé­ma­tique de votre blog ne con­cerne pas Word­Press ? Votre expéri­ence peut intéress­er d’autres blogueurs, et leur être utile.

Vous avez mené à terme un pro­jet impor­tant, les leçons appris­es vous servi­ront, peut-être même dans d’autres domaines (rénover une mai­son n’est pas si éloigné que ça de la refonte d’un blog, du moins dans l’e­sprit).

Avez-vous déjà par­ticipé à la refonte d’un site web, que ce soit le vôtre ou non ?

Cer­tains liens de cet arti­cle sont des liens affil­iés, c’est à dire que si par exem­ple vous achetez un thème ou une exten­sion, ou si vous prenez un héberge­ment en les suiv­ant, je toucherai éventuelle­ment une petite com­mis­sion, mais vous, vous ne pay­erez pas un cen­time de plus.