Wie binde ich iFrames einfach in WordPress ein?

Wie binde ich iFrames einfach in WordPress ein?

iFrames in WordPress einbinden ist im Prinzip sehr einfach. Dazu gibt es auch zahlreiche Tipps und Tricks im Internet, die leider oft sehr technisch bzw. kryptisch sind. iFrames sind HTML Elemente, die in Ihre Webseite eingebunden werden. Beliebte Beispiele sind bspw. Anzeigen von Amazon.

Wie binde ich iFrames einfach in WordPress ein?

Anhand einer Amazon Anzeige soll das Einbinden eines iFrames in wordpress dargestellt werden.

Die meisten User arbeiten im Visuellen Modus des Post Editors. Um jedoch einen HMTL Code einbinden zu können ist es notwendig in den Text Modus zu wechseln.

Editor

Nach dem Wechsel in den Text Modus, die Stelle im Text wählen, an der das iFrame eingefügt werden soll. Danach ist der Code im Artikel eingebunden

Beispiel einer Amazon Buch Anzeige ( Text + Grafik kombiniert):

<iframe style=”width:120px;height:240px;” marginwidth=”0″ marginheight=”0″ scrolling=”no” frameborder=”0″ src=”//ws-eu.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=DE&source=ac&ref=qf_sp_asin_til&ad_type=product_link&tracking_id=hillinfor-21&marketplace=amazon®ion=DE&placement=3864901618&asins=3864901618&linkId=&show_border=true&link_opens_in_new_window=true”>
</iframe>

 

Allerdings fließt der Blogtext so nicht um den Artikel herum, sondern es entsteht ein Absatz, der den Lesefluss stört. Dieses Problem löst man, in dem manuell die Option align=”left” oder align=”right” einfügt. Am Besten gleich hinter den Abstandsbezeichnungen marginwidth und marginheight.

Der Html Text sind dann wie folgt aus:

<iframe style=”width:120px;height:240px;  marginwidth=”0″ marginheight=”0″ align=”right” scrolling=”no” frameborder=”0″ src=”//ws-eu.amazon-adsystem.com/widgets/q? ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=DE&source=ac&ref=qf_sp_asin_til&ad_type=product_link&tracking_id=hillinfor-21&marketplace=amazon®ion=DE&placement=3864901618&asins=3864901618&linkId=&show_border=true&link_opens_in_new_window=true”>
</iframe>

Damit fließt der Blogtext um die Anzeige herum und der Lesefluss wird nicht unterbrochen. Allerdings ist es optisch besser, wenn zum Bild (iFrame) ein Abstand eingehalten wird. Dazu fügt man den Befehl margin-right:10px ( Abstand in Pixel ) gleich am Anfang in die style Sequenz ein. Das sieht dann wie folgt aus:

<iframe style=“width:120px;height:240px; margin-right:10px;“ marginwidth=“0″ marginheight=“0″ align=“right“ scrolling=“no“ frameborder=“0″ src=“//ws-eu.amazon-adsystem.com/widgets/q? ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=DE&source=ac&ref=qf_sp_asin_til&ad_type=product_link&tracking_id=hillinfor-21&marketplace=amazon®ion=DE&placement=3864901618&asins=3864901618&linkId=&show_border=true&link_opens_in_new_window=true“></iframe>

 

 

Bestseller Nr. 1
HTML5: und CSS3 für Einsteiger: Der leichte Weg zur eigenen Webseite (Einfach Programmieren lernen, Band 7)
  • Fuchs, Paul (Autor)
  • 406 Seiten - 21.06.2019 (Veröffentlichungsdatum) - BMU Verlag (Herausgeber)
Bestseller Nr. 2
WordPress 5: Das umfassende Handbuch. Vom Einstieg bis zu fortgeschrittenen Themen: WordPress-Themes, Plug-ins, SEO, Sicherheit u.v.m.
  • Eisenmenger, Richard (Autor)
  • 1076 Seiten - 24.06.2019 (Veröffentlichungsdatum) - Rheinwerk Computing (Herausgeber)
Bestseller Nr. 3
HTML and CSS: Design and Build Websites
  • Duckett, Jon (Autor)
  • 512 Seiten - 18.11.2011 (Veröffentlichungsdatum) - Wiley (Herausgeber)
Bestseller Nr. 4
HTML & CSS für Dummies
  • Maurice, Florence (Autor)
  • 428 Seiten - 11.09.2019 (Veröffentlichungsdatum) - Wiley-VCH (Herausgeber)
Bestseller Nr. 5
Build Your Own Website: A Comic Guide to HTML, CSS, and WordPress
  • Cooper, Nate (Autor)
  • 264 Seiten - 02.09.2014 (Veröffentlichungsdatum) - No Starch Press (Herausgeber)
Bestseller Nr. 6
HTML und CSS: Ganz einfach eigene Webseiten erstellen (mitp für Kids)
  • Thomas Kobert (Autor)
  • 304 Seiten - 21.02.2020 (Veröffentlichungsdatum) - mitp (Herausgeber)
Bestseller Nr. 8
Webseiten erstellen für Einsteiger: Schritt für Schritt mit HTML und CSS zur eigenen Website. Mit zahlreichen Abbildungen
  • Jacobsen, Jens (Autor)
  • 423 Seiten - 20.12.2019 (Veröffentlichungsdatum) - Rheinwerk Computing (Herausgeber)
Bestseller Nr. 9
WordPress 4: Das umfassende Handbuch. Vom Einstieg bis zu fortgeschrittenen Themen: inkl. WordPress-Themes, Templates, SEO, Analytics, Backup u.v.m.
  • Hetzel, Alexander (Autor)
  • 939 Seiten - 30.01.2017 (Veröffentlichungsdatum) - Rheinwerk Computing (Herausgeber)
Bestseller Nr. 10
HTML und CSS (mitp...für Kids)
  • Thomas Kobert (Autor)
  • 312 Seiten - 10.08.2015 (Veröffentlichungsdatum) - mitp (Herausgeber)

Letzte Aktualisierung am 29.05.2020 / Affiliate Links / Bilder von der Amazon Product Advertising API