Thème WordPress sur mesure avec plugins métier et cartographie connectée aux données publiques de l'eau
Scores de cette page :
EcoIndex B
SEO 100%
Accessibilité 100%
Performance 100%
Bonnes Pratiques 100%
Un chantier dense sur des aspects très différents : intégration complète d'un thème WordPress sur mesure à partir d'une maquette exigeante, deux plugins développés spécifiquement pour le client, trois cartes interactives connectées en temps réel à des bases de données publiques, quatre blocs de contenu personnalisés, et un moteur de recherche configuré finement sur dix-sept formulaires distincts — avec un code organisé dès le départ pour rester lisible et transmissible.
Contexte : un site fait sur mesure, du sol au plafond
Le SYMCRAU (Syndicat mixte de gestion des nappes de la Crau) surveille et protège une nappe phréatique souterraine, avec une mission d'information du grand public sur cette ressource en eau — agriculteurs, citoyens, établissements publics, industriels, écoles et associations. Le site WordPress qui porte cette mission a été intégralement codé sur mesure, sans thème « prêt à l'emploi » en base, en collaboration avec un chef de projet et un designer qui avaient la responsabilité du design, de l'architecture générale et des choix graphiques. Le rôle ici : transformer cette maquette en site fonctionnel, du HTML jusqu'au fonctionnement le plus technique.
La maquette, très soignée visuellement sur le thème de l'eau (vagues, dégradés, formes organiques), était exigeante à transformer en vrai site web : de nombreux dessins vectoriels à intégrer un peu partout, des éléments qui se chevauchent volontairement à l'écran, une mise en page qui change de forme sur presque chaque section de la page d'accueil.
Une page d'accueil découpée en huit blocs indépendants
Plutôt que d'écrire la page d'accueil comme un seul gros bloc de code, elle a été découpée en huit sections indépendantes (image d'ouverture avec photo tirée au hasard parmi plusieurs, mise en avant d'une actualité, dernières actualités, présentation par profil de visiteur, présentation du territoire avec vidéo intégrée, carte de la nappe, raccourcis vers les outils de gestion, raccourcis vers les connaissances). Chaque section a son propre petit fichier et ses propres réglages dans l'administration, ce qui permet de modifier une seule partie de la page sans risquer de casser les autres — une organisation pensée dès le départ pour que la maintenance reste simple, même longtemps après la livraison.
Deux outils sur mesure, développés spécifiquement pour ce client
Au-delà du site lui-même, deux extensions ont été développées entièrement sur mesure pour répondre à des besoins précis du SYMCRAU, qu'aucun outil existant ne couvrait tel quel.
La première permet à l'équipe d'insérer elle-même les cartes interactives n'importe où dans une page, en quelques clics, sans avoir besoin de toucher au code. La seconde permet de saisir chaque mois une simple mesure — la profondeur de la nappe en un point donné — et calcule automatiquement, pour chaque mois de l'année, la moyenne, le minimum et le maximum observés depuis le début du suivi (2002 pour les plus anciens points). Le résultat s'affiche à la fois en tableau et en graphique généré tout seul, sans aucune manipulation graphique de la part de l'équipe.
Trois cartes connectées en direct aux données officielles de l'eau
Trois cartes interactives distinctes composent le suivi de la nappe, chacune avec un rôle différent. La première affiche les grandes zones d'influence de la nappe — irrigation en vert, précipitations en bleu, drainage en violet — ainsi que les trois points de mesure suivis manuellement par l'équipe. Passer la souris sur une zone colorée déclenche une interrogation en direct d'une base de données publique nationale sur l'eau souterraine (Hub'Eau), pour afficher le niveau actuel et la date de la dernière mesure connue ; un clic affiche directement le graphique généré par l'outil de saisie des mesures, sans quitter la carte.
Les deux autres cartes affichent l'intégralité des réseaux de surveillance du SYMCRAU — 23 points pour le niveau de la nappe, 17 points pour la qualité de l'eau — eux aussi interrogés en direct sur la même base de données publique à chaque survol. Un clic construit automatiquement un lien vers la fiche officielle du point concerné sur le site public national ADES, en ouvrant directement le bon onglet (graphique, statistiques, ou tableau de mesures) plutôt que de laisser la personne chercher l'information elle-même. Pour la carte de qualité de l'eau, un calcul supplémentaire recompte à la volée, à partir de l'historique renvoyé par la base de données, le nombre de prélèvements effectués sur les douze derniers mois — une information que la base publique ne fournit pas directement sous cette forme, et qu'il a donc fallu reconstruire.
Quatre briques de contenu réutilisables pour l'équipe éditoriale
Pour que l'équipe puisse composer ses pages librement sans dépendre d'un développeur à chaque modification, quatre éléments de contenu prêts à l'emploi ont été créés dans l'éditeur du site (des « blocs », comme on en trouve dans WordPress) : un chapô pour l'accroche en tête d'article, un encadré de mise en avant avec un lien optionnel, un bloc « en savoir plus » qui accepte indifféremment un lien vers une autre page, un lien externe ou un fichier à télécharger (avec son format et son poids affichés automatiquement), et une image en très grande largeur qui déborde volontairement du texte pour un rendu plus impactant, avec un repli automatique et propre sur mobile.
Des crédits photo qui s'ajoutent tout seuls
Chaque image du site peut porter un crédit photo, ajouté automatiquement à sa légende dès qu'elle est utilisée — l'équipe n'a pas besoin de le retaper à chaque fois qu'elle réutilise une image. La même mécanique rend systématiquement cliquables les images du contenu, qui s'ouvrent alors en grand dans une fenêtre dédiée plutôt que de rester figées et minuscules dans le texte.
Un moteur de recherche réglé finement, section par section
Dix-sept formulaires de recherche distincts équipent les différentes parties du site — documents classés par catégorie, actualités et ressources filtrées selon le profil du visiteur (agriculteur, citoyen, établissement public, industriel, scolaires et associations), recherche générale. Sur les pages dédiées à chaque profil, un bouton permet de basculer entre actualités et documents liés à ce profil, la préférence étant mémorisée le temps de la visite pour ne pas avoir à la rechoisir à chaque page.
Un espace documentaire structuré et facile à parcourir
L'espace documentaire centralise l'ensemble des documents publics du SYMCRAU (comptes rendus, rapports d'activité, bulletins hydrologiques...), organisés en cinq grandes catégories avec filtrage par mots-clés, tri des résultats et pagination — chaque fiche pouvant regrouper plusieurs fichiers téléchargeables, certains librement accessibles, d'autres soumis à une demande préalable via formulaire de contact. Un glossaire dédié complète cet espace, avec une navigation alphabétique qui reste visible en haut d'écran une fois qu'on commence à faire défiler la page, et des définitions qui se déplient au clic plutôt que de s'afficher toutes en même temps.
Un code pensé pour être repris par quelqu'un d'autre
Sur un projet de cette ampleur, avec autant de mécaniques différentes qui cohabitent (cartes, plugins, blocs, recherche, espace documentaire), le vrai risque est de finir avec un code impossible à reprendre pour quelqu'un d'autre. Le parti pris ici : une fonction, un fichier, un rôle — chaque petit bout de logique (calcul de taille de fichier, gestion de la pagination, affichage d'un type de média précis...) vit dans son propre fichier nommé clairement selon ce qu'il fait, plutôt que d'être noyé dans un fichier fourre-tout de plusieurs milliers de lignes. Résultat concret : un développeur qui reprend le projet peut retrouver en quelques secondes où se trouve une fonctionnalité précise, rien qu'en lisant les noms de fichiers, sans avoir à fouiller ni à tout relire.
Un site pensé pour s'adapter à tous les écrans
L'ensemble du site est entièrement responsive : desktop, tablette et mobile, avec une mise en page qui se réorganise réellement (pas seulement redimensionnée) sur les petits écrans — menu en accordéon, colonnes qui repassent en une seule, cartes et graphiques qui restent lisibles et utilisables au doigt.
Note
Les captures de cette page ont été reconstituées à partir du site tel qu'il a été livré à l'époque (mise en page restaurée à l'aide des outils de développement du navigateur) — le site n'est plus maintenu par mes soins depuis la livraison, et des évolutions de contenu ultérieures par d'autres personnes ont depuis affecté certains réglages visuels.