Le Blog Maintenance WP

Comment faire une refonte de site WordPress réussie

5 juillet 2024 | Développement de sites WordPress

Lancé, il y a quelques années, votre site internet commence à tirer la langue. Vous en êtes convaincu : il a besoin d’un bon coup de peinture

Son contenu est obsolète. L’affichage sur mobile laisse à désirer. Les pages se chargent trop lentement. Pire : le trafic généré depuis Google tombe en désuétude.

Pas de doutes : une refonte de site WordPress est nécessaire ! Oui mais voilà. Vous savez que cette opération technique peut s’avérer très périlleuse si elle n’est pas réalisée correctement. 

Cet article est là pour vous aider. À la fin de votre lecture, vous connaîtrez toutes les étapes à suivre pour réussir une refonte professionnelle sans saccager votre site existant. 

Et grâce à notre tutoriel complet adapté aussi bien aux débutants qu’aux profils plus aguerris, vous disposerez d’exemples concrets de ce qu’il faut faire ET ne pas faire lors d’une refonte.

Qu’est-ce qu’une refonte de site WordPress ?

Une refonte de site WordPress est une opération technique qui a pour objectif d’améliorer et de moderniser un site internet avec deux visées majeures : 

  1. S’adapter aux besoins de vos utilisateurs.
  2. Répondre à vos objectifs : faire plus de ventes sur votre boutique en ligne, présenter de façon plus claire vos services, obtenir plus de demandes de devis, inciter au téléchargement d’un livre blanc, stimuler les inscriptions à votre newsletter etc. 

Engager un processus de refonte peut vous permettre d’agir à plusieurs niveaux : 

  • modifier l’interface utilisateur (UI) pour plus d’ergonomie et de clarté au niveau de la navigation ; 
  • améliorer les performances (vitesse de chargement de vos pages) pour rendre l’expérience utilisateur (UX) plus agréable ;
  • optimiser le référencement naturel (SEO) pour faire plus de visites et maximiser le trafic sur vos pages ; 
  • mettre à jour votre contenu pour refléter les changements survenus dans votre coeur de métier ; 
  • intégrer de nouvelles fonctionnalités.
Une refonte de site WordPress efficace doit prendre en compte l'aspect UX.

En fonction de vos attentes, de vos compétences techniques, du temps dont vous disposez et de votre budget, vous pouvez prendre en main un ou plusieurs des aspects présentés ci-dessus. 

Reste à savoir comment mener tout cela de front. Découvrez comment procéder dans les parties suivantes. 

Phase 1 : Quelles sont les étapes à suivre avant une refonte ?

Avant-propos : Les différentes étapes de refonte de site WordPress présentées ci-dessous constituent en quelque sorte un canevas idéal à suivre. Considérez-les comme une feuille de route complète qui peut néanmoins être malléable. Il vous sera par exemple inutile de créer des maquettes, des wireframes et d’intégrer un nouveau design si vous souhaitez « simplement » retravailler le SEO de votre site web. Montrez-vous flexible et agile, et réappropriez-vous les méthodes présentées dans cet article en fonction du contexte. 

Définissez les objectifs de la refonte de site WordPress

L’importance de l’audit de l’existant 

Dans un premier temps, il est essentiel d’identifier pourquoi vous souhaitez mener une refonte de site WordPress. Cela vous permettra de savoir si cette opération est nécessaire et justifiée. 

Pour cela, nous vous recommandons d’auditer votre site existant. Vous décélerez des points bloquants et axes d’amélioration.

