Accueil » Blog WordPress » Comment effectuer une refonte d’un site WordPress : la checklist ultime

Comment effectuer une refonte d’un site WordPress : la checklist ultime

Aaah, la refonte d’un site WordPress…

Quand on pense aux différentes problématiques que cette mission implique, on a généralement tendance à stresser un peu.

La refonte d'un site WordPress : un gros moment de stress

Inspirez… expirez… inspirez…

Qui ne rêve pas, dans ce moment-clé, de faire un simple Ctlr+Alt+Suppr sur son serveur, et tout reprendre à zéro aisément ?

Malheureusement, la refonte de votre site web est toujours un peu plus complexe que ça. Et un oubli, une erreur, une bourde, est si vite arrivée…

La Marmite a donc voulu vous partager ses bonnes pratiques pour aborder sereinement ce grand projet.

Avec l’équipe, on est d’ailleurs en plein dedans, puisque le blog prépare sa refonte. Au programme : un design modernisé, une optimisation des pages de présentation des formations, et surtout une nouvelle structure qui vous aide à mieux tirer le meilleur de WordPress.

Il faut dire que la Marmite a bien grossi ces derniers mois. Un nouvel article est publié chaque semaine, la plupart des vidéos sont retranscrites, sans oublier le glossaire et les snippets.

Allez vous êtes prêts ? Dans cet article, je vous détaille tous les éléments auxquels vous devez penser pendant votre refonte de site Internet WordPress, de la stratégie en amont jusqu’à la mise en ligne.

Les 4 étapes en amont de la refonte de son site Internet WordPress

Avant même de mettre les mains dans WordPress pour refondre votre site, il va vous falloir plancher sur différents éléments structurants.

Eh oui : vous ne pensiez tout de même pas vous lancer sans savoir où vous alliez mettre les pieds ?

1. Poser les objectifs de sa refonte

Comme tout projet, la refonte d’un site WordPress a des objectifs, qu’il s’agit de définir bien précisément. Ce sont ces objectifs, concis et clairs, qui vont guider vos pas par la suite.

On peut avoir de nombreuses raisons de vouloir faire la refonte d’un site web.

Voulez-vous donc :

  • Changer le design de votre site, en sélectionnant un nouveau thème ?
  • Mettre à jour l’administration de votre site ? Ça peut être le cas si vos plugins ou votre version de WordPress n’ont jamais été mis à jour, s’il existe des conflits entre différents plugins, ou encore si votre thème a été modifié de manière erratique. Autant de soucis qui peuvent nuire à la performance de votre site web, et à sa gestion au quotidien.
  • Optimiser votre référencement ? Un objectif à vous poser, notamment si votre expérience utilisateur est actuellement bancale, si votre HTML n’est pas optimisé pour les robots de Google, ou encore si vous rencontrez des problèmes d’intégration d’AMP.
  • Ajouter de nouvelles fonctionnalités à votre site, que votre design actuel ne peut pas intégrer ?
  • Migrer votre site sur un autre serveur ?

Notez bien, dans un document bien structuré, ces différents objectifs. Vous verrez qu’ils constitueront des éléments structurants, pour bien organiser votre refonte de site web.

2. Structurer votre projet de refonte

Maintenant que vous avez les idées claires sur la finalité de votre refonte, parlons un peu des différentes étapes qui déterminent les grandes lignes de votre projet.

Créer ses wireframes

Le terme de wireframes, ça vous dit quelque chose ?

Des wireframes : qu'est-ce que c'est que ça ?

Un petit point sur le sujet s’impose, tant cette étape est cruciale.

Les wireframes sont des maquettes structurelles, qui vous aident à disposer les différents éléments de vos pages web sur un document unique.

L’idée est vraiment de bien poser la charpente de vos différentes pages, pour avoir une idée claire de l’expérience utilisateur que vous allez créer.

Je vous en donnais un exemple dans cet article, que voici de nouveau pour illustrer mon propos :

Balsamiq Mockups 3 : une solution payante pour qui conçoit régulièrement des wireframes de site WordPress

