Le Compte à rebours de campagne affiche un minuteur qui se met à jour en direct et décompte jusqu'à la date de fin d'une campagne, offrant aux donateurs un signal visuel clair et urgent pour agir avant la date limite. Disponible dans Charitable Pro 1.8.14+.
Fonctionnalités clés
- Compte à rebours en jours, heures, minutes et secondes, avec visibilité par unité.
- Choisissez entre un style "Boîte" (tuiles bordées) ou "En ligne" (compact sur une seule ligne).
- Choisissez ce qui se passe à la fin d'une campagne : afficher un message, figer le minuteur à zéro, ou le masquer.
- Déclenchez une célébration optionnelle avec des confettis ou des feux d'artifice au moment où le minuteur atteint zéro.
- Ajoutez un titre cliquable qui renvoie à la campagne ou à son formulaire de don.
- Stylez les chiffres, les étiquettes, l'arrière-plan et la bordure avec le même sélecteur Coloris utilisé ailleurs dans Charitable Pro.
- Activez une police numérique intégrée à sept segments pour un look de compte à rebours classique.
- Affichez ou masquez une ligne "Se termine le [date]" au-dessus ou en dessous du minuteur.
- Disponible en tant que champ du Constructeur de campagne, bloc Gutenberg et shortcode.
- Respecte la préférence de mouvement réduit du visiteur pour l'animation de célébration.
Pourquoi utiliser le Compte à rebours de campagne ?
L'urgence convertit. Une date limite visible indique aux donateurs le temps exact qu'il leur reste pour soutenir une campagne, ce qui est l'un des moyens les plus fiables d'augmenter les dons en fin de campagne. L'intégration du compte à rebours directement dans Charitable garantit qu'il reste synchronisé automatiquement avec la date de fin de la campagne, vous évitant ainsi de devoir mettre à jour un widget séparé.
Voyez-le en action
Exigences
- Charitable Pro 1.8.14 ou version ultérieure
- La campagne doit avoir une date de fin définie (les campagnes marquées comme indéfinies n'afficheront pas de compte à rebours)
Démarrage
Activation
Le Compte à rebours de campagne est intégré à Charitable Pro 1.8.14+. Aucun module complémentaire séparé à installer. Dès que vous mettez à jour vers une version prise en charge, le champ, le bloc et le shortcode sont disponibles.
Où le trouver
- Constructeur de campagne : ouvrez une campagne, passez à l'onglet Champs, et recherchez sous Champs Pro "Compte à rebours".
- Éditeur Gutenberg : recherchez "Compte à rebours de campagne" dans l'outil d'insertion de blocs.
- Shortcode : insérez
[charitable_campaign_countdown]dans n'importe quel article, page ou modèle.
Utilisation
Bloc (Gutenberg)
Insérez le bloc Compte à rebours de campagne depuis la catégorie des widgets, puis choisissez la campagne dans la barre latérale du bloc. Toutes les options visuelles et comportementales du champ du Constructeur de campagne sont exposées dans le panneau des paramètres du bloc, vous permettant ainsi de placer un compte à rebours stylisé n'importe où dans l'éditeur WordPress.
Champ du constructeur de campagne
Faites glisser le champ Compte à rebours sur la toile de la campagne. Tous les paramètres se trouvent dans le panneau de droite : titre, cible du lien, unités, style, couleurs, taille, alignement, comportement à l'expiration et effet de célébration. L'aperçu en direct du Constructeur de campagne reflète chaque modification au fur et à mesure de votre édition.
Si la campagne n'a pas de date de fin définie, le champ affiche un avertissement en ligne dans le constructeur et ne rend rien sur le front-end tant que vous n'avez pas défini la date de fin dans Paramètres → Durée de la campagne.
Raccourci
[charitable_campaign_countdown]Lorsqu'il est utilisé dans une boucle de campagne ou sur une page de campagne, le shortcode détecte automatiquement la campagne en cours. Utilisez l'attribut campaign_id pour afficher un compte à rebours pour une campagne spécifique n'importe où ailleurs sur votre site.
[charitable_campaign_countdown campaign_id="123" style="inline" show="days,hours,minutes" headline="Last chance to give!"]Options de configuration
Paramètres du shortcode
| Paramètre | Type | Défaut | Description |
|---|---|---|---|
id_campagne | entier | ID de publication actuel | La campagne vers laquelle compter à rebours. |
style | chaîne de caractères | encadré | boxed pour des tuiles avec bordure, inline pour un affichage compact sur une seule ligne. |
afficher | chaîne de caractères | jours,heures,minutes,secondes | Liste des unités à afficher, séparées par des virgules. Tout sous-ensemble des quatre unités. |
titre | chaîne de caractères | vide | Titre facultatif affiché au-dessus de la minuterie. |
lien | chaîne de caractères | vide | campaign lie le titre à la page de la campagne ; donation lie au formulaire de don. |
classe | chaîne de caractères | vide | Classe CSS supplémentaire ajoutée à l'enveloppe du compte à rebours. |
Paramètres d'affichage du bloc / champ
| Paramètre | Type | Défaut | Description |
|---|---|---|---|
| Titre | chaîne de caractères | vide | Texte facultatif affiché au-dessus de la minuterie. |
| Lien du titre | chaîne de caractères | aucun | none, campaign, ou donation. |
| Style | chaîne de caractères | encadré | boxed ou inline. |
| Afficher les unités | tableau | les quatre | Jours, heures, minutes, secondes. Chacun peut être activé indépendamment. |
| Utiliser la police d'affichage numérique | booléen | vrai | Applique un style à sept segments aux nombres. |
| Alignement | chaîne de caractères | gauche | left, center, ou right. |
Paramètres d'expiration
| Paramètre | Type | Défaut | Description |
|---|---|---|---|
| Quand la campagne se termine | chaîne de caractères | message | message affiche un message personnalisé, zero garde le minuteur à 00:00:00:00, hide supprime le compte à rebours. |
| Message expiré | chaîne de caractères | Campagne terminée | Texte affiché lorsque le comportement est message. |
| Délai de masquage (minutes) | entier | 0 | Minutes pendant lesquelles le compte à rebours reste affiché après avoir atteint zéro avant d'appliquer l'action de fin. |
Paramètres de célébration
| Paramètre | Type | Défaut | Description |
|---|---|---|---|
| Effet de célébration | chaîne de caractères | aucun | none, confetti, ou fireworks. Joue une fois lorsque le minuteur atteint zéro. |
Paramètres de la ligne de date de fin
| Paramètre | Type | Défaut | Description |
|---|---|---|---|
| Position du texte de la date de fin | chaîne de caractères | Masquer | hide, above, ou below. Contrôle la ligne « Se termine le [date] ». |
Paramètres de style
| Paramètre | Type | Défaut | Description |
|---|---|---|---|
| Couleur des nombres | hex | #222222 | Couleur des chiffres des unités. |
| Couleur des étiquettes | hex | #222222 | Couleur des étiquettes des unités. |
| Couleur de fond | hex | vide (transparent) | Arrière-plan de chaque tuile d'unité. Vide signifie « pas de remplissage », de sorte que la surface parente transparaisse. |
| Couleur de la bordure | hex | #222222 | Couleur de la bordure autour de chaque tuile (style encadré uniquement). |
| Rayon de la bordure (px) | entier | 6 | Rayon des coins pour les tuiles. |
| Taille de la police des nombres (px) | entier | 32 | Taille de la police pour les chiffres des unités. |
| Taille de police des étiquettes (px) | entier | 11 | Taille de police pour les étiquettes d'unité. |
| Classe CSS | chaîne de caractères | vide | Classe supplémentaire ajoutée au wrapper pour les hooks CSS personnalisés. |
Personnalisation
Le compte à rebours est stylisé avec des propriétés personnalisées CSS afin que vous puissiez le thématiser à partir d'un seul jeu de règles :
:root {
--ccd-number-color: #222222;
--ccd-label-color: #222222;
--ccd-bg-color: transparent;
--ccd-border-color: #222222;
--ccd-border-radius: 6px;
--ccd-number-size: 32px;
--ccd-label-size: 11px;
}Chemin de remplacement du modèle : charitable/shortcodes/campaign-countdown.php (copiez dans le dossier charitable/ de votre thème).
Dépannage
Le compte à rebours n'apparaît pas sur le front-end
Vérifiez que la campagne a une date de fin définie dans Paramètres → Durée de la campagne. Les campagnes sans fin et celles qui n'ont pas de date de fin ne rendent aucun balisage.
La campagne est terminée mais le minuteur est toujours à l'écran
Vérifiez le paramètre « Quand la campagne se termine ». Avec Délai de masquage supérieur à zéro, le minuteur reste visible pendant ce nombre de minutes après la date de fin avant de passer à l'état expiré.
L'animation de célébration ne se déclenche pas
La célébration est supprimée pour les visiteurs qui ont réglé leur système d'exploitation sur « réduire le mouvement ». L'animation ne se joue également qu'une seule fois, au moment où le minuteur franchit zéro, donc rafraîchir la page après la fin de la campagne ne la rejouera pas.
Les couleurs semblent invisibles
Une couleur d'arrière-plan vide est traitée comme « sans remplissage » (transparente) à dessein, de sorte que le compte à rebours se fond dans les sections colorées. Si le texte est difficile à lire, augmentez le contraste de la couleur du nombre ou de l'étiquette, pas de l'arrière-plan.
Ressources pour les développeurs
Hooks et filtres
charitable_campaign_countdown_shortcode_output— filtrez le HTML final rendu du compte à rebours.charitable_countdown_end_date_format— filtrez le format de date PHP utilisé pour la ligne « Se termine le ».charitable_countdown_end_date_formatted— filtrez la chaîne de date formatée transmise au modèle « Se termine le ».charitable_countdown_end_date_label— filtrez l'étiquette complète « Se termine le [date] ».
Fonctions utiles
Charitable_Campaign_Countdown_Shortcode::display( $atts, $overrides )— affichez le compte à rebours par programme.Charitable_Countdown::defaults()— obtenez le tableau canonique des paramètres par défaut partagé entre le bloc, le champ et le shortcode.
