WordPress 5.8, sorti en juillet 2021, venait tout juste d’introduire un Site Editor encore expérimental quand une association a demandé un compte à rebours affichant le temps restant avant la clôture d’une collecte de dons, seule information qu’elle souhaitait mettre en évidence sur sa page d’accueil pour une campagne ponctuelle organisée sur trois semaines. Le site venait de basculer sur un thème compatible avec cet éditeur encore jeune, en attente de la refonte plus large annoncée pour la version suivante.
Aucune extension de compte à rebours n’était installée sur ce site, et l’association ne souhaitait pas ajouter de dépendance supplémentaire pour un besoin aussi ponctuel. La solution retenue a consisté à construire ce compte à rebours directement avec un bloc HTML personnalisé, inséré dans le gabarit de la page d’accueil géré par l’éditeur de site expérimental.
Pourquoi éviter une extension dédiée
Une extension de compte à rebours, même légère, ajoute son propre panneau de réglages, ses propres feuilles de style, et surtout une dépendance à maintenir dans le temps pour un besoin qui ne durera que trois semaines. Sur un site associatif à budget limité, chaque dépendance supplémentaire représente un risque de compatibilité à surveiller, en particulier sur un thème encore expérimental où les interactions avec des extensions tierces restent peu éprouvées.
- Aucun panneau de réglages supplémentaire à former auprès de l’équipe bénévole.
- Aucune mise à jour d’extension à suivre après la fin de la campagne.
- Un code entièrement supprimable en un clic une fois la collecte terminée.
La construction du bloc HTML personnalisé
Le bloc HTML personnalisé, disponible nativement dans l’éditeur de blocs depuis longtemps, a permis d’insérer directement une structure minimale accompagnée d’un court script.
<div id="collecte-compte-rebours">Chargement…</div>
<script>
(function () {
var cible = new Date('2021-11-30T20:00:00');
var element = document.getElementById('collecte-compte-rebours');
setInterval(function () {
var diff = cible - new Date();
var jours = Math.floor(diff / 86400000);
element.textContent = jours + ' jours avant la clôture de la collecte';
}, 60000);
})();
</script>
Ce bloc a été inséré directement dans le fichier de gabarit de la page d’accueil, géré depuis l’éditeur de site expérimental, sans modification du thème lui-même. L’opération a permis de vérifier, au passage, que l’éditeur de site acceptait sans difficulté un bloc HTML personnalisé au milieu de blocs plus classiques comme un groupe ou une image de couverture.
Ce que ce choix ne couvre pas
Aucun bouton de paiement associé
Ce compte à rebours reste purement informatif : il n’intègre aucun bouton de paiement ni aucune passerelle de don. Cette partie du dispositif, gérée séparément via un lien externe vers une plateforme de collecte tierce, sort volontairement du périmètre de cet article.
Aucune personnalisation visuelle poussée
Le style du compte à rebours est resté volontairement sobre, hérité de la feuille de style globale du thème, pour éviter d’ajouter une couche de CSS supplémentaire à maintenir pour un usage aussi temporaire.
Le retrait en fin de campagne
Une fois la collecte achevée, le bloc a été supprimé du gabarit en quelques secondes depuis l’éditeur de site, sans laisser de trace de code mort dans le thème, contrairement à ce qu’aurait pu produire une extension mal désinstallée.
Pour un besoin ponctuel et limité dans le temps, un bloc HTML bien ciblé rend souvent un meilleur service qu’une extension complète, surtout sur un thème encore jeune où chaque dépendance ajoute de l’incertitude.
En résumé
Ce compte à rebours de collecte, construit avec une douzaine de lignes de JavaScript et inséré via un bloc HTML personnalisé, a permis de répondre à un besoin ponctuel sans alourdir un site associatif ni ajouter de dépendance sur un thème encore expérimental. Le bouton de paiement lui-même, question distincte, reste à traiter séparément selon la plateforme de collecte choisie par l’association.