L’interface de création de wireframes dans Balsamiq Mockups 3

Si la méthode millénaire papier + crayon peut suffire pour une refonte légère, je vous recommande tout de même d’utiliser un outil digital pour concevoir vos wireframes.

Cela vous permettra non seulement de les modifier facilement si besoin, mais aussi de partager ces wireframes avec votre équipe (ou avec votre cousine qui bosse dans le webmarketing).

Je ne peux que vous recommander 2 outils pour ce faire :

  • MockFlow, un outil en ligne bien pratique et gratuit.
  • Balsamiq Mockups 3, un logiciel payant, mais dont la version d’essai gratuite de 30 jours vous laisse aisément le temps de concevoir des wireframes bien ficelés.

Et à ce stade, vous avez une idée un peu plus claire de ce qui vous attend pour la refonte de votre site.

Concevoir ses maquettes

Là où les wireframes vont vous donner une vision de la structure de vos pages refondues, les maquettes vont y intégrer le design en tant que tel.

Créé via un logiciel de mise en page (comme par exemple InDesign), le maquettage de vos pages web peut demander une certaine technicité, et est une étape assez chronophage.

La question suivante se pose donc : avez-vous réellement besoin de créer des maquettes graphiques pour votre refonte ? La réponse est simple :

  • Oui, si vous voulez créer votre propre thème. Dans ce cas, il va vous falloir designer votre site web refondu de A à Z, et donc pouvoir visualiser tous les éléments graphiques aisément.
  • Non, si vous souhaitez simplement utiliser un thème existant et le relooker. Une solution plus simple, surtout avec l’ebook qu’a créé Alex, “Relooker son thème”. Mais dans ce cas, veillez à bien choisir votre nouveau thème au regard de vos objectifs.

L’astuce de Maxence Barbou, développeur WordPress aguerri :
“Parmi les éléments à surveiller lors de votre choix de thème, n’oubliez pas de vérifier :

  • Que votre thème est optimisé pour le référencement ;
  • Qu’il soit optimisé pour tous les navigateurs utilisés par les internautes (a minima Chrome, Safari, Firefox, Internet Explorer 11, et EDGE) ;
  • Qu’il soit responsive, c’est-à-dire optimisé pour tous les supports (écran de bureau, smartphone et tablette).

Cela vous évitera des déboires lors de la refonte de votre site !”

Bien penser sa nouvelle arborescence

Oui, je vous rassure, on parle toujours bien de refonte de site web, et non d’horticulture !

Concevoir son arborescence, c’est imaginer les liens qui vont exister entre les différentes pages, et réfléchir à toutes les manières dont un visiteur peut s’orienter dans son site.

En somme, en créant votre arborescence, vous réfléchissez aux différents parcours de navigations de vos utilisateurs.

Alors comment faire ?

Concevez un schéma d’arborescence, en pensant notamment à y inclure :

  • Votre menu de navigation principal, ainsi que vos potentiels menus secondaires ;
  • Votre pied de page (ou footer), et les liens qu’il peut contenir ;
  • Vos éventuelles barres latérales, notamment sur votre blog ;
  • Les différentes catégories de votre blog…
Votre schéma d'arborescence vous permettra de créer vos parcours utilisateurs

Le schéma d’arborescence de la version actuelle de la Marmite

Avec un tel schéma, pas question d’oublier de créer un maillage bien ficelé entre vos différentes pages, gage d’une expérience utilisateur fluide.

Tout comme les wireframes, vous pouvez créer ce schéma sur une feuille de papier, ou utiliser un outil en ligne comme GlooMaps.

Concevoir son cahier des charges

Bien, à cette étape, vous voilà bien fourni en éléments structurants. Il est donc temps de rassembler tout ceci dans un document-clé : un cahier des charges.

Le cahier des charges de la refonte de votre site web est un document très extensif, qui vous permet de bien cibler les différentes attentes que vous avez pour votre refonte de site web.

