Willkommen beim Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
Embeds

Embeds und iFrames in WP:
Alles, was gut-zu-wissen ist

Bild, RaniRamli
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Der Artikel handelt von WordPress Embeds und die iFrames von anderen Websites, um diese auf der eigenen Website einzubetten. Diese Embeds machen es auch einfach, Videos von Websites wie YouTube in WordPress zu integrieren. Obwohl Embeds praktisch sind, können sie die Performance beeinträchtigen. Es wird hier dem Beitrag auch erwähnt, dass CSS-Anpassungen das Erscheinungsbild von Embeds und iFrames leicht verändern können.

Eine Einführung in die Verwendung von Embeds und iFrames zur Integration externer Inhalte auf einer Website. Um die Definition und den SinN von iFrames zu erfahren, empfehle ich dir, direkt auf diese Website im iFrame zu gehen:


'Embeds' sprich iFrames

Interview mit Fachmann

'Embeds' sprich iFrames sind immer etwas anti-schonend, was die Performanz angeht. Das liegt daran, dass die Zielseite eingebettet wird. Wenn die Zielseite langsamer ist, dann ist auch deine Seite langsam, da die iFrames erst geladen werden müssen.

Dies ist innerhalb von Beiträgen mal einzusetzen in Maßen, dann sollte es eigentlich keine Probleme geben. Auf der Startseite würde ich so etwas unterbinden.

Embeds

Um ein Video oder ein anderes Objekt in einen Beitrag oder eine Seite einzubinden, muss die vollständige URL in einer eigenen Zeile im Inhaltsbereich ohne Hyperlink eingegeben werden. Nach dem Eingeben der URL und Betätigen der Enter-Taste wird der eingebettete Link visuell dargestellt.

  1. Textabsatz + Eingabe der vollständigen URL und Enter ist dann der eingebettete Link visuell.

Beispiel:

https://wordpress.org/documentation/article/embeds/

Visuell dann:

Embeds

  • Wenn man auf ein Embed klickt, öffnet sich die eingebettete Website im selben Browser-Tab.

🎼 Der Nachteil von Einbettungen besteht darin, dass Besucher bei einem Klick auf das eingebettete Element möglicherweise von der eigenen Website abgelenkt werden und nicht mehr zurückkehren.🎵

'Embeds' in neuem Tab öffnen?

Ein Nachteil von 'Embeds' ist, dass sie sich nicht in einem neuen Tab öffnen lassen, im Gegensatz zu Hyperlinks, die sich in einem neuen Tab öffnen lassen.

https://wordpress.org/documentation/article/embeds/

Interview mit Fachmann

Die 'Embeds' lassen sich leider nicht in einem neuen Tab öffnen. Die anderen Seiten müssten die Links auf "Im neuen Tab öffnen" setzen. iFrames manipulieren ist schwierig und in den meisten Fällen unmöglich, der Sicherheit wegen.

Link bzw. Website per <iframe…

Einbinden von Links und Websites mit iframes in WordPress.

Ja, so kann jede Website eingebettet werden, sofern die Website das Einbetten nicht ausdrücklich verbietet. Allerdings gibt es auch Websites, die das Einbetten nur per iFrame deaktiviert haben.

Das Beispiel hier zeigt oberhalb als WP-Embeds ist erlaubt und hier unterhalb als iFrame ist das nicht erlaubt:

Und normal funktioniert des Codes …

<iframe src="example.com" width="474" height="450" allow="fullscreen"></iframe>

Der Code selbst ist ein iFrame-Element mit einer Breite von 474 Pixeln, einer Höhe von 450 Pixeln und der Erlaubnis zum Vollbildmodus. Das bedeutet, dass die eingebettete Webseite von "example.com" innerhalb des iFrame-Elements dargestellt wird. Ob der Code funktioniert oder nicht, hängt von verschiedenen Faktoren ab, einschließlich der URL, der unterstützten Funktionen durch die verwendete Plattform und der Sicherheitseinstellungen.

Und es ist anders als Embeds, denn wenn die Website per iFrame eingebettet wird, wird die gesamte Website visuell auf derselben Seite angezeigt. Dadurch kann direkt auf der eingebetteten Website navigiert werden. Wenn man auf der eingebetteten Website mit der rechten Maustaste klickt und "Frame-Quelltext anzeigen" auswählt, kann man den Quelltext des iFrames sehen. Es ist nicht möglich, die eingebettete Website in einem neuen Tab zu öffnen. Man kann sie nur über einen Hyperlink öffnen, wie zum Beispiel im Titel WordPress für Einsteiger: Beiträge einbetten.

