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, ganz einfach YouTube-Videos, Facebook-Posts, TikTok-Videos, Tweets und vieles mehr 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

Diese Methode erfordert, dass Sie benutzerdefinierten Code zu Ihrer WordPress-Website hinzufügen. Wenn Sie dies noch nie getan haben, lesen Sie unsere Anleitung, wie Sie ganz einfach Code-Schnipsel aus dem Web in WordPress einfügen können.

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 functions.php-Datei 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 Plugin für WordPress-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, Ihre Website zu beschädigen. Außerdem können Sie alle Ihre Anpassungen beibehalten, wenn Sie Ihr WordPress-Theme wechseln.

Um zu beginnen, müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Schritt-für-Schritt-Anleitungen finden Sie in unserer Anleitung 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-Bedingungstags verwenden, um verschiedene Szenarien zu erkennen.

Hier ist ein weiteres Beispiel, bei dem wir die Standardbreite von oEmbed 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 CSS-Klassen wie page-id, post-id, category, tag und viele mehr. Sie können diese CSS-Klassen mit dem Inspect-Tool finden.

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öhen und Breiten für oEmbeds festzulegen. Im folgenden Beispielcode legen wir beispielsweise die dynamische Breite und Höhe für den Pinterest-Embed-Block auf 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, dass Ihnen diese beiden Methoden geholfen haben, zu lernen, wie Sie dynamische oEmbed-Breiten und -Höhen in WordPress einfach einstellen können. Möglicherweise möchten Sie auch diese nützlichen WordPress-Tipps, Tricks und Hacks ansehen oder unsere Auswahl der besten Social-Media-Plugins für WordPress prüfen.

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.