iFrames einfach in WordPress einbinden

iFrames einfach in WordPress einbinden

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 oder Blog eingebunden werden. Beliebte Beispiele sind Anzeigen von Amazon.

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

Meine Seite/Beiträge können Werbung und Affiliate-Links enthalten. Bei einem Kauf erhalte ich gegebenenfalls eine Provision. Weitere Informationen gibt es hier: Kennzeichnung von Werbung/Affiliate Links / Datenschutzerklärung.

iFrames in WordPress

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=yourid&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=yourid&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.

Alternativen zur Darstellung

Wesentlich eleganter funktioniert die Darstellung von Affiliate Produkten mit entsprechenden Erweiterungen.

Universell und beliebt sind die Gutenberg Blöcke von Kadence WP in Kombination mit den sehr gut designten Elementen von Jake PfohlStart Blogging Blocks”.

Damit lassen sich nahezu alle Design Anforderungen umsetzen.

Beispiel

Praxiskurs HTML5 & CSS3

HTML5 und CSS3 sind die neuesten Standards in der Webentwicklung. Sie ermöglichen es Ihnen, mit geringem Aufwand bessere und anspruchsvollere Websites zu erstellen. In diesem Praxiskurs lernen Sie, wie Sie mit HTML5 und CSS3 von Grund auf professionelle Websites erstellen können.

Sie lernen, wie Sie mehrspaltige Layouts entwerfen, Webfonts verwenden, barrierefreie und responsive Websites erstellen und vieles mehr. Nachdem Sie Ihre Website getestet haben, werden Sie sogar Ihre eigene Domain registrieren und Ihre Website online stellen.

Die Code-Beispiele zu den einzelnen Kapiteln können Sie unter dpunkt.de/htmlcss-examples herunterladen. Nutzen Sie sie als Ausgangspunkt für Ihre eigenen Projekte.

Worauf warten Sie also noch? Melden Sie sich noch heute für diesen Praxiskurs an und beginnen Sie, mit HTML5 und CSS3 schöne, professionelle Websites zu erstellen!

Das könnte dich auch interessieren:

Aktuelle Bestseller zum Thema “Wordpress”:

Bestseller Nr. 2
WordPress 6: Das umfassende Handbuch. Über 1.000 Seiten zu WordPress inkl. Themes, Plug-ins, WooCommerce, SEO und mehr
  • Größe: ca. 7 'x5' (203 x 148 cm x, 203,2 x 147,3 cm)
  • Material: Plüsch, 70% Schwamm, 10% Vlies Stoff 20%
  • Moderne Bereich Teppich Designs für den Indoor/Outdoor Gebrauch.
  • Schmutzabweisend, perfekt für jeden Raum Dekor
  • Vorleger Teppich personalisiertes Design zeigt Ihren einzigartigen Stil
Bestseller Nr. 5
WordPress für Dummies
  • Sabin-Wilson, Lisa (Autor)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

Es tut uns leid, dass der Beitrag für dich nicht hilfreich war!

Lasse uns diesen Beitrag verbessern!

Wie können wir diesen Beitrag verbessern?

Letzte Aktualisierung am 2024-11-12 / Affiliate Links / Bilder von der Amazon Product Advertising API

This product presentation was made with AAWP plugin.

Ähnliche Beiträge