Afin de vous aider, concentrez-vous en priorité sur les éléments constitutifs de « base » d’un site WordPress professionnel et performant, en vous questionnant à plusieurs niveaux : 

  • la structure et le webdesign. La navigation est-elle intuitive ? L’ergonomie est-elle bien pensée ? Le webdesign reflète-t-il votre image de marque ? Est-il adapté à votre charte graphique  ;
  • la performance. Vos pages se chargent-elles rapidement ? Utilisez un outil comme Google PageSpeed Insights pour le savoir. 
  • la stratégie SEO. Le trafic généré sur votre site est-il à la hauteur de vos espérances ? Est-il en baisse depuis plusieurs mois ? Le site web est-il optimisé pour les moteurs de recherche. Servez-vous par exemple d’outils comme Google Analytics et la Google Search Console pour analyser votre trafic et identifier les points bloquants. 
  • la sécurité. Votre CMS WordPress est-il protégé contre les virus, malwares et autres failles de sécurité ? Avez-vous mis en place les bonnes pratiques à ce niveau ?
  • le contenu. Vos pages reflètent-elles au plus près l’évolution de votre activité ? Si vous avez un blog, vos articles répondent-ils à l’intention de recherche et aux besoins de vos utilisateurs ? ;
  • les fonctionnalités. Voulez-vous ajouter de nouvelles options (création d’une boutique en ligne avec WooCommerce, passage au multilinguisme etc.) ? Celles déjà présentes sur votre site sont-elles toujours en état de marche ?
Une refonte de site WordPress doit intégrer une réflexion SEO en amont.

Pensez aussi au temps et au budget

En fonction de ce que vous allez découvrir, vous pourrez plus facilement définir vos aspirations, que vous pouvez lister dans un outil de travail collaboratif comme Google Docs, Google Sheets, Trello ou Asana.

Par exemple, si vous jugez que votre site ne reçoit pas assez de visites mensuelles, ce qui impacte négativement vos conversions, l’objectif principal de votre refonte de site WordPress consistera à améliorer la stratégie SEO.

En parallèle, n’oubliez pas de réfléchir au budget que vous souhaitez allouer à votre refonte. L’opération sera par exemple plus chère si vous faites appel à un professionnel, plutôt que si vous vous en chargez tout seul.

Pensez aussi à intégrer les coûts des différents outils, comme WordPress ou un constructeur de page type Divi Builder ou Elementor, si vous désirez créer un nouveau webdesign.  

Enfin, liez vos objectifs au facteur temps. Quelles sont vos disponibilités pour mener à bien ce projet, et surtout dans quel délai pouvez-vous le réaliser ?

Notre astuce : Pour encore plus de clarté, fixez-vous des objectifs avec des indicateurs SMART (spécifiques, mesurables, atteignables, réalistes et temporellement définis). Dans le cadre d’une refonte ayant pour objectif majeur l’amélioration du référencement naturel, un objectif SMART pourrait être : « Je souhaite augmenter le trafic organique sur mon blog de 30 % au cours du premier semestre de l’année en cours. » 

Créez la nouvelle structure de votre site

L’arborescence

Une fois vos objectifs définis, attaquez-vous à un élément incontournable de la refonte de site WordPress : l’arborescence de votre site web.

Cette dernière désigne désigne la façon dont vos contenus sont organisés, catégorisés et reliés entre eux.

Ce « squelette », organisé sous la forme d’un schéma, permet notamment : 

  • d’améliorer l’expérience utilisateur, en permettant à vos visiteurs de trouver facilement ce qu’ils recherchent grâce à une navigation fluide et ergonomique ;
  • de soigner le SEO, grâce à une structure hiérarchisée et organisée autour de thématiques bien ciblées. Cela permet notamment de faciliter le travail d’exploration et d’indexation des moteurs de recherche comme Google.

Afin de concevoir une arborescence efficace, appuyez-vous sur vos objectifs définis en amont. Puis prenez en compte votre audience cible, afin de répondre à ses besoins et résoudre ses problèmes.

Pour cela, créez un persona – une représentation fictive de votre client idéal – à l’aide d’un outil dédié comme celui-ci

Enfin, étudiez ce que proposent vos concurrents et inspirez-vous de ce qui fonctionne bien chez eux pour l’appliquer à votre sauce sur votre propre site WP. 

