Der Kampagnen-Countdown zeigt einen sich live aktualisierenden Timer an, der bis zum Enddatum einer Kampagne herunterzählt. Dies gibt Spendern einen klaren, dringenden visuellen Hinweis, vor Ablauf der Frist zu handeln. Verfügbar in Charitable Pro 1.8.14+.
Hauptmerkmale
- Zählt in Tagen, Stunden, Minuten und Sekunden herunter, mit Sichtbarkeit pro Einheit.
- Wählen Sie einen Stil: Boxed (mit Rahmen) oder Inline (kompakte einzeilige Darstellung).
- Wählen Sie, was passiert, wenn eine Kampagne endet: eine Nachricht anzeigen, den Timer auf Null einfrieren oder ihn ausblenden.
- Lösen Sie eine optionale Konfetti- oder Feuerwerk-Feier aus, sobald der Timer Null erreicht.
- Fügen Sie eine klickbare Überschrift hinzu, die zur Kampagne oder ihrem Spendenformular verlinkt.
- Stilisieren Sie Zahlen, Beschriftungen, Hintergrund und Rahmen mit demselben Coloris-Auswahlwerkzeug, das auch anderswo in Charitable Pro verwendet wird.
- Schalten Sie eine integrierte digitale Sieben-Segment-Schriftart für einen klassischen Countdown-Look ein.
- Zeigen Sie eine Zeile „Endet am [Datum]“ oberhalb oder unterhalb des Timers an oder blenden Sie sie aus.
- Verfügbar als Kampagnen-Builder-Feld, Gutenberg-Block und Shortcode.
- Berücksichtigt die Präferenz des Besuchers für reduzierte Bewegungen bei der Animationsfeier.
Warum den Kampagnen-Countdown verwenden?
Dringlichkeit konvertiert. Eine sichtbare Frist zeigt Spendern genau, wie viel Zeit sie noch haben, um eine Kampagne zu unterstützen, was eine der zuverlässigsten Methoden ist, um Spenden am Ende einer Kampagne zu erhöhen. Da der Countdown direkt in Charitable integriert ist, bleibt er automatisch mit dem Enddatum der Kampagne synchronisiert, sodass Sie niemals ein separates Widget aktualisieren müssen.
Sehen Sie es in Aktion
Voraussetzungen
- Charitable Pro 1.8.14 oder neuer
- Die Kampagne muss ein Enddatum festgelegt haben (Kampagnen, die als endlos markiert sind, rendern keinen Countdown).
Erste Schritte
Aktivierung
Der Kampagnen-Countdown ist in Charitable Pro 1.8.14+ integriert. Kein separates Add-on zu installieren. Sobald Sie auf eine unterstützte Version aktualisieren, sind das Feld, der Block und der Shortcode verfügbar.
Wo Sie ihn finden
- Kampagnen-Builder: Öffnen Sie eine Kampagne, wechseln Sie zur Registerkarte „Felder“ und suchen Sie unter „Pro-Felder“ nach „Countdown“.
- Gutenberg-Editor: Suchen Sie im Block-Inserter nach „Kampagnen-Countdown“.
- Shortcode: Fügen Sie
[charitable_campaign_countdown]in einen beliebigen Beitrag, eine Seite oder ein Template ein.
Nutzung
Block (Gutenberg)
Fügen Sie den Kampagnen-Countdown -Block aus der Widget-Kategorie ein und wählen Sie dann die Kampagne in der Block-Seitenleiste aus. Alle visuellen und Verhaltensoptionen des Kampagnen-Builder-Feldes sind im Block-Einstellungsbereich verfügbar, sodass Sie einen gestylten Countdown überall im WordPress-Editor platzieren können.
Kampagnen-Builder-Feld
Ziehen Sie das Countdown -Feld auf die Kampagnen-Leinwand. Alle Einstellungen befinden sich im rechten Bedienfeld: Überschrift, Linkziel, Einheiten, Stil, Farben, Größe, Ausrichtung, Ablaufverhalten und Feier-Effekt. Die Live-Vorschau des Kampagnen-Builders spiegelt jede Änderung wider, während Sie bearbeiten.
Wenn für die Kampagne kein Enddatum festgelegt ist, zeigt das Feld im Builder eine Inline-Warnung an und rendert im Frontend nichts, bis Sie das Enddatum unter Einstellungen → Kampagnendauer festlegen.
Shortcode
[charitable_campaign_countdown]Wenn der Shortcode innerhalb einer Kampagnen-Schleife oder auf einer Kampagnen-Seite verwendet wird, erkennt er automatisch die aktuelle Kampagne. Verwenden Sie das Attribut campaign_id, um einen Countdown für eine bestimmte Kampagne an einer beliebigen anderen Stelle auf Ihrer Website anzuzeigen.
[charitable_campaign_countdown campaign_id="123" style="inline" show="days,hours,minutes" headline="Last chance to give!"]Konfigurationsoptionen
Shortcode-Parameter
| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
campaign_id | integer | aktuelle Beitrags-ID | Die Kampagne, bis zu der heruntergezählt wird. |
Stil | Zeichenkette | eingeschachtelt | boxed für Kacheln mit Rahmen, inline für eine kompakte einzeilige Anzeige. |
anzeigen | Zeichenkette | Tage,Stunden,Minuten,Sekunden | Kommagetrennte Liste der anzuzeigenden Einheiten. Jede Teilmenge der vier Einheiten. |
Überschrift | Zeichenkette | leer | Optionale Überschrift, die über dem Timer angezeigt wird. |
Link | Zeichenkette | leer | campaign verknüpft die Überschrift mit der Kampagnen-Seite; donation verknüpft mit dem Spendenformular. |
Klasse | Zeichenkette | leer | Zusätzliche CSS-Klasse, die dem Countdown-Wrapper hinzugefügt wird. |
Block-/Feld-Anzeigeparameter
| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| Überschrift | Zeichenkette | leer | Optionaler Text, der über dem Timer angezeigt wird. |
| Überschriften-Link | Zeichenkette | Keine | none, campaign oder donation. |
| Stil | Zeichenkette | eingeschachtelt | boxed oder inline. |
| Einheiten anzeigen | Array | alle vier | Tage, Stunden, Minuten, Sekunden. Jede kann unabhängig ein- oder ausgeschaltet werden. |
| Schriftart für digitale Anzeige verwenden | boolean | wahr | Wendet einen Sieben-Segment-Stil auf die Zahlen an. |
| Ausrichtung | Zeichenkette | links | left, center oder right. |
Ablaufparameter
| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| Wenn die Kampagne endet | Zeichenkette | Nachricht | message zeigt eine benutzerdefinierte Nachricht an, zero hält den Timer bei 00:00:00:00 an, hide entfernt den Countdown. |
| Abgelaufene Nachricht | Zeichenkette | Kampagne beendet | Text, der angezeigt wird, wenn das Verhalten message ist. |
| Verzögerung beim Ausblenden (Minuten) | integer | 0 | Minuten, die der Countdown auf dem Bildschirm angezeigt werden soll, nachdem er Null erreicht hat, bevor die Endzustandsaktion angewendet wird. |
Parameter für die Feier
| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| Feiereffekt | Zeichenkette | Keine | none, confetti oder fireworks. Wird einmal abgespielt, wenn der Timer Null erreicht. |
Parameter für das Enddatum
| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| Textposition für das Enddatum | Zeichenkette | Ausblenden | hide, above oder below. Steuert die Zeile „Endet am [Datum]“. |
Stilparameter
| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| Zahlenfarbe | Hex | #222222 | Farbe der Einheiten-Zahlen. |
| Label-Farbe | Hex | #222222 | Farbe der Einheiten-Labels. |
| Hintergrundfarbe | Hex | leer (transparent) | Hintergrund jeder Einheiten-Kachel. Leer bedeutet „keine Füllung“, sodass die übergeordnete Oberfläche durchscheint. |
| Rahmenfarbe | Hex | #222222 | Rahmenfarbe um jede Kachel (nur im Kachel-Stil). |
| Radius des Rahmens (px) | integer | 6 | Eckenradius für Kacheln. |
| Schriftgröße der Zahlen (px) | integer | 32 | Schriftgröße für die Einheiten-Zahlen. |
| Schriftgröße der Labels (px) | integer | 11 | Schriftgröße für die Einheiten-Labels. |
| CSS-Klasse | Zeichenkette | leer | Zusätzliche Klasse zum Wrapper für benutzerdefinierte CSS-Hooks hinzugefügt. |
Anpassung
Der Countdown wird mit benutzerdefinierten CSS-Eigenschaften gestaltet, sodass Sie ihn mit einem einzigen Regelsatz thematisieren können:
:root {
--ccd-number-color: #222222;
--ccd-label-color: #222222;
--ccd-bg-color: transparent;
--ccd-border-color: #222222;
--ccd-border-radius: 6px;
--ccd-number-size: 32px;
--ccd-label-size: 11px;
}Pfad zur Vorlagenüberschreibung: charitable/shortcodes/campaign-countdown.php (kopieren Sie ihn in den Ordner charitable/ Ihres Themes).
Fehlerbehebung
Der Countdown wird im Frontend nicht angezeigt
Stellen Sie sicher, dass die Kampagne ein Enddatum unter Einstellungen → Kampagnendauer hat. Endlose Kampagnen und Kampagnen ohne Enddatum rendern keinerlei Markup.
Die Kampagne ist beendet, aber der Timer ist immer noch auf dem Bildschirm
Überprüfen Sie die Einstellung „Wenn die Kampagne endet“. Wenn Hide Delay größer als Null ist, bleibt der Timer nach Ablauf des Enddatums noch so viele Minuten sichtbar, bevor er in den abgelaufenen Zustand wechselt.
Die Feieranimation wird nicht ausgelöst
Die Feier wird für Besucher unterdrückt, die ihr Betriebssystem auf „Bewegung reduzieren“ eingestellt haben. Die Animation spielt auch nur einmal ab, in dem Moment, in dem der Timer Null erreicht. Das Aktualisieren der Seite, nachdem die Kampagne bereits beendet ist, spielt sie nicht erneut ab.
Farben sehen unsichtbar aus
Eine leere Hintergrundfarbe wird absichtlich als „keine Füllung“ (transparent) behandelt, damit sich der Countdown in farbige Abschnitte einfügt. Wenn der Text schwer zu lesen ist, erhöhen Sie den Kontrast der Zahlen- oder Beschriftungsfarbe, nicht des Hintergrunds.
Entwicklerressourcen
Hooks & Filter
charitable_campaign_countdown_shortcode_output— Filtern Sie die endgültige gerenderte Countdown-HTML.charitable_countdown_end_date_format— Filtern Sie das PHP-Datumsformat, das für die Zeile „Endet am“ verwendet wird.charitable_countdown_end_date_formatted— Filtern Sie die formatierte Datumszeichenfolge, die in die Vorlage „Endet am“ übergeben wird.charitable_countdown_end_date_label— Filtern Sie die vollständige Beschriftung „Endet am [Datum]“.
Nützliche Funktionen
Charitable_Campaign_Countdown_Shortcode::display( $atts, $overrides )— Rendern Sie den Countdown programmatisch.Charitable_Countdown::defaults()— Rufen Sie das kanonische Standardeinstellungen-Array ab, das für Block, Feld und Shortcode gemeinsam genutzt wird.
