Le bloc "Mise en avant des campagnes" vous permet d'afficher les campagnes de collecte de fonds dans une mise en page moderne et interactive avec filtrage, tri, recherche et une option de carrousel ou de grille – le tout sans quitter l'éditeur de blocs. Il est basé sur le même shortcode [campaigns] et partage tous ses paramètres améliorés (Charitable Pro 1.8.13+).
Table des matières
Exigences
- Charitable Pro : Version 1.8.13 ou supérieure
- WordPress : Version 6.2 ou supérieure
- PHP : Version 7.4 ou supérieure
Le bloc "Mise en avant des campagnes" est disponible dans l'éditeur de blocs (Gutenberg). Il utilise le même backend que le shortcode [campaigns] ; tout paramètre pris en charge par le shortcode pour les fonctionnalités de "Mise en avant des campagnes" peut également être utilisé lors de l'intégration via shortcode.
Démarrage
- Modifiez une page ou un article dans l'éditeur de blocs.
- Ajoutez un bloc et recherchez "Mise en avant des campagnes" (ou "Charitable").
- Insérez le bloc "Mise en avant des campagnes".
- Utilisez les panneaux "Paramètres de la campagne", "Paramètres d'affichage", "Fonctionnalités interactives" et "Recherche et tri" dans la barre latérale du bloc pour configurer quelles campagnes apparaissent, ainsi que leur apparence et leur comportement.
Le bloc affiche un aperçu en direct dans l'éditeur. Sur le frontend, il génère le même shortcode [campaigns] avec les options que vous avez choisies, de sorte que le comportement et le style correspondent.
Avantages clés
- Aucune syntaxe de shortcode : Configurez tout via la barre latérale du bloc.
- Aperçu en direct : Voyez les modifications immédiatement dans l'éditeur.
- Propulsé par AJAX : Le filtrage, le tri, la recherche et la pagination fonctionnent sans rechargement de page.
- Carrousel ou grille : Changez les mises en page depuis la barre latérale.
- Entièrement personnalisable : Contrôles de couleur, de typographie et d'espacement intégrés.
Paramètres du bloc (Éditeur)
Tous les paramètres ci-dessous sont disponibles dans la barre latérale du bloc lorsque le bloc "Mise en avant des campagnes" est sélectionné. Chaque groupe correspond à un panneau déroulant.
Paramètres de la campagne
Contrôle quelles campagnes sont récupérées et comment elles sont ordonnées.
| Paramètre | Paramètre de shortcode | Défaut | Description |
|---|---|---|---|
| Nombre de campagnes | nombre | défaut du site | Nombre de campagnes à afficher. Utilisez -1 pour toutes. |
| Trier par | trier_par | date_publication | Champ de tri : `date_publication`, `titre_publication`, `date_modification`, `rand`, `menu_order`, `closest_to_goal`, `number_donations`, `donation_amount` |
| Ordre | ordre | DESC | Sens de tri : `ASC` ou `DESC` |
| IDs de campagne | id | – | IDs de campagne séparés par des virgules pour afficher uniquement des campagnes spécifiques |
| Catégorie | catégorie | – | Slugs de catégories de campagne séparés par des virgules à inclure |
| Balise | étiquette | – | Slugs d'étiquettes de campagne séparés par des virgules à inclure |
| Statut | statut | – | Filtrer par statut : active, terminé, ou laisser vide pour tout |
| Exclure | exclure | – | IDs de campagne séparés par des virgules à exclure |
| Campagnes parentes uniquement | parent_only | faux | Afficher uniquement les campagnes de niveau supérieur (parentes) |
| Campagnes enfants de | parent_campaigns | – | IDs de campagne parente séparés par des virgules – affiche uniquement leurs campagnes enfants |
| Créateur | créateur | – | Filtrer sur les campagnes d'un ID utilisateur créateur spécifique |
| Inclure les inactives | include_inactive | faux | Inclure les campagnes qui ne sont pas actuellement actives |
Paramètres d’affichage
Contrôle l'apparence de chaque carte de campagne.
| Paramètre | Paramètre de shortcode | Défaut | Description |
|---|---|---|---|
| Mise en page | mise en page | grille | Style de mise en page : laisser vide pour la grille par défaut, card pour la mise en page par carte, carousel pour le carrousel |
| Colonnes | colonnes | 2 | Nombre de colonnes dans la grille |
| Bouton | bouton | donner | Mode du bouton : donate (aller à la page de don), modal (ouvrir une fenêtre modale), view (voir la campagne) ou hide |
| Texte du bouton | button_text | – | Remplacez l'étiquette par défaut du bouton de don |
| Afficher le bouton Voir la campagne | show_view_button | faux | Afficher un bouton secondaire Voir la campagne à côté du bouton de don |
| Texte du bouton Voir | view_button_text | – | Remplacez l'étiquette par défaut du bouton Voir |
| Longueur de la description | description_limit | 100 | Nombre maximum de caractères de la description de la campagne à afficher |
| Hauteur de l'image | image_height | – | Hauteur fixe en pixels pour les miniatures des campagnes |
| Titre sur l'image | title_over_image | faux | Afficher le titre de la campagne superposé à l'image miniature |
| Zoomer l'image au survol | image_hover_zoom | faux | Zoomer la miniature au survol |
| Affichage des dons | donation_display | amount_goal | Comment afficher les totaux des dons : amount_goal, amount_only, goal_only, ou none |
| Afficher la barre de progression | show_progress_bar | vrai | Afficher la barre de progression des dons |
| Afficher le créateur | show_creator | faux | Afficher le nom du créateur de la campagne |
| Afficher le lien parent | show_parent_link | faux | Afficher un lien vers la campagne parente (pour les collectes de fonds) |
| Afficher le type de campagne | show_campaign_type | faux | Afficher l’étiquette du type de campagne |
| Afficher le nombre de collectes de fonds | show_fundraiser_count | faux | Afficher le nombre de collectes de fonds sur la campagne |
| Afficher les statistiques agrégées | show_aggregated_stats | faux | Afficher les statistiques de dons agrégées sur les campagnes enfants |
| Afficher le bouton de collecte de fonds | show_fundraise_button | faux | Afficher un bouton « Lancer une collecte de fonds » sur chaque carte |
| Afficher les tags | show_tags | faux | Afficher les tags de taxonomie de campagne sur chaque carte |
| Afficher les badges | show_badges | vrai | Interrupteur principal – afficher ou masquer tous les badges d’urgence |
| Afficher le badge temporel | show_time_badge | vrai | Badge indiquant le temps restant avant la fin de la campagne |
| Afficher le badge de financement | show_funding_badge | vrai | Badge indiquant le statut du financement (par exemple, Financé !) |
| Afficher le badge des dons | afficher_badge_dons | faux | Badge indiquant le montant total collecté |
| Afficher le badge du nombre de dons | afficher_badge_nombre_dons | faux | Badge indiquant le nombre de dons reçus |
| Afficher le badge des donateurs | afficher_badge_donateurs | faux | Badge indiquant le nombre total de donateurs uniques |
| Afficher don rapide | afficher_don_rapide | faux | Afficher les boutons de dons présélectionnés sur chaque carte |
| Préfixe du don rapide | prefixe_don_rapide | – | Texte de préfixe pour chaque bouton de montant (par exemple, Donner rend "Donner 25$") |
Carrousel (lorsque la disposition est Carrousel)
Ces paramètres s'appliquent uniquement lorsque Disposition est défini sur Carrousel.
| Paramètre | Paramètre de shortcode | Défaut | Description |
|---|---|---|---|
| Diapositives visibles | diapositives_carrousel | 3 | Nombre de diapositives visibles à la fois |
| Lecture automatique | lecture_auto_carrousel | faux | Faire défiler automatiquement les diapositives |
| Vitesse de lecture automatique | vitesse_carrousel | 5000 | Intervalle de défilement automatique en millisecondes |
| Position de la navigation | position_nav_carrousel | intérieur | Position des flèches : intérieur, extérieur, ou aucun |
Fonctionnalités interactives
| Paramètre | Paramètre de shortcode | Défaut | Description |
|---|---|---|---|
| Afficher la recherche | show_search | faux | Afficher une zone de recherche par mot-clé au-dessus de la grille de campagnes |
| Afficher le menu déroulant de tri | show_sort | faux | Afficher un menu déroulant de tri au-dessus de la grille |
| Options de tri | sort_options | – | Liste d'options de tri séparées par des virgules à afficher. Disponibles : post_date, post_title, donation_amount, closest_to_goal, number_donations |
Recherche et tri
Voir les fonctionnalités interactives ci-dessus. Les contrôles de recherche et de tri apparaissent au-dessus de la grille de campagnes et mettent à jour les résultats via AJAX sans rechargement de page.
Pagination et navigation
| Paramètre | Paramètre de shortcode | Défaut | Description |
|---|---|---|---|
| Activer la pagination | pagination | faux | Activer la pagination |
| Type de pagination | pagination_type | numéroté | Style : numbered ou load_more |
| Position de la pagination | pagination_position | bas | Où afficher la pagination : top, bottom, ou both |
| Afficher précédent / suivant | pagination_prev_next | vrai | Afficher les liens précédent et suivant dans la pagination numérotée |
| Afficher premier / dernier | pagination_first_last | vrai | Afficher les liens premier et dernier dans la pagination numérotée |
| Plage de pages | pagination_mid_size | 2 | Nombre de liens de page à afficher autour de la page actuelle |
Paramètres de filtre (quelles campagnes)
| Paramètre | Paramètre de shortcode | Défaut | Description |
|---|---|---|---|
| Afficher les pilules de filtre | Afficher les filtres | faux | Afficher les pilules de catégorie et d'étiquette au-dessus de la grille |
| Types de filtre | Types de filtres | catégorie,étiquette | Quelles taxonomies afficher sous forme de pilules : category, tag, ou les deux |
| Limite de filtre | Limite du filtre | 15 | Nombre maximum de pilules à afficher par taxonomie |
| Trier les filtres par | Filtrer par | Compte | Comment trier les pilules : count, name, ou slug |
| Ordre des filtres | Ordre du filtre | DESC | Direction du tri des pilules de filtre : ASC ou DESC |
Couleurs
Tous les paramètres de couleur acceptent les valeurs hexadécimales, rgb, rgba ou toute valeur de couleur CSS valide. Lorsqu'ils sont définis via le bloc, ils sont générés sous forme de propriétés personnalisées CSS en ligne sur le wrapper de la boucle de campagne. Vous pouvez également les définir directement via un shortcode ou les remplacer en CSS.
| Paramètre | Paramètre de shortcode | Description |
|---|---|---|
| Couleur primaire | color_primary | Couleur d'accentuation primaire (affecte les surlignages et les états actifs) |
| Arrière-plan | couleur_arrière-plan | Couleur d'arrière-plan de la carte |
| Bordure | color_border | Couleur de la bordure de la carte |
| Texte | couleur_texte | Couleur générale du texte |
| Arrière-plan du bouton | couleur_bouton | Couleur de l'arrière-plan du bouton de don |
| Texte du bouton | couleur_texte_bouton | Couleur du texte du bouton de don |
| Arrière-plan du bouton Afficher | couleur_bouton_afficher | Couleur de l'arrière-plan du bouton Afficher la campagne |
| Texte du bouton Voir | couleur_texte_bouton_afficher | Couleur du texte du bouton Afficher la campagne |
| Couleur du titre | couleur_titre | Couleur du texte du titre de la campagne |
| Remplissage de la barre de progression | couleur_barre_progression | Partie remplie de la barre de progression |
| Arrière-plan de la barre de progression | couleur_fond_barre_progression | Partie vide (arrière-plan) de la barre de progression |
Typographie
Toutes les valeurs de taille de police acceptent un nombre simple (interprété comme des pixels) ou toute longueur CSS valide (par exemple, 1.2rem, 18px).
| Paramètre | Paramètre de shortcode | Description |
|---|---|---|
| Taille de la police du titre | taille_police_titre | Taille de la police du titre de la campagne |
| Taille de la police de la description | taille_police_desc | Taille de la police du texte de description de la campagne |
| Taille de la police du bouton | taille_police_bouton | Taille de la police des boutons de don et d'affichage |
| Taille de la police de l'insigne | taille_police_badge | Taille de police du texte du badge d'urgence |
| Taille de police du montant | taille_police_montant | Taille de police du texte du montant du don |
| Taille de police des statistiques | taille_police_stats | Taille de police du texte des statistiques du don |
| Poids de la police du titre | poids_police_titre | Poids de la police du titre de la campagne (par exemple, 400, 600, bold) |
Espacement et bordures
Les valeurs acceptent un nombre simple (pixels) ou toute longueur CSS valide.
| Paramètre | Paramètre de shortcode | Description |
|---|---|---|
| Marge intérieure de la carte | marge_interieure_carte | Marge intérieure de chaque carte de campagne |
| Écart entre les cartes | ecart_cartes | Espace entre les cartes dans la grille |
| Rayon de bordure de la carte | rayon_bordure_carte | Rayon de coin arrondi sur chaque carte |
| Rayon de bordure de l'image | rayon_bordure_image | Rayon de coin arrondi sur les miniatures des campagnes |
| Épaisseur de la bordure | epaisseur_bordure | Épaisseur de la bordure de la carte |
| Ombre portée | ombre_portee | Ombre de boîte de carte (accepte toute valeur CSS box-shadow valide) |
Ambassadeurs (Inter-pairs)
Lorsque l'extension Charitable Ambassadors est active, des paramètres supplémentaires apparaissent pour contrôler l'affichage du financement participatif pair-à-pair. Ceux-ci utilisent les paramètres parent_only, parent_campaigns, show_fundraiser_count, show_aggregated_stats, et show_fundraise_button documentés ci-dessus.
Mises en page
Grille de cartes
La mise en page par défaut affiche les campagnes dans une grille responsive. Définissez layout="card" pour la variante de carte avec une image plus proéminente et une zone de contenu structurée.
[campaigns layout="card" columns="3"]Carrousel / Glissière
Définissez layout="carousel" pour afficher les campagnes dans un carrousel à défilement horizontal. Combinez avec les paramètres du carrousel pour contrôler le nombre de diapositives visibles et le comportement de navigation.
[campaigns layout="carousel" carousel_slides="3" carousel_autoplay="true" carousel_speed="5000"]Fonctionnalités interactives
Lorsque show_search, show_sort, ou show_filters est activé, une barre de contrôle apparaît au-dessus de la grille de campagnes. Toutes les interactions mettent à jour la grille via AJAX sans rechargement complet de la page.
- Recherche : Filtre les campagnes par mot-clé du titre à mesure que le visiteur tape.
- Menu déroulant de tri : Permet aux visiteurs de réorganiser les campagnes par date, titre, montant collecté, plus proche de l'objectif ou nombre de dons.
- Puces de filtre : Affiche des puces de catégorie et d'étiquette cliquables. Cliquer sur une puce filtre la grille pour n'afficher que les campagnes correspondantes.
Plusieurs contrôles peuvent être actifs simultanément. L'état actuel est conservé lors des chargements paginés.
Pagination et navigation
La pagination est désactivée par défaut. Lorsqu'elle est activée, les campagnes sont réparties sur plusieurs pages en fonction du paramètre number.
- Numérotée : Affiche les numéros de page avec des liens facultatifs Précédent / Suivant et Premier / Dernier.
- Charger plus : Ajoute la page suivante de campagnes sous les résultats actuels lorsque le bouton est cliqué.
Le paramètre pagination_mid_size contrôle le nombre de numéros de page apparaissant autour de la page actuelle en mode numéroté. Les liens Précédent / Suivant et Premier / Dernier peuvent être masqués individuellement à l'aide de pagination_prev_next et pagination_first_last.
Style et typographie
Tous les paramètres visuels (couleurs, tailles de police, espacement) définis via la barre latérale du bloc sont compilés en propriétés personnalisées CSS en ligne et appliqués à l'élément enveloppant la boucle de campagne. Cela signifie que chaque instance de Campaign Showcase sur une page peut avoir un style indépendant.
Vous pouvez également appliquer les mêmes propriétés via le paramètre de shortcode css_variables :
[campaigns css_variables="--charitable-cs-btn-bg: #e74c3c; --charitable-cs-btn-color: #ffffff;"]Ou cibler l'élément enveloppant dans le CSS de votre thème :
.campaign-loop {
--charitable-cs-btn-bg: #e74c3c;
--charitable-cs-btn-color: #ffffff;
}Ambassadeurs (Inter-pairs)
Lorsque l'extension Charitable Ambassadors est active, Campaign Showcase prend en charge l'affichage du financement participatif pair-à-pair. Utilisez ces paramètres pour contrôler l'expérience :
parent_only="true"– Afficher uniquement les campagnes parentes, pas les pages de contributeurs individuels.parent_campaigns="123,456"– Afficher uniquement les contributeurs qui sont enfants de campagnes spécifiques.show_fundraiser_count="true"– Afficher le nombre de contributeurs actifs pour chaque campagne.show_aggregated_stats="true"– Consolider les totaux des dons de toutes les campagnes de collecte de fonds enfants dans les statistiques de la campagne parente.show_fundraise_button="true"– Afficher un bouton « Lancer une collecte » sur chaque carte de campagne.
Référence des shortcodes
La référence complète du shortcode [campaigns]. Tous les paramètres fonctionnent à la fois dans le bloc (via la barre latérale) et dans le shortcode classique.
Paramètres principaux
| Paramètre | Type | Défaut | Description |
|---|---|---|---|
id | chaîne de caractères | – | IDs de campagne séparés par des virgules pour afficher uniquement des campagnes spécifiques |
nombre | entier | défaut du site | Nombre de campagnes à afficher. Utilisez -1 pour toutes. |
trier_par | chaîne de caractères | date_publication | Champ de tri : `date_publication`, `titre_publication`, `date_modification`, `rand`, `menu_order`, `closest_to_goal`, `number_donations`, `donation_amount` |
ordre | chaîne de caractères | DESC | Sens de tri : `ASC` ou `DESC` |
catégorie | chaîne de caractères | – | Slugs de catégories de campagne séparés par des virgules à inclure |
étiquette | chaîne de caractères | – | Slugs d'étiquettes de campagne séparés par des virgules à inclure |
statut | chaîne de caractères | – | Filtre de statut de campagne : active, finished, ou laisser vide pour toutes |
exclure | chaîne de caractères | – | IDs de campagne séparés par des virgules à exclure |
parent_only | bool | faux | Afficher uniquement les campagnes de niveau supérieur (parentes) |
parent_campaigns | chaîne de caractères | – | IDs parents séparés par des virgules – affiche uniquement leurs campagnes enfants |
créateur | chaîne de caractères | – | Filtrer les campagnes créées par un ID utilisateur spécifique |
include_inactive | bool | faux | Inclure les campagnes qui ne sont pas actuellement actives |
Paramètres d'affichage
| Paramètre | Type | Défaut | Description |
|---|---|---|---|
mise en page | chaîne de caractères | – | Style de mise en page : laisser vide pour la grille par défaut, card pour la mise en page par carte, carousel pour le carrousel |
colonnes | entier | 2 | Nombre de colonnes dans la grille |
bouton | chaîne de caractères | donner | Mode du bouton : donate, modal, view, ou hide |
button_text | chaîne de caractères | – | Remplacer l'étiquette par défaut du bouton de don |
show_view_button | bool | faux | Afficher un bouton secondaire « Voir la campagne » |
view_button_text | chaîne de caractères | – | Remplacer l'étiquette par défaut du bouton de visualisation |
description_limit | entier | 100 | Nombre maximum de caractères de la description de la campagne à afficher |
image_height | entier | – | Hauteur fixe en pixels pour les miniatures des campagnes |
title_over_image | bool | faux | Afficher le titre de la campagne superposé à l'image miniature |
image_hover_zoom | bool | faux | Zoomer la miniature au survol |
donation_display | chaîne de caractères | amount_goal | Comment afficher les totaux des dons : amount_goal, amount_only, goal_only, ou none |
show_progress_bar | bool | vrai | Afficher la barre de progression des dons |
show_creator | bool | faux | Afficher le nom du créateur de la campagne |
show_parent_link | bool | faux | Afficher le lien vers la campagne parente (pour les collectes de fonds) |
show_campaign_type | bool | faux | Afficher l'étiquette du type de campagne |
show_fundraiser_count | bool | faux | Afficher le nombre de collectes de fonds |
show_aggregated_stats | bool | faux | Afficher les statistiques agrégées des campagnes enfants |
show_fundraise_button | bool | faux | Afficher un bouton « Lancer une collecte » |
show_tags | bool | faux | Afficher les étiquettes de campagne sur chaque carte |
variables_css | chaîne de caractères | – | Propriétés personnalisées CSS en ligne appliquées à l'enveloppe de la boucle de campagne |
Paramètres des badges
| Paramètre | Type | Défaut | Description |
|---|---|---|---|
show_badges | bool | vrai | Interrupteur principal – afficher ou masquer tous les badges d’urgence |
show_time_badge | bool | vrai | Badge indiquant le temps restant avant la fin de la campagne |
show_funding_badge | bool | vrai | Badge indiquant le statut du financement |
afficher_badge_dons | bool | faux | Badge indiquant le montant total collecté |
afficher_badge_nombre_dons | bool | faux | Badge indiquant le nombre de dons reçus |
afficher_badge_donateurs | bool | faux | Badge indiquant le nombre total de donateurs uniques |
Paramètres de don rapide
Le don rapide affiche des boutons de montant de don présélectionnés directement sur la carte de campagne.
| Paramètre | Type | Défaut | Description |
|---|---|---|---|
afficher_don_rapide | bool | faux | Activer les boutons de don rapide sur les cartes |
prefixe_don_rapide | chaîne de caractères | – | Texte de préfixe pour chaque bouton de montant (par exemple, Donner rend "Donner 25$") |
Lorsque button="modal", cliquer sur un bouton de montant ouvre la fenêtre modale avec ce montant présélectionné. Lorsque button="donate", cliquer sur un bouton de montant redirige vers la page de don avec le montant pré-rempli. Si aucun montant suggéré n'est configuré, une saisie de montant personnalisé est affichée à la place.
Paramètres du carrousel
S'applique uniquement lorsque layout="carousel".
| Paramètre | Type | Défaut | Description |
|---|---|---|---|
diapositives_carrousel | entier | 3 | Nombre de diapositives visibles à la fois |
lecture_auto_carrousel | bool | faux | Faire défiler automatiquement les diapositives |
vitesse_carrousel | entier | 5000 | Intervalle de défilement automatique en millisecondes |
position_nav_carrousel | chaîne de caractères | intérieur | Position de la flèche de navigation : inside, outside, ou none |
Paramètres de recherche, tri et filtre
| Paramètre | Type | Défaut | Description |
|---|---|---|---|
show_search | bool | faux | Afficher une zone de recherche par mot-clé au-dessus de la grille de campagnes |
show_sort | bool | faux | Afficher un menu déroulant de tri au-dessus de la grille |
sort_options | chaîne de caractères | – | Options de tri séparées par des virgules à afficher. Disponibles : post_date, post_title, donation_amount, closest_to_goal, number_donations |
Afficher les filtres | bool | faux | Afficher les pilules de filtre de catégorie et d'étiquette |
Types de filtres | chaîne de caractères | catégorie,étiquette | Quelles taxonomies afficher sous forme de pilules : category, tag, ou les deux |
Limite du filtre | entier | 15 | Nombre maximum de pilules à afficher par taxonomie |
Filtrer par | chaîne de caractères | Compte | Comment trier les pilules : count, name, ou slug |
Ordre du filtre | chaîne de caractères | DESC | Direction du tri des pilules de filtre : ASC ou DESC |
Paramètres de pagination
| Paramètre | Type | Défaut | Description |
|---|---|---|---|
pagination | bool | faux | Activer la pagination |
pagination_type | chaîne de caractères | numéroté | Style : numbered ou load_more |
pagination_position | chaîne de caractères | bas | Où afficher la pagination : top, bottom, ou both |
pagination_prev_next | bool | vrai | Afficher les liens Précédent et Suivant (mode numéroté) |
pagination_first_last | bool | vrai | Afficher les liens Premier et Dernier (mode numéroté) |
pagination_mid_size | entier | 2 | Nombre de liens de page à afficher autour de la page actuelle |
Paramètres de couleur
Toutes les valeurs de couleur acceptent hex, rgb, rgba, ou toute couleur CSS valide.
| Paramètre | Type | Description |
|---|---|---|
color_primary | chaîne de caractères | Couleur d'accentuation primaire |
couleur_arrière-plan | chaîne de caractères | Couleur d'arrière-plan de la carte |
color_border | chaîne de caractères | Couleur de la bordure de la carte |
couleur_texte | chaîne de caractères | Couleur générale du texte |
couleur_bouton | chaîne de caractères | Arrière-plan du bouton Faire un don |
couleur_texte_bouton | chaîne de caractères | Couleur du texte du bouton de don |
couleur_bouton_afficher | chaîne de caractères | Arrière-plan du bouton Voir la campagne |
couleur_texte_bouton_afficher | chaîne de caractères | Couleur du texte du bouton Afficher la campagne |
couleur_titre | chaîne de caractères | Couleur du titre de la campagne |
couleur_barre_progression | chaîne de caractères | Couleur de remplissage de la barre de progression |
couleur_fond_barre_progression | chaîne de caractères | Couleur d'arrière-plan de la barre de progression |
Paramètres de typographie
Les valeurs de taille de police acceptent un nombre simple (pixels) ou toute longueur CSS valide (par exemple, 1.2rem).
| Paramètre | Type | Description |
|---|---|---|
taille_police_titre | chaîne de caractères | Taille de la police du titre de la campagne |
taille_police_desc | chaîne de caractères | Taille de police du texte de description |
taille_police_bouton | chaîne de caractères | Taille de la police du bouton |
taille_police_badge | chaîne de caractères | Taille de police du texte du badge |
taille_police_montant | chaîne de caractères | Taille de police du montant du don |
taille_police_stats | chaîne de caractères | Taille de police des statistiques de don |
poids_police_titre | chaîne de caractères | Graisse de la police du titre (par exemple, 400, 600, bold) |
Paramètres d'espacement et de bordure
Les valeurs acceptent un nombre simple (pixels) ou toute longueur CSS valide.
| Paramètre | Type | Description |
|---|---|---|
marge_interieure_carte | chaîne de caractères | Rembourrage intérieur de chaque carte |
ecart_cartes | chaîne de caractères | Espace entre les cartes |
rayon_bordure_carte | chaîne de caractères | Rayon des coins de la carte |
rayon_bordure_image | chaîne de caractères | Rayon des coins de l'image miniature |
epaisseur_bordure | chaîne de caractères | Épaisseur de la bordure de la carte |
ombre_portee | chaîne de caractères | Ombre portée de la carte (toute valeur CSS box-shadow valide) |
Exemples
Grille de cartes basique à 3 colonnes avec don modal :
[campaigns layout="card" columns="3" button="modal"]Campagnes actives triées par proximité de l'objectif, avec pagination « charger plus » :
[campaigns status="active" orderby="closest_to_goal" number="9" pagination="true" pagination_type="load_more"]Carrousel de campagnes avec 4 diapositives visibles et lecture automatique :
[campaigns layout="carousel" carousel_slides="4" carousel_autoplay="true" carousel_speed="4000"]Avec des boutons de don rapide et une couleur de bouton personnalisée :
[campaigns show_quick_donate="true" button="modal" color_button="#e74c3c"]Avec recherche, tri et filtres de catégorie :
[campaigns show_search="true" show_sort="true" show_filters="true" filter_types="category" columns="3"]Campagnes spécifiques uniquement :
[campaigns id="12,45,67" layout="card" columns="3"]Dépannage
Le bloc ou l'aperçu ne s'affiche pas correctement
- Confirmez que Charitable Pro 1.8.13 ou une version ultérieure est actif.
- Désactivez temporairement les autres plugins pour exclure un conflit JavaScript.
- Vérifiez la console du navigateur pour les erreurs JavaScript.
- Essayez de passer à un thème WordPress par défaut (Twenty Twenty-Four) pour exclure un conflit de thème.
Le tri / filtre / la recherche ne fonctionne pas
- Vérifiez que la page n'est pas servie par un cache de page complet agressif qui supprime l'attribut
data-shortcode-attsde l'enveloppe<ol>. - Le gestionnaire AJAX nécessite que
wp-admin/admin-ajax.phpsoit accessible. Certains plugins de sécurité bloquent ce point de terminaison. - Vérifiez que JavaScript est activé et qu'aucune politique de sécurité de contenu ne bloque les scripts en ligne.
Le carrousel ne défile pas ou les flèches sont manquantes
- Assurez-vous que
layout="carousel"est défini. - Vérifiez que les ressources de la bibliothèque Swiper se chargent (recherchez
/assets/js/libraries/swiper*dans l'onglet réseau du navigateur). - Si vous utilisez un plugin de mise en cache, videz le cache après avoir enregistré la page.
Le style semble incorrect
- Si les couleurs ou les tailles définies dans la barre latérale du bloc n'apparaissent pas, videz le cache de la page.
- Le CSS personnalisé qui cible les sélecteurs
.campaign-loopavec!importantremplacera les propriétés CSS personnalisées définies par le bloc. Supprimez les règles conflictuelles ou augmentez la spécificité. - Confirmez que le thème n'enfile pas une feuille de style qui réinitialise les propriétés personnalisées.
Ressources pour les développeurs
Bloc et shortcode
Le bloc Campaign Showcase est enregistré sous le nom charitable/campaign-showcase. Il n'a pas de sauvegarde côté client ; il utilise un rappel de rendu côté serveur qui construit une chaîne de shortcode [campaigns ...] à partir des attributs du bloc et la sort à l'intérieur d'une enveloppe de bloc. Tout attribut que vous définissez dans l'éditeur est traduit en paramètre de shortcode correspondant.
Hooks et filtres
Filtres
charitable_campaigns_shortcode_atts – Modifiez les attributs du shortcode analysés avant l'affichage (bloc et shortcode).
add_filter( 'charitable_campaigns_shortcode_atts', function( $args ) {
$args['button'] = 'modal';
return $args;
} );charitable_campaigns_shortcode_view_args – Modifiez les arguments de vue passés au modèle de campagnes (bloc et shortcode).
charitable_campaigns_shortcode_query_args – Modifiez les arguments WP_Query utilisés pour récupérer les campagnes (bloc et shortcode).
add_filter( 'charitable_campaigns_shortcode_query_args', function( $query_args, $args ) {
$query_args['post__not_in'] = array( 42 );
return $query_args;
}, 10, 2 );charitable_ajax_campaign_showcase_query_args – Modifiez les arguments de requête utilisés pour les requêtes AJAX du Campaign Showcase (tri, filtre, recherche). Appliquez les mêmes exclusions ici que celles définies dans charitable_campaigns_shortcode_query_args afin qu'elles persistent lors des chargements paginés et filtrés.
add_filter( 'charitable_ajax_campaign_showcase_query_args', function( $args, $shortcode_atts ) {
$args['post__not_in'] = array( 42 );
return $args;
}, 10, 2 );charitable_campaigns_shortcode – Modifiez la sortie HTML finale de l'ensemble de la vitrine des campagnes avant qu'elle ne soit retournée.
charitable_campaign_sort_options – Modifiez les options de tri disponibles affichées dans le menu déroulant de tri.
add_filter( 'charitable_campaign_sort_options', function( $options, $args ) {
$options['my_custom_sort'] = __( 'Featured First', 'my-plugin' );
return $options;
}, 10, 2 );charitable_campaign_filter_pills – Modifiez le tableau des pilules de filtre avant le rendu. Chaque élément a les clés term, count, et label.
charitable_show_campaign_urgency_badges – Retourne false pour supprimer tous les badges d'une campagne spécifique.
add_filter( 'charitable_show_campaign_urgency_badges', function( $show, $campaign, $args ) {
if ( $campaign->has_ended() ) {
return false;
}
return $show;
}, 10, 3 );charitable_quick_donate_url – Modifiez l'URL de destination utilisée par les boutons de don rapide non modaux. S'applique uniquement lorsque button n'est pas modal. Retournez uniquement l'URL de base – le paramètre ?amount=X est ajouté automatiquement après l'exécution de ce filtre.
add_filter( 'charitable_quick_donate_url', function( $url, $campaign_id, $args ) {
return add_query_arg(
array( 'campaign_id' => $campaign_id ),
home_url( '/donate/' )
);
}, 10, 3 );charitable_campaign_card_image_height – Modifiez la hauteur de l'image en pixels appliquée aux cartes de campagne lorsque image_height est défini.
charitable_campaigns_shortcode_pagination_args – Modifiez les arguments de pagination avant que le HTML de pagination ne soit généré.
charitable_campaigns_shortcode_pagination – Modifiez la chaîne HTML de pagination avant qu'elle ne soit affichée.
charitable_modal_donate_button_html – Modifiez le HTML d'un bouton de don modal.
charitable_campaigns_shortcode_template – Remplacez le modèle utilisé pour rendre la boucle de campagne. Retournez un chemin de fichier de modèle pour utiliser un modèle personnalisé.
Crochets d'action
Ces crochets s'exécutent à des points clés lors du rendu de la boucle de campagne, vous permettant d'injecter du HTML personnalisé.
charitable_campaign_loop_before – S'exécute immédiatement avant l'ouverture de l'enveloppe de la boucle de campagne.
do_action( 'charitable_campaign_loop_before', $campaigns, $args );charitable_campaign_loop_after – S'exécute immédiatement après la fermeture de l'enveloppe de la boucle de campagne.
do_action( 'charitable_campaign_loop_after', $campaigns, $args );charitable_campaign_content_loop_before – S'exécute au début de chaque carte de campagne individuelle, avant que tout contenu ne soit affiché.
do_action( 'charitable_campaign_content_loop_before', $campaign, $view_args );charitable_campaign_content_loop_before_title – S'exécute juste avant que le titre de la campagne ne soit affiché dans la carte.
do_action( 'charitable_campaign_content_loop_before_title', $campaign, $view_args );charitable_campaign_content_loop_after_title – S'exécute juste après que le titre de la campagne a été affiché dans la carte.
do_action( 'charitable_campaign_content_loop_after_title', $campaign, $view_args );charitable_campaign_content_loop_after – S'exécute à la fin de chaque carte de campagne individuelle, après que tout le contenu a été affiché.
do_action( 'charitable_campaign_content_loop_after', $campaign, $view_args );Classes CSS
.campaign-loop - outer list wrapper
.campaign-layout-card - card layout modifier
.campaign-loop li - individual campaign item
.campaign-thumbnail - image wrapper
.campaign-title - campaign title
.campaign-description - description text
.campaign-donation - donate button area
.campaign-quick-donate - quick donate button row
.campaign-badge - individual urgency badge
.campaign-badge-time-remaining - time badge
.campaign-badge-funding-status - funding status badge
.campaign-badge-donations - donations raised badge
.campaign-badge-donation-count - donation count badge
.campaign-badge-donors - donor count badge
.charitable-carousel-wrapper - carousel outer wrapperHistorique des versions
| Version | Modifications |
|---|---|
| 1.8.13 | Bloc de présentation de campagne ajouté, mises en page carte et carrousel, tri / filtre / recherche / pagination AJAX, badges d'urgence, boutons de don rapide, contrôles de couleur / typographie / espacement, intégration de dons modaux, support pair-à-pair des ambassadeurs |
