fbpx

Pourquoi une refonte du site si rapidement ?

Revenons en décembre 2023. Après avoir terminé ma formation avec BGE pour structurer mon projet de création d’entreprise, j’ai souscrit mon hébergement chez O2switch (que je vous recommande vivement, je vous en parlerais une prochaine fois). J’ai absolument voulu faire une mise en ligne rapide de « quelque chose » et puisque j’allais proposer des services autour de WordPress, il était logique que ce « quelque chose » soit un site réalisé avec WordPress.
Pif, paf, pouf, installation et configuration terminées, textes adaptés, c’est en ligne, avec l’idée de rapidement améliorer tout ça.
Mais, comme souvent (toi même tu sais), j’ai eu trop de choses à faire, le site est resté tel quel et, disons le clairement, pas terrible du tout.

Il fallait donc que je reprenne tout ça pour de bon : opération refonte enclenchée. Et c’est là que ma petite tête s’est dit « c’est un sujet que d’autres personnes peuvent rencontrer, sans savoir comment s’y prendre ». J’ai donc décidé de documenter cette refonte, pour aider tous (toutes) ceux (celles) qui voudraient faire une refonte de site WordPress.

Les étapes de la Refonte de site

Préparation de la refonte

Lors de la refonte d’un site, qu’il soit fait avec WordPress ou non, il est important de garder ce qui fonctionne et d’identifier ce doit être amélioré : la vitesse de chargement, la navigation, le design, le référencement etc.

Dans mon cas, le site était en ligne depuis moins de 2 mois mais indexé sur les moteurs de recherche. Il fallait donc garder ce que Google (et les autres moteurs de recherche) avaient déjà enregistré, notamment les URLs. En effet, il n’y a rien de plus frustrant que de cliquer sur une URL dans les résultats de recherche pour tomber sur une erreur 404 😖. Les utilisateurs, tout comme les moteurs de recherche, détestent ça.
J’ai donc utilisé la commande « site:www.stephanie-vester.fr » pour récupérer toutes les URLs connues de Google et les enregistrer dans un tableau. Nous verrons plus tard, quoi faire de ce tableau.

Enfin, viens l’étape de l’export. Il y a 2 choses à exporter : la base de données et les fichiers.
Pour la base de données, j’ai tout exporté depuis PhpMyAdmin. Pour les fichiers, j’ai fait une copie de tout le dossier public_html, en passant par un client le FTP WinSCP.

Je fais ça depuis de nombreuses années, je n’ai donc pas rencontré de difficultés particulières. Pour ceux qui seraient moins à l’aise avec ce genre d’exports manuel, vous pouvez utiliser des plugins comme WP Migrate Lite, qui s’occupe de tout exporter pour vous et de vous sortir tout ça sous la forme d’un fichier zip.

Environnement de développement

Pour pouvoir travailler tranquillement et sans pression, j’ai installé ma version de développement en local (c’est à dire sur mon ordinateur), en utilisant WAMP. Quézako ? WAMP (ou son alter ego MAMP pour Mac), est un outil qui permettent d’installer un serveur web local sur un ordinateur, en déployant simplement Apache, PHP et MySql, indispensables pour faire tourner WordPress. D’autres configurations sont possibles, comme l’utilisation de MariaDB à la place de MySQL, mais ce n’est pas le sujet de cet article, alors je ne m’étendrais pas dessus.