Au niveau des outils à utiliser pour façonner votre arborescence, nous vous recommandons de vous servir d’un logiciel dédié comme GlooMaps (gratuit), MindMeister (freemium), ou DYNO Mapper (payant). 

Les wireframes et les maquettes de votre refonte de site WordPress

Dans la foulée, passez à l’étape de représentation graphique de votre arborescence. Cela vous permettra de visualiser l’apparence de votre site web avec plus ou moins de détails. 

Dans l’ordre, nous vous recommandons tout d’abord de concevoir des wireframes. Il s’agit de croquis fonctionnels et schématiques présentant les différents éléments structurels d’une page.

Ils permettent de représenter l’interface utilisateur (UI) de façon plus claire et détaillée qu’avec votre arborescence.

Un exemple de wireframes, utiles pour la refonte d'un site WordPress.
Un exemple de wireframes.

Vous pouvez concevoir vos wireframes avec des outils en ligne comme MockFlow (gratuit), ou Balsamiq (payant).

Si besoin, il est possible d’intégrer votre design dans des maquettes avec un outil comme Figma (freemium), Sketch (payant) ou Adobe XD (payant).
Cette étape sera indispensable si vous souhaitez réaliser une refonte graphique de votre site de A à Z. Dans ce cas, pensez à redéfinir ou à concevoir une charte graphique. 

Si vous souhaitez seulement retoucher certains éléments visuels d’un thème existant, vous pouvez faire l’impasse sur cette étape des maquettes. A vous de voir. 

Figma permet de créer des maquettes lors de la refonte d'un site WordPress.
L’outil Figma.

Notre conseil : Outre les outils dont vous aurez besoin pour travailler sur le webdesign de votre site, pensez à faire le point sur les solutions techniques à utiliser sur votre site refondu. Si vous changez de thème, préférez un thème rapide, léger et évolutif comme Astra ou GeneratePress. Réfléchissez aussi aux plugins dont vous avez besoin (consultez par exemple notre sélection des meilleures extensions de sécurité).  

Élaborez un plan de redirection

Lors de la refonte de votre site WordPress, il y a de fortes chances que des changements interviennent dans la structure de vos URLs. Ce sera par exemple le cas si : 

  • vous supprimez des pages ; 
  • vous créez de nouvelles pages ; 
  • vous modifiez l’URL de certaines pages, catégories ou étiquettes ; 
  • vous passez au HTTPS etc.

Afin de conserver votre trafic actuel et d’éviter l’apparition d’erreurs 404 qui pénaliseront vos efforts SEO et l’expérience utilisateur, la création d’un plan de redirections est indispensable.

Pour le créer, servez-vous d’un fichier Excel classique séparé en trois colonnes. Vous y listerez :

  • les URLs sujettes à des changements (anciennes URLs) ; 
  • les nouvelles URLs (celles qui seront présentes sur le site refondu) ;
  • les redirections à effectuer. Une redirection 301 permet par exemple d’éviter une erreur 404, tout en transférant la popularité de vos anciennes pages vers les nouvelles. 

Notre conseil : Si vous disposez d’un petit site (vitrine, blog) avec quelques dizaines d’URLs, vous pouvez procéder manuellement. Pour des sites de taille plus importantes, comme un gros ecommerce, préférez un audit complet avec des outils dédiés comme Screaming Frog, Semrush ou Ahrefs

Créez un cahier des charges

Si jamais vous réalisez un projet de refonte de site WordPress pour un client, nous vous recommandons de compiler la plupart des étapes que nous venons de vous présenter dans un cahier des charges

Il s’agit d’un document écrit qui présente les éléments majeurs liés à un projet de création ou de refonte d’un site WordPress.

Il détaille notamment les besoins, contraintes, idées, concepts et buts de la personne ou de l’entreprise souhaitant concevoir ou refondre un site internet. Pour savoir comment le mettre sur pied, consultez notre guide dédié sur le sujet.  

