Advertisement
  1. Web Design
  2. WordPress

Wie man einen iFrame in WordPress mit oder ohne Plugin erstellt

Scroll to top
Read Time: 9 min

German (Deutsch) translation by Ines Willenbrock (you can also view the original English article)

In WordPress können Sie viele verschiedene Arten von Dateien hochladen. Allerdings, nur weil Sie können, heißt das nicht, dass Sie es auch tun sollen.

Einige Formate sind berüchtigt dafür, dass sie Platz auf Ihrem Server beanspruchen. Je nach Ihrem Webhosting-Tarif kann das Hochladen vieler großer Dateien Ihren Speicherplatz schnell aufbrauchen und sogar zusätzliche Kosten verursachen. Noch schlimmer ist, dass das Hochladen von Dateien Dritter auf Ihre Website Sie in rechtlich heiße Gewässer bringen kann.

In diesem Beitrag zeige ich Ihnen, wie Sie diese beiden Probleme umgehen können. Wir werden sehen, wie iFrames das Geheimnis sein können, wie Sie Ihre Website mit vielen ansprechenden, multimedialen Inhalten füllen können, ohne das Urheberrecht zu verletzen oder Ihre Seitenladezeiten zu zerstören.

Alles, was Sie über iFrames wissen müssen

Ein iFrame ist ein HTML-Dokument, das Sie in ein anderes Dokument einbetten. Viele Betreiber von WordPress-Websites verwenden iFrames, um externe Inhalte wie YouTube-Videos anzuzeigen.

Um einen iFrame einzubetten, müssen Sie die URL des externen Inhalts in HTML-Tags verpacken. Sie können auch zusätzliche Parameter verwenden, um die Anzeige und Funktion dieser Inhalte anzupassen. Für diese HTML-Tags haben Sie zwei Möglichkeiten: Schreiben Sie den erforderlichen Code manuell oder verwenden Sie ein Plugin, das den HTML-Code für Sie generiert.

Für viele Website-Besitzer sind iFrames der perfekte Weg, um große Dateien zu teilen. Obwohl WordPress eine Reihe von Formaten unterstützt, ist es nicht immer eine gute Idee, diese Inhalte auf Ihrer Website zu hosten.

Große Dateien, wie z.B. lange, hochauflösende Medien, können eine Menge Platz auf Ihrem Server beanspruchen. Außerdem können sie Ihre Website zum Stillstand bringen, was schlecht für das Besuchererlebnis ist.

Anstatt diese Dateien in WordPress hochzuladen, hosten viele Benutzer sie auf einer externen Plattform und betten diese Inhalte dann über einen iframe ein. Das ist eine Win-Win-Situation - Sie können Ihre Besucher mit reichhaltigen Inhalten begeistern, ohne dass die Ladezeiten Ihrer Seite außer Kontrolle geraten.

Mit iFrames sind Sie nicht auf die Anzeige Ihrer eigenen Inhalte beschränkt. Das Einbetten wird von den Vereinigten Staaten nicht als Urheberrechtsverletzung betrachtet, da Sie keine Kopie des Originalinhalts erstellen. Die Europäische Union ist ebenfalls der Meinung, dass Sie ein Video, das urheberrechtlich geschütztes Material enthält, einbetten können, ohne das Urheberrecht des Urhebers zu verletzen.

Wenn Sie Inhalte Dritter auf Ihrer Website präsentieren möchten, gelten iFrames im Allgemeinen als legale und ethische Lösung. Das macht iFrames zur perfekten Lösung für den Aufbau einer ansprechenden, multimedialen Website, ohne dass Sie unbedingt viele neue Inhalte erstellen müssen.

Da sie eine so vielseitige und nützliche Komponente sind, lassen Sie uns ein paar verschiedene Möglichkeiten zur Erstellung von iFrames erkunden - ohne und mit einem Plugin.

1. Verwenden Sie einen benutzerdefinierten HTML-Block

Plugins sind ein wichtiger Teil der WordPress-Erfahrung. Es gibt ein Plugin, mit dem Sie praktisch jede Aufgabe erledigen können. Aber nicht alles ist positiv!

Plugins fügen Ihrer Website Code von Dritten hinzu. Im Laufe der Jahre haben Hacker Schwachstellen in zahllosen Plugins ausgenutzt, darunter auch in einigen der beliebtesten und seriösesten WordPress-Plugins auf dem Markt. Einige Software von Drittanbietern kann sogar die Leistung Ihrer Website beeinträchtigen oder Konflikte und Bugs einführen.

