Erfordert:
- Charitable Pro 1.8.17+
DonationExpress öffnet Ihre Spendenformulare in einem vollbildgroßen, themenunabhängigen Fenster, wenn jemand auf einem Handy besucht. Anstatt das Formular innerhalb Ihres Themas darzustellen (wo ein zufälliger Theme-Stil ein Feld vom Rand schieben, einen Button verkleinern oder den Zahlungsbereich auf einem kleinen Bildschirm kaputt machen kann), rendert DonationExpress das echte Spendenformular der Kampagne in einem eigenen, sauberen Layout, das Ihr Thema nicht erreichen kann. Das Ergebnis ist ein Formular, das auf jedem Handy gleich aussieht, schnell lädt und Theme-Konflikte vermeidet.
Die Kernidee ist nicht „das Formular responsiv machen“. Charitable-Formulare sind bereits responsiv. Das Problem, das DonationExpress löst, ist, dass die CSS-Styles des Themas das Formular und das Modal auf Mobilgeräten stören. DonationExpress behebt dies, indem es das echte Formular (echte Felder, echte Beträge, echte Gateways) in einem separaten Dokument rendert, das das Thema physisch nicht gestalten kann.
DonationExpress ist derzeit eine Beta-Funktion und standardmäßig deaktiviert. Sie aktivieren sie pro Website in den Einstellungen Ihres Spendenformulars.
Wann Sie es verwenden würden
- Ihr Theme oder Page Builder gestaltet das Spendenformular oder Modal so, dass es auf Handys fehlerhaft aussieht.
- Sie wünschen sich eine konsistente Spenden-Erfahrung auf jedem Gerät, unabhängig vom Handy des Besuchers oder Ihrem aktiven Theme.
- Sie möchten, dass das mobile Formular schnell lädt, ohne dass die Skripte und Stile Ihres Themes mitgeladen werden.
- Sie akzeptieren Spenden von sozialen Medien, E-Mails oder Anzeigen, wo der meiste Traffic mobil ist und der erste Eindruck zählt.
Finden
WordPress Admin > Charitable > Einstellungen > Allgemein > Spendenformular
Scrollen Sie zu den DonationExpress-Einstellungen. Es gibt drei:
- DonationExpress – schaltet die Funktion ein und wählt aus, welche Spenden-Auslöser sie verwenden.
- DonationExpress Corner Style – die Eckform für Buttons und Eingabefelder im Fenster.
- DonationExpress Receipt – was das Fenster nach einer erfolgreichen Spende anzeigt.
Die Einstellungen für Eckstil und Quittung sind ausgeblendet, bis DonationExpress auf etwas anderes als „Aus“ gesetzt ist, da nur das Fenster sie verwendet.
Es einschalten
Die Einstellung DonationExpress hat drei Optionen:
| Option | Was es tut |
|---|---|
| Aus | DonationExpress ist deaktiviert. Spendenformulare werden auf Mobilgeräten auf normale Weise angezeigt. Dies ist die Standardeinstellung. |
| Nur Modal-Spenden-Buttons | Nur Spenden-Buttons, die ein Popup oder Modal öffnen, verwenden das Fenster. Inline-Formulare, die direkt auf einer Seite eingebettet sind, bleiben unverändert. |
| Alle Spendenformulare | Jeder Spenden-Button, Link und jedes Inline-Formular auf einem Handy verwendet das Fenster. |
Wählen Sie Nur Modal-Spenden-Buttons, wenn Sie bereits zufrieden sind, wie Ihre Inline-Formulare auf Mobilgeräten aussehen, und nur das Popup-Erlebnis beheben möchten. Wählen Sie Alle Spendenformulare, wenn Sie möchten, dass jede mobile Spende, egal wie sie ausgelöst wird, über das saubere Fenster abgewickelt wird.
DonationExpress wird nur auf Bildschirmen mit mobiler Breite aktiviert. Auf Tablets und Desktops werden Ihre Formulare genau wie heute angezeigt. Die Breitenuntergrenze beträgt standardmäßig 768 Pixel und kann von einem Entwickler angepasst werden (siehe Entwicklerreferenz unten).
Gestaltung des Fensters
DonationExpress liest nichts aus Ihrem Theme aus, sondern erstellt sein Aussehen stattdessen aus Ihren vorhandenen Charitable-Einstellungen:
- Akzentfarbe stammt von der Hervorhebungsfarbe Ihres Spendenformulars (Charitable > Einstellungen > Allgemein > Spendenformular). Schaltflächen und ausgewählte Zustände im Fenster verwenden sie.
- Logo stammt von Ihrem E-Mail-Logo (Charitable > Einstellungen > E-Mails). Wenn eines festgelegt ist, wird es oben im Fenster angezeigt.
- Eckenstil stammt von der DonationExpress Eckenstil -Einstellung.
Die Eckenstil -Einstellung steuert, wie abgerundet die Schaltflächen und Eingabefelder sind:
| Eckenstil | Aussehen |
|---|---|
| Scharf | Eckige Ecken (0 Radius). |
| Abgerundet | Leicht abgerundete Ecken. Dies ist die Standardeinstellung. |
| Pill | Vollständig abgerundete, pillenförmige Schaltflächen und Eingabefelder. |
Die Quittung
Nachdem eine Spende abgeschlossen ist, kann DonationExpress eines von drei Dingen anzeigen. Legen Sie dies mit der DonationExpress Quittungs -Option fest (hinzugefügt in Charitable Pro 1.8.17.1):
| Quittungsstil | Was der Spender sieht |
|---|---|
| Feier (sauber, minimalistisch) | Ein sauberer Dankeschön-Bildschirm mit einem Häkchen und einer Konfetti-Animation, plus einer Teilen-Schaltfläche, einer optionalen Schaltfläche "Monatlich spenden" und einer Schaltfläche "PDF-Quittung herunterladen" sowie einer Schließen-Schaltfläche. Dies ist die Standardeinstellung. |
| Detailliert (sauber, mit Einzelaufschlüsselung) | Der gleiche saubere Feier-Bildschirm plus eine Tabelle mit Einzelaufschlüsselung (jede Kampagnenzeile und die Gesamtsumme), für Spender, die genau sehen möchten, was sie gegeben haben. |
| Standard-Quittungsseite | Das Fenster schließt sich und der Spender landet auf Ihrer normalen, thematisierten Quittungsseite, genau wie ohne DonationExpress. |
Die Feier- und Detailquittungen bleiben im Fenster, sodass der Spender die saubere Erfahrung nie verlassen muss. Einige Schaltflächen auf diesen Quittungen erscheinen nur, wenn die entsprechende Funktion verfügbar ist:
- Teilen verwendet die native Teilen-Funktion des Telefons, sodass Spender mit einem Fingertipp in sozialen Netzwerken posten oder eine Nachricht senden können.
- Monatlich spenden erscheint nur, wenn das Add-on "Wiederkehrende Spenden" aktiv ist und die Spende eine einmalige Spende war. Es öffnet das Fenster erneut, eingestellt auf eine monatliche Spende.
- PDF-Quittung herunterladen erscheint nur, wenn das Add-on "PDF-Quittungen" aktiv ist.
Vorschau ohne Telefon
Sie müssen kein Telefon zur Hand nehmen, um das Fenster zu sehen. Als Administrator öffnen Sie diese URL in Ihrem Browser (ersetzen Sie NN durch eine Kampagnen-ID):
https://yoursite.com/wp-admin/?charitable_action=preview-mobile-form&campaign_id=NNEs rendert dasselbe themenfreie Spendenformular, das DonationExpress auf einem Telefon anzeigt, sodass Sie Ihre Farben, Ihr Logo und Ihren Eckenstil auf einem Bildschirm in voller Größe überprüfen können.
Tipps
- DonationExpress rendert das echte Formular der Kampagne, sodass alle von Ihnen konfigurierten Felder, vorgeschlagenen Beträge und Gateways automatisch angezeigt werden. Es muss nichts neu erstellt werden.
- Wenn Sie ein Caching- oder Optimierungs-Plugin verwenden, stellen Sie sicher, dass der Pfad
/charitable-give/vom Caching ausgeschlossen ist. Das Formular benötigt bei jedem Laden frische Sicherheitstoken, genau wie Ihre normalen Spenden- und Empfangsseiten. - Apple Pay und Google Pay funktionieren innerhalb des Formulars. Apple Pay erfordert weiterhin, dass Ihre Domain bei Ihrem Zahlungs-Gateway verifiziert ist, genau wie bei normalen Formularen.
- Die Funktion befindet sich in der Beta-Phase und ist standardmäßig deaktiviert, sodass bestehende Websites niemals geändert werden, bis Sie sie aktivieren.
Entwicklerreferenz
DonationExpress rendert das echte Spendenformular der Kampagne in einem leeren, themenfreien Dokument, das von einem dedizierten Endpunkt bereitgestellt wird und in einem iFrame durch eine Vollbild-Überlagerung auf der übergeordneten Seite geladen wird. Eine kleine postMessage-Brücke hält die übergeordnete Seite und den Frame während des Spenden- und Empfangsvorgangs synchron.
Wo es sich befindet
| Stück | Ort |
|---|---|
| Bootstrap | Charitable_Mobile (includes/mobile/class-charitable-mobile.php), gestartet mit Priorität 9 bei init |
| Hilfsfunktionen | includes/mobile/charitable-mobile-functions.php |
| Einstellungen und Asset-Isolation | includes/mobile/charitable-mobile-hooks.php |
| Themenfreier Endpunkt | Charitable_Mobile_Form_Endpoint(includes/endpoints/class-charitable-mobile-form-endpoint.php) |
| Vorlagen | templates/mobile/form-mobile.php, templates/mobile/receipt-mobile.php |
| Assets | assets/css/charitable-mobile.css, assets/js/charitable-mobile-{sheet,bridge,receipt}.js |
Endpunkte und URLs
Der Endpunkt registriert zwei Rewrite-Regeln und zwei Query-Variablen und wird bei template_redirect (Priorität 0) gerendert.
| Zweck | Schöne Permalinks | Einfache Permalinks |
|---|---|---|
| Spendenformular | /charitable-give/{campaign_id}/ | ?charitable_mobile_form={campaign_id} |
| Empfangsbestätigung im Formular | /charitable-give/receipt/{donation_id}/ | ?charitable_mobile_receipt={donation_id} |
Das Empfangsbestätigungsdokument ist mit charitable_user_can_access_donation() zugriffsbeschränkt; eine Anfrage für eine Spende, auf die der aktuelle Besucher keinen Zugriff hat, gibt einen 403 zurück.
Hilfsfunktionen
| Funktion | Gibt zurück |
|---|---|
charitable_mobile_get_mode() | Der ermittelte Modus: off, modal oder always. |
charitable_mobile_is_enabled() | Ob das Formular überhaupt aktiviert ist (false, wenn der Modus off ist). |
charitable_mobile_get_breakpoint() | Der mobile Breakpoint in Pixeln (standardmäßig 768). |
charitable_mobile_get_form_url( $campaign_id, $args ) | Die Theme-freie Formular-URL. $args akzeptiert amount und period. |
charitable_mobile_get_receipt_url( $donation_id ) | Die Theme-freie In-Sheet-Beleg-URL. |
charitable_mobile_get_brand_tokens( $campaign_id ) | array{ accent, logo, radius } aufgelöst aus den Charitable-Einstellungen. |
charitable_mobile_get_receipt_style( $campaign_id ) | Der aufgelöste Belegstil: confetti, detailed oder redirect. |
Filter
| Filter | Standard | Zweck |
|---|---|---|
charitable_mobile_mode | Gespeicherte Einstellung | Erzwingt den Modus im Code, z. B. pro Seite oder pro Kampagne. Gibt off, modal oder always zurück. |
charitable_mobile_is_enabled | Abgeleitet vom Modus | Finales Ein/Aus-Gate. Gibt false zurück, um das Formular unabhängig vom Modus zu deaktivieren. |
charitable_mobile_form_breakpoint | 768 | Der maximale Breiten-Breakpoint in Pixeln, der als mobil gilt. |
charitable_mobile_brand_tokens | Aufgelöste Tokens | Überschreibt die accent-, logo- und radius-Werte, die zur Gestaltung des Formulars verwendet werden. |
charitable_mobile_asset_is_allowed | true für Charitable- und Gateway-Assets | Whitelist oder schließe ein bestimmtes Stil- oder Skript-Handle im Bare-Dokument aus. |
charitable_mobile_receipt_style | Gespeicherte Einstellung | Variiert den Belegstil pro Kampagne. Gibt confetti, detailed oder redirect zurück. |
charitable_mobile_receipt_pdf_url | URL für PDF-Belege oder '' | Überschreiben Sie die PDF-Schaltflächen-URL oder geben Sie '' zurück, um sie auszublenden. |
charitable_mobile_receipt_monthly_url | Monatliche Formular-URL oder '' | Überschreiben Sie die URL für "Monatlich machen" oder geben Sie ''zurück, um sie auszublenden. |
charitable_mobile_receipt_check_icon | Standard-Häkchen-Markup | Tauschen Sie das Erfolgssymbol auf der Quittung aus. |
Aktionen
| Aktion | Feuer |
|---|---|
charitable_mobile_form_head | Im <head> des reinen Dokuments, wo die Kopfzeilen-Assets von Charitable und dem Gateway ausgegeben werden. |
charitable_mobile_form_footer | Vor dem schließenden </body> des reinen Dokuments, wo die Fußzeilen-Skripte ausgegeben werden. |
Admin-Vorschau
?charitable_action=preview-mobile-form&campaign_id=NN leitet einen Administrator (manage_options) zur URL des formularbasierten Formulars für eine Kampagne weiter, damit das Blatt auf jeder Bildschirmgröße überprüft werden kann.
Beispiele für Anpassungen
SpendenExpress für eine einzelne Landingpage erzwingen:
add_filter(
'charitable_mobile_mode',
function ( $mode ) {
if ( is_page( 'give-now' ) ) {
return 'always';
}
return $mode;
}
);Erhöhen Sie den Breakpoint, damit auch kleine Tablets das Blatt verwenden:
add_filter( 'charitable_mobile_form_breakpoint', fn() => 900 );Überschreiben Sie die Akzentfarbe und den Radius der Ecken des Blattes:
add_filter(
'charitable_mobile_brand_tokens',
function ( $tokens, $campaign_id ) {
$tokens['accent'] = '#1e88e5';
$tokens['radius'] = '4px';
return $tokens;
},
10,
2
);Zeigen Sie die detaillierte Quittung für eine Kampagne an, überall sonst die Feier:
add_filter(
'charitable_mobile_receipt_style',
function ( $style, $campaign_id ) {
return 1234 === (int) $campaign_id ? 'detailed' : $style;
},
10,
2
);Erlauben Sie ein zusätzliches Skript-Handle im formularfreien Dokument (z. B. einen benutzerdefinierten Schriftart-Loader):
add_filter(
'charitable_mobile_asset_is_allowed',
function ( $allowed, $handle ) {
if ( 'my-font-loader' === $handle ) {
return true;
}
return $allowed;
},
10,
2
);Verwandt
- Anpassen der CSS des Spendenformulars – gestalten Sie das Standard-Spendenformular innerhalb des Themes
- PDF-Quittungen – steuert die Schaltfläche "PDF-Quittung herunterladen" auf dem Blatt
- Wiederkehrende Spenden – steuert die Schaltfläche "Monatlich machen" auf dem Blatt
