Schritt-für-Schritt-Anleitung: Den “Seiten-in-Seite”-Iframe in WordPress integrieren

Einleitung: Von der Theorie zur Praxis

Diese Anleitung zeigt Ihnen, wie Sie das Studio Enns-Code-Snippet einfach in Ihre WordPress-Website einfügen können, selbst ohne tiefe Programmierkenntnisse.

Vorbereitung: Was Sie brauchen

• Zugriff auf Ihr WordPress-Dashboard.
• Verständnis für den Gutenberg-Editor (oder den klassischen Editor).
• Das bereitgestellte HTML-, CSS- und JavaScript-Snippet.

Schritt 1: CSS global einbinden (empfohlen)

• **Option A: Customizer:** Gehen Sie zu “Design” > “Customizer” > “Zusätzliches CSS”.
• **Option B: Child-Theme:** Fügen Sie die CSS-Regeln in die style.css Ihres Child-Themes ein.
• Warum globale CSS-Einbindung sinnvoll ist.

Schritt 2: HTML und JavaScript in Beiträgen/Seiten einfügen

• **Gutenberg-Editor:**
  • Neuen Block hinzufügen: “Individuelles HTML”.
  • Das gesamte HTML-Struktur-Snippet (Button und Iframe-Wrapper) einfügen.
  • Einen weiteren “Individuelles HTML”-Block für das JavaScript-Snippet hinzufügen.
• **Klassischer Editor:**
  • Wechseln Sie in den “Text”-Modus (nicht Visuell).
  • Fügen Sie das HTML und das JavaScript an der gewünschten Stelle ein.
• Wichtigkeit der Platzierung des Snippets im HTML.

Schritt 3: Testen und Anpassen

• Seite speichern/veröffentlichen und im Frontend testen.
• Problemlösung: Häufige Fehlerquellen (ID-Duplikate, Skript-Fehler).
• Anpassung der height des Iframes oder der Farben des Buttons.

Erweiterte Tipps für WordPress

• Verwendung von Shortcodes (mit einem Plugin wie Code Snippets).
• Einbindung des JavaScripts über wp_enqueue_script für Performance.
• Integration in Theme-Dateien (z.B. footer.php) für globale Verfügbarkeit auf allen Seiten.

Fazit: Ihr interaktiver Inhalt ist bereit!

Mit diesen Schritten können Sie das Feature erfolgreich in Ihre WordPress-Seite integrieren und das Nutzererlebnis verbessern.

#WordPressTutorial, #CodeIntegration, #GutenbergTips, #WebdevWordPress, #CSSWordPress, #JavaScriptWordPress, #WebsiteSetup, #DIYWebdesign, #StudioEnnsGuide, #FrontendTutorial