Möchten Sie die Breite von oEmbeds in WordPress begrenzen?
WordPress bettet automatisch Inhalte von Drittanbietern wie YouTube-Videos, Tweets oder Facebook-Posts ein. Manchmal können die Einbettungen jedoch zu breit werden und Ihre Seitenlayouts durcheinander bringen.
In diesem Artikel zeigen wir Ihnen, wie Sie die maximale Breite von oEmbed in WordPress festlegen, damit Sie mehr Kontrolle über Ihr Site-Layout haben.
Warum die maximale Breite von OEmbed in WordPress festlegen?
Mit WordPress können Sie mithilfe einer Technologie namens oEmbed automatisch Inhalte von ausgewählten Websites von Drittanbietern in Ihre Beiträge und Seiten einbetten.
Auf diese Weise können Sie ganz einfach YouTube-Videos, Facebook-Posts, Tweets und viele andere Arten von Inhalten auf Ihrer Website einbetten. Dieser Inhalt wird nicht auf Ihrer WordPress-Website gehostet. Stattdessen wird es direkt von diesen Drittanbieter-Sites angezeigt.
WordPress ist ziemlich gut darin, die Breite des eingebetteten Inhalts automatisch an den Inhalt oder die Seitenleistenbereiche Ihrer Website anzupassen.
Manchmal sind diese eingebetteten Inhalte jedoch zu breit und überlappen die Inhaltsbereiche Ihrer Website, wie im folgenden Beispiel.
Um dies zu beheben, müssen Sie WordPress explizit anweisen, eine maximale Breitenbeschränkung für Einbettungen von Drittanbietern zu verwenden. Leider gibt es dafür keine Option in den WordPress-Einstellungen.
Lassen Sie uns jedoch einen Blick darauf werfen, wie Sie die maximale Breite von oEmbed in WordPress einfach einstellen können, ohne etwas zu beschädigen.
Wir werden 4 verschiedene Methoden behandeln, und Sie können diejenige auswählen, die Ihren Anforderungen am besten entspricht:
- oEmbed-Breite mit WordPress-Shortcode festlegen
- Legen Sie die oEmbed-Breite mit dem WordPress Embed Block fest
- Legen Sie die maximale Breite von oEmbed mit CSS fest
- Legen Sie die maximale Breite von oEmbed mit dem WordPress-Filter fest (Code-Methode)
Methode 1. Verwenden Sie den Embed Shortcode in WordPress
Diese Methode ist einfacher und funktioniert sehr gut, um eine maximale Breite für Videoeinbettungen in WordPress festzulegen.
Anstatt die URL einzufügen oder den YouTube-Block zu verwenden, verwenden Sie den Shortcode-Block. Darin müssen Sie den Einbettungs-Shortcode verwenden und die Parameter Breite und Höhe angeben.
Sie können die Werte für Breite und Höhe nach Ihren Wünschen ändern und die Einbettungs-URL durch Ihre eigene Einbettungs-URL ersetzen.
Sie können jetzt eine Vorschau Ihres Beitrags oder Ihrer Seite anzeigen und die Einbettung in Aktion sehen.
Der Einbettungs-Shortcode und seine Breiten- und Höhenparameter funktionieren nicht für alle oEmbed-Anbieter. Sie können damit beispielsweise nicht die Höhe und Breite einer Giphy-Einbettung in WordPress festlegen.
In diesem Fall können Sie eine der unten genannten alternativen Methoden ausprobieren.
Methode 2. Verwenden Sie Einbettungsblöcke in WordPress
Der Standard-WordPress-Editor enthält mehrere Einbettungsblöcke für verschiedene oEmbed-Dienstanbieter. Sie können sie verwenden, um Inhalte in verschiedene Bereiche Ihrer Beiträge und Seiten einzubetten.
Bei einigen dieser Blöcke können Sie auch die Ausrichtung der Einbettung ändern und die Inhaltsbreite auf Breite oder volle Breite setzen.
Sie können versuchen, diese Optionen zu verwenden, um festzustellen, ob das Problem mit der maximalen Breite für die Einbettung behoben wird.
Methode 3. Verwenden Sie CSS, um die maximale Breite für Einbettungen in WordPress festzulegen
Standardmäßig fügt WordPress automatisch CSS-Klassen zu verschiedenen Bereichen deiner Beiträge und Seiten hinzu.
Es fügt auch mehrere CSS-Klassen hinzu, um Blöcke einzubetten. Diese CSS-Klassen können verwendet werden, um eine maximale Breite für Einbettungen auf Ihrer WordPress-Website festzulegen.
Um herauszufinden, auf welche CSS-Klassen Sie abzielen müssen, betten Sie einfach Inhalt in einen Beitrag oder eine Seite ein und zeigen Sie ihn dann in Ihrem Browser an. Klicken Sie mit der rechten Maustaste, indem Sie mit der Maus über den eingebetteten Inhalt fahren, und wählen Sie dann das Prüfwerkzeug aus.
Sie können alle CSS-Klassen sehen, die dem eingebetteten Element hinzugefügt wurden. Sie können diese Klassen verwenden, um eine maximale Breite für diesen Einbettungstyp festzulegen.
Wenn Sie beispielsweise eine maximale Breite für alle Einbettungen festlegen möchten, können Sie das folgende benutzerdefinierte CSS verwenden.
.wp-block-embed {
max-width: 900px!important;
}
Sie können auch bestimmte oEmbed-Anbieter ansprechen, indem Sie die .wp-block-embed-providername Klasse. Wenn Sie beispielsweise eine maximale Breite nur für Pinterest-Einbettungen festlegen möchten, können Sie das folgende benutzerdefinierte CSS verwenden.
.wp-block-embed-pinterest {
max-width: 900px!important;
}
Methode 4. Legen Sie die maximale Breite von oEmbed mit dem WordPress-Filter fest
Bei dieser letzten Methode müssen Sie Ihrer WordPress-Website benutzerdefinierten Code hinzufügen. Wenn Sie dies noch nicht getan haben, werfen Sie einen Blick auf unsere Anleitung zum einfachen Hinzufügen benutzerdefinierter Code-Snippets in WordPress.
Für diese Methode fügen wir unseren eigenen Code zu WordPress hinzu, um die Standardbreite für oEmbeds festzulegen. Fügen Sie einfach den folgenden Code zur Datei functions.php Ihres Themes hinzu oder Code Ausschnitte Plugin.
add_filter( 'embed_defaults', 'wpbeginner_embed_defaults' );
function wpbeginner_embed_defaults() {
return array(
'width' => 400,
'height' => 280
);
}
Vergessen Sie nicht, die Höhen- und Breitenattribute an Ihre eigenen Anforderungen anzupassen.
Das Problem bei dieser Methode besteht darin, dass das width-Attribut nur angewendet wird, wenn für den eingebetteten Inhalt kein „width“ definiert ist. Wenn der Einbettungscode bereits Breite enthält, funktioniert diese Methode möglicherweise nicht.
Bonus-Tipp
Wenn Sie regelmäßig Inhalte von Social-Media-Plattformen in Ihre WordPress-Website einbetten, sollten Sie mit der Verwendung beginnen Ballon zerschmettern.
Es ist das beste Social-Media-Plugin für WordPress und ermöglicht das einfache Einbetten benutzerdefinierter Social-Media-Feeds in WordPress.
Es unterstützt beliebte Social-Media-Einbettungen wie YouTube, Twitter und mehr. Es ermöglicht Ihnen auch das Einbetten von Facebook- und Instagram-Inhalten, die von WordPress nicht unterstützt werden.
Noch wichtiger ist, dass alle Social-Media-Feeds mobil reagieren und mit jedem WordPress-Theme funktionieren.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie eine maximale oEmbed-Breite in WordPress festlegen. Vielleicht möchten Sie auch unseren vollständigen Social-Media-Spickzettel oder unseren Expertenvergleich der besten Live-Chat-Software für kleine Unternehmen sehen.