Maintenant que votre projet de refonte de site WordPress est bien balisé, voyez comment faire pour lancer techniquement les opérations. 

Phase 2 : le lancement de votre refonte de site WordPress 

Définissez et mettez en place l’environnement de travail adéquat

Le premier conseil que nous pouvons vous donner consiste à éviter à tout prix – sauf pour des retouches très mineures – de travailler sur votre site en production. 

Ainsi, vous vous mettez à l’abri face à l’éventualité de rencontrer des bugs et autres dysfonctionnements qui pourraient rendre votre site indisponible, et impacter négativement votre image de marque. 

Pour gagner en tranquillité d’esprit et travaillez sereinement, deux options principales sont à votre disposition :  

  1. Effectuer la refonte de votre site WordPress en local, c’est-à-dire sur votre machine. Pour cela, appuyez-vous sur un outil comme WAMP, Local ou DevKinsta.
  2. Utiliser un environnement de développement. Vous pouvez soit travailler sur un sous-domaine ou un sous-répertoire créé sur l’interface d’administration de votre hébergeur. Ou bien mettre en place un environnement de staging à l’aide d’une extension comme WP Staging, par exemple.
L'outil Local permet de créer des sites en local lors d'une refonte de site WordPress.
L’outil de développement Local.

Notre conseil : Si vous êtes un utilisateur de WordPress débutant ou rétif à la technique, partir sur un environnement de travail en local est un bon compromis. 

Pour ce qui est des actions à mener, tout dépendra de ce que vous souhaitez faire : 

  • soit partir de zéro et recréer un nouveau site. Dans ce cas, vous devrez installer WordPress, le configurer, paramétrer votre thème et vos extensions. On vous récapitule ce qu’il faut faire dans cet article ;
  • soit copier un site déjà existant et le modifier en fonction des intentions que vous aurez définies plus tôt. Pour copier votre site de l’environnement en ligne vers le local, servez-vous par exemple d’un plugin comme All-in-One WP Migration ou Duplicator

Notre conseil : Avant de procéder à une quelconque manipulation technique, sauvegardez votre site (fichiers + base de données) ! En cas de problème, vous pourrez le restaurer en un clic. Vous pouvez vous servir d’un plugin WordPress de sauvegarde comme UpdraftPlus, ou d’une solution de maintenance complète comme WP Umbrella

Intégrez le design, le contenu et les fonctionnalités

Une fois que votre environnement de travail est prêt, l’éventail des actions à mener va dépendre, encore une fois, de vos objectifs initiaux.

S’il est impossible de vous détailler ici tous les cas de figure possibles, découvrez quand même quelques cas généraux qui pourront vous aiguiller au moment de passer à l’action : 

  • implémentez le design créé sur vos maquettes au niveau du site site à refondre. Si vous travaillez avec l’éditeur de site de WordPress (Gutenberg), vous devrez par exemple créer des blocs et autres templates de pages. La logique sera sensiblement la même avec un page builder ;
  • ajoutez les fonctionnalités de votre choix : formulaire de contact, barre de recherche, fenêtres pop-up, boutique ecommerce, conformité RGPD etc. Pour cela, configurez et testez les plugins adéquats ;
  • intégrez et/ou modifiez votre contenu, que ce soit sur vos pages stratégiques ou au niveau de votre blog. Nous pensons bien sûr au format texte, mais aussi aux images et autres vidéos. Attention à leur poids ! Optimisez par exemple vos images à l’aide d’une extension comme Imagify.  
  • mettez en œuvre les meilleures pratiques de référencement (balises méta, URL optimisées, sitemap XML, fichier robots.txt etc.). Pour cela, utilisez une extension dédiée comme Yoast SEO, Rank Math ou SEOPress.
Yoast SEO est un plugin de SEO pour WordPress.