Embeds in WP: Ein Performance-Test

Performance-Vergleich von WP-Embeds mit deaktivierten Embeds.

Selbst wenn man das Einbetten von Inhalten mit einem Plug-in wie Disable Embeds deaktiviert, ist es immer noch möglich, Links zu diesen Inhalten zu setzen und diese auf der Website anzuzeigen. Der einzige Unterschied ist, dass das Laden des entsprechenden JavaScripts deaktiviert wird. Das Bild als Beispiel:

Bild links WP das 'Embeds' und rechts WP des 'Embeds' disabled

Wenn man also die 'Embeds' nicht nützen möchte, so könnte so Plug-in wie Disable Embeds zu nützen sein. Dasselbe dem Beitrag da So deaktivierst du Embeds in WordPress auch nur mit PHP-Code zur Deaktivierung.

Lighthouse Test mit Plug-in Disable Embeds

Ich habe einen Lighthouse-Test mit dem Plug-in Disable Embeds durchgeführt, bei dem ich sieben Einbettungen auf der Startseite von Wegerl.at getestet habe. Mit den Standard-Embeds erreichte die Seite 63 Punkte, während sie mit deaktivierten Embeds nur 45 Punkte erreichte. Die sieben Einbettungen wurden vollständig entfernt, was zu einer Punktzahl von 75 führte.

Das Ergebnis in Rot ist hinfällig, da ja die 'Embeds' für sich nicht zu deaktivieren sind, wenn diese in Gebrauch.

WP-Embedsvs. deaktiviertSeite ohne Embeds
63 Punkte45 Punkte75 Punkte
Siehe Ergebnisse eines dreiteiligen Tests

Das Problem bei diesen Tests ist, dass die Ergebnisse variieren und nicht immer zuverlässig sind. Eine Möglichkeit, dies zu berücksichtigen, ist das Löschen des Caches von Autoptimize und das zweimalige Neuladen der Seite, bevor man Lighthouse ausführt.

Bei einem weiteren Test erreichte die Seite ohne Embeds mit aktivierten WP-Embeds 78 Punkte, während sie mit deaktivierten Embeds 83 Punkte erreichte. Mit aktivierten Embeds erreichte die Seite mit Embeds 81 Punkte, während sie mit deaktivierten Embeds 81 Punkte erreichte.

WP-Embeds aktiv und Seite ohne Embeds78 Punkte
Embeds disable und Seite ohne Embeds83 Punkte
WP-Embeds aktiv und Seite mit Embeds81 Punkte
WP-Embeds disable und Seite mit Embeds81 Punkte

Der Test zeigt, dass das Deaktivieren von Embeds durch das Plug-in Disable Embeds eine Verbesserung der Lighthouse-Performancebewertung bringen kann, wenn die Seite keine Embeds enthält. In diesem Fall wurden 83 Punkte erzielt, im Vergleich zu 78 Punkten für die Seite mit aktivierten Embeds.

Es ist jedoch zu beachten, dass die Ergebnisse von verschiedenen Faktoren abhängen können, wie z.B. dem verwendeten Theme und den installierten Plug-ins. Auch sollte man bedenken, dass das Deaktivieren von Embeds auch Auswirkungen auf die Funktionalität der Website haben kann, wenn sie von Drittanbieter-Plattformen abhängig ist.

Daher ist es ratsam, die Auswirkungen des Deaktivierens von Embeds auf die Funktionalität und die Performance der Website sorgfältig zu prüfen und gegebenenfalls professionellen Rat einzuholen, bevor man Entscheidungen trifft.

Drei Testdurchläufe

Die Ergebnisse in Rot sind hinfällig, da ja die 'Embeds' für sich nicht zu deaktivieren sind, wenn diese in Gebrauch.

EmbedsWP-Embeds aktiv WP-Disable Embeds
Seite mit81 / 79 / 7681 / 77 / 82
Seite ohne78 / 83 / 8283 / 83 / 87

Mit dem PHP-Code allein ist es ähnlich

Schon klar, dass so wie oben da, aber ich lass’ so stehen, denn der Code vom Plug-in ist einiges aufwendiger und so auch sehr spezifisch das Plug-in:

  • Verhindert, dass andere Ihre Website einbetten.
  • Verhindert, dass Sie andere Sites einbetten, die nicht auf der Whitelist stehen.
  • Deaktiviert JavaScripts in Bezug auf diese Funktion.