Avant de déployer la base de données, j’ai pris soin de modifier les URLs de production (https://www.stephanie-vester.fr) par des URLs de mon site en local (https://localhost/stephanie-vester/) dans mon fichier export-db.sql. 
J’aurais pu utiliser un alias local, comme stephanie-vester.local ou stephanie-vester.dev, mais je n’en avais pas vraiment l’utilité dans le cas présent, j’ai fait sans.

Choisir le thème

Le choix d’un thème est une étape importante. Il faut que le thème soit techniquement adapté à vos besoins (avec des templates correspondant à toutes les taxonomies utilisées), personnalisable et sécurisé.
A la première installation j’avais fait au plus simple, en utilisant le thème de base de la version 6.4 de WordPress et son thème Twenty Twenty-Four mais je ne souhaitais pas le garder.

En tant que développeur j’aurais pu partir de zéro et créer mon propre thème. Ca m’aurait fait une belle pub pour montrer mes compétences mais je ne voulais pas non plus y passer trop de temps. J’ai donc parcouru rapidement le répertoire des thèmes Wordpress. Je tenais à certains critères : un thème basé sur les blocs, compatible Gutenberg et qui soit au maximum FSE.
J’en ai essayé quelques un et j’ai jeté mon dévolu sur Ollie, qui présentait tous mes critères et avait en plus de nombreuses compositions propres et plutôt sympathiques. 

Faire le tri

Le menu principal du premier site était composé des catégories du blog. Pourquoi ? Parce queeeee ! La pub Orangina tu te rappelle ?! Hahem, pardon….
Parce que : j’avais dans l’idée de modifier les templates de catégories pour y inclure la description de mes services, mais en y réfléchissant sérieusement, c’était une bêtise. Je devais surtout séparer la présentation de mes services, du blog et des articles, même si les articles pouvaient (et devaient ! ) être affichés sur les pages des services pour améliorer le maillage interne (encore un truc dont je parlerais dans un prochain article).

J’ai donc réfléchi à une nouvelle architecture en silos de contenus, chaque silo devant correspondre aux univers sémantiques de mes différents services. L’étape de recherche des mots clés à commencé. 

Il faut le dire, c’est une étape plutôt longue et fastidieuse, ce qui explique pourquoi beaucoup de gens la zappent ou la survolent vaguement. Elle est pourtant indispensable pour le référencement naturel ! Tes pages doivent répondre aux intentions de recherche des utilisateurs si tu veux qu’ils viennent sur ton site. Une page que personne ne veut voir ne sert à rien.
J’ai pu profiter d’une version d’essai de SE Ranking de 3 semaines, qui m’a permis de faire des recherches de mots clés tout en analysant leur volume de recherche, leur difficulté et leur pertinence vis à vis de mes silos. Je me suis retrouvée avec une liste de 413 expressions et mots clés ! 

Quand on débute un tout nouveau site, le score d’autorité de notre domaine est à zéro. Dans mon cas, mes 2 mois de (non) référencement n’ont probablement pas franchement élevé ce score. Il fallait donc faire attention à choisir des mots clés qui ciblent des expressions avec un volume de recherche suffisant (si y’a 3 recherches mensuelles ça sert pas vraiment à grand chose), mais qui avaient une concurrence / difficulté pas trop haute. La raison ? Avec un faible score d’autorité, il est très peu probable que Google nous positionne en haut des résultats sur une expression à forte concurrence, même avec un bon contenu. 

Après de longues journées d’analyse, mes silos étaient prêts, je pouvais passer au prototypage du site.

Prototypage et design

La graphiste qui a réalisé mon identité visuelle, Caroline Muraccioli de Minerva Communication, avait préparé tout les éléments nécessaires sur Figma. Ce logiciel permet aux créatifs de travailler sur le prototypage et le design de façon collaborative, et aux équipes techniques de récupérer tout ça, en ayant même des portions de code à intégrer directement.
Personnellement, j’utilise la version gratuite, beaucoup plus limitée, et j’avais donc moins d’options d’intégration mais ça restait suffisant pour mon utilité.

J’ai d’abord défini sur papier les différentes sections que je voulais : bannières, images, textes, listes… Il ne restait qu’à ordonner tout ça de façon logique et surtout agréable à l’œil. Là, je ne te cache pas que j’ai appelé Caroline à la rescousse une fois ou deux (ou dix ?) pour qu’elle ajoute sa petite touche de magie créative et rende l’ensemble moins stricte.

J’ai ainsi réalisé les visuels de toutes les pages de présentations des services, de moi même, du blog, des articles, sans oublier la recherche et l’erreur 404.
Voici un petit aperçu de ce joyeux bazar :

Un aperçu de Figma lors du design de la refonte de mon site web
Un aperçu du design de la refonte de mon site dans Figma

Tu noteras que j’ai surtout des versions ordinateur de mes pages, c’est une mauvaise habitude ! Il faut normalement travailler son design en « mobile first » (mobile d’abord) parce qu’il est théoriquement plus facile de travailler sur la version mobile d’abord, qui est plus petite, pour ensuite passer en version tablette puis desktop (ordinateur) où il y a plus d’espace pour placer les contenus. Et aussi parce que, de nos jours, la majeure partie de la navigation web se fait depuis des appareils mobiles.
Dans les faits, j’ai quand même l’habitude de tout ça, ça ne m’a pas dérangé. Mais si toi tu fais une refonte de site web, je t’encourage vivement à travailler la version mobile d’abord.

thème enfant puis intégration

La partie qui consiste à faire correspondre le visuel et le code (pour le dire grossièrement) s’appelle l’intégration : on intègre le design au code.

Pour pouvoir profiter des mises à jour d’un thème, tout en modifiant certains éléments de façon définitive, il faut utiliser les thèmes enfants. Ca consiste à créer un thème, appelé « thème enfant », basé sur son parent (ici Ollie). Par défaut WordPress affichera nos ajouts et modifications en priorité, donc tout ce qu’on modifie dans le thème enfant prend le pas sur ce qui est défini par le parent.

Il y a 2 fichiers absolument nécessaires pour créer un thème enfant :

> un fichier style.css, qui doit contenir au minimum les informations du thème qui le décrivent comme thème enfant, dans le header.

/**
 * Theme Name: Nom de votre thème
 * Template: Nom du parent (attention à la casse !)
 * ... éventuellement d'autres éléments, pas indispensables...
 */

> un fichier functions.js qui peut rester vide pour le moment.

Tu peux aussi ajouter un fichier screenshot.png pour montrer un aperçu du thème, mais ce n’est pas obligatoire. Il y a d’ailleurs un tas d’autres fichiers que tu peux ajouter mais ce n’est pas le sujet ici, on verra ça une autre fois.

Une fois ces 2 éléments présents dans le dossier, on peut aller dans l’administration de WordPress > Apparence > Thème : il est là ! On peut le prévisualiser (mais vu qu’on y a fait encore aucune modification, il sera identique au thème parent) et l’activer.
Tadaaaam ! On peut modifier ce qu’on veut sans impacter le thème parent, y compris les templates, header, footer, assets… tout quoi.

Ne fais pas trop attention aux couleurs sur cette impression d’écran, j’ai un petit bug à cause du HDR de mon écran 😅.

Vue des thèmes parent et enfants pendant ma refonte de site WordPress.
Le thème parent à droite, le thème enfant à gauche

Me voila partie pour tâtonner avec les styles de l’éditeur de thème, pour y mettre mes couleurs et mes typographies à moi. Une fois que tout est bon, je récupère le contenu du post créé en base de données () avec mes personnalisation pour les intégrer au theme.json et éviter des requêtes en base de données.
J’ai d’ailleurs un peu galéré pour inclure mes typos sans passer par un plugin, pour apprendre quelques semaines plus tard que Gutenberg allait offrir un gestionnaire de typographie dans la version 6.5 de WordPress, sortie en mars 2024.

Une fois que tous les éléments génériques sont prêts, je peux passer aux pages elles-mêmes. Là encore je tâtonne un peu pour prendre en main Gutenberg. J’ai l’habitude de tout coder à la main alors les outils de ce type ont tendance à me frustrer, par manque de paramètres et flexibilité. A force de persévérance et de recherches, j’y arrive. Page d’accueil, page des services, de maintenance, elles y passent toutes les unes après les autres.

A cette étape, j’ai voulu utiliser les icones créées par ma graphiste en SVG, un format vectoriel léger, qui permet d’utiliser les icones dans diverses tailles avec un seul et même fichier, sans avoir de pixellisation. WordPress n’accepte pas nativement les fichiers SVG. On peut simplement désactiver le filtrage des téléchargements mais ça peut entrainer des problèmes de sécurité parce que, contrairement à ce qu’on pourrait croire, le SVG n’est pas une image mais du code XML. Si le contenu XML n’est pas sécurisé, il peut introduire des failles de type XSS 😱.
Histoire de protéger mon site, j’ai utilisé le plugin SVG support qui sécurise les fichiers vectoriels et leur ajoute d’autres options, qui n’ont pas d’intérêt ici.

Le temps passe et j’ai aussi d’autres choses à faire : priorité à ma cliente (oui oui au singulier pour l’instant), enfants malades, publications sur les réseaux sociaux, réunion du club d’entrepreneurs… J’ai du mal à ménager la chèvre et le choux (hoo la belle expression vieillotte) et ça n’avance pas aussi bien que je le voudrais. Je décide de me concentrer sur l’essentiel et d’ajouter plus tard les témoignages et le glossaire.
Je suis un peu frustrée mais si je continue comme ça la refonte du site sortira en décembre 2024 😭.

Surprise de taille

Si tu as lu ma présentation, tu sais que je bénéficie d’une RQTH à cause de douleurs au bras droit. Grâce (ou à cause ?) de ça, j’ai pu demander à bénéficier d’une subvention pour création de la part de l’AGEFIPH. J’ai eu une réponse positive le 20 février ! Je me suis donc mise en quête du matériel convenu pendant la création du dossier (beh oui, on nous donne pas juste des sous pour en faire n’importe quoi) : chaise de bureau ergonomique, ordinateur, écrans, support écran… J’ai renouvelé une grande partie de mon matériel vieillissant (ho, encore un prochain article sur mon setup de dev en vue !).
Parmi tout ça, j’avais sélectionné un écran 32 pouces BENQ à dalle mate pour réduire les reflets dans l’écran, qui étaient vraiment très gênants. Une fois reçu et installé j’ai pu découvrir mon site sous un nouveau jour : avec une résolution 3840x2160px.

Le rendu de ma page d'accueil sur un écran 32 pouces pendant la refonte de mon site web.
Le rendu de la page d’accueil sur écran 32 pouces

Ouille aille aille !
Tout allait bien en résolution Full HD (1920×1080) mais sur l’écran 32 pouces les bannières étaient beaucoup trop hautes !
J’ai donc retravaillé le design afin qu’il s’adapte mieux aux grandes résolutions.

Configurations des plugins

J’ai fait le choix d’utiliser un minimum de plugins pour améliorer les performances du site. Je n’avais donc pas trop de modifications à faire de ce coté là mais certains plugins avaient quand même besoin d’ajustements. Le premier était YARPP (Yet Another Related Post Plugin), qui permet d’afficher des articles relatifs de meilleure pertinence que ceux proposés par défaut par WordPress, et le second SEOKey, mon extension pour le référencement naturel (qui fera, là encore, l’objet d’un prochain article).

Pour le premier, il a simplement fallu créer les templates des articles relatifs. Pour le coup, j’étais dans mon élément et j’ai tout écrit en PHP et HTML, avec un peu de CSS. Le tour était joué.

Pour SEOKey, il fallait renseigner la balise titre et la meta description pour chaque page et articles, qui servent à l’affichage sur les moteurs de recherche, mais aussi le mot clé principal des pages et posts, pour obtenir une analyse SEO « on page ». En effet, quand on indique un mot clé la version Pro de SEOKey propose un audit du contenu pour nous aider à l’optimiser. Oui oui, tu as bien compris : le référencement se travaille page à page et pas pour le site entier !

Concernant le reste des plugins que j’ai utilisé il y a :

  • Askimet : l’anti spam par défaut proposé par WordPress, qui fonctionne très bien s’il est bien configuré ;
  • Broken link checker : pour détecter les liens morts du site ;
  • Cookie Yes : pour l’affichage de la popup de consentement des cookies et la gestion du dépôt des cookies en fonction des choix de l’utilisateur ;
  • Gutenberg : pour profiter des évolutions de Gutenberg qui ne sont pas encore disponibles dans le core WordPress ;
  • Open Graph and Twitter Card Tags : pour la gestion de l’affichage des aperçus sur les réseaux sociaux ;
  • Query Monitor : outils de développement pour les développeurs ;
  • Google Site Kit : pour la connexion de la Google Search console ;
  • Spectra : qui étend les fonctionnalités de Gutenberg avec des blocs plus évolués ;
  • SVG Support : pour la sécurité des SVG, comme je l’ai expliqué plus haut ;
  • SX Disable WordPress XML sitemaps : qui désactive les sitemaps par défaut de WordPress, qui ne sont pas optimisés ;
  • SX User Name Security : qui cache les vrais noms d’utilisateurs pour améliorer la sécurité ;
  • WP Mail SMTP : qui reconfigure la fonction wp_mail() de WordPress pour utiliser une configuration SMTP personnalisée ;
  • WP-PageNavi : pour améliorer la pagination de WordPress ;
  • WP-Sweep : pour nettoyer la base de données en retirant toutes les données inutiles, orphelines ou dupliquées ;
  • WPS Hide Login : change l’adresse de connexion à l’administration de WordPress.

La liste peut paraitre longue pour un choix affirmé de minimiser les plugins mais une grande partie d’entre eux ne sont utilisés qu’en back-office et n’ont donc pas d’influence sur le chargement du front (le site visible au public, dans le jargon de développeur web).

Me voilà prête à envoyer mon site sur le serveur, mais…. oui il y a un mais : j’ai déjà trop tardé à sortir cet article donc j’ai décidé de parler de la préprod, du débogage, de la mesure des performances et des dernières optimisations dans un prochain article.

Conclusion

Je t’ai présenté ici toutes les étapes de préparation de la refonte d’un site web et nous verrons dans un prochain article les étapes suivantes qui consistent à mettre tout ça en ligne, à vérifier que tout est ok et à optimiser tout ça pour un chargement rapide et une expérience utilisateur aux petits oignons.

Pour moi, qui travaille dans le web depuis de nombreuses années, tout ça tombe sous le sens, mais peut être que toi tu n’y a pas compris grand chose ?
Si c’est le cas, j’en suis désolée ! Mon but était au contraire de simplifier les choses pour tout ceux qui voudraient faire eux même la refonte d’un site. Je t’invite donc à me dire en commentaire ce que j’ai mal expliqué et je ferais de mon mieux pour éclairer ta lanterne.

J’avais dans l’idée de publier cet article dans la semaine qui suivait la mise en ligne officielle de ma refonte mais au lieu de ça il arrive 2 semaines plus tard. Ca montre au moins une chose : j’ai bien rédigé moi même tout ça, sans faire appel a une IA ! J’espère quand même mettre moins de temps pour publier le seconde partie.

Si tu as aimé cet article, n’hésite pas à me le dire en commentaire, et si tu n’as pas aimé non plus d’ailleurs. Bref, exprime toi !

Et pour finir, si tu as des questions sur la refonte de site web ou que tu souhaiterais me confier la refonte de ton site, passe donc me faire un coucou via la page contact !

A très vite !

Articles relatifs

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.