L’équipe du site Les Baroudeurs souhaitaient effectuer une refonte de leur site afin de s’affranchir du format blog et de proposer de façon plus interactive leurs contenus à leurs visiteurs.
Présentation du projet
J’ai pris contact avec les Baroudeurs suite à un tweet dans lequel ils annonçaient leur recherche d’un développeur WordPress pour effectuer la refonte de leur site. Celui-ci est un blog orienté voyage, qui parle à la fois de leurs expériences aux quatre coins du monde mais propose aussi des conseils et astuces pour voyager. Le blog est sur wordpress.com, avec TwentyFourteen et un nom de domaine acheté chez eux.
Après quelques échanges et la consultation du cahier des charges, je découvre un projet intéressant : passage du blog hébergé sur wordpress.com à une installation indépendante, nouveau design responsive, géolocalisation, navigation basée sur des cartes interactives, de nouvelles méthodes de tri des contenus…Tout cela dans un délai serré, car le site doit être présenté dans un mois lors du salon du tourisme à Cannes.
L’équipe avait déjà des designers au travail sur la refonte graphique, j’allais donc m’occuper de la partie migration, intégration et développement des fonctionnalités.
Les étapes du projet
Migration des contenus
La première étape, une fois l’hébergement choisi (chez o2switch), était de migrer les contenus depuis wordpress.com. Première difficulté : le site ayant plus de 200 articles et surtout des milliers de photos, un import/export direct via les outils proposés par WordPress se révèle vite être très compliqué, voir mission impossible. En effet, l’importation échouait systématiquement, en raison de la taille du fichier et du temps d’exécution nécessaire.
La solution est venue grâce au conseil de Thierry Pigot sur Twitter, qui me propose de réaliser une étape intermédiaire en important en local (où les contraintes du serveur peuvent être grandement assouplies), puis en faisant un import/export de la base de données locale vers le nouvel hébergement. Solution gagnante, malgré quelques ratés au niveau des images, dus surement à l’outil d’export de WordPress, mais facilement corrigés individuellement.
Intégration du nouveau design
L’avantage d’avoir déjà les contenus en place, c’est que ça simplifie beaucoup l’intégration. Il devient bien plus simple de tester les différents cas de figure, et de pouvoir s’adapter. A ce niveau, les principales contraintes ont été :
- d’assurer la compatibilité avec IE (9 notamment) en utilisant des polyfills pour les éléments HTML5 et matchMedia
- de répondre à la contrainte où les pages avec cartes devaient être utilisables facilement quelque soit le support. J’ai donc joué sur les positions et la hauteur des éléments en javascript et avec des mediaqueries pour proposer une expérience utilisateur la plus adaptée possible.
Le customizer est de la partie notamment pour les liens vers les réseaux sociaux, ainsi que mon thème starter Racine qui a servi de base à l’intégration.
Nouvelle catégorisation
Sur l’ancien blog, les articles étaient catégorisés par pays, et associés à des mots-clés divers. Dans la nouvelle version, une catégorisation par ville devait s’ajouter, afin de proposer une étape supplémentaire de tri lors de la navigation. J’ai donc créé une nouvelle taxinomie, et il a été nécessaire de faire un tri et des redirections parmi les mots-clés (car certains correspondaient justement à des villes) pour éviter les doublons et conserver le référencement.
Navigation par cartes interactives
Certainement la partie la plus importante et la plus complexe du projet, car c’est l’élément central d’utilisation du site, et le point sur lequel j’avais le moins de certitudes au démarrage du projet.
Comme vous avez pu le voir sur la capture du nouveau design ci-dessus, sur chaque pays (donc catégorie) qui possède au moins un article, un marqueur cliquable avec le nombre d’articles est affiché. Cela est ensuite répété au niveau du pays, avec les villes cliquables, puis au niveau de la ville, où les articles sont géolocalisés.
Il était donc nécessaire de trouver les outils permettant de géolocaliser tout cela. Pour les articles, mon choix s’est rapidement porté sur Geo Mashup, un plugin gratuit et bien noté sur le repo, avec en plus une documentation abondante pour l’utiliser de manière avancée. C’est Geo Mashup qui gère les cartes au niveau des villes, ainsi que la carte de chaque article qui affiche sa géolocalisation ainsi que les articles aux alentours.
Pour les pays et villes, aucune solution pré-existante ne correspondait vraiment, j’ai donc fait le choix de me plonger dans la documentation de l’API Google maps pour répondre au besoin. Dans un souci de rapidité, j’avais au départ décidé d’effectuer la géolocalisation de chaque pays/ville à la volée à chaque chargement de page, mais cela s’est vite révélé peu efficace en raison des limites de l’API : impossible d’effectuer autant de requêtes à la fois, l’affichage complet de tous les marqueurs devenait donc très long à cause de la nécessité d’ajouter un “timeout” à partir d’un certain nombre de demandes.
L’idéal aurait été de pouvoir ajouter un champ personnalisé “géolocalisation” aux termes pays et villes, mais cela n’est pas possible dans WordPress par défaut. j’ai donc eu l’idée d’utiliser la description, qui n’est pas utilisée dans le contenu des pages, pour stocker la latitude et la longitude correspondante à chaque terme, grâce à un petit script et un appel à l’API de Geocoding de GMaps.
Pour transmettre au javascript qui génère les cartes les données reçues depuis WordPress (le lien de destination lors du clic sur un marqueur, le nombre d’articles qui sert à la fois pour l’affichage et pour gérer la taille du marqueur, le nom de la ville pour l’infobulle), je passe par wp_localize_script(), et l’affichage du texte sur les marqueurs est rendu possible grâce à l’extension Marker with Label de Google Maps.
Le reste
J’ai détaillé les points les plus importants, mais voici ce que j’ai également utilisé pour répondre aux autres besoins :
- Mailpoet pour la gestion de la newsletter (avec récupération des anciens abonnés par mail sur wordpress.com)
- Juiz Social Post Sharer pour le partage des articles sur les réseaux sociaux
- YARPP pour les articles en relation
- SlidesJS pour les diaporamas
- WP Rocket pour l’optimisation des performances du site (merci Jonathan pour le support !)
Finalisation du projet
Le site a été présenté en version bêta, fonctionnelle mais pas entièrement aboutie, lors du salon du tourisme courant septembre. Les retours ont été bons, et l’équipe était contente du résultat obtenu. J’ai entre temps finalisé l’ensemble, qui est actuellement disponible. Il est prévu d’y apporter des améliorations dans un prochain temps, notamment pour ajouter des fonctionnalités qui ont été repoussées en raison du délai initial.
A titre personnel, ma plongée dans la mise en place de la géolocalisation sur WordPress et de l’utilisation de l’API Google Maps est une de mes principales satisfactions qui en ressort, et j’espère pouvoir mettre à profit mes compétences acquises à ce niveau dans un futur projet.