Ihr bewährter Begleiter.
(Bilder von pixelcreatures)
Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.
Mehr Funktionen, mehr Möglichkeiten.
= Ihr Erfolgsrezept
Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.
Der Classic-Editor für alle.
Erleben Sie es.
Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.
Der Advanced Editor für kreative Köpfe.
Advanced Editor Tools
Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.
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.
- WordPress für Einsteiger: Beiträge einbetten (perun.net)
WP-Embed:
und iframe (inline frame):
Inhaltsverzeichnis
'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.
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.
- Textabsatz + Eingabe der vollständigen URL und Enter ist dann der eingebettete Link visuell.
Beispiel:
https://wordpress.org/documentation/article/embeds/
Visuell dann:
Wenn man auf ein Embed klickt, öffnet sich die eingebettete Website im selben Browser-Tab. Mit Doppelklick oder drücken der
ctrl-Taste, anklicke des Links und infolge der entsprechenden Auswahl sind diese dann auch in neuem Tab zu öffnen.
Ein Nachteil von Einbettungen: Klickt der Besucher auf das eingebettete Element, könnte er sich so gut ablenken lassen, dass er nie zurückkehrt! 😛
Warum öffnen 'Embeds' nicht in neuem Tab?
Wie gesagt, 'Embeds' lassen sich mit einfachen Anklicke nicht in einem neuen Tab öffnen, im Gegensatz zu Hyperlinks, die sich mit _target: blank; in einem neuen Tab öffnen lassen.
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.
- Für Embeds in neuem Tab gilt die Option wie für Links mit Doppelklick und der Auswahl "Link in neuem Tab öffnen".
Besonderheit bei der Darstellung von Hauptseiten-URLs in Embeds
In vielen Fällen funktioniert das Einbetten von spezifischen Seiten oder Beiträgen mittels WordPress-Embeds problemlos. Allerdings zeigt WordPress eine Besonderheit im Umgang mit Hauptseiten-URLs wie (https://wegerl.at/). Diese werden oft nicht als normaler Embed dargestellt, sondern stattdessen als einfaches Blockquote formatiert oder gar nicht funktionieren und eine Reihe Fehler in der Konsole hervorrufen.
Der Grund für dieses Verhalten dürfte darin liegen, dass WordPress für Hauptseiten-URLs eine andere Verarbeitung vornimmt.
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:
<iframe src="https://wordpress.org/support/article/embeds/" width="474" height="auto"></iframe>
Problematik bei der Verwendung von 'iframes' statt WP-Embeds
Wenn man versucht, Seiten wie die WordPress-Dokumentation (https://wordpress.org/support/article/embeds/) per iframe einzubinden, tritt häufig die Fehlermeldung auf:
„Refused to display 'https://wordpress.org/' in a frame because it set 'X-Frame-Options' to ’sameorigin'.”
Dies liegt daran, dass viele Webseiten, darunter WordPress.org, den X-Frame-Options-Header nutzen, um zu verhindern, dass ihre Inhalte auf externen Seiten per iframe eingebettet werden. Der Header blockiert das Einbetten, um Sicherheitsrisiken wie Clickjacking zu vermeiden. Im Gegensatz dazu funktionieren normale WP-Embeds problemlos, da sie speziell für die Einbindung von Inhalten innerhalb von WordPress-Seiten entwickelt wurden.
Normalerweise 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.
Ein iFrame mit width="auto" wird hier so präsentiert:
<div style="text-align: center;"><iframe src="https://www.perun.net/2016/06/16/wordpress-fuer-einsteiger-beitraege-einbetten" width="auto" height="450"></iframe></div>Probleme bei der direkten Einbindung von 'iframes'
- Probleme bei der direkten Einbindung von 'iframes' in WordPress und deren Auswirkungen auf die Google Search Console.
Die Seite der Beanstandung:
Die SEO-Brotkrümelnavigation (Breadcrumbs) war die Ursache der Beanstandung, da sie innerhalb des iFrames nicht korrekt dargestellt wurde oder durcheinandergeriet. Eine mögliche Lösung besteht darin, des SEO-Plugins die Breadcrumbs zu deaktivieren oder die Seite auf "noindex" zu setzen.
Oder:
/* --- Seite mit iframe Breadcrumb ausschließen --- */
.postid-123 .breadcrumbs {
display: none !important;
}
.postid-123 .itemListElement, .postid-123 .ListItem {
display: none !important;
}
.postid-123 [itemtype="https://schema.org/BreadcrumbList"] {
display: none !important;
}
/* - Ende Seite mit iframe Breadcrumb ausschließen - */Analyse der CSS-Regeln
.postid-123 .breadcrumbs { display: none !important; }- Diese Regel blendet das Element mit der Klasse
.breadcrumbsauf der spezifischen Seite mit der ID 123 aus. Wenn auf dieser Seite visuelle Breadcrumbs vorhanden waren, wäre dies eine einfache Möglichkeit, sie auszublenden.
- Diese Regel blendet das Element mit der Klasse
.postid-123 .itemListElement, .postid-208911 .ListItem { display: none !important; }- Diese Regel blendet alle Elemente mit den Klassen
.itemListElementund.ListItemaus, die sich auf der spezifischen Seite befinden. Dies könnte für die strukturierte Datenausgabe wichtig sein, da diese Klassen oft für Breadcrumbs in Schema.org verwendet werden. Das Ausblenden dieser Elemente könnte dazu führen, dass Google keine doppelten Breadcrumbs erkennt.
- Diese Regel blendet alle Elemente mit den Klassen
.postid-123 [itemtype="https://schema.org/BreadcrumbList"] { display: none !important; }- Diese Regel blendet alle Elemente aus, die als BreadcrumbList markiert sind. Wenn es auf der Seite eine strukturelle Darstellung der Breadcrumbs gibt, könnte das Ausblenden dieses Elements den Google-Bots helfen, die korrekten Breadcrumbs zu erkennen und damit die Probleme zu beheben.
Wahrscheinlichste Lösung
- Die dritte Regel (
[itemtype="https://schema.org/BreadcrumbList"]) ist wahrscheinlich die entscheidende Regel, die das Problem behoben hat. Indem die strukturierte Daten-Markierung ausgeblendet werden, die den Google-Bots möglicherweise verwirrend erschien, somit ist ihnen geholfen, die korrekten Breadcrumbs zu erkennen.
Empfehlungen
- Alle drei Regeln anwenden: Es könnte sinnvoll sein, alle drei Regeln beizubehalten, um sicherzustellen, dass keine doppelten Breadcrumbs angezeigt werden und die strukturierten Daten für Google klar sind.
Überwachen der Google Search Console: Behalte die Google Search Console im Auge, um sicherzustellen, dass nach dem Anwenden dieser CSS-Regeln keine neuen Probleme mit den Breadcrumbs auftreten.
- Verschiedene andere Tests zur Einbindung des iFrames, einschließlich der Verwendung von JavaScript (bei dem die iFrames im Quelltext nicht sichtbar sind), Shortcodes und Lazy Loading, blieben erfolglos auch Plug-in Test (iframe) konnte das Problem nicht auflösen.
Warum lieben iFrames den Strand?
Weil sie immer ein bisschen ‘embedded’ sind!
Plug-ins zu iFrames
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-Embeds | vs. deaktiviert | Seite ohne Embeds |
| 63 Punkte | 75 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 Embeds | 78 Punkte |
| Embeds disable und Seite ohne Embeds | 83 Punkte |
| WP-Embeds aktiv und Seite mit Embeds | 81 Punkte |
| WP-Embeds disable und Seite mit Embeds |
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.
| Embeds | WP-Embeds aktiv | WP-Disable Embeds |
| Seite mit | 81 / 79 / 76 | |
| Seite ohne | 78 / 83 / 82 | 83 / 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
| Embeds | WP-Embeds aktiv | vs. deaktiviert |
| Seite mit | 78 / 79 | |
| Seite ohne | 82 / 86 | 80 /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.
Anpassungen von Embeds
Es ist zu beachten, dass die Formatierung von WordPress-Embeds nur begrenzt möglich ist, da diese in einem iFrame eingebettet sind, der von einer externen Website bereitgestellt wird. Diese Einschränkung gilt ebenfalls für die Formatierung des iFrames selbst. Weitere Informationen zu diesem Thema findest du in einem Artikel auf Easy Web Design Tutorials.
CSS-Anpassungen
Beim Einbetten von Inhalten über Embeds kann zwar das Erscheinungsbild des Rahmens und der umgebenden Elemente verändert werden, nicht jedoch der eingebettete Inhalt selbst. Um das Aussehen von Embeds und iFrames zu modifizieren, können CSS-Filter wie brightness(85%) oder grayscale(10%) verwendet werden. Hier ein Beispiel:
/* Night Eye: Ändert die Darstellung von eingebetteten Inhalten */
[nighteyeplgn="active"] .wp-embedded-content {
filter: brightness(85%) grayscale(10%);
}
Wenn die Breite der eingebetteten Inhalte auf der Website angepasst werden soll, sollten auch die iFrames entsprechend skaliert werden. Dies kann durch die Verwendung von Media Queries wie @media all and (min-width: 1080px) speziell für Desktop-Bildschirme erreicht werden. Für den Dunkelmodus gibt es eine Vorlage, die bei Bedarf genutzt werden kann:
/* 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;
}Embeds zentrieren
Das geht auch so einfach wie:
.wp-embedded-content {
display: block; /* Sicherstellen, dass das Element blockiert wird */
margin: 0 auto; /* Zentriert das Element */Anpassung über die functions.php
Um die Breite von Embeds zu verändern, kann auch ein Code-Snippet in der functions.php des Themes hinzugefügt werden. Weitere Informationen findest sich beispielsweise auf wpbeginner.com. Hier ein Beispiel:
add_filter( 'embed_defaults', 'wpbeginner_embed_defaults' );
function wpbeginner_embed_defaults() {
return array(
'width' => 504,
'height' => 450
);
}Die Länge des Exzerpts kann ebenfalls durch ein Code-Snippet angepasst werden:
/* Embed intern: Exzerpt */
function custom_embed_excerpt_length( $length ) {
return 25; // Die Anzahl der Wörter im Auszug
}
add_filter( 'excerpt_length', 'custom_embed_excerpt_length' );
/* Embed: Breite */
function custom_embed_defaults( $embed_size ) {
// Setze die Größe des Embeds auf benutzerdefinierte Werte
$embed_size['width'] = 400; // Beispielbreite
$embed_size['height'] = 200; // Beispielhöhe
return $embed_size;
}
add_filter( 'embed_defaults', 'custom_embed_defaults' );Anpassungen im WordPress-Core
Weitere Anpassungen lassen sich über das Verzeichnis wp-includes vornehmen. Hier ist unter css die wp-embed-template.css, wobei Anpassungen in der komprimierten Datei wp-embed-template.min.css stattfinden können. Beachte jedoch, dass diese Datei bei jedem WordPress-Update überschrieben wird.
Zum Beispiel auf der Website, die Embed: Das Exzerpt des Selektor .wp-embed{color:#74777B;} und der Weiterlesenhinweis .wp-embed .wp-embed-more{color:#1656B0}.wp-embed .wp-embed-more:hover{color:#CD5606}. Folglich wird das Styling auf allen Webseiten der Einbettung angezeigt und sollte nach jedem WP-Update erneuert werden, wobei hier das .wp-embed .wp-embed-more:hover{color:#CD5606} separat hinzugefügt wurde.
Ebenso findet sich im Verzeichnis wp-includes die wp-embed.php und unter wp-includes/js die wp-embed.js und deren komprimierte Version wp-embed.min.js. Diese Dateien steuern die Funktionalität von Embeds.
Die Anpassungen an Embeds in WordPress sind nicht so einfach, wie man es sich wünschen würde. Das liegt daran, dass WordPress versucht, die Integrität und Kompatibilität von Inhalten zu wahren, insbesondere bei externen Embeds. Das hat seine Vor- und Nachteile.
- Sicherheitsaspekte: WordPress schützt die Benutzer vor potenziell schädlichen Inhalten, die von externen Quellen eingebettet werden. Daher sind viele Anpassungen restriktiv.
- Komplexität von Plugins: Viele Plugins verwenden die Standard-Embed-Funktionen und implementieren ihre eigenen Handler. Das kann zu einem doppelten Aufwand führen.
- Änderungen am
wp-embed-template.min.css: können nach Updates überschrieben werden, und müssten immer wiederholt werden.
Wenn WordPress in Zukunft eine einfachere Möglichkeit bietet, die Website eigenen Embeds anzupassen, könnte das die Situation verbessern. Bis dahin bleibt die Option, direkt in die wp-embed-template.min.css einzugreifen, die praktikabelste Lösung, auch wenn es umständlich wirkt.
Der Beitrag wurde mit fachlicher Unterstützung erstellt.
Aktualisiert im Jahr 2024 Oktober
