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 die DependencyInterface von 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/) erweitern ET_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:

1. Formulare erfordern JavaScript, das mit dem Builder in Konflikt geraten kann
2. Formularübermittlungen im Vorschau-Modus können Probleme verursachen
3. 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:

1. Überprüfen Sie diese Dokumentation auf bekannte Lösungen
2. Aktivieren Sie WP_DEBUG und prüfen Sie auf Fehler
3. Testen Sie mit einem Standard-Divi-Layout, um Themenkonflikte auszuschließen
4. Kontaktieren Sie den Charitable-Support mit Debug-Informationen