Vous trouverez sur le web de nombreux modèles de cahiers des charges. Quoiqu’il en soit, le vôtre doit impérativement contenir :

  • Une description de votre projet et de votre entreprise, ainsi que le rôle que joue votre site dans ce projet
  • La cible à laquelle s’adresse votre nouveau site, décrite avec précision si possible
  • Les objectifs de votre refonte, illustrés autant que possible par des chiffres. Si l’un de vos objectifs est par exemple d’augmenter votre trafic, pensez à préciser le trafic de votre site actuel.
  • Les éléments à récupérer sur votre site actuel : le contenu de vos pages, les éventuelles images…
  • Les pistes graphiques que vous souhaitez suivre. Pour cela, intégrez vos wireframes et maquettes à votre cahier des charges, ainsi que votre charte graphique.
  • Les éléments fonctionnels nouveaux de votre site refondu, comme l’ajout d’une boutique en ligne, d’un blog, d’un module d’opt-in, d’une nouvelle administration…
  • Les grands jalons de votre projet de refonte : quand souhaitez-vous avoir un aperçu de votre site ? Quand souhaitez-vous qu’il soit mis en ligne ?

On y voit tout de suite beaucoup plus clair, n’est-ce pas ?

Votre cahier des charges guidera votre refonte de site WordPress tout au long du process

3. Penser aux ressources à sa disposition

Allez, c’est le moment de rentrer dans le concret.

Votre défi, si vous l’acceptez, est désormais de lister les ressources que vous avez à disposition en termes de :

  • Budget : combien voulez-vous investir dans votre refonte ?
  • Temps : combien de temps avez-vous face à vous pour refondre votre site WordPress ?
  • Compétences : avez-vous la capacité d’atteindre vous-même tous vos objectifs ?
  • Outils : plugins, thèmes, constructeurs de page… Ce type d’outils peuvent-ils vous aider à atteindre vos objectifs, même si vos compétences techniques en matière de web sont limitées ?

Cette liste va vous permettre de savoir si vous allez devoir faire appel à un prestataire externe, ou si vous estimez pouvoir travailler en autonomie, avec les membres de votre équipe ou par vos propres moyens.

4. Créer un plan de redirection

“Bon, on y va, ça y est !”

Tout doux ! Une dernière étape, trop souvent négligée pendant la refonte d’un site Internet, doit être suivie : celle de la création de votre plan de redirection.

Je m’explique.

Souvent, dans la refonte d’un site web, on constatera des changements d’URL. Ce sera notamment le cas si vous créez de nouvelles pages.

Or, que se passe-t-il si vous mettez en ligne votre nouveau site sans penser à faire vos redirections ? Des erreurs 404 à la pelle, qui vont impacter votre SEO et la navigation de vos visiteurs. Ou comme le dirait si bien Maxence Barbou, “créer un creu intersidéral dans votre référencement”.

Pour concevoir votre plan de redirection, rien de plus simple : il vous suffit d’ouvrir Excel ou Google Sheets, et de créer un tableau comme suit :

Créer un plan de redirection pour votre refonte de site WordPress : l'étape trop négligée

Attention à ne pas faire n’importe quoi dans la structure de vos URL. Mieux vaut ne pas jouer avec le feu.

Une fois que votre site sera en ligne, vous pourrez mettre en place le plugin Redirection, et importer ce tableau directement.

Malin, n’est-ce pas ?

Allez : respirez donc un bon coup, et passons à la refonte en tant que telle.

Les 3 étapes pour lancer sa refonte

Comment allez-vous donc passer à l’action, maintenant que votre projet est bien structuré, bien organisé ? Ces 3 étapes indispensables vont vous guider.

1. Choisir de travailler en local ou directement sur son site actuel

Avant de vous lancer dans l’aspect technique, commencez par choisir de travailler :

  • soit directement sur votre site actuel, et d’y intégrer les changements “en direct” ;
  • soit de travailler sur des serveurs de développement et de pré-production, pour tester en amont votre nouveau site avant de le donner à voir à votre public.

Qu’est-ce que ces deux options supposent ?

Travailler en ligne directement sur son site est barbare.