Notre conseil : Avant de créer du nouveau contenu ou de modifier des textes déjà présents sur le site à refondre, élaborez une stratégie SEO. Réfléchissez par exemple aux mots-clés sur lesquels vous souhaitez être trouvé par vos cibles à l’aide d’outils dédiés comme Semrush, Ahrefs ou le planificateur de mots-clés de Google. 

Vous approchez de la fin de ce fastidieux processus de refonte de site WordPress. Même si tout vous semble fonctionner comme sur des roulettes, il est bon de prendre encore quelques précautions avant de publier définitivement votre nouveau site en ligne. C’est l’objet de la dernière partie de ce contenu. 

Phase 3 : La publication de la refonte en 4 étapes 

Passez votre site de test en préproduction (et testez-le)

Pour commencer cette troisième phase de refonte de site WordPress, passez votre site de test sur un environnement de préproduction (aussi appelé staging).

Dans ce cas, vous basculez le site que vous venez de refondre en local – par exemple – sur un serveur en ligne (chez votre hébergeur de confiance) qui dispose des mêmes caractéristiques que celui qu’aura votre site une fois en production.

Seuls vous-même et votre client y auront accès, pas vos visiteurs. Vous pourrez tester et vous assurer que tout fonctionne correctement, avant la mise en ligne définitive. 

Voici les étapes à suivre pour créer un environnement de préproduction : 

  • sauvegardez votre site en production (fichiers + base de données) ; 
  • créez un environnement de préproduction en configurant soit un sous-domaine (ex : staging.votresite.fr), soit un sous-répertoire (ex : votresite.fr/staging) ;  
  • clonez votre site vers l’environnement de staging soit manuellement, soit à l’aide de l’une des extensions de migration évoquées précédemment ; 
  • testez votre site. Dans le jargon informatique, on parle de recettage. Vérifiez que toutes les fonctionnalités du site marchent correctement (boutons, liens, formulaires, menu, plugins etc.). Profitez-en pour contrôler que votre site s’affiche correctement sur les principaux navigateurs et sur différentes tailles d’écrans (aspect responsive).
Lors de la publication d'une refonte de site WordPress, il est bon d'opérer des vérifications.

Mettez votre site en maintenance 

Vous avez effectué les vérifications d’usage ? Il est temps de mettre votre ancien site en mode maintenance, juste avant de passer de la préproduction à la production. 

Mettre votre site en maintenance recèle plusieurs avantages :

  • vous ne détériorez pas l’expérience utilisateur de vos visiteurs, puisque votre site sera indisponible pendant la transition (de la préprod à la prod) ;
  • vous communiquez de façon transparente avec votre cible, en lui indiquant qu’une opération de maintenance est en cours pendant tel laps de temps ;
  • si des erreurs ou des bugs se produisent, personne ne le saura (sauf vous) avec un site en maintenance. Cela vous évite d’abîmer votre image de marque. 

Quelles solutions pour basculer en mode maintenance lors d’une refonte de site WordPress ?

Pour passer votre site en mode maintenance, vous pouvez : 

  • vous servir d’un plugin dédié comme SeedProd ou Maintenance
  • utiliser un modèle de page maintenance proposé par votre thème ou votre constructeur de page favori ; 
  • ajouter un morceau de code dans votre fichier .htaccess, ou dans le fichier functions.php de votre thème enfant ; 
  • activer le mode maintenance de WordPress sur l’interface d’administration proposée par votre hébergeur, type cPanel.
SeedProd est un plugin de maintenance sur WordPress.

Déployez le nouveau site en ligne

