Transformation complète d'un thème WordPress immobilier pour une association de logement solidaire
Scores de cette page :
EcoIndex A
SEO 100%
Accessibilité 100%
Performance 100%
Bonnes Pratiques 100%
Thème enfant construit sur WPResidence — un thème immobilier complexe choisi par le client — pour correspondre à une maquette entièrement différente. Ajout d'une page de recherche d'annonces avec filtres, carte interactive Leaflet/Mapbox et galerie lightbox en remplacement du carousel d'origine.
Contexte
Habiter en terre catalane est une association d'immobilier social qui gère des locations et des ventes solidaires dans les Pyrénées-Orientales : près de 600 logements, plus de 1 250 personnes logées. Pour son site, l'association avait déjà fait un choix avant mon arrivée sur le projet : WPResidence, un thème WordPress conçu pour l'immobilier, avec ses fiches de biens, ses filtres de recherche et sa carte intégrée tout prêts à l'emploi.
Le problème, c'est que la maquette imposée par le designer n'avait presque plus rien à voir avec l'apparence par défaut de ce thème. Il fallait donc tout transformer visuellement — la page d'accueil, les fiches de biens, la recherche, l'en-tête — sans jamais toucher au cœur du thème, pour que les mises à jour de sécurité continuent de s'installer normalement. Je n'étais pas décisionnaire sur le choix technique initial, seulement développeuse sur la suite : un site entièrement fait sur mesure aurait sans doute été plus simple à adapter à la maquette, mais ce n'était pas l'option retenue en amont.
Thème enfant et surcharge
Tout le travail d'habillage a été fait dans un thème enfant : un dossier à part qui vient se greffer sur le thème principal pour le modifier sans l'altérer. Concrètement, cela veut dire réécrire des bouts de code PHP, des styles et des scripts pour remplacer l'apparence et le comportement d'origine, pendant que le thème parent de WPResidence reste intact et continue de recevoir ses mises à jour.
La difficulté, c'est que WPResidence est un thème très verrouillé : sa structure HTML, ses classes CSS et sa logique PHP sont imbriquées de façon à rendre toute modification un peu profonde particulièrement longue. Chaque élément à repeindre demandait de retrouver où il était généré dans le thème, puis de le surcharger proprement plutôt que de le bricoler, pour ne rien casser au prochain changement du thème.
La fiche d'un logement
Chaque bien à louer ou à vendre dispose d'une fiche détaillée, construite à partir des informations saisies par l'association dans son back-office WordPress. Au-delà des photos et de la description, la fiche affiche plusieurs blocs dépliables : l'adresse avec une carte Google Maps intégrée, un diagnostic de performance énergétique présenté sous la forme habituelle des étiquettes A à G, et un détail complet du budget — loyer, charges, dépôt de garantie, frais d'agence.
Ces blocs ne sont pas de simples images : chaque valeur (la classe énergétique, le montant du loyer, les frais) provient d'un champ renseigné par l'association lors de la création de l'annonce, et s'affiche automatiquement dans la mise en page voulue par la maquette, en français, avec le vocabulaire du logement social plutôt que celui, plus générique, du thème d'origine.
Voici un exemple avec un appartement T3 à Prades : résumé du bien, galerie de photos, puis un premier bloc avec l'adresse et sa carte.
Le bloc d'adresse ouvre une carte centrée sur le bien, avec une info-bulle reprenant la photo, le prix et la surface — utile pour se repérer sans quitter la fiche.
Le bloc énergie reprend le diagnostic de performance énergétique sous sa forme réglementaire, classe A à G, avec en vis-à-vis l'échelle des émissions de gaz à effet de serre. Les deux diagrammes se construisent automatiquement à partir des informations renseignées dans la fiche.
Le bloc budget détaille chaque ligne du coût réel du logement — loyer hors charges, charges locatives poste par poste, dépôt de garantie, frais de dossier — plutôt que de se limiter à un prix global, pour que le locataire sache précisément ce qu'il paie.
Une page de recherche avec carte interactive
En dehors des fiches individuelles, le thème d'origine ne proposait pas de page permettant de trier les annonces disponibles et de les visualiser sur une carte. J'ai construit cette page de toutes pièces : à gauche, la liste des biens sous forme de vignettes avec leurs filtres (typologie, catégorie, ville, quartier, loyer minimum et maximum) ; à droite, une carte interactive qui affiche un repère par bien et se met à jour en temps réel à chaque changement de filtre.
La carte s'appuie sur Leaflet.js, une bibliothèque de cartographie, associée à un fond de carte Mapbox personnalisé aux couleurs du site plutôt qu'au fond générique de Google Maps.
Ici, une recherche sur les biens à louer : les filtres restent affichés en permanence, les résultats et les repères de la carte se recalculent ensemble à chaque critère coché.
Une galerie de photos remplacée par du sur-mesure
Dans sa version d'origine, le thème affichait les photos d'un bien sous forme de carousel horizontal, un défilement automatique peu pratique pour comparer plusieurs pièces. Le client voulait une galerie de vignettes cliquables, ouvrant une visionneuse en plein écran avec une navigation entre les photos au clavier ou avec des flèches. J'ai donc remplacé le composant d'origine du thème par une galerie construite en jQuery.
Un en-tête entièrement personnalisé
L'en-tête du site a lui aussi été entièrement repris : une double barre de navigation, avec un premier niveau regroupant les actions principales (« À louer », « À vendre », « Nous soutenir ») et un second niveau pour le menu classique, plus un moteur de recherche qui s'ouvre en plein écran au clic sur une loupe plutôt que d'occuper en permanence de la place dans l'en-tête. L'ensemble a été adapté à l'usage mobile, pour les locataires et propriétaires qui consultent le site depuis leur téléphone.