So ändern Sie die Breite und Höhe von oEmbed in WordPress dynamisch

Möchten Sie, dass Ihre eingebetteten Inhalte auf Ihrer WordPress-Website perfekt aussehen, unabhängig von der Bildschirmgröße?

Standardmäßig leistet WordPress hervorragende Arbeit beim Einbetten von Videos und anderen oEmbeds in Ihre Beiträge und Seiten. Basierend auf unserer Erfahrung benötigen Sie jedoch manchmal mehr Kontrolle über deren Größe.

Die Möglichkeit, die Breite und Höhe von Einbettungen dynamisch zu ändern, ist wichtig für responsives Design und stellt sicher, dass Ihre Website auf Smartphones, Tablets und Desktops gut aussieht. Außerdem können Sie das Layout Ihrer Inhalte feinabstimmen, um ein professionelleres Aussehen zu erzielen. 

In diesem Artikel zeigen wir Ihnen, wie Sie die Breite und Höhe von oEmbed in WordPress dynamisch ändern.

Warum dynamische oEmbed-Breite und -Höhe in WordPress festlegen

WordPress macht es einfach, Inhalte von Drittanbietern mit einer Technologie namens oEmbed in Ihre Beiträge und Seiten einzubetten.

Dies ermöglicht es Ihnen, YouTube-Videos, Facebook-Posts, TikTok-Videos, Tweets und vieles mehr einfach in WordPress einzubetten. Das Beste daran ist, dass diese Inhalte nicht auf Ihrer WordPress-Website gehostet werden, was Ihre Serverressourcen schont und die WordPress-Leistung verbessert.

Standardmäßig leistet WordPress hervorragende Arbeit bei der automatischen Anpassung von Höhe und Breite der eingebetteten Inhalte, damit sie in Ihre Beiträge und Seiten passen.

Einige Benutzer möchten dieses Standardverhalten jedoch möglicherweise ändern. Sie möchten beispielsweise möglicherweise unterschiedliche Standard-Einbettungsbreiten 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 Theme-Design arbeiten.

Das gesagt, schauen wir uns an, wie man die dynamische Breite und Höhe für oEmbed-Inhalte in WordPress einfach einstellt.

Wir zeigen Ihnen zwei verschiedene Methoden. Sie können die Schnelllinks unten verwenden, um direkt zu der Methode zu springen, die Sie interessiert.

• Methode 1. Dynamische Embed-Breite und -Höhe in WordPress festlegen
• Methode 2. Dynamische oEmbed-Breite und -Höhe mit CSS festlegen

Methode 1. Dynamische Embed-Breite und -Höhe in WordPress festlegen

Diese Methode erfordert, dass Sie benutzerdefinierten Code zu Ihrer WordPress-Website hinzufügen. Wenn Sie dies noch nie getan haben, lesen Sie unseren Leitfaden, wie Sie einfach Snippets aus dem Web in WordPress einfügen.

Für diese Methode verwenden wir WordPress-Bedingungstags, um zu erkennen, welche WordPress-Seite gerade angezeigt wird, und ändern dann die Standardwerte für Breite und Höhe von oEmbed entsprechend.

Fügen Sie einfach den folgenden Code in die Datei functions.php Ihres Themes, ein standortspezifisches Plugin oder ein Code-Snippets-Plugin ein.

//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');

Wir empfehlen, diesen Code mit WPCode hinzuzufügen, dem besten WordPress-Plugin für Code-Snippets. Es ist der einfachste Weg, benutzerdefinierten Code in WordPress hinzuzufügen, ohne die functions.php-Datei Ihres Themes zu bearbeiten.

Mit dieser Methode müssen Sie sich keine Sorgen machen, dass Ihre Website beschädigt wird. Außerdem, wenn Sie Ihr WordPress-Theme ändern, können Sie alle Ihre Anpassungen beibehalten.

Um zu beginnen, müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Schritt-für-Schritt-Anleitungen finden Sie in unserem Leitfaden zur Installation eines WordPress-Plugins.

Nachdem das Plugin aktiviert ist, gehen Sie zu den Code-Snippets » + Snippet hinzufügen Seite in Ihrem WordPress-Admin-Dashboard.

Suchen Sie dann die Option „Benutzerdefinierten Code hinzufügen (neuer Ausschnitt)“ und klicken Sie auf die Schaltfläche „+ Benutzerdefinierten Ausschnitt hinzufügen“.

Wählen Sie als Nächstes „PHP-Snippet“ als Code-Typ aus den Optionen, die auf dem Bildschirm angezeigt werden.

Danach können Sie einen Namen für Ihr benutzerdefiniertes Snippet hinzufügen, der beliebig sein kann, um Ihnen zu helfen, sich daran zu erinnern, wofür der Code bestimmt ist.

Kopieren Sie dann einfach den obigen Code-Schnipsel und fügen Sie ihn in das Feld „Code-Vorschau“ ein.

Wenn das erledigt ist, wechseln Sie einfach den Schalter oben auf dem Bildschirm von 'Inaktiv' zu 'Aktiv' und klicken Sie auf die Schaltfläche 'Snippet speichern'.

Sie können alle verfügbaren WordPress bedingten Tags verwenden, um verschiedene Szenarien zu erkennen.

Hier ist ein weiteres Beispiel, bei dem wir die oEmbed-Standardbreite für eine benutzerdefinierte Landingpage ä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 können, legt dieser Code einfach eine andere Standardbreite und -höhe für eine bestimmte Seiten-ID fest.

Methode 2. Dynamische oEmbed-Breite und -Höhe mit CSS festlegen

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 finden Sie in Ihrem WordPress-Theme möglicherweise CSS-Klassen wie page-id, post-id, category, tag und viele mehr. Sie können diese CSS-Klassen mit dem Inspect-Tool herausfinden.

Ebenso fügt WordPress CSS-Klassen zu Embed-Blöcken in Ihren Beiträgen und Seiten hinzu. Auch hier verwenden Sie das Inspektionstool, um herauszufinden, welche Klassen vom Embed-Block 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 die dynamische Breite und Höhe für den Pinterest-Embed-Block 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-Customizer hinzufügen. Sobald Sie zufrieden sind, vergessen Sie nicht, Ihre Änderungen zu speichern und zu veröffentlichen.

Wir hoffen, diese beiden Methoden haben Ihnen geholfen zu lernen, wie Sie die dynamische oEmbed-Breite und -Höhe in WordPress einfach einstellen. Möglicherweise möchten Sie auch diese nützlichen WordPress-Tipps, -Tricks und -Hacks ansehen oder sich unsere Auswahl der besten Social-Media-Plugins für WordPress ansehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.