Dans ce cas, tous vos visiteurs voient les changements en direct, et font office de “cobayes” de vos nouvelles fonctionnalités… avec tous les bugs que cela peut induire. À noter également que si une erreur survient lors des modifications, cela impactera le site jusqu’à ce que vous ayez détecté et résolu le problème. Site indisponible, fonctionnalité qui ne marche pas… outch.

Ne pas travailler en local pour sa refonte de site web : la fausse bonne idée

Pour éviter tous ces déboires, vous pouvez travailler en local.

Les avantages de travailler en local sont nombreux :

  • Faire vos modifications en toute sécurité ;
  • Tester vos plugins sans risque ;
  • Avoir un aperçu du rendu final avant la mise en ligne.

C’est d’ailleurs la solution idéale si vous souhaitez garder l’administration de WordPress telle que vous l’avez actuellement configurée.

Si vous souhaitez cependant repartir de zéro, dans une administration totalement nouvelle, n’hésitez pas à suivre le guide que la Marmite vous avez concocté à ce sujet.

L’astuce de Maxence Barbou, qui travaille toujours en local : “Bien sûr, vous pouvez récupérer des éléments de votre ancien site, grâce à un plugin comme UpdraftPlus ou Duplicator. Ces plugins vous permettent d’importer de nouveau sur votre admin ce que vous souhaitez : votre contenu, vos thèmes, vos extensions, vos médias…”

2. Acquérir les outils nécessaires à la refonte

Voilà venu le moment pour vous de lister et de vous procurer tout ce dont vous aurez besoin pour prendre en charge votre refonte de site WordPress.

Souvenez-vous : vous en avez fait la liste dans votre cahier des charges.

Il peut s’agir :

  • D’un nouveau thème, si l’un des nombreux disponibles sur le web vous a tapé dans l’oeil (comme Divi);
  • D’un constructeur de page, comme Elementor ou Beaver Builder, si vous souhaitez éviter de mettre les mains dans le code ;
  • De nouveaux plugins, pour intégrer des fonctionnalités épatantes.

Vous séchez un peu sur les plugins à utiliser ? Peut-être que votre bonheur se trouve dans la série “Bonjour Plugin” de la Marmite : jetez-y un coup d’oeil avisé !

Votre boîte à outils est prête ? Installez-moi donc tout ça, et passons à la dernière étape cruciale de votre refonte : les contenus.

3. Préparer les contenus de son nouveau site

Tout d’abord, un point crucial à ne pas oublier.

Lors d’une refonte de site web, il y a forcément des contenus du site précédent que l’on peut récupérer.

Images, textes, configuration de plugins… Pensez-y !

Faites donc une sauvegarde de votre site WordPress actuel, et gardez ce que vous voulez mettre dans votre refonte sous le coude.

Cependant, j’imagine que, si vous faites une refonte, c’est également pour modifier le contenu de votre site, pour le rendre plus pertinent, plus attractif pour vos cibles… et pour les moteurs de recherche, bien sûr !

Penchez-vous donc sur votre stratégie SEO, tellement importante pour bien référencer votre nouveau site, si canon.

S’il est complexe de résumer la démarche à suivre, je peux cependant vous en donner les grandes lignes ici :

  • D’une part, définissez les mots-clés sur lesquels vous voulez vous positionner. Il s’agit des expressions que vos cibles entrent spontanément sur Google, pour trouver les informations qu’elles recherchent.
  • D’autre part, déterminez où il vous faut les intégrer, sur chacune des pages. Vos balises de titre <hn>, ou le texte alternatif des images, doivent par exemple être optimisées pour le référencement : Google en est friand, c’est là qu’il va chercher à comprendre votre site en priorité !
  • Une fois ces nouveaux contenus intégrés au site web refondu, vous pourrez ainsi vérifier que tout est bien en place. Pensez notamment aux noms des images, aux titres et meta-descriptions des pages, qui sont trop souvent négligés.

Référencer un site est un métier à part entière. Cependant, avec quelques bonnes pratiques, il est possible de bien se débrouiller, et de remonter dans les requêtes de ses cibles avec succès.