Aus diesen Gründen sollten Sie überlegen, ob Sie die Verwendung von Plugins einschränken wollen. Die gute Nachricht ist, dass Sie Inhalte einbetten können, ohne zusätzliche Plugins zu installieren.

Um einen iFrame zu erstellen:

  • Kopieren Sie die URL des Inhalts, den Sie einbetten möchten. Dann können Sie den Link in <iframe>-Tags verpacken und als Quelle für Ihren Tag festlegen. Zum Beispiel:
1
<iframe src="https://example.com"> </iframe>
  • Navigieren Sie zu der Seite oder dem Beitrag, in den Sie diesen Inhalt einbetten möchten, und öffnen Sie diese Webseite zur Bearbeitung.
  • Erstellen Sie einen neuen Block, indem Sie auf das kleine + Symbol klicken.
  • Geben Sie im folgenden Popup Benutzerdefiniertes HTML ein und wählen Sie diesen Block aus, wenn er erscheint. Dadurch wird ein neuer Benutzerdefiniertes HTML-Block zu Ihrer Webseite hinzugefügt.
WordPress' eingebauter Custom HTML-Block.WordPress' eingebauter Custom HTML-Block.WordPress' eingebauter Custom HTML-Block.
  • Sie können nun Ihren iFrame-Code in diesen Block einfügen:
Ein Beispiel für iframe-Code.Ein Beispiel für iframe-Code.Ein Beispiel für iframe-Code.

Um zu überprüfen, wie dieser eingebettete Inhalt für Besucher aussieht, klicken Sie auf die Schaltfläche Vorschau.

Eine Webseite, eingebettet über einen iframe.Eine Webseite, eingebettet über einen iframe.Eine Webseite, eingebettet über einen iframe.

Wenn Sie mit der Anzeige und den Funktionen dieser Inhalte zufrieden sind, können Sie diese Seite ganz normal veröffentlichen oder aktualisieren. Alternativ dazu gibt es einige Möglichkeiten, den Standard-iFrame zu optimieren.

Erstens können Sie die Breite und Höhe in Pixeln festlegen, zum Beispiel:

1
<iframe src="https://example.com" width="100px" height="100px"> </iframe>

Standardmäßig zeigt WordPress einen Rahmen um den Frame an. Sie können diesen Rahmen mit dem Attribut frameborder="1" entfernen, zum Beispiel:

1
<iframe src="https://example.com" frameborder="1"> </iframe>

Sie können auch ändern, wo dieser Inhalt auf der Seite erscheint, indem Sie die folgenden Werte verwenden: Links, Rechts, Oben und Unten. Wenn Sie Ihren iFrame zum Beispiel rechts ausrichten möchten, verwenden Sie:

1
<iframe src="https://example.com" align="right"> </iframe>

Damit wird die folgende Ausgabe angezeigt:

Ein iframe, erstellt mit dem WordPress-Blockeditor. Ein iframe, erstellt mit dem WordPress-Blockeditor. Ein iframe, erstellt mit dem WordPress-Blockeditor.

2. Einen WordPress Shortcode-Block verwenden

Alternativ können Sie iFrames auch mit einem Shortcode einbetten. Diese Methode ähnelt der Verwendung des Custom HTML-Blocks:

  • Öffnen Sie die Seite oder den Beitrag, in dem Sie den iFrame erstellen möchten.
  • Klicken Sie auf das kleine + Symbol und beginnen Sie mit der Eingabe des Shortcodes.
  • Wählen Sie den Shortcode-Block aus, wenn er erscheint. Dadurch wird ein neuer Block eingefügt.
Der WordPress Shortcode-Block.Der WordPress Shortcode-Block.Der WordPress Shortcode-Block.
  • Geben Sie den folgenden Code ein und ersetzen Sie dabei www.example.com durch die URL des Inhalts, den Sie einbetten möchten:
1
[iframe src="https://www.example.com/"]

Sie können nun in der Vorschau sehen, wie dieser Inhalt aussehen wird, und Ihre Seite wie gewohnt veröffentlichen.

3. Eine YouTube-URL einbetten

Da YouTube-Nutzer jede Minute mehr als 500 Stunden Videos hochladen, ist dies eine äußerst beliebte Plattform. Es überrascht daher nicht, dass WordPress einen eingebauten YouTube-Block bietet, den Sie zum Einbetten von Videoinhalten verwenden können.

