{"id":766,"date":"2019-12-20T01:39:44","date_gmt":"2019-12-20T00:39:44","guid":{"rendered":"https:\/\/www.mightypress.de\/?p=766"},"modified":"2021-06-13T19:47:11","modified_gmt":"2021-06-13T19:47:11","slug":"wordpress-iframe-einbinden","status":"publish","type":"post","link":"https:\/\/wpfellows.com\/de\/wordpress-iframe-einbinden\/","title":{"rendered":"WordPress iFrame einbinden – Manuell und per Plugin"},"content":{"rendered":"
F\u00fcr manche Leute sind iFrames ja mehr ein Relikt aus einer l\u00e4ngst vergangenen Zeit. Und trotzdem gibt es sie noch und (wie ich finde) nicht ohne Grund. Wie du in WordPress iFrames einbinden kannst, zeige ich dir in diesem kurzen Tutorial.<\/p>
F\u00fcr alle, die mit dem Begriff iFrame nichts anfangen k\u00f6nnen, erkl\u00e4re ich das mal so kurz wie m\u00f6glich.<\/p>
Das Wort iFrame ist ein K\u00fcrzel f\u00fcr den Begriff \u201eInline Frames\u201c. iFrames sind Codes, die es dir erlauben, Inhalte von einer ganz anderen Website auf deiner eigenen Website darzustellen.<\/p>
Du setzt also den Codeschnipsel in einen eigenen Beitrag ein und legst fest, was von einer anderen Website (die nicht deine eigene sein muss) in deine Website \u201egezogen\u201c werden soll. Das Prinzip ist nahezu identisch mit den heutigen Einbetten von Inhalten, das du wahrscheinlich von eingebetteten YouTube Videos oder Instagram Posts kennst.<\/p>
F\u00fcr iFrames gibt es eine ganze Reihe von Anwendungsf\u00e4llen, auch wenn Technologien wie AJAX das Prinzip ein wenig \u00fcberholt haben. Einer der h\u00e4ufigsten ist sicherlich das Einblenden von Werbung auf einer Website, um diese zu monetarisieren.<\/p>
Manchmal geht es aber auch um die Umsetzung von nicht ganz allt\u00e4glichen Kundenw\u00fcnschen, die einfach mit einem iFrame erf\u00fcllt werden k\u00f6nnen.<\/p>
Ich hatte neulich in unserer Agentur einen Fall, in dem wir ohne iFrame gar nicht weitergekommen w\u00e4ren. Und zwar mussten B\u00f6rsenkurse f\u00fcr eine ganz bestimmte Aktie von der B\u00f6rse Frankfurt in Echtzeit in einer WordPress Seite eingebunden werden.<\/p>
Da die B\u00f6rse Frankfurt keine andere Anbindung, z. B. \u00fcber eine so genannte API, anbietet, mussten wir das Ganze als iFrame in WordPress einbinden. Ein super L\u00f6sung, die perfekt funktioniert und den Kunden happy gemacht hat.<\/p>
Zun\u00e4chst brauchen wir zum Einbinden eines iFrames mehrere Angaben, die wir gleich zu einem Codeschnipsel verschmelzen werden:<\/p>
Fr\u00fcher hat man f\u00fcr die H\u00f6he und die Weite des iFrames immer exakte Pixelangaben genommen. Da Websites aber mittlerweile responsive sind, w\u00fcrden diese pixelgenauen iFrames auf verschiedenen Ger\u00e4ten unterschiedlich dargestellt. Zum Beispiel abgeschnitten oder mit einer unsch\u00f6nen Scrollleiste.<\/p>
Um dies zu vermeiden, nutzt man heute keine Pixel mehr, sondern Prozentangaben. Wenn ein iFrame eine Weite von z. B. 80% haben soll, nimmt er eben 80% des Bildschirms auf dem Desktop-Rechner ein und ebenso 80% auf dem Smartphone Display.<\/p>
Die Weite passt sich also automatisch dem Bildschirm an. Aber zur\u00fcck zu unserem Codeschnipsel.<\/p>
Mit all diesen Angaben k\u00f6nnen wir jetzt schon unseren iFrame bauen:<\/p>
<iframe src=\"wpfellows.com\" width=\"80%\" height=\"20%\"><\/iframe><\/code><\/pre>Damit kannst du in WordPress einen iFrame einbinden, der eine Weite von 80% und eine H\u00f6he von 20% hat. Die Inhalte werden in diesem Fall von einer sehr empfehlenswerten Website \u00fcber WordPress gezogen \ud83d\ude09<\/p>
Es gibt \u00fcbrigens noch eine ganze Reihe von zus\u00e4tzlichen Funktionen, die du in deinen iFrame einbauen kannst. Also so genannte Attribute.<\/p>
Wenn du mehr dar\u00fcber erfahren m\u00f6chtest, empfehle ich dir den Mozilla Web Docs Artikel<\/a> zum Thema iFrames.<\/p>Wichtig:
<\/strong>\u00dcber iFrames k\u00f6nnen \u00fcbrigens nur Inhalte eingebunden werden, die mit dem selben Hypertext Protokoll ausgeliefert werden, wie deine Website. <\/p>\n\nWenn deine Website \u00fcber https ausgeliefert wird, muss die iFrame Quelle auch \u00fcber https ausgeliefert werden. Hat die Quelle nur http (also kein Sicherheitszertifikat), dann muss deine Website auch nur \u00fcber http laufen.<\/p><\/div><\/div>
So werden in WordPress iFrames mit einem Plugin eingebunden<\/h2>