Möchten Sie die oEmbed-Breite und -Höhe in WordPress dynamisch ändern?
Standardmäßig leistet WordPress hervorragende Arbeit beim Einbetten von Videos und anderen oEmbeds in Ihre Beiträge und Seiten. Manchmal möchten Sie jedoch möglicherweise die Einbettungsbreite und -höhe dynamisch ändern.
In diesem Artikel zeigen wir Ihnen, wie Sie die oEmbed-Breite und -Höhe in WordPress dynamisch ändern.
Warum die dynamische OEbed-Breite und -Höhe in WordPress festlegen?
WordPress macht es mit einer Technologie namens oEmbed einfach, Inhalte von Drittanbietern in Ihre Beiträge und Seiten einzubetten.
Auf diese Weise können Sie YouTube-Videos, Tweets, TikToks und mehr problemlos einbetten. Das Beste daran ist, dass dieser Inhalt nicht auf Ihrer WordPress-Website gehostet wird, was Ihre Serverressourcen spart und die WordPress-Leistung verbessert.
Standardmäßig passt WordPress die Höhe und Breite des eingebetteten Inhalts automatisch an Ihre Beiträge und Seiten an.
Einige Benutzer möchten dieses Standardverhalten jedoch möglicherweise ändern. Beispielsweise möchten Sie möglicherweise unterschiedliche Standardeinbettungsbreiten und -höhen für die Titelseite und einzelne Artikel festlegen.
Dies ist praktisch, wenn Sie ein benutzerdefiniertes Homepage-Layout verwenden oder an Ihrem eigenen benutzerdefinierten Design-Design arbeiten.
Lassen Sie uns jedoch einen Blick darauf werfen, wie Sie die dynamische Breite und Höhe für oEmbed-Inhalte in WordPress einfach festlegen können.
Methode 1. Dynamische Einbettungsbreite und -höhe in WordPress festlegen
Bei dieser 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 verwenden wir WordPress-Bedingungs-Tags, um zu erkennen, welche WordPress-Seite angezeigt wird, und ändern dann die Standardeinstellungen für oEmbed-Breite und -Höhe entsprechend.
Fügen Sie einfach den folgenden Code zur Datei functions.php Ihres Themes oder einem Site-spezifischen Plugin hinzu.
//Custom oEmbed Size
function wpb_oembed_defaults($embed_size) {
if(is_front_page()) {
$embed_size['width'] = 940;
$embed_size['height'] = 600;
}
else {
$embed_size['width'] = 600;
$embed_size['height'] = 338;
}
return $embed_size;
}
add_filter('embed_defaults', 'wpb_oembed_defaults');
Sie können jede der verfügbaren verwenden Bedingte WordPress-Tags verschiedene Szenarien zu erkennen.
Hier ist ein weiteres Beispiel, in dem wir die oEmbed-Standardbreite für eine benutzerdefinierte Zielseite ändern.
function wpb_oembed_defaults($embed_size) {
if( is_page( 42 ) ) {
$embed_size['width'] = 940;
$embed_size['height'] = 600;
}
else {
$embed_size['width'] = 600;
$embed_size['height'] = 338;
}
return $embed_size;
}
add_filter('embed_defaults', 'wpb_oembed_defaults');
Wie Sie sehen, legt dieser Code einfach eine andere Standardbreite und -höhe für eine bestimmte Seiten-ID fest.
Methode 2. Verwenden von CSS zum Festlegen der dynamischen oEmbed-Breite und -Höhe
WordPress fügt automatisch Standard-CSS-Klassen zu verschiedenen Bereichen Ihrer Website hinzu.
Diese CSS-Klassen können dann verwendet werden, um das Erscheinungsbild von Einbettungen in bestimmten Bereichen Ihrer Website zu ändern.
Zum Beispiel können Sie CSS-Klassen wie Seiten-ID, Post-ID, Kategorie, Tag und viele mehr in Ihrem WordPress-Theme finden. Sie können diese CSS-Klassen mit dem Inspect-Tool herausfinden.
Ebenso fügt WordPress CSS-Klassen hinzu, um Blöcke in Ihre Beiträge und Seiten einzubetten. Auch hier verwenden Sie das Inspect-Tool, um herauszufinden, welche Klassen vom Einbettungsblock verwendet werden.
Sobald Sie diese CSS-Klassen haben, können Sie sie verwenden, um dynamische Höhe und Breite für oEmbeds festzulegen. Im folgenden Beispielcode legen wir beispielsweise dynamische Breite und Höhe für den Pinterest-Einbettungsblock für eine bestimmte Beitrags-ID fest.
article#post-79 .wp-block-embed-pinterest {
max-width: 200px!important;
max-height: 400px!important;
}
Sie können Ihren CSS-Code ausprobieren, indem Sie benutzerdefiniertes CSS im Theme-Anpasser hinzufügen. Wenn Sie zufrieden sind, vergessen Sie nicht, Ihre Änderungen zu speichern und zu veröffentlichen.
Wir hoffen, dass diese beiden Methoden Ihnen geholfen haben, die dynamische oEmbed-Breite und -Höhe in WordPress einfach einzustellen. Vielleicht möchten Sie auch diese nützlichen WordPress-Tipps, -Tricks und -Hacks sehen oder unsere Auswahl der besten Social-Media-Plugins für WordPress ansehen.