Um ein YouTube-Video einzubetten:

  • Öffnen Sie die Seite oder den Beitrag, in den Sie den Inhalt einbetten möchten.
  • Klicken Sie auf die kleine + Schaltfläche und beginnen Sie mit der Eingabe von YouTube.
  • Wählen Sie diesen Block aus, wenn er erscheint. Dies fügt den speziellen YouTube-Block von WordPress ein.
WordPress' eingebauter YouTube-Block.WordPress' eingebauter YouTube-Block.WordPress' eingebauter YouTube-Block.
  • Navigieren Sie in einer neuen Registerkarte zu dem YouTube-Video, das Sie einbetten möchten.
  • Kopieren Sie die URL des Videos und fügen Sie sie in Ihren YouTube-Einbettungsblock ein.
Der YouTube-Einbettungsblock.Der YouTube-Einbettungsblock.Der YouTube-Einbettungsblock.
  • Klicken Sie auf die Schaltfläche Einbetten.

WordPress ruft nun das betreffende Video ab und zeigt es als Teil Ihrer Webseite an:

Ein YouTube-Video, eingebettet über eine iframe-Komponente. Ein YouTube-Video, eingebettet über eine iframe-Komponente. Ein YouTube-Video, eingebettet über eine iframe-Komponente.

Sie können nun eine Vorschau dieser Seite im WordPress-Editor anzeigen. Wenn Sie mit Ihrem eingebetteten YouTube-Video zufrieden sind, ist es an der Zeit, auf Veröffentlichen (oder Aktualisieren!) zu klicken.

4. Kopieren/Einfügen des Einbettungscodes

Viele große Websites bieten eine spezielle Einbettungsoption für ihre Inhalte an. Wenn Sie darauf klicken, erhalten Sie einen Einbettungscode, den Sie kopieren und in Ihre Website einfügen können.

Lassen Sie uns Vimeo als Beispiel nehmen:

  • Suchen Sie auf der Vimeo-Website ein Video, das Sie einbetten möchten.
  • Wählen Sie die Schaltfläche Teilen.
Ein Vimeo-Video.Ein Vimeo-Video.Ein Vimeo-Video.
  • Es öffnet sich ein Popup-Fenster, das verschiedene Schaltflächen zum Teilen sowie den Einbettungscode für dieses spezielle Video enthält. Sie können diesen Einbettungscode nun kopieren.
Die Freigabeoptionen von Vimeo, einschließlich eines Einbettungscodes.Die Freigabeoptionen von Vimeo, einschließlich eines Einbettungscodes.Die Freigabeoptionen von Vimeo, einschließlich eines Einbettungscodes.
  • Wechseln Sie zu Ihrem WordPress-Dashboard und öffnen Sie die Seite oder den Beitrag, in den Sie diesen Inhalt einbetten möchten.
  • Klicken Sie auf das kleine +-Symbol und fügen Sie einen Custom HTML-Block ein.
  • Nachdem Sie diesen Block eingefügt haben, fügen Sie Ihren Einbettungscode ein.
Der WordPress Custom HTML-Block.Der WordPress Custom HTML-Block.Der WordPress Custom HTML-Block.

Sie können nun eine Vorschau des eingebetteten Inhalts sehen, indem Sie auf Vorschau in der schwebenden Symbolleiste klicken. Alternativ können Sie auch auf den Link Vorschau in der oberen rechten Ecke klicken.

5. Installieren Sie das Advanced iFrame Plugin

Wenn Sie regelmäßig Inhalte einbetten, kann es sich lohnen, ein spezielles Plugin zu installieren.

Advanced iFrame macht es Ihnen leicht, iFrames zu jeder Seite oder jedem Beitrag hinzuzufügen. Außerdem haben Sie damit eine größere Kontrolle über Ihre iFrames, was ideal ist, wenn Sie ein ganz bestimmtes Aussehen oder eine bestimmte Funktionalität im Sinn haben.

Zu diesen Anpassungen gehört das Ausblenden des iFrames, bis der eingebettete Inhalt vollständig geladen ist, was dazu beitragen kann, die wahrgenommene Ladezeit der Seite zu verbessern. Sie können auch verschiedene Bereiche des iFrame ausblenden, um sicherzustellen, dass sich Ihre Besucher auf den richtigen Bereich konzentrieren.

Wenn Sie ein Upgrade wünschen, steht Ihnen eine Pro-Version zur Verfügung, die einige zusätzliche Funktionen bietet. Wenn Sie beispielsweise eine Advanced iFrame Pro-Lizenz erwerben, können Sie den iFrame automatisch zoomen. Dies kann das Erlebnis für mobile Benutzer verbessern. Die Pro-Version verfügt außerdem über eine Browser-Erkennung, so dass Ihre Website den eingebetteten Inhalt automatisch an den Browser des Besuchers anpasst.

