Refonte du site web
Mairie de Talange

Section 01

Rappel du contexte

Ce rapport final clôt le stage de fin d'études effectué dans le cadre du DEUST Webmaster et Métiers de l'Internet (DEUST WMI) de l'Université de Limoges — Faculté des Sciences et Techniques (FST), promotion 2025–2026. Le stage s'est déroulé du 23 mars au 24 mai 2026, soit neuf semaines à temps plein, au sein du service informatique de la Mairie de Talange, commune de 7 500 habitants située en Moselle, entre Metz et Thionville.

Le sujet de stage portait sur la refonte complète du site web officiel de la commune. Il s'agissait de remplacer intégralement le site existant talange.com, hébergé sur un CMS mutualisé propriétaire (Réseau des Communes), par un thème WordPress entièrement développé sur mesure, sans recours à un page builder. Les objectifs initiaux portaient sur la mise en conformité légale (RGPD, RGAA 4.1), l'amélioration significative des performances, la refonte complète du design et de l'ergonomie, ainsi que l'autonomie du service informatique sur la maintenance future.

La période de stage a en outre permis de répondre à plusieurs missions transversales hors périmètre site web : rédaction de contenus pour les pages éditoriales, création de publications pour les réseaux sociaux de la mairie, et appui ponctuel aux agents sur des problèmes informatiques courants. Ces missions complémentaires ont enrichi la compréhension transversale du fonctionnement de la commune.

Section 02

Description du projet et des missions réalisées

L'ensemble des neuf missions initialement définies dans le rapport de lancement a été mené à terme, complété par plusieurs missions transversales. Le projet s'est structuré autour de six grands chantiers techniques successifs et complémentaires, chacun donnant lieu à une série de commits Git documentés et tracés. Au total, plus de cinquante commits ont été poussés sur un dépôt Git distant privé au long du stage.

Architecture et développement du thème WordPress

Le thème custom talange a été développé from scratch en PHP 8.2, CSS et JavaScript vanilla, sans recours à un framework ni à un page builder. L'architecture s'appuie sur les standards natifs de WordPress :

• 13 Custom Post Types (CPTs) ont été déclarés pour structurer les données métier propres à une mairie : événements, délibérations, arrêtés municipaux, bulletins municipaux, élus, écoles, agents de service, commerces, associations, équipements publics, établissements culturels, comptes-rendus et flash-infos.
• Plus de 60 templates PHP ont été écrits pour couvrir l'intégralité des rubriques du site (Vie municipale, Démarches, Solidarité, Jeunesse, Culture & Sport, Cadre de vie, Vie économique, Actualités, Agenda, Contact).
• Une page de réglages d'administration dédiée a été créée via la Settings API de WordPress pour permettre à la mairie de mettre à jour ses coordonnées (téléphone, adresse, email, horaires) sans intervention sur le code. Les valeurs sont exposées via cinq fonctions helpers (talange_mairie_phone(), talange_mairie_voie(), etc.) réutilisables dans tous les templates.

Optimisation des performances

Un audit performance approfondi a été conduit en plusieurs vagues, donnant lieu à des chantiers techniques ciblés :

• La feuille de style principale main.css a été allégée de 43 Ko (-19,7 %) grâce à un cleanup du code mort et à l'extraction de quatre bundles CSS conditionnels (hommes-usines.css, vie-municipale.css, demarches.css, contact.css) chargés uniquement sur les pages concernées via la fonction is_page_template().
• Un sprite SVG centralisé regroupe à présent 110 symboles vectoriels uniques, mutualisés à travers le site via un helper talange_icon(). Environ 365 occurrences de SVG inline ont été migrées, économisant environ 30 Ko de HTML répété sur chaque page.
• Un système de cache transient a été mis en place sur les listings des sept Custom Post Types les plus consultés (élus, services, délibérations, arrêtés, bulletins, commerces, associations), avec invalidation automatique sur save_post et delete_post. Le gain TTFB estimé en production atteint 225 ms cumulés sur les pages chaudes.
• Des requêtes N+1 identifiées sur les listings /associations/ et /commerces/ ont été refactorisées : le nombre de requêtes SQL par chargement de la page Commerces est passé de 287 à 5, soit une réduction d'un facteur 57.
• Les paramètres posts_per_page=-1 dans les WP_Query, jusque-là non capés, ont été plafonnés à des valeurs raisonnables (100 à 500 selon les CPTs) pour prévenir toute explosion de mémoire en cas de croissance future des données.

