Diese Anleitung ist eine technische Referenz für Entwickler, die mit der Divi-Integration von Charitable arbeiten. Die Divi-Integration wurde in Charitable Pro 1.8.12 eingeführt.
Übersicht
Diese Anleitung ist eine Referenz für die Verwendung und Erweiterung der Divi-Integration von Charitable. Die Divi-Integration wurde in Charitable Pro 1.8.12 eingeführt und in der Serie 1.8.16 mit nativen Divi 5 Modulen neu aufgebaut.
Charitable fügt dem Divi Builder eine eigene Modulkategorie hinzu, sodass Sie Kampagnen, Spendenformulare, Spenden-Buttons und verschiedene Fundraising-Widgets direkt in ein Divi-Layout einfügen können, mit vollständigen Divi-Designkontrollen und Live-Vorschau im Visual Builder.
Architektur
Die Integration bietet zwei parallele Modulsätze:
- Native Divi 5 Module (
includes/divi/d5-modules/) implementieren dieDependencyInterfacevon Divi 5 und registrieren sich überModuleRegistration. Sie werden nativ im Canvas des Divi 5 Visual Builders gerendert und live in der Vorschau angezeigt, ohne „Legacy“-Badge. - Legacy Divi 4 Module (
includes/divi/modules/) erweiternET_Builder_Module. Sie werden auf Divi 4-Websites verwendet und bleiben aus Gründen der Abwärtskompatibilität auf Divi 5 verfügbar.
Auf einer Divi 5-Website registriert Charitable die nativen Divi 5-Module und überspringt die Registrierung der Legacy-Module, sodass jedes Modul nur einmal im Picker erscheint. Auf einer Divi 4-Website werden die Legacy-Module verwendet. Mit Divi 4-Modulen gespeicherte Layouts werden automatisch auf das passende native Divi 5-Modul migriert, ohne visuelle Abweichungen.
Divi 4 vs. Divi 5 Kompatibilität
Charitable unterstützt sowohl Divi 4.x als auch Divi 5.x.
| Divi 4 | Divi 5 | |
|---|---|---|
| Modul-API | ET_Builder_Module (Legacy) | DependencyInterface / ModuleRegistration (Nativ) |
| Verfügbare Module | Die ursprünglichen 4 | Alle 9 |
| Visual Builder Vorschau | Standard | Live, über die React Style API von Divi |
| Gespeicherte Divi 4 Layouts | Werden wie sie sind gerendert | Automatische Migration zu nativen Divi 5 Modulen |
Wichtig: Die vier ursprünglichen Module (Spenden-Button, Spendenformular, Kampagne, Kampagnen) sind sowohl für Divi 4 als auch für Divi 5 verfügbar. Die fünf zusätzlichen Module (Kampagnen-Showcase, Spenden-Feed, Kampagnen-Countdown, Mini-Spenden-Widget, Spender-Bestenliste) sind nur native Module für Divi 5. Verwenden Sie auf einer Divi 4-Website stattdessen den passenden Gutenberg-Block oder Shortcode.
Verfügbare Module
Öffnen Sie den Divi Builder und suchen Sie nach der Modulkategorie Charitable. Die folgenden Module sind verfügbar.
Kernmodule (Divi 4 und Divi 5)
Charitable Spenden-Button Ein Spenden-Button oder Textlink für eine bestimmte Kampagne. Optionen umfassen die Kampagne, die Button-Beschriftung, den Anzeigetyp (Button oder Link), die Ausrichtung und das Öffnen in einem neuen Tab, plus den vollständigen Satz von Divi-Designkontrollen.
Spendenformular Ein eingebettetes Spendenformular für eine Kampagne. Wählen Sie die Kampagne und den Formular-Typ (Vollständig oder Minimal) aus und gestalten Sie dann den Inhalt, die Betrags-Buttons, den Spenden-Button, Akzente und Typografie mit Divi-Design-Steuerelementen.
Wohltätigkeitskampagne Eine einzelne Kampagne mit Titel, Beschreibung, Spendenfortschritt und Spendenaktion. Wählen Sie die Kampagne aus und gestalten Sie jedes Element über Divi.
Wohltätigkeitskampagnen Ein Raster oder eine Liste mehrerer Kampagnen. Steuerelemente umfassen die Anzahl der anzuzeigenden Kampagnen, Sortierung, Filterung nach Kategorie und Ersteller, Spalten und Styling pro Karte.
Zusätzliche Module (nur Divi 5)
Wohltätigkeitskampagnen-Showcase Ein durchsuchbarer Showcase von Kampagnen mit integrierten Durchsuchungssteuerelementen (AJAX-Filterung und Suche), Anzeigeoptionen und einer konfigurierbaren Query-Schleife. Nützlich, wenn Besucher viele Kampagnen auf einer Seite erkunden sollen. Einstellgruppen: Schleife, Anzeige, Suchsteuerelemente.
Wohltätigkeits-Spendeneinspeisung Ein Live-Feed der letzten Spenden in Listen- oder Kartenlayout mit Steuerelementen für die Query-Schleife, Anzeigeoptionen, Verhaltenseinstellungen (wie Paginierung und Live-Abfrage) sowie Typografie- und Farbsteuerungen. Großartig für soziale Bewährtheit. Einstellgruppen: Schleife, Anzeige, Verhalten, Typografie & Farben.
Wohltätigkeits-Kampagnen-Countdown Ein Countdown-Timer bis zum Enddatum einer Kampagne, dargestellt in Tagen, Stunden, Minuten und Sekunden. Wählen Sie, welche Zeiteinheiten angezeigt werden sollen, legen Sie den Inhalt und die Farben fest und aktivieren Sie einen Effekt zur Feier des Enddatums. Einstellgruppen: Inhalt, Zeiteinheiten, Countdown-Farben, Verhalten.
Wohltätigkeits-Mini-Spendenswidget Ein kompaktes Spenden-Widget, das Sie überall platzieren können. Legen Sie einmalige und optionale monatliche Betrags-Presets mit einem Standardwert fest, passen Sie den Call-to-Action-Button an und gestalten Sie das Erscheinungsbild und den Container des Widgets, einschließlich Hintergrundfarbe und Rahmen. Nach dem Absenden kann es zur Spendenseite weiterleiten oder ein Modal öffnen. Einstellgruppen: Inhalt, Betrags-Presets, Call To Action, Widget-Erscheinungsbild, Container, Typografie.
Wohltätigkeits-Spender-Bestenliste Eine Bestenliste der Top-Spender. Konfigurieren Sie den Header, die Query-Schleife und den Geltungsbereich (pro Kampagne oder standortweit), wer enthalten ist, das Karten- oder Zeilenlayout, die Podiumfarben und die Anzeigeoptionen. Einstellgruppen: Header, Schleife / Geltungsbereich, Einbeziehung, Karten / Zeilen, Podiumfarben, Anzeige.
Die fünf Divi 5-Module verwenden dieselben serverseitigen Renderer wie ihre entsprechenden Gutenberg-Blöcke, sodass die Ausgabe identisch ist, egal ob Sie mit Divi oder dem Block-Editor erstellen.
Deaktivieren der Integration
Um die Divi-Integration vollständig zu deaktivieren, fügen Sie diese Konstante zu wp-config.php hinzu:
define( ‘CHARITABLE_DISABLE_DIVI_INTEGRATION’, true );
Dies verhindert, dass die Integration vollständig geladen wird, was nützlich sein kann für:
- Fehlerbehebung bei Konflikten
- Websites, die Divi nicht verwenden
- Benutzerdefinierte Implementierungen
Modul-Slugs
Native Divi 5-Modulnamen (registriert über ModuleRegistration):
| Modul | Divi 5-Modulname | Unterstützt von |
|---|---|---|
| Charitable-Spenden-Button | charitable/donate-button | [charitable_donate_button] |
| Charitable-Spendenformular | charitable/donation-form | [charitable_donation_form] |
| Charitable-Kampagne | charitable/campaign | [campaign] |
| Charitable-Kampagnen | charitable/campaigns | [campaigns] |
| Charitable Kampagnenübersicht | charitable/divi-campaign-showcase | charitable/campaign-showcaseBlock-Rendering |
| Charitable Spendenübersicht | charitable/divi-donations-feed | [charitable_donations_feed] / Block-Rendering |
| Charitable Kampagnen-Countdown | charitable/divi-campaign-countdown | [charitable_campaign_countdown]/ Block-Rendering |
| Charitable Mini-Spenden-Widget | charitable/divi-mini-donation-widget | [charitable_mini_widget] / Block-Rendering |
| Charitable Spender-Bestenliste | charitable/divi-donor-leaderboard | [charitable_donor_leaderboard] / Block-Rendering |
Legacy Divi 4 Modul-Slugs (erweitern ET_Builder_Module):
| Modul | Divi 4 Slug |
|---|---|
| Charitable-Spenden-Button | charitable_donate_button |
| Charitable-Spendenformular | Spendenformular für wohltätige Zwecke |
| Charitable-Kampagne | Wohltätigkeitskampagne |
| Charitable-Kampagnen | Wohltätigkeitskampagnen |
Hooks und Filter
Aktionen
Modulregistrierung
// Module werden am folgenden Divi-Hook registriert
add_action( ‘et_builder_ready’, [ $this, ‘register_modules’ ] );
Cache leeren
// Kampagnen-Optionen-Cache wird gelöscht, wenn sich Kampagnen ändern
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’ ] );
Filter
Modulkategorien
// Benutzerdefinierte Kategorie-Registrierung
add_filter( ‘et_builder_categories’, [ $this, ‘register_module_category’ ] );
Caching
Die Integration speichert Kampagnen-Dropdown-Optionen im Cache, um die Leistung zu verbessern:
- Transienten-Schlüssel: charitable_divi_campaign_options
- Dauer: 1 Stunde (HOUR_IN_SECONDS)
- Automatisch gelöscht: Wenn Kampagnen gespeichert, gelöscht oder in den Papierkorb verschoben werden
Um den Cache manuell zu löschen:
delete_transient( ‘charitable_divi_campaign_options’ );
Überlegungen zum visuellen Builder
Vorschau-Modus
Das Spendenformular-Modul zeigt im visuellen Builder einen Platzhalter anstelle des tatsächlichen Formulars an. Dies ist beabsichtigt, weil:
- Formulare erfordern JavaScript, das mit dem Builder in Konflikt geraten kann
- Formularübermittlungen im Vorschau-Modus können Probleme verursachen
- Die Leistung wird durch statische Platzhalter verbessert
Das tatsächliche Formular wird im Frontend korrekt gerendert.
AJAX-Datenattribute
Der Kampagnen-Kurzcode gibt normalerweise data-shortcode-atts für die AJAX-Paginierung aus. Im Kontext des visuellen Builders wird dies gestrichen, um Anzeigeprobleme zu vermeiden. Die Integration erkennt den VB-Kontext und fügt dem Kurzcode ein Attribut preview=”1″ hinzu.
Berechnete Felder
Jedes Modul verwendet das berechnete Feldsystem von Divi für Live-Vorschauen:
‘__campaign_preview’ =>
‘type’ => ‘computed’,
‘computed_callback’ => [ ‘Charitable_Divi_Campaign_Module’, ‘get_campaign_preview’ ],
‘computed_depends_on’ =>
‘campaign_id’,
],
],
Wenn ein Benutzer eine Einstellung im Visual Builder ändert, ruft Divi den computed Callback über AJAX auf, um die Vorschau zu aktualisieren.
CSS-Selektoren
Modul-Container-Klassen
| Modul | Container-Klasse |
|---|---|
| Kampagne | .et_pb_charitable_campaign |
| Kampagnen | .et_pb_charitable_campaigns |
| Spendenformular | .et_pb_charitable_donation_form |
| Spenden-Button | .et_pb_charitable_donate_button |
Gängige Element-Selektoren
/* Kampagnentitel */
.et_pb_charitable_campaign .campaign-title,
.et_pb_charitable_campaigns .campaign-title { }
/* Fortschrittsbalken */
.campaign-progress,
.progress-bar { }
/* Spenden-Buttons */
.donate-button,
.charitable-button { }
/* Formularfelder */
.charitable-donation-form input[type=”text”],
.charitable-donation-form select { }
Fehlerbehebung
WordPress Debug-Modus aktivieren
// wp-config.php
define( ‘WP_DEBUG’, true );
define( ‘WP_DEBUG_LOG’, true );
Häufige Probleme
Module erscheinen nicht im Builder:
- Überprüfen Sie, ob das Divi-Theme/-Plugin aktiv ist: function_exists( ‘et_setup_theme’ )
- Stellen Sie sicher, dass Charitable vollständig geladen ist, bevor Divi initialisiert wird
- Suchen Sie nach PHP-Fehlern in wp-content/debug.log
Styling wird nicht angewendet:
- Löschen Sie den statischen CSS-Cache von Divi: Divi → Theme-Optionen → Builder → Erweitert → Statische CSS-Dateigenerierung
- Überprüfen Sie die CSS-Spezifität; Divi verwendet Selektoren mit hoher Spezifität
- Die Integration verwendet aus diesem Grund !important für erweiterte Feld-CSS
Kampagnen-Dropdown leer:
- Stellen Sie sicher, dass Kampagnen mit dem Status „Veröffentlicht“ vorhanden sind
- Überprüfen Sie, ob der Transienten-Cache geleert werden muss
- Verifizieren Sie, dass post_type_exists( ‘campaign’ ) true zurückgibt
Vorschau wird nicht aktualisiert:
- Prüfen Sie die Browserkonsole auf JavaScript-Fehler
- Überprüfen Sie, ob AJAX-Anfragen abgeschlossen werden (Netzwerk-Tab)
- Stellen Sie sicher, dass computed_depends_on das Feld enthält, das geändert wird
Erkennungsmethoden
Die Integration verwendet mehrere Methoden zur Erkennung von Divi:
// Prüfen Sie auf Divi Builder Plugin
class_exists( ‘ET_Builder_Plugin’ )
// Prüfen Sie auf Divi-Funktionen
function_exists( ‘et_setup_theme’ )
function_exists( ‘et_builder_should_load_all_module_data’ )
// Prüfen Sie auf Divi/Extra Theme
in_array( get_template(), [ ‘Divi’, ‘Extra’ ] )
Visual Builder-Erkennung
// Frontend Visual Builder
isset( $_GET[‘et_fb’] )
// Backend Builder
isset( $_GET[‘et_pb_preview’] )
// AJAX-Kontext (für Vorschau-Rendering)
defined( ‘DOING_AJAX’ ) && DOING_AJAX
Erweiterung der Integration
Benutzerdefinierte Felder zu einem Modul hinzufügen
Um Felder über ein Child-Theme oder Plugin zu einem bestehenden Modul hinzuzufügen, müssten Sie die Modulklasse erweitern:
class My_Custom_Campaign_Module extends Charitable_Divi_Campaign_Module {
public function get_fields() {
$fields = parent::get_fields();
// Benutzerdefiniertes Feld hinzufügen
$fields[‘custom_field’] =
‘label’ => ‘Mein benutzerdefiniertes Feld’,
‘type’ => ‘text’,
‘option_category’ => ‘basic_option’,
‘toggle_slug’ => ‘main_content’,
;
return $fields;
}
}
Hinweis: Dies erfordert eine erneute Registrierung des Moduls, was eine erweiterte Anpassung ist.
Symbol für benutzerdefinierte Modulkategorie
Das Charitable-Kategoriensymbol wird über CSS-Injection festgelegt und nicht über die Icon-Eigenschaft von Divi (die keine benutzerdefinierten SVGs für Kategorien unterstützt):
li.charitable.et_pb_folder::before {
content: ” !important;
background-image: url(‘path/to/icon.svg’) !important;
background-size: contain !important;
}
Versionshistorie
- 1.8.16 Serie: Die Integration mit nativen Divi 5 Modulen wurde neu erstellt. Die Module Spenden-Button, Spendenformular, Kampagne und Kampagnen wurden zu nativen Divi 5 Modulen (kein „Legacy“-Badge mehr), mit vollständigen Divi 5 Design-Steuerelementen, Kampagnenauswahl, Voll-/Minimal-Formulararten und automatischer Migration gespeicherter Divi 4 Shortcodes. Fünf reine Divi 5 Module wurden hinzugefügt: Kampagnen-Showcase, Spenden-Feed, Kampagnen-Countdown, Mini-Spenden-Widget und Spender-Bestenliste. Die Visual Builder-Leinwand zeigt jetzt eine Live-Vorschau aller Divi-Designsteuerelemente über die React Style API von Divi an.
- 1.8.12: Die Divi Page Builder-Integration wurde mit nativen Charitable-Modulen für Kampagnen, Spendenformulare und Buttons eingeführt (Divi 4 Legacy-Modul-API).
Support
Bei Problemen, die spezifisch für die Divi-Integration sind:
- Überprüfen Sie diese Dokumentation auf bekannte Lösungen
- Aktivieren Sie WP_DEBUG und prüfen Sie auf Fehler
- Testen Sie mit einem Standard-Divi-Layout, um Themenkonflikte auszuschließen
- Kontaktieren Sie den Charitable-Support mit Debug-Informationen