Si ce sujet vous intéresse, la Marmite vous propose une formation vraiment opérationnelle, qui vous donne des conseils concrets sur le SEO et WordPress. Et elle porte bien son nom : “Enfin visible grâce au référencement” !

De fil en aiguille, sur votre serveur de développement, en local, et avec tous les outils WordPress nécessaires, vous voyez avancer votre projet… et votre mise en ligne approche.

Une bonne stratégie SEO, et vous êtes prêts à faire la refonte de votre site web avec succès

Les 3 étapes pour une mise en ligne optimale

Je vous sens fébriles à l’idée de dévoiler à la face du monde votre nouvelle création WordPress.

Prenez le temps de consulter ces 3 étapes, et de bien les suivre : vous vous en féliciterez par la suite, promis.

1. Choisir une mise en production directe, ou sur un serveur de pré-production

L’expression “serveur de pré-production” ne vous dit rien ? Pas de souci, faisons une petite pause définition.

Un serveur de pré-production partage le même serveur que celui sur lequel sera votre site une fois mis en ligne. Si la Marmite se mettait à sa refonte, Alex pourrait par exemple choisir de mettre sa pré-production à l’adresse preprod.wpmarmite.com : il s’agirait du même environnement que wpmarmite.com.

Pourquoi donc utiliseriez-vous ce serveur de preprod ?

  • Pour faire valider votre refonte à votre client, si vous êtes développeur WordPress ;
  • Pour tester les éventuels bugs avant que le site ne soit en ligne ;
  • Pour ajuster votre stratégie SEO, en vérifiant que tous vos mots-clés sont bien intégrés à chaque page.

Une fois que tout ceci est validé, à ce moment seulement, vous pourrez passer en production, et déployer votre nouveau site. Si vous êtes sûr de vous, vous pouvez bien sûr choisir de passer en production directe.

L’astuce d’Alex, qui connaît bien le sujet : “Pendant que votre site est en déploiement, pensez bien au fait que vous devrez activer le mode maintenance, le temps de pouvoir redonner accès à votre site aux visiteurs.

Pour ce faire, n’hésitez pas à consulter la sélection de plugins “Coming Soon que Thibaut avait faite sur la Marmite. Vous pourrez ainsi afficher des pages de maintenance, et même continuer de convertir des visiteurs malgré votre refonte en cours.”

2. Faire un recettage des éventuels problèmes de votre nouveau site

Depuis votre serveur de pré-production (ou en direct, si vous êtes un aventurier de WordPress), il vous faudra bien tester votre nouveau site web.

La clé pour réussir ce recettage d’éventuels problèmes : vous mettre dans la peau d’un visiteur lambda, cliquer partout, et noter tous les soucis rencontrés..

Vous verrez sans doute apparaître des problèmes de design et de structure. Mais n’oubliez pas également de vérifier :

  • Les redirections qui n’ont pas été faites, et engendrent des liens morts ou des pages blanches ;
  • La performance du site, en le testant sur GTMetrix, Pingdom, ou encore le test PageSpeed de Google ;
  • Les points d’opt-in, en vérifiant s’ils fonctionnent bien ;
  • Les formulaires de contact, de devis… ;
  • Le paiement, si vous avez un site e-commerce (y compris les emails de confirmation, l’accès au site membre…).

Tout est beau, fonctionnel, bien connecté et bien ficelé ? Bravo ! L’ultime étape va parfaire le grand sourire que je vois d’ici sur vos visages.

Vous avez presque fini la refonte de votre site WordPress : alors, heureux ?

3. Réactiver et reconnecter tous les services tiers

Courage, vous y êtes presque !

Vous allez pouvoir désormais réactiver tous les services et plugins liés à votre site WordPress. Pensez notamment à :

Et parce que la sécurité est l’affaire de tous (et surtout de vous), pensez à bien réactiver tous les éléments qui sécurisent votre site web. Mais si, souvenez-vous, tout ce dont vous parlaient Alex et Julio dans les Points Secu !

