ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Search
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
Lektüre: So legen Sie die maximale Breite von oEmbed in WordPress fest (4 einfache Methoden)
Aktie
Benachrichtigung Zeig mehr
Neuesten Nachrichten
Verwenden Sie Haptic Touch, um schnelle Aktionen auf dem iPhone auszuführen (2023)
Wie man
iOS 16.4 Beta: So aktivieren Sie die Sprachisolation für Mobiltelefonanrufe
Wie man
Bewertung: OWC ThunderBay 8 bietet hochvolumigen, leistungsstarken Mac-Speicher
Technische Bewertungen
So erstellen Sie ein GIF in Photoshop
Wie man
Vollformat vs. APS-C: Welchen Kamerasensor sollten Sie wählen?
Gegen
Aa
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Aa
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
Search
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Folge uns
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren > Blog > WordPress > Themes > So legen Sie die maximale Breite von oEmbed in WordPress fest (4 einfache Methoden)
Themes

So legen Sie die maximale Breite von oEmbed in WordPress fest (4 einfache Methoden)

Zuletzt aktualisiert: November 19, 2021 12:17 am
ThemeLocal vor 1 Jahr 7 Minuten Mindestlesezeit
Aktie
7 Minuten Mindestlesezeit
Aktie

Möchten Sie die Breite von oEmbeds in WordPress begrenzen?

Contents
Warum die maximale Breite von OEmbed in WordPress festlegen?Methode 1. Verwenden Sie den Embed Shortcode in WordPressMethode 2. Verwenden Sie Einbettungsblöcke in WordPressMethode 3. Verwenden Sie CSS, um die maximale Breite für Einbettungen in WordPress festzulegenMethode 4. Legen Sie die maximale Breite von oEmbed mit dem WordPress-Filter festBonus-Tipp

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.

Eine WordPress-Einbettung, die die Inhaltsbreite überläuft

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:

  1. oEmbed-Breite mit WordPress-Shortcode festlegen
  2. Legen Sie die oEmbed-Breite mit dem WordPress Embed Block fest
  3. Legen Sie die maximale Breite von oEmbed mit CSS fest
  4. 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.

Shortcode-Breite einbetten

Sie können jetzt eine Vorschau Ihres Beitrags oder Ihrer Seite anzeigen und die Einbettung in Aktion sehen.

oEinbettungsbreite angepasst

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.

Einbetten von Blöcken in WordPress

Bei einigen dieser Blöcke können Sie auch die Ausrichtung der Einbettung ändern und die Inhaltsbreite auf Breite oder volle Breite setzen.

Blockbreite und Ausrichtung

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.

CSS-Klassen für Einbettungsblöcke finden

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.

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.

Verwandter Beitrag

Verwenden Sie Haptic Touch, um schnelle Aktionen auf dem iPhone auszuführen (2023)

iOS 16.4 Beta: So aktivieren Sie die Sprachisolation für Mobiltelefonanrufe

So erstellen Sie ein GIF in Photoshop

Vollformat vs. APS-C: Welchen Kamerasensor sollten Sie wählen?

SharePlay: So trainieren Sie mit Freunden mit Apple Fitness Plus

MARKIERTE: Breite, die, einfache, fest, legen, maximale, Methoden, oEmbed, Sie, von, WordPress
ThemeLocal November 19, 2021
Teile diesen Artikel
Facebook Twitter Pinterest Whatsapp Whatsapp
Aktie
Was denkst du?
Liebe0
Traurig0
Glücklich0
Schläfrig0
Wütend0
kein Kommentar0
Zwinkern0
Vorheriger Artikel So verwalten Sie die Registrierung eines Großhandelskontos
Nächster Artikel So erstellen Sie ein schwebendes Navigationsmenü in WordPress
Hinterlasse einen Kommentar

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Berühmter Post

Thrustmaster TX Leather Edition im Test
Technische Bewertungen
So ändern Sie den Standardbrowser in Windows 11
Wie man
Sony A80L vs. Sony A80K: Wie unterscheiden sie sich?
Gegen
Das iPhone 14 Plus ist mit diesem Deal jetzt günstiger als das iPhone 14
Angebote
Strg+Alt+Entf: Laptops sollten mehr Wert auf Personalisierung legen
Technische Bewertungen
So verwenden Sie die Emoji-Suche auf dem iPhone und iPad
Wie man

También podría gustarte

Wie man

Verwenden Sie Haptic Touch, um schnelle Aktionen auf dem iPhone auszuführen (2023)

vor 23 Minuten 4 Minuten Mindestlesezeit
Wie man

iOS 16.4 Beta: So aktivieren Sie die Sprachisolation für Mobiltelefonanrufe

vor 5 Stunden 3 Minuten Mindestlesezeit
Wie man

So erstellen Sie ein GIF in Photoshop

vor 8 Stunden 3 Minuten Mindestlesezeit
Gegen

Vollformat vs. APS-C: Welchen Kamerasensor sollten Sie wählen?

vor 8 Stunden 3 Minuten Mindestlesezeit
Wie man

SharePlay: So trainieren Sie mit Freunden mit Apple Fitness Plus

vor 9 Stunden 3 Minuten Mindestlesezeit
Angebote

Mit diesem SIM-Karten-Schnäppchen erhalten Sie 60 GB Daten für nur 10 £

vor 13 Stunden 2 Minuten Mindestlesezeit
Wie man

Fokusmodus funktioniert nicht? Probieren Sie diese 8 Tipps zur Fehlerbehebung aus

vor 14 Stunden 8 Minuten Mindestlesezeit
Wie man

So löschen Sie Bücher von der Kindle-App oder dem Kindle-Gerät

vor 23 Stunden 8 Minuten Mindestlesezeit
Zeig mehr
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Folge uns

© 2022 Themelocal. Alle Rechte vorbehalten.

  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt

Removed from reading list

Rückgängig machen
Welcome Back!

Sign in to your account

Passwort vergessen?