Ce guide est une référence technique pour les développeurs travaillant avec l'intégration Divi de Charitable. L'intégration Divi a été introduite dans Charitable Pro 1.8.12.
Aperçu
Ce guide est une référence pour l'utilisation et l'extension de l'intégration Divi de Charitable. L'intégration Divi a été introduite dans Charitable Pro 1.8.12 et reconstruite avec les modules natifs Divi 5 dans la série 1.8.16.
Charitable ajoute sa propre catégorie de modules au Divi Builder afin que vous puissiez placer des campagnes, des formulaires de don, des boutons de don et plusieurs widgets de collecte de fonds directement sur une mise en page Divi, avec des contrôles de conception Divi complets et un aperçu en direct dans le Visual Builder.
Architecture
L'intégration fournit deux ensembles parallèles de modules :
- Modules natifs Divi 5 (
includes/divi/d5-modules/) implémentent l'interfaceDependencyInterfacede Divi 5 et s'enregistrent viaModuleRegistration. Ils s'affichent et s'aperçoivent en direct nativement dans le canevas du Visual Builder Divi 5, sans badge « Héritage ». - Modules Divi 4 hérités (
includes/divi/modules/) étendentET_Builder_Module. Ils sont utilisés sur les sites Divi 4 et restent disponibles sur Divi 5 pour la compatibilité ascendante.
Sur un site Divi 5, Charitable enregistre les modules natifs Divi 5 et évite d'enregistrer les modules hérités, de sorte que chaque module n'apparaît qu'une seule fois dans le sélecteur. Sur un site Divi 4, les modules hérités sont utilisés. Les mises en page enregistrées avec les modules Divi 4 sont automatiquement migrées vers le module natif Divi 5 correspondant sans dérive visuelle.
Compatibilité Divi 4 vs Divi 5
Charitable prend en charge Divi 4.x et Divi 5.x.
| Divi 4 | Divi 5 | |
|---|---|---|
| API des modules | ET_Builder_Module (hérité) | DependencyInterface / ModuleRegistration (natif) |
| Modules disponibles | Les 4 originaux | Les 9 |
| Aperçu du Visual Builder | Standard | En direct, via l'API de style React de Divi |
| Mises en page Divi 4 enregistrées | S'affichent telles quelles | Migration automatique vers les modules natifs Divi 5 |
Important : les quatre modules d'origine (Bouton de don, Formulaire de don, Campagne, Campagnes) sont disponibles sur Divi 4 et Divi 5. Les cinq modules supplémentaires (Vitrine de campagne, Flux de dons, Compte à rebours de campagne, Mini widget de don, Classement des donateurs) sont des modules natifs uniquement pour Divi 5. Sur un site Divi 4, utilisez plutôt le bloc Gutenberg ou le shortcode correspondant.
Modules disponibles
Ouvrez le Divi Builder et recherchez la catégorie de modules Charitable. Les modules suivants sont disponibles.
Modules de base (Divi 4 et Divi 5)
Bouton de don Charitable Un bouton ou un lien texte pour une campagne spécifique. Les options incluent la campagne, le libellé du bouton, le type d'affichage (bouton ou lien), l'alignement et l'ouverture dans un nouvel onglet, ainsi que l'ensemble complet des contrôles de conception Divi.
Formulaire de don Charitable Un formulaire de don intégré pour une campagne. Choisissez la campagne et le type de formulaire (Complet ou Minimal), puis stylisez le contenu, les boutons de montant, le bouton de don, les accents et la typographie avec les contrôles de conception Divi.
Campagne caritative Une seule campagne avec son titre, sa description, sa progression de collecte de fonds et son action de don. Sélectionnez la campagne et stylisez chaque élément via Divi.
Campagnes caritatives Une grille ou une liste de plusieurs campagnes. Les contrôles couvrent le nombre de campagnes à afficher, l’ordre, le filtrage par catégorie et créateur, les colonnes et le style par carte.
Modules supplémentaires (Divi 5 uniquement)
Présentation des campagnes caritatives Une présentation consultable des campagnes avec des contrôles de navigation intégrés (filtrage AJAX et recherche), des options d’affichage et une boucle de requête configurable. Utile lorsque vous souhaitez que les visiteurs explorent de nombreuses campagnes sur une seule page. Groupes de paramètres : Boucle, Affichage, Contrôles de navigation.
Flux de dons caritatifs Un flux en direct des dons récents dans une disposition de liste ou de carte, avec des contrôles de boucle de requête, des options d’affichage, des paramètres de comportement (tels que la pagination et le sondage en direct), ainsi que des contrôles de typographie et de couleur. Idéal pour la preuve sociale. Groupes de paramètres : Boucle, Affichage, Comportement, Typographie et Couleurs.
Compte à rebours de campagne caritative Un compte à rebours jusqu’à la date de fin d’une campagne, rendu en jours, heures, minutes et secondes. Choisissez les unités de temps à afficher, définissez le contenu et les couleurs, et activez un effet de célébration de date de fin. Groupes de paramètres : Contenu, Unités de temps, Couleurs du compte à rebours, Comportement.
Mini-widget de don caritatif Un widget de don compact que vous pouvez placer n’importe où. Définissez des montants prédéfinis uniques et mensuels optionnels avec une valeur par défaut, personnalisez le bouton d’appel à l’action et stylisez l’apparence du widget et son conteneur, y compris la couleur d’arrière-plan et la bordure. Lors de la soumission, il peut rediriger vers la page de don ou ouvrir une modale. Groupes de paramètres : Contenu, Montants prédéfinis, Appel à l’action, Apparence du widget, Conteneur, Typographie.
Classement des donateurs caritatifs Un classement des meilleurs donateurs. Configurez l’en-tête, la boucle de requête et la portée (par campagne ou sur l’ensemble du site), qui est inclus, la disposition des cartes ou des lignes, les couleurs du podium et les options d’affichage. Groupes de paramètres : En-tête, Boucle / Portée, Inclusion, Cartes / Lignes, Couleurs du podium, Affichage.
Les cinq modules Divi 5 réutilisent les mêmes moteurs de rendu côté serveur que leurs blocs Gutenberg correspondants, donc la sortie est identique, que vous construisiez avec Divi ou l’éditeur de blocs.
Désactivation de l’intégration
Pour désactiver complètement l’intégration Divi, ajoutez cette constante à wp-config.php :
define( ‘CHARITABLE_DISABLE_DIVI_INTEGRATION’, true );
Cela empêche l’intégration de se charger entièrement, ce qui peut être utile pour :
- Dépannage des conflits
- Sites n’utilisant pas Divi
- Implémentations personnalisées
Slugs des modules
Noms natifs des modules Divi 5 (enregistrés via ModuleRegistration) :
| Module | Nom du module Divi 5 | Soutenu par |
|---|---|---|
| Bouton de don Charitable | charitable/donate-button | [charitable_donate_button] |
| Formulaire de don Charitable | charitable/donation-form | [charitable_donation_form] |
| Campagne Charitable | charitable/campaign | [campaign] |
| Campagnes Charitable | charitable/campaigns | [campaigns] |
| Présentation des campagnes caritatives | charitable/divi-campaign-showcase | charitable/campaign-showcase rendu du bloc |
| Flux de dons caritatifs | charitable/divi-donations-feed | [charitable_donations_feed] / rendu du bloc |
| Compte à rebours de campagne caritative | charitable/divi-campaign-countdown | [charitable_campaign_countdown]/ rendu du bloc |
| Mini widget de don caritatif | charitable/divi-mini-donation-widget | [charitable_mini_widget] / rendu du bloc |
| Classement des donateurs caritatifs | charitable/divi-donor-leaderboard | [charitable_donor_leaderboard] / rendu du bloc |
Slugs des anciens modules Divi 4 (étendre ET_Builder_Module) :
| Module | Slug Divi 4 |
|---|---|
| Bouton de don Charitable | charitable_donate_button |
| Formulaire de don Charitable | charitable_donation_form |
| Campagne Charitable | charitable_campaign |
| Campagnes Charitable | charitable_campaigns |
Accroches et filtres
Actions
Enregistrement des modules
// Les modules sont enregistrés sur cette accroche Divi
add_action( ‘et_builder_ready’, [ $this, ‘register_modules’ ] );
Nettoyage du cache
// Le cache des options de campagne est vidé lorsque les campagnes changent
add_action( ‘save_post_campaign’, [ $this, ‘clear_campaign_options_cache’ ] );
add_action( ‘delete_post’, [ $this, ‘clear_campaign_options_cache’ ] );
add_action( ‘wp_trash_post’, [ $this, ‘clear_campaign_options_cache’ ] );
Filtres
Catégories de modules
// Enregistrement de catégories personnalisées
add_filter( ‘et_builder_categories’, [ $this, ‘register_module_category’ ] );
Mise en cache
L'intégration met en cache les options déroulantes des campagnes pour améliorer les performances :
- Clé de cache : charitable_divi_campaign_options
- Durée : 1 heure (HOUR_IN_SECONDS)
- Effacé automatiquement : Lorsque les campagnes sont enregistrées, supprimées ou mises à la corbeille
Pour vider manuellement le cache :
delete_transient( ‘charitable_divi_campaign_options’ );
Considérations relatives à l'éditeur visuel
Mode Aperçu
Le module Formulaire de don affiche un espace réservé dans l'éditeur visuel au lieu du formulaire réel. Ceci est intentionnel car :
- Les formulaires nécessitent du JavaScript qui peut entrer en conflit avec l'éditeur
- Les soumissions de formulaires en mode aperçu pourraient causer des problèmes
- Les performances sont améliorées avec des espaces réservés statiques
Le formulaire réel s'affiche correctement sur le site.
Attributs de données AJAX
Le shortcode Campagnes génère normalement des data-shortcode-atts pour la pagination AJAX. Dans le contexte de l'éditeur visuel, cela est supprimé pour éviter les problèmes d'affichage. L'intégration détecte le contexte de l'éditeur visuel et ajoute un attribut preview=”1″ au shortcode.
Champs calculés
Chaque module utilise le système de champs calculés de Divi pour les aperçus en direct :
‘__campaign_preview’ =>
‘type’ => ‘computed’,
‘computed_callback’ => [ ‘Charitable_Divi_Campaign_Module’, ‘get_campaign_preview’ ],
‘computed_depends_on’ => [
‘campaign_id’,
],
],
Lorsqu'un utilisateur modifie un paramètre dans l'éditeur visuel, Divi appelle la fonction de rappel calculée via AJAX pour actualiser l'aperçu.
Sélecteurs CSS
Classes du conteneur du module
| Module | Classe de conteneur |
|---|---|
| Campagne | .et_pb_charitable_campaign |
| Campagnes | .et_pb_charitable_campaigns |
| Formulaire de don | .et_pb_charitable_donation_form |
| Bouton de don | .et_pb_charitable_donate_button |
Sélecteurs d'éléments courants
/* Titres de campagne */
.et_pb_charitable_campaign .campaign-title,
.et_pb_charitable_campaigns .campaign-title { }
/* Barres de progression */
.campaign-progress,
.progress-bar { }
/* Boutons de don */
.donate-button,
.charitable-button { }
/* Champs de formulaire */
.charitable-donation-form input[type="text"],
.charitable-donation-form select { }
Débogage
Activer le mode de débogage WordPress
// wp-config.php
define( ‘WP_DEBUG’, true );
define( ‘WP_DEBUG_LOG’, true );
Problèmes courants
Modules n'apparaissant pas dans le constructeur :
- Vérifier que le thème/plugin Divi est actif : function_exists( ‘et_setup_theme’ )
- Vérifier que Charitable est entièrement chargé avant l'initialisation de Divi
- Rechercher les erreurs PHP dans wp-content/debug.log
Le style ne s'applique pas :
- Vider le cache CSS statique de Divi : Divi → Options du thème → Constructeur → Avancé → Génération de fichiers CSS statiques
- Vérifier la spécificité CSS ; Divi utilise des sélecteurs à haute spécificité
- L'intégration utilise !important sur le CSS du champ avancé pour cette raison
Menu déroulant des campagnes vide :
- Assurez-vous que des campagnes existent avec le statut « Publié »
- Vérifier si le cache transitoire doit être vidé
- Vérifier que post_type_exists( ‘campaign’ ) renvoie true
Aperçu non mis à jour :
- Vérifier la console du navigateur pour les erreurs JavaScript
- Vérifier que les requêtes AJAX se terminent (onglet Réseau)
- Assurez-vous que computed_depends_on inclut le champ modifié
Méthodes de détection
L'intégration utilise plusieurs méthodes pour détecter Divi :
// Vérifier le plugin Divi Builder
class_exists( ‘ET_Builder_Plugin’ )
// Vérifier les fonctions Divi
function_exists( ‘et_setup_theme’ )
function_exists( ‘et_builder_should_load_all_module_data’ )
// Vérifier le thème Divi/Extra
in_array( get_template(), [ ‘Divi’, ‘Extra’ ] )
Détection du constructeur visuel
// Constructeur visuel frontal
isset( $_GET[‘et_fb’] )
// Constructeur backend
isset( $_GET[‘et_pb_preview’] )
// Contexte AJAX (pour le rendu de l'aperçu)
defined( ‘DOING_AJAX’ ) && DOING_AJAX
Extension de l'intégration
Ajout de champs personnalisés à un module
Pour ajouter des champs à un module existant via un thème enfant ou un plugin, vous devrez étendre la classe du module :
class My_Custom_Campaign_Module extends Charitable_Divi_Campaign_Module {
public function get_fields() {
$fields = parent::get_fields();
// Ajouter un champ personnalisé
$fields[‘custom_field’] = [
‘label’ => ‘Mon champ personnalisé’,
‘type’ => ‘text’,
‘option_category’ => ‘basic_option’,
‘toggle_slug’ => ‘main_content’,
];
return $fields;
}
}
Remarque : Cela nécessite de réenregistrer le module, ce qui constitue une personnalisation avancée.
Icône de catégorie de module personnalisé
L’icône de catégorie Charitable est définie via une injection CSS plutôt que par la propriété d’icône de Divi (qui ne prend pas en charge les SVG personnalisés pour les catégories) :
li.charitable.et_pb_folder::before {
content: ” !important;
background-image: url(‘path/to/icon.svg’) !important;
background-size: contain !important;
}
Historique des versions
- Série 1.8.16 : Reconstruction de l’intégration avec les modules natifs Divi 5. Les modules Bouton de don, Formulaire de don, Campagne et Campagnes sont devenus des modules natifs Divi 5 (plus de badge « Héritage »), avec des contrôles de conception Divi 5 complets, la sélection de campagne, les types de formulaire Complet/Minimal, et la migration automatique des shortcodes Divi 4 enregistrés. Ajout de cinq modules exclusifs à Divi 5 : Vitrine de campagne, Flux de dons, Compte à rebours de campagne, Mini widget de don et Classement des donateurs. La toile du Visual Builder prévisualise désormais en direct chaque contrôle de conception Divi via l’API React Style de Divi.
- 1.8.12 : Intégration du constructeur de pages Divi introduite avec des modules Charitable natifs pour les campagnes, les formulaires de don et les boutons (API de module hérité Divi 4).
Support
Pour les problèmes spécifiques à l’intégration Divi :
- Consultez cette documentation pour des solutions connues
- Activez WP_DEBUG et vérifiez les erreurs
- Testez avec une mise en page Divi par défaut pour exclure les conflits de thème
- Contactez le support Charitable avec les informations de débogage