Prêts ? Lancez finalement l’indexation de votre nouveau site sur la Google Search Console. Cette manipulation force les robots de Google à passer voir votre nouveau bébé, et à ainsi le référencer plus rapidement dans sa nouvelle version.

Tadam ! Redesigné, plus performant, plus percutant, mieux structuré, votre nouveau site est prêt à accueillir le trafic qu’il mérite. C’était du boulot, mais ça valait le coup, n’est-ce pas ?

Et vous, vous avez mené une refonte de site Internet WordPress récemment ? Quelles sont les problèmes que vous avez rencontré, ou les fiertés que vous en avez tiré ? Dites-nous tout en commentaire : l’équipe de la Marmite les lit tous avec attention.

Si vous avez apprécié cet article, inscrivez-vous à la newsletter

Recevez gratuitement les prochains articles et accédez à des ressources exclusives. Plus de 20 000 personnes l'ont fait, pourquoi pas vous ?

C'est parti, je m'inscris !

9 commentaires Ajoutez le vôtre

  1. Merci pour ce super article, Eléonor. J’étais justement en train de me faire une petite liste de choses à faire pour mon site. Et ben voilà. Je l’ai.
    Merci

    Répondre
  2. Hello Alex,

    Mon site est en ligne, et je désire changer de thème, je suis sur the ken (T forest Evano)et compte passer à Thème Maker (un genre de Divi que je possède). je sais que c’est délicat, mais mon site en est à son début, et ne contient pas énormément de choses (eskelis.com). Serait il judicieux que je travaille en local avec Flywheel par exemple? Que pense tu de du plugin « WP standing » ? https://wp-staging.com

    A savoir que mon but est de pouvoir travailler mon site en copie local, pendant que mon site actuel reste en ligne. Et aussi me faire la main (j’ai la formation WP chef, je vais revenir devant et voir si on en parle.

    Merci.

    Patrick.

    Répondre
    • Bonjour, ton idée de le faire en local de cette manière est bonne 😉

  3. Bonjour l’équipe de la Marmite, j’avais une question concernant la refonte de son site wordpress… Vous tombez à pic 😉

    Je travaille sur mon nouveau site en local (avec flywheel) pour l’instant, mais j’ai remarqué que l’url de celui-ci n’était pas par défault en https (ça donne > http://monsite.local/).

    Sachant que mon site actuellement en ligne est lui bien en https, que va-t-il se passer quand je vais le remplacer par mon site local ? Vais-je devoir recommencer le passage en https avec Search en Replace DB ?

    Tellement de choses à penser ! Merci pour cet article 🙂

    Répondre
    • Bonjour, normalement tu n’auras pas à réinstaller un certificat SSL donc pas d’inquiétude.

  4. Bravo pour cet article. Pour ma part, j’ai refait mon blogue sur un autre URL (j’ai trouvé une bonne étoile qui avait ça sous la main et du temps pour m’aider) puis j’ai fait un « transfert » avec all in one WP Migration
    C’était tellement stressant et tellement de travail ! pour l’occasion je suis passée a DIVI, j’ai surement oublié des choses, peut être même du SEO, mais c’était une belle aventure. Pas certaine par contre que je me relance dedans de si tôt !

    Répondre
  5. Super boulot, très détaillé qui me conforte dans l’idée de vous suivre à chacun de vos articles … ,-)

    Répondre
  6. Eh ben ton article tombe au bon moment pour moi, je dois justement faire la refonte d’un site (déjà bien référencé), et je m’apprêtais à aller à la chasse aux check-lists pour ne rien oublier !

    Répondre
  7. Personnellement je ne fais pas la refonte des sites en local, mais sur un site que j’utilise uniquement pour les clients et les tests (site protégé par mot de passe et non indexable par Google).

    Une fois le site fini je le transfère sur le bon espace avec ManageWP.

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

La Marmite ne peut malheureusement pas fournir de support. Merci d'en tenir compte dans votre commentaire 😉

Si vous ne lui en voulez pas, donnez-lui un j'aime sur Facebook :



suscipit Aenean eleifend dictum at venenatis Lorem porta.
143 Partages
Partagez74
Tweetez69
Partagez