Der erste und dritte Punkt ist im einen so von, dass das Plug-in verhindert, dass die eigene WP-Website nicht in anderer Website einzubetten ist. – sonst genügte folgender Code in der …

functions.php

/* WP-Embeds deaktivieren */ 
function my_deregister_scripts(){ wp_dequeue_script( 'wp-embed' ); } add_action( 'wp_footer', 'my_deregister_scripts' );
Zwei Testdurchläufe
EmbedsWP-Embeds aktiv  vs. deaktiviert
Seite mit78 / 7981 / 86
Seite ohne82 / 8680 /81

Fazit zum Test

Es ist schwierig, aus den Tests einen eindeutigen Erfolg abzuleiten, wenn es um die Verwendung von Embeds geht. In der Regel sollte die Verwendung von Embeds jedoch so belassen werden, wie sie im WordPress-Core vorgesehen ist. Es ist jedoch wichtig, die Häufigkeit der Verwendung von Embeds auf jeder Seite im Auge zu behalten. Wenn ihr die Einbettung von Websites auf eurer Seite vermeiden möchtet, könnt ihr ein Plug-in wie "Disable Embeds" verwenden.

… und Interview mit Fachmann

Das Deaktivieren und Entfernen von Funktionen ist oft langsamer, als es aktiviert zu lassen. Einfach, weil es von Haus aus aktiv ist. Das Plug-in kann es erst danach deaktivieren, weshalb dann eine Aktion mehr stattfindet. Häufig suchen Plug-ins dann den Inhalt des Beitrags ab und ersetzen dann auch die iFrames und 'Embeds'.

Das macht ein vermeintlich schnelleres Feature wieder langsamer. Also man kann ja nur Dinge deaktivieren, die bereits aktiv sind. Das heißt, man lädt erst die aktiven Funktionen und anschließend deaktiviert man sie wieder. Also zwei Schritte. Lässt man sie nur aktiv, ist nur ein Schritt aktiv. 

CSS-Anpassungen von Embeds

Es ist zu beachten, dass die Formatierung von WordPress Embeds nicht möglich ist, da diese in einem iFrame eingebettet sind, der von einer externen Website hinzugefügt wird. Diese Einschränkung gilt auch für die Formatierung von iFrames selbst. Ein weiterführender Artikel zu diesem Thema ist folgend auf der Website Easy Web Design Tutorials.

Es ist wichtig zu beachten, dass beim Einbetten von Inhalten mittels Embeds nur das Erscheinungsbild des Rahmens und der umgebenden Elemente, nicht jedoch der Inhalt selbst, geändert werden kann. Um das Erscheinungsbild von Embeds und iFrames anzupassen, kann ein Filter wie beispielsweise brightness(85%) grayscale(10%) verwendet werden.

Wenn die Breite des Inhalts auf der Website erweitert wird, sollten auch die iFrames entsprechend angepasst werden. Um dies zu erreichen, kann Code-Snippets in der functions.php des verwendeten Themes eingefügt werden. Dieser Code sollte jedoch nur für Desktop-Bildschirme gelten, was durch den Einsatz von @media all and (min-width: 1080px) gewährleistet wird. Für den Dunkelmodus gibt es auch eine Schablone, die verwendet werden kann, falls erforderlich:

/* Embeds breiter-schmaler od. mittig */
@media all and (min-width: 1080px) {
    p > iframe,
    span > iframe {
        position: relative;
        margin-left: 15px; /*width: 504px;*/
    }
} 

/* Embeds breiter-schmaler od. mittig */
@media all and (min-width: 1080px) {
    .readermode p > iframe,
    .readermode span > iframe {
        position: relative;
        margin-left: 82px !important; /*width: 504px;*/
    }
} 

/* Embeds für darkmode */
.darkmode p > iframe,
span > iframe {
    filter: brightness(85%) grayscale(10%) !important;
}

Zur Anpassung von Höhe und Breite kann auch ein Code-Snippet in der functions.php des Themes verwendet werden. Siehe wpbeginner.com

add_filter( 'embed_defaults', 'wpbeginner_embed_defaults' );
 
function wpbeginner_embed_defaults() {
    return array(
        'width'  => 504,
        'height' => 450
    );
}

 

 


Aktualisiert im Jahr 2023-November