WordPress Integration

WordPress bietet mehrere Wege, Timer einzubetten – von einfachen Block-Editor-Methoden bis hin zu benutzerdefiniertem HTML. Dieser Leitfaden deckt alle Methoden für moderne und klassische WordPress-Installationen ab.

Methode 1: WordPress Block Editor (Gutenberg)

Moderne WordPress-Versionen nutzen den Block Editor (Gutenberg), der eine visuelle Oberfläche zum Erstellen von Seiten und Beiträgen bietet.

Schritt-für-Schritt-Anleitung

Schritt 1: Timer erstellen

1. Gehe zum Editor
2. Gestalte und konfiguriere deinen Timer
3. Kopiere die Timer-URL aus dem Renderer-Bereich
4. Halte sie für die nächsten Schritte bereit

Schritt 2: iFrame-Code erstellen

Erstelle deinen iFrame-Embed-Code mit deiner Timer-URL:

<iframe
  src="https://gettickr.app/r/#DEIN-TIMER-ID"
  width="100%"
  height="400"
  style="border: none; max-width: 1200px; margin: 0 auto; display: block;"
  title="Countdown Timer"
>
</iframe>

Schritt 3: Custom HTML Block hinzufügen

1. Öffne die Seite oder den Beitrag, auf dem der Timer erscheinen soll
2. Klicke auf das „+“ Symbol, um einen neuen Block hinzuzufügen
3. Suche nach „Individuelles HTML“ (Custom HTML)
4. Wähle den „Individuelles HTML“ Block aus

Schritt 4: Code einfügen

1. Klicke in den HTML-Block
2. Füge deinen vollständigen iFrame-Code ein
3. Während der Bearbeitung steht „Individuelles HTML“ im Block
4. Klicke auf „Vorschau“, um den Timer anzuzeigen

Schritt 5: Veröffentlichen

1. Klicke auf „Aktualisieren“ oder „Veröffentlichen“ oben rechts
2. Prüfe die Seite, ob der Timer korrekt angezeigt wird
3. Teste auf Mobilgeräten oder mit der Vorschau

Tipps für den Block Editor

Methode 2: Klassischer Editor

Falls deine WordPress-Seite den klassischen Editor nutzt, kannst du Timer über den HTML-Modus einfügen.

Schritt-für-Schritt-Anleitung

1. Seite/Beitrag im klassischen Editor öffnen
2. Auf den Tab „Text“ klicken (Wechsel von Visuell zu HTML)
3. Stelle im HTML finden, an der der Timer erscheinen soll
4. iFrame-Code einfügen
5. Optional: Zurück auf „Visuell“ wechseln, um eine Vorschau zu sehen
6. Seite/Beitrag aktualisieren oder veröffentlichen

Beispiel für den klassischen Editor

<h2>Event Countdown</h2>

<iframe
  src="https://gettickr.app/r/#DEIN-TIMER-ID"
  width="800"
  height="400"
  frameborder="0"
  style="border: none; display: block; margin: 20px auto;"
>
</iframe>

<p>Sei dabei beim Event des Jahres!</p>

Methode 3: Page Builder Plugins

Viele WordPress-Seiten nutzen Page Builder für visuelles Design. So fügst du Timer in beliebten Page Buildern ein:

Elementor

Elementor Pro Tipp: Nutze „Custom Positioning“, um Timer kreativ über Bildern oder Sektionen zu platzieren!

Divi Builder

WPBakery Page Builder

Beaver Builder

Page Builder Vergleich

Methode 4: Widget-Bereiche (Sidebar/Footer)

Für Timer, die auf mehreren Seiten erscheinen sollen (z.B. in Sidebars, Footern, Headern):

Schritt-für-Schritt-Anleitung

1. Dashboard → Design → Widgets
2. Ziel-Widget-Bereich finden (z.B. „Sidebar“, „Footer“)
3. „+“ klicken, um Block hinzuzufügen oder „Widget hinzufügen“
4. Nach „Individuelles HTML“ suchen
5. Custom HTML Widget hinzufügen
6. iFrame-Code einfügen
7. Optional: Titel vergeben (z.B. „Event Countdown“)
8. „Aktualisieren“ oder „Speichern“ klicken

Widget-Größenempfehlungen

Methode 5: Shortcodes für Wiederverwendbarkeit

Erstelle einen eigenen Shortcode, um denselben Timer auf mehreren Seiten einfach zu nutzen.

Shortcode erstellen

In die functions.php deines Themes oder als Plugin einfügen:

// In functions.php einfügen
function tickr_countdown_shortcode($atts) {
    $atts = shortcode_atts(array(
        'id' => '',
        'width' => '100%',
        'height' => '400',
    ), $atts);

    if (empty($atts['id'])) {
        return '<p>Bitte Timer-ID angeben</p>';
    }

    $output = '<iframe ';
    $output .= 'src="https://gettickr.app/r/#' . esc_attr($atts['id']) . '" ';
    $output .= 'width="' . esc_attr($atts['width']) . '" ';
    $output .= 'height="' . esc_attr($atts['height']) . '" ';
    $output .= 'style="border: none; max-width: 100%;" ';
    $output .= 'title="Countdown Timer">';
    $output .= '</iframe>';

    return $output;
}
add_shortcode('tickr', 'tickr_countdown_shortcode');

Shortcode verwenden

Danach kannst du den Shortcode in jeder Seite, jedem Beitrag oder Widget nutzen:

Basis-Nutzung:

[tickr id="DEIN-TIMER-ID"]

Mit eigenen Dimensionen:

[tickr id="DEIN-TIMER-ID" width="800" height="500"]

Mehrere Timer:

<h3>Event 1</h3>
[tickr id="timer-1"]

<h3>Event 2</h3>
[tickr id="timer-2"]

Vorteile von Shortcodes

Plugin-Kompatibilität

Häufige Plugin-Probleme

iFrames in Security Plugins erlauben

Wordfence:

1. Wordfence → Firewall → Alle Firewall-Optionen
2. gettickr.app zu den erlaubten Domains hinzufügen
3. Einstellungen speichern

iThemes Security:

1. Security → Einstellungen → Erweitert
2. „Filter Suspicious Query Strings in the URL“ für bestimmte Seiten deaktivieren
3. Oder gettickr.app whitelisten

Fehlerbehebung WordPress Integration

Timer wird nicht angezeigt

Anzeigeprobleme

Mobile Probleme

WordPress Multisite

Für Multisite-Installationen:

Netzwerk-Admin Schritte:

1. Netzwerk-Admin → Einstellungen
2. „Ungefiltertes HTML“ für Site-Admins aktivieren (falls nötig)
3. Einzelne Sites können dann Timer-iFrames wie gewohnt einfügen

Nächste Schritte

• iFrame Integration – Detaillierte iFrame-Anleitung
• Timer-Design anpassen – Optik an dein WordPress-Theme anpassen
• Shopify Integration – Für WooCommerce ähnlich wie Shopify
• Remote Control – Timer fernsteuern, während du WordPress verwaltest