Site WordPress sur mesure pour un cinéma associatif — films, séances, festivals et événements via API
Scores de cette page :
EcoIndex B
SEO 100%
Accessibilité 100%
Performance 100%
Bonnes Pratiques 100%
Refonte d'un site de cinéma associatif à petit budget, sur un thème de base éco-conçu (Colibri). API de programmation automatique, types de contenus personnalisés, affichage des séances par date, bandes-annonces YouTube saisies en back-office, import CSV fusionné, formation ciblée sur les usages réels de l'équipe.
Contexte : une refonte totale, du design au code
Le Cinéma René Fallet, à Dompierre-sur-Besbre, disposait d'un ancien site qui ne convenait plus à l'équipe. Le projet a consisté à le remplacer entièrement : conception graphique, structure du site, développement WordPress et mise en place de l'ensemble des outils d'administration — de A à Z, sans reprendre l'ancien site ni s'appuyer sur une maquette fournie par un tiers.
Le site s'appuie sur quatre types de contenu sur mesure gérés par l'équipe elle-même dans l'administration WordPress : les films, les festivals, les événements ponctuels, et les affiches mises en vente — chacun avec ses propres champs à remplir, pensés dès la conception pour rester simples d'usage à une équipe qui n'est pas technicienne. Une fois le site livré, son suivi a été assuré pendant un an, avec plusieurs évolutions ajoutées à la demande de l'équipe au fil de l'utilisation réelle du site.
Les films : une fiche alimentée automatiquement, mais toujours modifiable à la main
Chaque film affiché sur le site est en réalité une fiche technique (nom, affiche, réalisateur, durée, pays, synopsis, horaires de séances...) alimentée automatiquement par un plugin WordPress développé sur mesure pour ce site : « René Fallet Film API ». Une fois par heure, ce plugin va chercher le programme à jour auprès du prestataire de billetterie du cinéma, crée une fiche pour chaque nouveau film, met à jour les fiches existantes, et supprime celles des films qui n'ont plus aucune séance à venir — sans qu'un film déjà passé ne reste affiché par erreur. Un bouton dans l'administration permet aussi à l'équipe de déclencher cette mise à jour immédiatement, sans attendre la prochaine synchronisation automatique. L'équipe n'a donc normalement rien à saisir pour un film classique : il apparaît automatiquement sur le site dès qu'il est programmé.
Deux situations demandent une intervention manuelle de l'équipe, directement dans l'administration du site. La première, la plus fréquente : ajouter le lien de la bande-annonce, une information que cette base de données ne fournit pas. La seconde, plus rare : un film « hors caisse » (une projection spéciale, un documentaire, une avant-première non gérée par la billetterie habituelle) ne remonte jamais automatiquement — l'équipe coche alors une case « Film ajouté manuellement », ce qui fait apparaître tous les champs à remplir à la main (affiche, réalisateur, pays, durée, synopsis, séances). Cette même case permet aussi, pour un film classique, de corriger à la main une information mal renseignée par l'API sans attendre une mise à jour de leur côté.
Une correction silencieuse : les bandes-annonces qui ne s'affichaient pas toujours
Le champ prévu pour la bande-annonce attend un code d'intégration complet (une balise iframe). Avec le temps, l'équipe a pris l'habitude d'y coller simplement le lien de la vidéo YouTube, sans cette balise — geste plus naturel pour quelqu'un de non technicien. Résultat : certaines bandes-annonces ne s'affichaient plus sur le site, sans que personne ne comprenne pourquoi ni ne le signale.
Le constat a été fait de mon côté, en surveillant le site plutôt qu'à la suite d'un signalement. Correction apportée : une fonction commune reconnaît désormais ce qui a été collé dans le champ, quelle que soit sa forme (lien court, lien classique ou code d'intégration déjà complet), et reconstruit toute seule l'affichage correct. L'équipe peut continuer à coller le lien comme elle en a pris l'habitude, sans rien changer à sa façon de faire, et sans même avoir été informée du problème ni de la correction.
Une demande ajoutée en cours de route : la vente d'affiches
Après la mise en ligne du nouveau site, le cinéma a exprimé un besoin qui n'existait pas au moment de la conception : proposer à la vente les affiches de films en stock, et pouvoir tenir ce stock à jour eux-mêmes, sans intervention technique à chaque changement. Un nouveau type de contenu a été créé pour ça : une fiche par affiche, où l'équipe n'a que quatre nombres à saisir (le stock disponible dans chaque format — grande affiche roulée ou pliée, petite affiche roulée ou pliée). Le site se charge seul d'assembler tout ça en tableau public, consultable par les visiteurs du site.
Festivals et événements : réutiliser les films déjà en base plutôt que ressaisir
Deux autres types de contenu permettent à l'équipe de mettre en avant un festival ou un événement ponctuel (avant-première, ciné-concert, soirée spéciale) : une fiche dédiée avec dates, affiche, description libre et lien vers le site du festival le cas échéant. Dans les deux cas, un menu de recherche permet de rattacher un ou plusieurs films déjà enregistrés sur le site — qu'ils viennent de l'API ou qu'ils aient été ajoutés à la main — sans avoir à ressaisir leurs informations une deuxième fois.
Un réglage ajouté à la demande : la vitesse du diaporama d'accueil
La page d'accueil met en avant les événements de la semaine sous forme d'un diaporama automatique en haut de page. L'équipe a demandé à pouvoir régler elle-même la vitesse de défilement de ces images, plutôt que de dépendre d'une valeur fixée une fois pour toutes dans le code. Un simple réglage a été ajouté dans l'administration de la page d'accueil : un nombre de millisecondes entre chaque image, avec des bornes de sécurité (entre 1 et 10 secondes) pour éviter un défilement trop rapide pour être lisible ou trop lent pour être dynamique. En l'absence de réglage, le diaporama continue de fonctionner avec une vitesse par défaut.
Une demande étudiée puis écartée : la newsletter
L'équipe a un temps souhaité l'ajout d'une newsletter directement gérée depuis le site. Plutôt que d'installer une solution par défaut, un devis comparatif a été établi entre les principales extensions WordPress d'envoi de newsletter, avec leur coût réel selon le nombre d'emails envoyés chaque mois. Au vu de ces montants rapportés à un usage occasionnel, l'équipe a préféré continuer à envoyer sa newsletter manuellement depuis sa messagerie habituelle plutôt que de payer pour un outil sous-utilisé — une recommandation qui allait à l'encontre de la prestation supplémentaire, mais la plus honnête au vu de leur besoin réel.
Visite guidée du site, côté visiteur
Le site public reste volontairement simple d'accès : le programme des séances par date, la liste des festivals à venir, les tarifs et un formulaire de contact, sans compte à créer pour consulter le site.
Le programme par date
Une frise de dates, sur quatorze jours glissants, permet de passer d'un jour à l'autre pour consulter les séances programmées : cliquer sur une date filtre instantanément les films affichés, sans recharger la page. Chaque film garde son affiche, son résumé, l'horaire exact du jour choisi et un bouton d'achat de billets en ligne qui renvoie vers la billetterie du cinéma. Un bouton de téléchargement du programme complet au format PDF est également disponible en haut de page, quand l'équipe en a mis un en ligne.
Une bonne dizaine de bandes-annonces sur la même page, sans qu'elles ne se marchent dessus
Sur la fiche d'un film seul, un seul bouton « Voir la bande-annonce » suffit, avec une seule fenêtre associée. Mais sur la page du programme par date, où tous les films de la journée s'affichent les uns sous les autres, ce même mécanisme est répété autant de fois qu'il y a de films — chaque bouton et chaque fenêtre reçoivent donc un identifiant qui inclut le numéro du film concerné. Sans ce détail, cliquer sur la bande-annonce d'un film aurait pu, selon l'ordre d'affichage, ouvrir par erreur la fenêtre d'un autre film de la liste.
Les festivals
Chaque festival dispose de sa propre présentation détaillée (Kinorama, dédié au patrimoine du cinéma, ou Un Brin de Court, festival de courts métrages), avec la programmation associée directement affichée sous forme de vignettes.
Les tarifs
Tous les tarifs pratiqués par le cinéma sont listés sur une seule page : plein tarif, tarif réduit du mardi, carte d'abonnement rechargeable, tarif jeunes, ainsi que les différents pass régionaux et culturels acceptés en caisse.
Les affiches en vente
La page ajoutée en cours de maintenance affiche automatiquement, sous forme de tableau, l'ensemble des affiches actuellement en stock dans les quatre formats proposés — sans aucune mise en forme à faire à la main côté équipe, qui se contente de tenir les quantités à jour.
Le contact
Un formulaire de contact classique, protégé contre les soumissions automatisées, permet aux visiteurs de joindre directement l'équipe du cinéma sans passer par un email affiché en clair sur le site.
Environnement technique
WordPress, avec un thème enfant qui surcharge un thème parent existant (styles et scripts propres au site, chargés par-dessus ceux du thème d'origine, ici basé sur le framework Colibri WP). Quatre types de contenu sur mesure (Film, Festival, Événement, Affiche) et leurs champs personnalisés gérés avec ACF (Advanced Custom Fields), une extension qui permet de créer des formulaires d'administration sur mesure sans base de données à concevoir à la main. Un plugin développé spécifiquement pour ce site (« René Fallet Film API ») synchronise automatiquement le catalogue de films avec le système de billetterie du cinéma. La vignette d'un film (affiche, résumé, prochaine séance) est écrite une seule fois sous forme de composant réutilisable, puis réaffichée à l'identique sur la page d'accueil, dans le programme par date et dans les pages festival — pour ne modifier qu'un seul fichier si son apparence doit changer un jour. Le résumé et le bouton « Voir la fiche » de cette vignette ne s'affichent qu'au survol de la souris ; sur mobile et tablette, où il n'y a pas de survol possible, ce panneau reste désactivé plutôt que de rester bloqué à l'écran ou de nécessiter un double clic, pour ne pas gêner la navigation tactile. JavaScript natif, sans bibliothèque externe, pour le diaporama de la page d'accueil, le sélecteur de jour du programme et les fenêtres de lecture des bandes-annonces.
Note
Conception graphique, architecture du site, quatre types de contenu sur mesure, plugin de synchronisation avec la billetterie : l'ensemble de ce projet a été pensé et développé de bout en bout, en remplacement de l'ancien site du cinéma. Le suivi assuré l'année suivant la mise en ligne a porté surtout sur des évolutions demandées par l'équipe au fil de son usage réel du site (vente d'affiches, réglage du diaporama) et sur une veille discrète du bon fonctionnement du site (correction du lien de bande-annonce) — la base posée dès la conception ayant demandé peu de correctifs.
Bilan des optimisations Eco index & Performance
Ce bilan synthétise les actions menées pour améliorer l'éco-conception (GreenIT), le score de performance (Lighthouse) et la gestion des ressources du site.
Externalisation et nettoyage du code (HTML / CSS / JS)
Problème initial : le thème ColibriWP et WordPress injectaient de nombreux blocs de styles (<style>) et de scripts (<script>) directement en dur dans le code HTML des pages (inline), ce qui pénalisait l'analyse GreenIT et empêchait la mise en cache par le navigateur.
Solution mise en place : installation et configuration du plugin Autoptimize.
Résultats :
- Activation de l'optimisation et de l'agrégation du code JavaScript.
- Activation de l'optimisation et de l'agrégation des fichiers CSS inline.
- Regroupement des scripts et styles en fichiers statiques distincts pour faciliter le chargement et le cache navigateur.
Migration des images distantes vers le stockage local
Problème initial : les affiches des films étaient affichées directement depuis une URL externe (images.monnaie-services.com), ce qui faisait peser les transferts sur un serveur tiers et posait des problèmes de performance et de cohérence.
Solution mise en place : modification du plugin d'intégration API (renefallet-api-integration.php) pour automatiser le téléchargement des affiches distantes directement dans la médiathèque locale de WordPress lors de la synchronisation horaire.
Résultats : les affiches font désormais partie intégrante du site, garantissant une meilleure maîtrise des flux de données et une compatibilité avec les outils d'optimisation locaux.
Conversion et optimisation au format WebP
Problème initial : les affiches de films locales étaient de lourds fichiers JPG/PNG.
Solution mise en place : installation du plugin Converter for Media, une solution locale et entièrement gratuite.
Résultats :
- Conversion automatique de l'ensemble de la médiathèque au format moderne WebP (plus léger et performant).
- Prise en charge automatique des nouvelles affiches téléchargées par l'API en arrière-plan sans intervention manuelle.
Allègement des éléments graphiques fixes (Logo et visuels)
Problème initial : le logo du site (logo.png) pesait plus de 500 Ko, alourdissant inutilement le poids de la page d'accueil.
Solution mise en place :
- Nettoyage et redimensionnement des visuels graphiques.
- Utilisation privilégiée du format vectoriel SVG pour les éléments graphiques nécessitant des adaptations de taille fluides (
movietape4.svg).
Résultats : réduction drastique du poids des éléments d'en-tête et amélioration de la stabilité visuelle de la page (réduction du score de décalage de mise en page - CLS).
Pagination de la page de vente des affiches
Problème initial : la page listant les affiches disponibles à la vente affichait l'intégralité du stock en une seule fois, ce qui alourdissait inutilement le DOM à mesure que le catalogue s'étoffait.
Solution mise en place : ajout d'une pagination sur cette page, limitant le nombre d'affiches chargées et affichées simultanément.
Résultats : un DOM plus léger et un temps de rendu plus stable, quelle que soit la taille du stock d'affiches disponible à la vente.
Synthèse des impacts
- Indicateurs GreenIT : suppression des requêtes et balises inline superflues, diminution du volume global de données redondantes transférées depuis des tiers.
- Performances (Lighthouse) : accélération du rendu initial, optimisation de la diffusion des images grâce au format WebP local et au format SVG vectoriel.
NOTE : les notes varient en fonction du nombre de films à l'affiche et à venir enregistrés. Lighthouse reste au dessus de 90% et l'écoindex de la home page ne descend pas en dessous de B.