So betten Sie iFrames in WordPress ein

Das Teilen von Inhalten online ist eine gängige Praxis. Sie könnten jedoch ratlos sein, wenn Sie versuchen, herauszufinden, wie Sie bestimmte Arten von Inhalten integrieren können. Das Teilen großer Dateien oder bestimmter Elemente von anderen Websites kann manchmal eine Herausforderung sein.

Glücklicherweise gibt es eine ziemlich einfache Webdesign-Praxis, mit der Sie bestimmte Arten von Inhalten auf Ihrer WordPress-Website anzeigen können. Die Verwendung von HTML zum Erstellen von Inline-Frames (iFrames) kann es einfacher machen, Bilder, Videos und andere Medien online zu teilen.

In diesem Artikel untersuchen wir die verschiedenen Verwendungsmöglichkeiten von iFrames auf einer Website. Wir werden auch die Schritte zum Erstellen von iFrames durchgehen, sowohl manuell als auch mit einem Plugin. Lass uns anfangen!

iFrame verwendet

Wenn Sie einen iFrame verwenden, erstellen Sie im Wesentlichen ein kleines Portal auf Ihrer Website, das es ermöglicht, Inhalte von woanders anzuzeigen. Dies kann in mehreren Szenarien nützlich sein.

Die Verwendung eines iFrame bedeutet, dass Sie die Dateien, die Sie anzeigen möchten, nicht hosten müssen. Der Inhalt bleibt an seiner ursprünglichen Position und kann über den Frame auf Ihrer Website angezeigt werden. Diese Technik kann unter anderem hilfreich sein, wenn Sie große Dateien anzeigen möchten. Ein iFrame kann diese Inhalte auf Ihre Website bringen, ohne die Ladegeschwindigkeit zu verlangsamen.

Es ist erwähnenswert, dass iFrames die einzige Art von Frames sind, die in HTML5 erlaubt sind. Es gibt eine Vielzahl verschiedener Arten von Inhalten, die Sie verwenden können, um sie anzuzeigen, einschließlich:

• Bilder: Sie können iFrames verwenden, um qualitativ hochwertige Bilder aus einer externen Galerie anzuzeigen, ohne Kompromisse aufgrund der Dateigröße eingehen zu müssen.
• Videos: Das Hosten Ihrer Videos auf einer Plattform wie YouTube oder Vimeo und die Verwendung eines iFrames, um sie auf Ihrer Website zu platzieren, kann die Benutzererfahrung verbessern und gleichzeitig Speicherplatz auf Ihrer Website freigeben.
• Andere Webinhalte: Das Hervorheben von Inhalten von anderen Websites, wie z. B. Portfolioseiten oder Rezepte, kann Ihrem Publikum auf einfache Weise reichhaltige Inhalte bringen.

Wenn Sie iFrames verwenden, können Sie auch komplizierte Urheberrechtsregeln umgehen. Mehrere Gerichte haben entschieden, dass die Verwendung eines iFrame zur Anzeige von urheberrechtlich geschütztem Material nicht in allen Fällen eine Urheberrechtsverletzung darstellt.

Eine Website kann auch Skripte enthalten, um zu verhindern, dass ihr Inhalt in einen iFrame eingefügt wird. Wir empfehlen jedoch, immer den ursprünglichen Ersteller aller von Ihnen verwendeten Inhalte anzugeben oder sich rechtlich beraten zu lassen, wenn Sie sich nicht sicher sind, wie Sie vorgehen sollen.

Verwenden von iFrames mit einem Plugin

Eine der einfachsten Möglichkeiten, iFrames auf einer WordPress-Website einzusetzen, ist die Verwendung eines iFrame-Plugins. Glücklicherweise stehen mehrere hoch bewertete Optionen zur Auswahl.

Schritt 1: Laden Sie ein iFrame-Plugin herunter und konfigurieren Sie es

Für unser Beispiel verwenden wir das Advanced iFrame-Plugin. Es ist flexibel, einfach zu bedienen und sehr gut bewertet:

Nach der Installation und Aktivierung des Plugins finden Sie in Ihrem WordPress-Dashboard einen neuen Menüpunkt Erweiterte iFrames . Advanced iFrame hat eine ziemlich umfangreiche Auswahl an Optionen. Beginnen Sie am besten mit der Registerkarte „Optionen“ und sehen Sie sich das „QuickStart“-Video an:

Dann können Sie nach unten scrollen und einige der Optionen des Plugins überprüfen. Diese sind alle mit vielen hilfreichen Erklärungen und einfach auszuwählenden Optionen ausgestattet:

Advanced iFrames bietet auch einen kostenlosen iFrame-Checker, der jede von Ihnen angegebene URL überprüft, um festzustellen, ob sie Skripte enthält, die verhindern, dass der Inhalt in einen iFrame aufgenommen wird. Es empfiehlt sich, eine beliebige URL über dieses Tool auszuführen, bevor Sie es in einem iFrame auf Ihrer Website verwenden.

Sie sollten auch die Registerkarte Grundeinstellungen überprüfen. Dort können Sie Elemente des iFrames wie Höhe, Breite und Rahmenränder anpassen:

Sobald Sie die Einstellungen des Plugins Ihren Anforderungen entsprechend konfiguriert haben, können Sie mit der Verwendung von iFrames auf Ihrer Website beginnen.

Schritt 2: Verwenden Sie den erweiterten iFrame-Block

Im WordPress-Blockeditor steht Ihnen jetzt ein erweiterter iFrames- Block zur Verfügung:

Wenn Sie diesen Block bei der ersten Verwendung nicht finden können, finden Sie ihn in der Kategorie „Widgets“ .