Cette fois, tout est bon. Vous pouvez (enfin) migrer votre site en ligne en respectant les étapes suivantes : 

  • sauvegardez votre site. On se répète là-dessus, mais on n’est jamais trop prudent ;
  • envoyez le site de la préproduction vers l’environnement de production. Vous êtes un technicien aguerri ? Vous pouvez y aller manuellement si vous êtes sûr de ce que vous faites. Pour éviter les erreurs et aller encore plus vite, misez sur un plugin comme All-in-One WP Migration ou Duplicator. 
  • réactivez vos extensions et outils tiers, comme vos plugins de cache, de sécurité et d’analyse de trafic comme Google Analytics ; 
  • redirigez toutes les URLS contenues dans votre plan de redirection. Pour effectuer une redirection 301 (la plus classique), servez-vous soit du plugin Redirection, soit de votre extension SEO favorite (Rank Math propose par exemple cette option gratuitement) ; 
  • recettez une nouvelle fois votre site à l’aide des conseils donnés précédemment. Vérifiez que tout est configuré correctement et testez tout !

Notre conseil : Certaines extensions de migration vous limitent en termes de taille de fichiers à migrer. Si vous avez un site avec des ressources conséquentes, vous risquez d’être bloqué avec leur version gratuite. Dans ce cas, passez sur leur version premium ou faites-vous accompagner par un expert comme Maintenance WP pour migrer manuellement.
Et si possible, ne déployez pas votre site en ligne le week-end ou la veille d’un week-end. En cas de problème, vous seriez embêté…

Assurez le suivi de votre refonte de site WordPress

Une fois votre refonte de site WordPress en ligne, pensez à effectuer quelques actions post-lancement indispensables : 

  • surveillez le fonctionnement de votre site, en particulier dans les jours et heures suivant la refonte. Corrigez rapidement tout bug ou problème identifié ; 
  • soyez attentif aux retours de vos utilisateurs, qui peuvent vous faire remonter d’éventuels dysfonctionnements ;
  • contrôlez les performances de votre site (vitesse de chargement, trafic SEO, conversions etc.) ; 
  • assurez une maintenance régulière de votre site WordPress. Sauvegardez fréquemment votre site et mettez-le à jour dès que possible (plugins, thèmes et Coeur de WordPress) ; 
  • communiquez sur la refonte de votre site WordPress via vos canaux privilégiés : newsletter, réseaux sociaux etc. ; 
  • vérifiez que vous avez atteint vos objectifs pré-refonte, puis ajustez votre stratégie en fonction de vos résultats.
Après la refonte d'un site WordPress, vérifiez vos données Google Analytics.

Récapitulatif

Grâce à une refonte de site WordPress, vous allez moderniser et optimiser votre site internet.

Cette opération, technique et chronophage, implique une analyse approfondie, une planification minutieuse, et un déploiement agile pour garantir une transition fluide vers un site amélioré et performant.

Dans cet article, vous avez découvert toutes les étapes à suivre pour mener à bien une refonte efficace et professionnelle avant, pendant et après son lancement. 

Comme vous avez pu le voir, le respect des bonnes pratiques et de solides compétences techniques sont nécessaires pour éviter de casser votre site et de perdre tout votre trafic actuel. 

Vous désirez être conseillé et accompagné par une agence reconnue et experte en refonte de site WP

Spécialiste en la matière, Maintenance WP vous proposera une solution sur-mesure qui répondra à vos besoins avec rapidité, professionnalisme et efficacité.

Sur le même sujet :

Comment dupliquer facilement un site WordPress ?

Comment dupliquer facilement un site WordPress ?

Imaginez. Imaginez un site WordPress actif à un emplacement A, par exemple sur un serveur d’hébergement en ligne.  Maintenant, imaginez un clone de ce premier site internet, identique en tous points. Cette copie conforme se trouve elle à un emplacement B, par...

9 conseils pour l’éco-conception d’un site web

9 conseils pour l’éco-conception d’un site web

La production d’électricité. Les usines. Les transports. Les produits ménagers. On ne vous apprend rien si on vous dit que tous ces éléments polluent et sont responsables de la dégradation de l’environnement.  C’est peut-être moins évident à première vue, mais...