Nach der Aktivierung dieses Plugins können Sie einen iFrame mit dem folgenden Shortcode einfügen:

1
[advanced_iframe src="https://www.example.com/"]

Stellen Sie sicher, dass Sie die URL durch den Inhalt ersetzen, den Sie anzeigen möchten. Vielleicht interessiert es Sie, dass das Team, das hinter dem Advanced iFrame Plugin steht, auch eine kostenlose iFrame checker Anwendung veröffentlicht hat. Mit diesem Plugin können Sie überprüfen, ob Sie eine bestimmte URL in einen iFrame einfügen dürfen.

Wenn Sie nicht programmieren möchten, dann bietet dieses Plugin auch einen erweiterten iFrame-Block:

Das erweiterte iframe WordPress Plugin.Das erweiterte iframe WordPress Plugin.Das erweiterte iframe WordPress Plugin.

Nachdem Sie diesen Block eingefügt haben, klicken Sie ihn an. Dadurch öffnet sich das WordPress-Menü Post/Block:

So konfigurieren Sie den erweiterten iframe-Block.So konfigurieren Sie den erweiterten iframe-Block.So konfigurieren Sie den erweiterten iframe-Block.

Im Menü Block geben Sie die URL des Inhalts ein, den Sie einbetten möchten. Sie können auch eine Breite und Höhe angeben:

Einen erweiterten iframe-Block konfigurieren. Einen erweiterten iframe-Block konfigurieren. Einen erweiterten iframe-Block konfigurieren.

Sie können diese Werte entweder als Prozentsatz des gesamten Inhaltsbereichs oder als Pixelwert eingeben. Wenn Sie keinen Wert für Breite und Höhe angeben, verwendet WordPress die Standardwerte des Plugins.

Wenn Sie sich diese Standardeinstellungen ansehen möchten, dann wählen Sie Erweiterter iFrame im linken Menü von WordPress. Wählen Sie dann die Registerkarte Grundeinstellungen:

Das erweiterte iFrame WordPress Plugin.Das erweiterte iFrame WordPress Plugin.Das erweiterte iFrame WordPress Plugin.

Hier finden Sie alle Standardeinstellungen für die Inhalte, die Sie über Advanced iFrame einbetten. Das ist eine ganze Menge, also nehmen Sie sich ein wenig Zeit, um es zu erkunden:

Erzeugen eines Shortcodes mit dem Advanced iframe Plugin.Erzeugen eines Shortcodes mit dem Advanced iframe Plugin.Erzeugen eines Shortcodes mit dem Advanced iframe Plugin.

Wenn Sie es vorziehen, Ihre iFrames mit Hilfe des Shortcodes einzubetten, dann könnte Sie die Schaltfläche Erzeuge einen Shortcode für die aktuellen Einstellungen interessieren. Diese Schaltfläche erstellt einen Shortcode, der alle Standardeinstellungen des Plugins enthält.

Wenn Sie diese Standardeinstellungen überschreiben möchten, fügen Sie einfach Attribute zu diesem Shortcode hinzu oder entfernen sie.

So setzen Sie die Standardeinstellungen für den erweiterten iframe außer Kraft.So setzen Sie die Standardeinstellungen für den erweiterten iframe außer Kraft.So setzen Sie die Standardeinstellungen für den erweiterten iframe außer Kraft.

Um diesen Code zu erzeugen, navigieren Sie zu Erweiterter iFrame > Grundeinstellungen. Sie können nun zum Abschnitt Wie füge ich einen iFrame ein scrollen und auf die Schaltfläche Erzeuge einen Shortcode... klicken.

Zusammenfassung

In diesem Beitrag habe ich Ihnen gezeigt, wie Sie externe Inhalte auf Ihrer Website einbinden können. Wenn Sie sich für iFrames entscheiden, können Sie die Ladegeschwindigkeit Ihrer Website erhalten und gleichzeitig mögliche Urheberrechtsprobleme vermeiden.

In diesem Tutorial haben wir mehrere Methoden behandelt. Wenn Sie regelmäßig Inhalte einbetten, sollten Sie sich das Advanced iFrame Plugin ansehen. Dieses Plugin bietet einen schnellen und codefreien Ansatz zum Einbetten externer Inhalte. Wenn Sie nur gelegentlich einen iFrame erstellen müssen, bietet WordPress verschiedene eingebaute iFrame-Blöcke, die diese Aufgabe erfüllen sollten.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.