Sobald Sie auf den erweiterten iFrame- Block klicken, wird er automatisch mit Inhalten von der Website des Plugin-Erstellers geladen. Sie können den Block konfigurieren, indem Sie die Blockoptionen auf der rechten Seite der Seite verwenden:

Dort können Sie die URL des Inhalts hinzufügen, der im iFrame angezeigt werden soll. Sie können bei Bedarf auch einige Einstellungen des Plugins überschreiben.

Schritt 3: Vorschau Ihrer Website

Wenn Sie Ihre URL mit dem iFrame-Checker getestet haben, sollten Sie startklar sein. Es ist jedoch immer am besten, eine Vorschau Ihrer Änderungen anzuzeigen, bevor Sie Ihre Inhalte veröffentlichen. Sie sollten eine Live-Vorschau Ihres iFrame sehen, während Sie ihn bearbeiten und Änderungen vornehmen.

Sie können auch die Vorschauoption in der oberen rechten Ecke Ihres Bearbeitungsfensters verwenden, um den Beitrag im Kontext der Menüs und Seitenleisten Ihrer Website anzuzeigen.

iFrames ohne Plugin verwenden

Wenn Sie nicht mit einem Plugin arbeiten möchten, aber dennoch iFrames verwenden möchten, haben Sie Glück! Sie können Code manuell auf Ihre Posts und Seiten anwenden, um iFrame-Inhalte einzuschließen.

Schritt 1: Fügen Sie einen Einbettungscode ein

Wenn Sie Inhalte wie ein Video von YouTube in Ihre Website integrieren möchten, müssen Sie den von YouTube bereitgestellten Einbettungscode finden. Diese finden Sie unter einem Video, indem Sie auf Teilen klicken.

Dies öffnet ein Menü mit Freigabeoptionen. Sie sollten Einbetten auswählen, um den Code zu erhalten, den Sie für Ihren iFrame benötigen.

Es öffnet sich ein separates Fenster mit einer Vorschau, wie der eingebettete Inhalt aussehen wird. Sie können dann ein iFrame-Code-Snippet kopieren.

Sie können auch das Kontrollkästchen Beginnen bei aktivieren, wenn Sie möchten, dass die Zuschauer automatisch mit dem Anzeigen von Inhalten zu einem bestimmten Zeitcode beginnen.

Als Nächstes kehren Sie zu Ihrem WordPress-Beitrag zurück und fügen den benutzerdefinierten HTML- Block hinzu. Sie finden diese unter der Kategorie Formatierung .

Nachdem Sie diesen Block zu Ihrem Beitrag hinzugefügt haben, können Sie einfach den Einbettungscode einfügen, den Sie von der YouTube-Seite kopiert haben.

Als Nächstes sollten Sie sicherstellen, dass die Einbettung ordnungsgemäß funktioniert und so aussieht, wie Sie es möchten. Sie können im Block Benutzerdefiniertes HTML auf Vorschau klicken, um zu sehen, ob Ihr iFrame funktioniert.

Damit haben Sie erfolgreich einen iFrame auf Ihrer Website platziert. Derselbe Prozess funktioniert für jede Plattform, die Ihnen Einbettungscodes zur Verfügung stellt.

Schritt 2: Passen Sie Ihre iFrames an

Wenn Sie mit der Art und Weise, wie der iFrame auf Ihrem Beitrag oder Ihrer Seite angezeigt wird, immer noch nicht ganz zufrieden sind, können Sie einige der Werte im Code manuell anpassen. Es wird empfohlen, Cascading Style Sheets (CSS) zu verwenden, um die Darstellung von iFrames auf Ihrer Website vollständig anzupassen.

Das iFrame-Tag ermöglicht eine Reihe von benutzerdefinierten Eigenschaften. Es ist jedoch wichtig zu beachten, dass viele davon nicht mehr von HTML5 unterstützt werden. Wie bereits erwähnt, müssen Sie wahrscheinlich das CSS Ihres Designs untersuchen, da Sie bestimmte Formatierungen möglicherweise nicht direkt im benutzerdefinierten HTML- Block überschreiben können.

Schritt 3: Überprüfen Sie regelmäßig Ihre iFrame-Inhalte

Wenn Sie iFrames verwenden, sollten Sie den gerahmten Inhalt regelmäßig überprüfen. Da Sie ein Fenster zu Inhalten öffnen, über die Sie möglicherweise keine redaktionelle oder Qualitätskontrolle haben, kann dies jederzeit ein Problem auf Ihrer Website verursachen.

Wenn beispielsweise das Video, das wir in unserem Beispiel verwendet haben, von seinem YouTube-Kanal entfernt wird, enthält unser Beitrag einen kaputten Player. Dies ist etwas offensichtlicher als ein defekter Link, da er einen visuellen Einfluss auf Ihre Website hat. Wenn Sie Ihren iFrame-Inhalt regelmäßig überprüfen, können Sie nicht mehr funktionierende Medien ändern oder entfernen.

Optimieren Sie Ihre Website mit WP Engine

Die Verwendung von iFrames auf Ihrer Website kann für einen reibungslosen Ablauf sorgen und gleichzeitig Rich Media und dynamische Inhalte integrieren. Hier bei WP Engine wissen wir, wie wichtig es ist, wichtige Webdesign-Konzepte zu verstehen und Zugang zu den besten Entwicklerressourcen zu haben.

Darüber hinaus sind wir bestrebt, Ihnen dabei zu helfen, Ihren Kunden die besten digitalen Erlebnisse zu bieten. Wir haben eine vielfältige Auswahl an vollständig verwalteten WordPress-Hosting-Plänen, sodass Sie sich auf die Gestaltung schöner Websites konzentrieren können!