Iframe in WordPress einbinden

Oftmals erreicht mich die Frage, wie ein Iframe in WordPress eingebunden wird. Zusätzlich erfährst du in diesem Beitrag, wofür Iframes überhaupt notwendig sind, welche regelmäßigen Anwendungsfälle es gibt und wie du in WordPress Iframes mobil darstellen kannst.

Was ist ein Iframe eigentlich?

Ein Inlineframe (abgekürzt bekannt als Iframe) ist ein HTML-Element, welches zur strukturierten Darstellung von externen Webinhalten genutzt wird. Mithilfe eines Iframes können so unter anderem Loginformulare, GEO Karten oder YouTube-Videos in einer (WordPress-)Webseite eingebunden werden. Seit der HTML-Spezifikation 4.0 werden Iframes unterstützt. Sämtliche modernen Browser unterstützen das Einbinden von Inlineframes.

Wofür benötige ich in WordPress ein Iframe?

In WordPress werden Iframes dazu verwendet um zum Beispiel Anfahrtskarten oder Videos von externen Plattformen einzubinden.

Google Maps Anfahrtskarte in WordPress einbinden.

In diesem Abschnitt zeige ich dir nun, wie du eine Google Anfahrtskarte als Iframe in WordPress einbinden kannst.

1. Öffne zuerst Google Maps, in dem du hier klickst.
2. Gebe nun in der Suche den Ort ein, den du in deiner Google Karte anzeigen lassen möchtest. Als Beispiel nehme ich nun den Apple Store in Berlin.(Google Map Karte mithilfe eines Iframes in WordPress einbinden.)
3. Klicke anschließend auf den Teilen-Button in der linken Seitenleiste. Nun erhältst du nachfolgende Auswahlmöglichkeit.Nachdem du auf den Teilen-Button in der Seitenleiste von Google Maps geklickt hast, erscheint dieses PopUp. Nun kannst du wählen, ob du die Google Karte als Verlinkung in deiner Webseite oder als Karte einbauen möchtest. Wähle die Option Karte einbetten aus.
4. In der nachfolgenden Ansicht wir dir die Karte angezeigt, welche durch den Standard Iframe-Code erzeugt wird.Es wird dir die Möglichkeit geboten, die Größe der Anfahrtskarte anzupassen. Dazu findest du unterhalb der Schaltfläche Karte einbetten eine kleine Rollbox, über jene kannst du anschließend zwischen Groß 800 x 600px, Mittel 600 x 450px (ist als Standardwert ausgewählt), klein 400 x 300px und einer benutzerdefinierten Größe auswählen.
5. Markiere nun den generierten HTML-Code neben der zuvor beschriebenen Rollbox und kopiere diesen.

YouTube-Video in WordPress einbinden

1. Rufe das Portal YouTube auf, dieses findest du hier.
2. Suche nach dem Video, welches du in deiner WordPress Seite einbinden möchtest.
3. Sofern du ein Video gefunden hast, welches du in deiner WordPress-Seite einbinden möchtest, klicke unterhalb des Videos auf den teilen-Button.
4. In dem nachfolgendem PopUp klickst du nun auf Einbetten. In der Standardansicht wird dir ein Link zum versenden des YouTube-Videos angezeigt.
5. Im letzten Schritt erhältst du folgende Ansicht, in der du noch weitere Konfigurationen vornehmen kannst.
   Du kannst neben der Größe des Iframes noch einstellen, ab welcher Spielminute das Video starten soll, ob am Ende des Videos weitere Videos vorgeschlagen oder ob die Steuerelemente für das Video angezeigt werden sollen.
   
   Kopiere nun das Iframe in deine Zwischenablage.

Iframe in WordPress einbinden

Mithilfe des visueller Editor

Schön und gut, dass wir nun wissen, wie wir Iframes von Google und YouTube erstellen, aber wie werden diese denn nun in WordPress eingebunden? Vorab möchte ich erwähnen, dass grundsätzlich kein Plugin benötigt wird. Die einzige Ausnahme besteht darin, wenn du ein YouTube-Video mobil ohne schwarze Ränder darstellen möchtest. Hierfür ist eine kleine programmatische Anpassung notwendig, welche beispielsweise mithilfe eines Shortcodes gelöst werden kann.

1. Zu Beginn öffne deinen WordPress-Beitrag/-Seite und wechsele in den Text-Reiter (HTML-Modus).
2. Sofern du nun den Iframe-Code in den WordPress eingefügt hast, kannst du wieder in den visuellen Editor wechseln. Siehe da, nun wird das Video angezeigt. Speichere den Beitrag ab und sieh ihn dir im Frontend an.
   
   Kleiner Hinweis am Rande: Solltest du das Iframe in den visuellen Editor kopieren, werden durch diesen die Sonderzeichen wie zum Beispiel < und > in HTML-Code umgewandelt. Aus diesem Grund müssen wir den Weg über die HTML-Ansicht gehen.
   

Mit dem Page Builder von SiteOrigin

Im Page Builder von SiteOrigin haben wir mehrere verschiedene Möglichkeiten ein Iframe in WordPress einzubinden.

1. Wir nutzen den HTML-Baustein, welcher reines HTML anzeigen lässt.
2. Du kannst den SiteOrigin Editor-Baustein verwenden und fügst das Iframe über den Text-Reiter (HTML-Modus) ein.
3. Für die Google Maps Anbindung gibt es einen eigenen Baustein. Hier muss lediglich ein API-Code von Google eingeholt und in dem Baustein hinterlegt werden. Anschließend kannst du deine Zieladresse auswählen und schon wird eine Google Karte erzeugt.