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…

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

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.

Initialement rédigé en octobre 2018, cet article a été mis à jour en décembre 2021.

Besoin d’un hébergeur pour votre site ?

Faites comme WPMarmite, choisissez o2switch. Non seulement les performances sont au rendez-vous mais le support est exceptionnel.

o2switch

Pour savoir comment créer un site WordPress de A à Z, consultez notre guide complet.

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 (que vous soyez un freelance, une agence web ou un webmaster non professionnel).
Ce sont ces objectifs, concis et clairs, qui vont guider vos pas par la suite.

Cela revient à se poser la question suivante : pourquoi voulez-vous effectuer la refonte de votre site web ? Il peut y avoir de nombreuses raisons à cela :

  • changer le design de votre site, en sélectionnant un nouveau thème,  ou en optant pour un constructeur de page ;
  • mettre à jour l’administration de votre site ? Ça peut être le cas si vos extensions ou votre version du CMS 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 trafic a chuté ou ne décolle pas, si votre expérience utilisateur est actuellement bancale ou si votre code HTML n’est pas optimisé pour les robots de Google ;
  • ajouter de nouvelles fonctionnalités à votre site, que votre design actuel ne peut pas les intégrer. Vous avez aussi peut-être envie de le rendre plus intuitif et plus simple d’utilisation pour vos visiteurs ? ;
  • améliorer la structure technique de votre site vitrine (ou e-commerce) pour renforcer sa sécurité, améliorer sa vitesse de chargement et modifier son arborescence ;
  • migrer votre site sur un autre serveur d’hébergement web ;
  • faire plus de ventes, notamment si vous disposez d’une boutique WooCommerce ;
  • vous mettre au niveau de la concurrence, qui propose des sites web plus actualisés et au goût du jour. Vous en profiterez pour améliorer votre image de marque et votre notoriété.

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 des différentes pages de votre site, 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 permet de concevoir des wireframes de site WordPress.
L’interface de création de wireframes dans Balsamiq Wireframes

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 plusieurs outils pour ce faire :

  • Balsamiq Wireframes, 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.
  • MockFlow, un outil en ligne freemium bien pratique. Sa version gratuite vous permet de créer jusqu’à 3 pages, pour débuter.
  • Sketch, une plateforme de webdesign collaborative très puissante, à condition de savoir la maîtriser correctement. Elle propose une version d’essai gratuite de 30 jours, puis une offre payante à partir de 9 $/mois (environ 8 €).
  • Canva : ce n’est pas à proprement parler un outil dédié au wireframing, mais il permet de s’en rapprocher grâce à ses nombreuses fonctionnalités. Et, surtout, il dispose d’une version gratuite copieusement fournie.

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. Mais dans ce cas, veillez à bien choisir votre nouveau thème au regard de vos objectifs.
    Pour vous aider, WPMarmite a la ressource qu’il vous faut : une liste des meilleurs thèmes gratuits. Régalez-vous !

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 soit optimisé pour le référencement ;
  • qu’il soit optimisé pour tous les navigateurs utilisés par les internautes (a minima Chrome, Safari, Firefox, et Edge) ;
  • qu’il soit conçu en responsive design, 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 navigation de vos utilisateurs.

Alors comment faire ?

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

Le schéma d'arborescence de WPMarmite.
Le schéma d’arborescence de la version actuelle de WPMarmite

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 ou ou Octopus.

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. Quoi qu’il en soit, le vôtre doit impérativement contenir :

  • une description de votre projet web 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 etc. ;
  • les pistes graphiques que vous souhaitez suivre. Pour cela, intégrez vos wireframes et maquettes à votre cahier des charges, ainsi que votre charte graphique (qui définit notamment votre identité visuelle) ;
  • les éléments fonctionnels nouveaux de votre site refondu, comme l’ajout d’une boutique e-commerce, d’un blog, d’un module d’opt-in, d’une nouvelle administration (back-office) etc. ;
  • 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 de votre 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.

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 URLs. 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.

Accélérez votre site internet avec WP Rocket

Transformez votre site en fusée grâce au plugin de cache reconnu le plus performant par les experts WordPress.

Logo WP Rocket

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 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 effectuer une refonte de votre site 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 WP telle que vous l’avez actuellement configurée. En d’autres termes, vous serez en mesure de modifier un site WordPress sans supprimer celui déjà existant.

Si vous souhaitez cependant repartir de zéro, dans une administration totalement nouvelle, n’hésitez pas à suivre le tuto qu’Alex vous a 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 etc. »

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 répertoire officiel vous a tapé dans l’œil (comme le très populaire Astra) ;
  • d’un constructeur de page, comme Elementor ou Beaver Builder, si vous souhaitez éviter de mettre les mains dans le code ;
  • de nouvelles extensions, pour intégrer des fonctionnalités épatantes.

Vous séchez un peu sur les plugins à utiliser ? Peut-être que votre bonheur se trouve dans notre liste d’incontournables, voire dans la série « Bonjour Plugin » de WPMarmite : jetez-y un coup d’œil 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 d’extensions : 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 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.

Pour vous aider avec le SEO on-page de votre site (optimisation des contenus), appuyez-vous sur une extension de référencement dédiée.

WPMarmite utilise la plus célèbre d’entre elles, Yoast SEO, mais elle n’est pas la seule à être efficace sur le marché. Découvrez notre comparatif détaillé de ses concurrentes dans cet article.

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, WPMarmite 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 !

Devenez enfin visible grâce au SEO

Optimisez le référencement de votre site WordPress, obtenez du trafic et augmentez votre chiffre d’affaire.

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êt à faire la refonte de votre site web avec succès.

Les 3 étapes pour une mise en ligne optimale

Je vous sens fébrile à l’idée de dévoiler à la face du monde votre nouvelle création de site 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 WPMarmite 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 WPMarmite. 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 Insights 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 e-mails 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 Sécu !

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 ? Quels sont les problèmes que vous avez rencontrés, ou les fiertés que vous en avez tiré ? Dites-nous tout en commentaire : l’équipe de WPMarmite les lit tous avec attention.