Le résultat global, mesuré par Lighthouse, atteint 100/100 en Performance sur desktop et 92/100 en mobile (simulé en 3G Slow et throttling CPU 4×, conditions volontairement pessimistes).

Accessibilité et conformité RGAA

L'accessibilité, obligation légale pour les sites publics français (RGAA 4.1.2), a fait l'objet d'un audit ciblé suivi d'un commit de correctifs prioritaires :

• Vingt-huit attributs aria-label contextuels ont été ajoutés sur les liens génériques de type « En savoir plus » pour qu'ils soient explicites hors contexte aux lecteurs d'écran.
• Trente-cinq attributs scope="col" ou scope="row" ont été ajoutés sur les <th> des sept tableaux de données du site.
• La hiérarchie des titres a été corrigée sur les templates concernés (notamment élimination d'un saut h1 → h3 sur la page Services municipaux).
• Le sprite SVG est intégralement marqué aria-hidden="true" via le helper, conformément aux bonnes pratiques pour les icônes décoratives.
• Une page de déclaration d'accessibilité conforme à l'article 47 du décret RGAA a été enrichie avec la date d'établissement, le statut de conformité, la liste précise des contenus non accessibles, les modalités de signalement et les voies de recours auprès du Défenseur des droits.

Le score Lighthouse Accessibility atteint 96/100 sur les modes desktop et mobile, les pertes de points restantes concernant principalement des contrastes de couleurs à ajuster sur les variantes de la palette teal.

Référencement et SEO

L'extension Yoast SEO, déjà installée sur le site, a été configurée intégralement via WP-CLI (lignes de commande WordPress) plutôt que par l'interface graphique, pour garantir la reproductibilité de la configuration :

• Méta-descriptions personnalisées sur les 55 pages publiées : vingt-sept descriptions rédigées sur mesure pour les pages les plus stratégiques, vingt-huit autres générées via un script PHP idempotent à partir du titre de page.
• Image Open Graph par défaut, données d'identité Organization complètes (nom légal, adresse postale, téléphone, email, logo) pour les partages sur les réseaux sociaux.
• Un filtre PHP custom a été ajouté pour étendre les données structurées Schema.org de Yoast : le type par défaut Organization est remplacé par GovernmentOrganization, plus précis pour une mairie, avec ajout des champs address, telephone, email et areaServed, favorisant l'apparition d'un panneau de connaissances Google local.

Extrait du filtre, dans inc/seo-schema.php :

add_filter( 'wpseo_schema_organization', function( $data ) {
    $data['@type'] = 'GovernmentOrganization';
    $data['address'] = [
        '@type'           => 'PostalAddress',
        'streetAddress'   => talange_mairie_voie(),
        'postalCode'      => talange_mairie_cp(),
        'addressLocality' => talange_mairie_ville(),
        'addressRegion'   => 'Moselle',
        'addressCountry'  => 'FR',
    ];
    $data['telephone'] = talange_mairie_phone( 'raw' );
    $data['email']     = talange_mairie_email();
    return $data;
});

Score Lighthouse SEO : 100/100 sur les modes desktop et mobile.

Sécurité et conformité RGPD

Plusieurs plugins de sécurité ont été installés et paramétrés :

• Wordfence Security pour la détection des tentatives d'intrusion, le scan des fichiers vérolés et la limitation des tentatives de connexion.
• WPS Hide Login pour masquer l'URL d'administration standard et réduire la surface d'attaque face aux attaques par force brute.
• Complianz GDPR pour la bannière de consentement aux cookies, conforme aux recommandations de la CNIL.

En complément, un en-tête Content Security Policy (CSP) personnalisé a été ajouté côté serveur pour restreindre les sources autorisées de scripts, d'images et de feuilles de style, et l'édition de fichiers depuis l'interface d'administration WordPress a été désactivée via la constante DISALLOW_FILE_EDIT dans wp-config.php.

Mise en pré-production

La mise en production a été préparée et exécutée durant la dernière semaine du stage :

• Souscription à l'offre Cloud d'o2switch, hébergeur français reconnu, avec support en France et sauvegardes quotidiennes incluses.
• Réservation d'un domaine de pré-production talange-preview.fr, distinct du domaine officiel talange.fr dont l'arbitrage final demeure du ressort du conseil municipal.
• Provisionnement automatique d'un certificat SSL Let's Encrypt via le mécanisme AutoSSL de l'hébergeur.
• Activation des enregistrements DKIM et SPF sur le domaine pour améliorer la délivrabilité des notifications email du formulaire de contact.
• Migration complète des données depuis l'environnement local : exportation de la base MySQL via WP-CLI avec remplacement des URLs (search-replace), transfert des 1,4 Go de fichiers (thème, plugins, médias) via FTPES.
• Tests post-déploiement et envoi d'un mail groupé à l'ensemble des agents de la mairie, transmis par l'équipe du cabinet du Maire, invitant à parcourir la pré-version et à transmettre leurs retours.

Missions transversales

Trois missions complémentaires ont été menées en parallèle des chantiers techniques :

• Rédaction de contenus éditoriaux pour plusieurs pages du site (présentations des services, descriptions d'équipements publics, contenus institutionnels).
• Création de publications pour les comptes Facebook et Instagram officiels de la commune.
• Support informatique ponctuel auprès d'autres agents de la mairie (dépannage logiciel, configuration de postes de travail, conseils sur l'usage des outils bureautiques).

Ces interventions, hors périmètre initial du sujet de stage, ont permis d'élargir le champ des compétences mobilisées et d'apprendre à articuler le travail de fond technique avec des sollicitations quotidiennes plus diverses.

Section 03

Planning du travail réalisé

Le planning prévisionnel établi dans le rapport de lancement a été suivi dans son intégralité, avec une remise à plat en milieu de stage pour anticiper les optimisations transverses (sprite SVG, bundles CSS conditionnels, cache transient) qui n'étaient pas explicitement listées au lancement mais s'imposaient pour atteindre les objectifs de performance. Le tableau ci-dessous présente le déroulé réel des neuf semaines de stage.

1. 1
   23 – 27 mars Terminé

   Prise de poste et intégration au service informatique. Audit complet de l'existant talange.com (sécurité, performance, accessibilité, SEO, design). Recueil des besoins auprès des différents services municipaux. Veille sur les sites des communes voisines (Florange, Fameck, Hayange).

2. 2
   30 mars – 3 avr. Terminé

   Installation de l'environnement local via Local WP. Création du thème WordPress custom talange from scratch. Mise en place de la structure de base (functions.php, header.php, footer.php, palette de couleurs, typographie).

3. 3
   7 – 11 avr. Terminé

   Développement des principaux templates PHP de page (Accueil, Vie municipale, Démarches, Solidarité, Jeunesse, Culture & Sport, Cadre de vie, Vie économique). Mise en place du CSS principal et de la charte graphique.

4. 4
   14 – 18 avr. Terminé

   Déclaration des 13 Custom Post Types et des taxonomies associées dans inc/cpts.php et inc/cpts-annuaire.php. Création des meta boxes spécifiques (PDF, ordre, photo). Implémentation du filtre Agenda côté client en JavaScript vanilla.

5. 5
   22 – 25 avr. Terminé

   Organisation et renommage des fichiers médias. Intégration des 101 fichiers d'images et de PDF fournis par les services. Régénération des miniatures WordPress. Rédaction de contenus éditoriaux pour les pages institutionnelles.

6. 6
   28 avr. – 2 mai Terminé

   Configuration de Complianz GDPR pour la bannière de consentement cookies. Installation et paramétrage de Wordfence Security et WPS Hide Login. Première passe d'accessibilité via WP Accessibility. Centralisation des coordonnées mairie en options WordPress (Settings API).

7. 7
   5 – 9 mai Terminé

   Audit de performance approfondi et chantiers d'optimisation : extraction de quatre bundles CSS conditionnels, mise en place du cache transient sur les listings CPT, identification et correction des requêtes N+1 sur les pages Commerces et Associations, plafonnement des posts_per_page.

8. 8
   12 – 16 mai Terminé

   Construction du sprite SVG centralisé (110 symboles, helper talange_icon()), migration de l'ensemble des SVG inline du thème. Suite des audits d'accessibilité (RGAA quick wins) et de SEO (configuration Yoast, filtre Schema.org GovernmentOrganization). Theme Check et corrections de conformité aux WordPress Coding Standards.

9. 9
   19 – 24 mai Terminé

   Mise en pré-production sur talange-preview.fr (hébergement o2switch). Migration de la base MySQL avec search-replace des URLs, transfert des 1,4 Go de fichiers via FTPES. Activation du SSL Let's Encrypt, DKIM et SPF. Tests post-déploiement. Envoi du mail groupé d'invitation aux retours auprès des agents. Rédaction du rapport final.

Section 04

Analyse du travail réalisé

Points forts

• Méthodologie itérative et tracée. Chaque chantier technique a été conduit selon un pattern récurrent : audit en lecture seule, validation du plan d'action, exécution, vérifications automatisées, puis commit Git documenté et push sur dépôt distant. Cette discipline a produit plus de cinquante commits messages explicites, permettant un suivi historique précis et facilitant un éventuel revert chirurgical en cas de régression.
• Documentation à destination du commanditaire. Un fichier HANDOFF.md de six cents lignes a été rédigé en fin de stage, à destination des agents de la mairie n'ayant aucune connaissance technique. Il couvre la maintenance courante, les sauvegardes, la sécurité, le calendrier d'entretien et un glossaire de dix-sept termes. Cette livraison documentaire est aussi importante que le code lui-même pour assurer l'autonomie future du service.
• Autonomie complète. Le projet a été conduit du début à la fin sans encadrement quotidien rapproché, avec définition autonome des priorités, choix techniques, arbitrages méthodologiques et organisation de la livraison.
• Conformité légale prise en compte dès le lancement. Les exigences RGPD, RGAA 4.1 et la déclaration d'accessibilité (article 47 du décret RGAA) ont été intégrées comme objectifs structurants du projet, pas comme un ajout final.

Points d'amélioration et actions correctives

• Estimation initiale du temps de certaines optimisations. L'audit performance initial avait identifié plusieurs chantiers (sprite SVG, bundles CSS, cache transient) sans en mesurer précisément le coût en temps. Le sprite SVG en particulier s'est révélé plus lourd que prévu, avec près de quatre cents occurrences à migrer à travers une soixantaine de templates. Action corrective : un audit préalable en phase 1 (lecture seule, sans modification) est désormais systématique avant tout chantier technique non trivial, pour cadrer précisément le périmètre et l'effort attendu.
• Conflit Git lors d'un travail simultané sur des fichiers communs. Pendant le sprint final, deux contextes de travail parallèles ont été ouverts sur les mêmes fichiers du thème (main.css et template-vie-municipale.php). Une intervention sauvegardée rapidement via Git a écrasé un travail encore en cours sur l'autre contexte. L'incident a été détecté immédiatement et résolu en quinze minutes par un rollback du commit et une récupération des modifications via des snapshots temporaires. Aucune donnée n'a été perdue. Action corrective : la règle « ne jamais travailler simultanément sur des fichiers communs tant qu'un chantier n'est pas finalisé et poussé sur Git » a été documentée dans le HANDOFF.md et est devenue un réflexe automatique.
• Dépendance au calendrier administratif. La mise en production officielle, conditionnée à un vote en conseil municipal pour validation budgétaire, n'a pas pu aboutir dans la durée du stage en raison du délai incompressible de cette procédure. Action corrective : la mise en place anticipée d'une solution de pré-production sur un domaine provisoire a permis de livrer un site pleinement fonctionnel à temps, et de soumettre la version finale aux retours des agents pour itération avant la bascule définitive.
• Délivrabilité des emails sortants sur un nouveau domaine. Lors des premiers tests du formulaire de contact en pré-production, les notifications arrivaient en dossier indésirable. Action corrective : activation des enregistrements DKIM et SPF dans le panneau d'administration de l'hébergeur, et mise en cohérence du champ From de Contact Form 7 avec le domaine d'envoi pour respecter la politique SPF.

Section 05

Bilan personnel

Compétences techniques consolidées

Ce stage m'a permis de consolider et d'élargir significativement ma maîtrise de la stack web WordPress avancée. Avant ce stage, j'avais déjà des bases solides en PHP, HTML, CSS et JavaScript vanilla, mais je n'avais jamais conduit en autonomie un projet de cette envergure (60 templates, 13 Custom Post Types, plus de cinquante commits Git, mise en production sur hébergement mutualisé).

Les principales compétences techniques mobilisées ou approfondies sont :

• Architecture d'un thème WordPress custom : déclaration de CPTs, de taxonomies, de meta boxes, écriture de templates conditionnels, gestion des hooks save_post / delete_post, Settings API pour les pages de réglages d'administration.
• Optimisation des performances web : sprite SVG, bundles CSS conditionnels, cache transient WordPress, élimination des requêtes N+1, métriques Core Web Vitals via Lighthouse.
• Outils en ligne de commande : WP-CLI pour l'export et l'import de base de données avec search-replace, MySQL en ligne de commande via socket local, audit Lighthouse via npm.
• Déploiement et administration serveur : hébergement mutualisé cPanel, transfert SFTP/FTPES via FileZilla, configuration DNS, génération de certificats SSL Let's Encrypt, configuration DKIM et SPF.
• Conformité réglementaire : RGAA 4.1.2, RGPD, déclaration d'accessibilité (article 47 du décret), audit Theme Check pour les WordPress Coding Standards.

Compétences transversales et apport humain

Au-delà des compétences purement techniques, j'ai pu développer plusieurs aptitudes transversales : la capacité à structurer un projet long sans encadrement quotidien, à dialoguer avec des interlocuteurs non techniques (les différents services de la mairie) pour traduire leurs besoins en spécifications, à rédiger de la documentation accessible à un public non développeur, à anticiper les risques d'un déploiement et à les résoudre rapidement lorsqu'ils surviennent.

Mon tuteur entreprise, Roberto Cardosi, en raison d'une activité particulièrement soutenue, a sollicité l'appui de l'équipe du cabinet du Maire pour l'accompagnement opérationnel au quotidien, ce qui m'a permis de bénéficier d'un point de vue transversal sur le fonctionnement de la commune. Cyril Hirtz, collaborateur du cabinet du Maire que je remercie, a notamment joué un rôle facilitateur dans la communication avec les différents services et lors de la diffusion de la pré-version aux agents.

Adéquation avec la formation DEUST WMI

Ce stage a couvert l'intégralité des grands axes de compétences attendus en fin de DEUST Webmaster et Métiers de l'Internet : développement front-end (HTML5, CSS3, JavaScript vanilla), développement back-end (PHP 8, MySQL, WordPress), gestion de projet (planification, autonomie, livraison documentée), conformité réglementaire (RGAA, RGPD), administration serveur (déploiement, sauvegardes, SSL), et communication professionnelle (rédaction, présentations, diffusion).

Il a aussi confirmé mon orientation professionnelle vers les métiers du développement web, particulièrement sur les projets à enjeu institutionnel ou public, où la rigueur méthodologique et le respect des obligations légales sont des composantes structurantes du travail.

Section 06

Conclusion et perspectives

La refonte complète du site web de la Mairie de Talange a été menée à terme dans les neuf semaines du stage, avec un livrable techniquement abouti, conforme aux exigences légales (RGAA 4.1, RGPD), performant (100/100 en performance desktop, 92/100 en mobile sur Lighthouse) et documenté à destination du service informatique pour la maintenance future.

La pré-version est en ligne sur talange-preview.fr et accessible à l'ensemble des agents de la commune pour validation interne. La bascule définitive sur le domaine officiel demeure à l'arbitrage du conseil municipal, dans le cadre de sa procédure de validation budgétaire.

Sur le plan personnel, ce stage représente une expérience formatrice complète : conduite d'un projet long en autonomie, dialogue avec un commanditaire institutionnel, livraison documentée d'un patrimoine logiciel. Il confirme mon souhait de poursuivre dans le développement web professionnel, et m'a donné l'occasion d'éprouver concrètement la valeur d'une méthodologie rigoureuse et d'une documentation soignée, deux dimensions qui distinguent un livrable maintenable d'un simple prototype.