ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
  • Bloggen

    7 Möglichkeiten, die Größe von PDF-Dateien zu reduzieren

    Warum die meisten Blogging-Ratschläge fehlschlagen (und wie man sie behebt)

    7 wesentliche Fragen, die sich jeder Blogger stellen muss

    So schreiben Sie Inhalte, die Ihre Leser dazu bringen, mehr zu wollen

    Was tun, wenn Ihr Blog gehackt wird

    So schreiben Sie schneller: 10 einfache Tipps, um Ihre Schreibleistung zu verdoppeln

    Wie man Trends produktiv überwacht und berichtenswerte Inhalte schreibt

    So planen Sie Inhalte wie Walter Bishop

    So schreiben Sie den ultimativen Blog-Beitrag: Der Spickzettel eines Bloggers

  • WordPress
    • All
    • Plugins
    • Themes

    Die 11 besten Amazon-Affiliate-WordPress-Themes 2022

    Die 5 besten NFT-WordPress-Themes 2022

    So fügen Sie Zusammenarbeit im WordPress-Blockeditor hinzu (Google-Doc-Stil)

    So akzeptieren Sie Google Pay in WordPress (der einfache Weg)

    Die 9 besten WordPress-Themes zur Lead-Generierung 2022

    So passen Sie die Ergebnisseite der WooCommerce-Produktsuche an

    So erstellen Sie ein zusammenklappbares Seitenleistenmenü in WordPress (der einfache Weg)

    So fügen Sie „Jetzt kaufen, später bezahlen“-Zahlungspläne zu WordPress hinzu

    So akzeptieren Sie Apple Pay in WordPress (der EINFACHE Weg)

  • E-Mail Marketing

    So verwenden Sie Gast-Blogging, um Ihre E-Mail-Liste zu erstellen

    Die E-Mail-Marketing-Kennzahlen, auf denen jede Kampagne basieren sollte

    So verwenden Sie ein Kontaktformular, um Ihre E-Mail-Liste zu erstellen

  • SEO

    So beheben Sie Fehler vom Typ 404 von benutzerdefinierten Beiträgen in WordPress

    Erhöhen Sie den Traffic auf Ihrer WordPress-Site in 6 einfachen Schritten

    Wie man automatisch externe Links in WordPress Nofollow macht

    Wie man in Suchmaschinen einen höheren Rang erreicht

    So entfernen Sie defekte Links für immer von Ihrer WordPress-Site

    SEO-Anfängerleitfaden: Intro, Prep & Jargon

    WordPress Keyword-Recherche und -Nutzung für SEO

    Verbessern Sie SEO mit Backlinks, Seitengeschwindigkeit und mehr

    Die 10 wichtigsten Funktionen von Yoast SEO für WordPress

  • Soziale Netzwerke

    So fügen Sie einem Instagram-Post eine Erinnerung hinzu

    So planen Sie kostenlos Pinterest-Pins

    Wie man auf Instagram viral wird: Der Leitfaden für Anfänger

    5 großartige Möglichkeiten, Ihre Social-Media-Updates zu diversifizieren, um mehr Traffic und Engagement zu generieren

    Können Sie Instagram verwenden, um Ihr Geschäft auszubauen?

    6 effektive Möglichkeiten, sich in sozialen Medien zu vermarkten

    6 intelligente Instagram-Marketing-Tipps, um Ihr Geschäft anzukurbeln

    So konvertieren Sie Ihr persönliches Instagram-Profil in ein Unternehmensprofil

    Shorby Review: Steigern Sie den Traffic von Social Media mit Landing Pages + mehr

  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
No Result
View All Result
  • Bloggen

    7 Möglichkeiten, die Größe von PDF-Dateien zu reduzieren

    Warum die meisten Blogging-Ratschläge fehlschlagen (und wie man sie behebt)

    7 wesentliche Fragen, die sich jeder Blogger stellen muss

    So schreiben Sie Inhalte, die Ihre Leser dazu bringen, mehr zu wollen

    Was tun, wenn Ihr Blog gehackt wird

    So schreiben Sie schneller: 10 einfache Tipps, um Ihre Schreibleistung zu verdoppeln

    Wie man Trends produktiv überwacht und berichtenswerte Inhalte schreibt

    So planen Sie Inhalte wie Walter Bishop

    So schreiben Sie den ultimativen Blog-Beitrag: Der Spickzettel eines Bloggers

  • WordPress
    • All
    • Plugins
    • Themes

    Die 11 besten Amazon-Affiliate-WordPress-Themes 2022

    Die 5 besten NFT-WordPress-Themes 2022

    So fügen Sie Zusammenarbeit im WordPress-Blockeditor hinzu (Google-Doc-Stil)

    So akzeptieren Sie Google Pay in WordPress (der einfache Weg)

    Die 9 besten WordPress-Themes zur Lead-Generierung 2022

    So passen Sie die Ergebnisseite der WooCommerce-Produktsuche an

    So erstellen Sie ein zusammenklappbares Seitenleistenmenü in WordPress (der einfache Weg)

    So fügen Sie „Jetzt kaufen, später bezahlen“-Zahlungspläne zu WordPress hinzu

    So akzeptieren Sie Apple Pay in WordPress (der EINFACHE Weg)

  • E-Mail Marketing

    So verwenden Sie Gast-Blogging, um Ihre E-Mail-Liste zu erstellen

    Die E-Mail-Marketing-Kennzahlen, auf denen jede Kampagne basieren sollte

    So verwenden Sie ein Kontaktformular, um Ihre E-Mail-Liste zu erstellen

  • SEO

    So beheben Sie Fehler vom Typ 404 von benutzerdefinierten Beiträgen in WordPress

    Erhöhen Sie den Traffic auf Ihrer WordPress-Site in 6 einfachen Schritten

    Wie man automatisch externe Links in WordPress Nofollow macht

    Wie man in Suchmaschinen einen höheren Rang erreicht

    So entfernen Sie defekte Links für immer von Ihrer WordPress-Site

    SEO-Anfängerleitfaden: Intro, Prep & Jargon

    WordPress Keyword-Recherche und -Nutzung für SEO

    Verbessern Sie SEO mit Backlinks, Seitengeschwindigkeit und mehr

    Die 10 wichtigsten Funktionen von Yoast SEO für WordPress

  • Soziale Netzwerke

    So fügen Sie einem Instagram-Post eine Erinnerung hinzu

    So planen Sie kostenlos Pinterest-Pins

    Wie man auf Instagram viral wird: Der Leitfaden für Anfänger

    5 großartige Möglichkeiten, Ihre Social-Media-Updates zu diversifizieren, um mehr Traffic und Engagement zu generieren

    Können Sie Instagram verwenden, um Ihr Geschäft auszubauen?

    6 effektive Möglichkeiten, sich in sozialen Medien zu vermarkten

    6 intelligente Instagram-Marketing-Tipps, um Ihr Geschäft anzukurbeln

    So konvertieren Sie Ihr persönliches Instagram-Profil in ein Unternehmensprofil

    Shorby Review: Steigern Sie den Traffic von Social Media mit Landing Pages + mehr

  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
No Result
View All Result
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
No Result
View All Result
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
Home WordPress Themes

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

7 Monaten ago
in Themes
Reading Time: 6 mins read
A A
0
Auf Facebook teilenAuf Twitter teilen

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.

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.

Share26Tweet16Send
Previous Post

So verwalten Sie die Registrierung eines Großhandelskontos

Next Post

So erstellen Sie ein schwebendes Navigationsmenü in WordPress

Related Posts

Technik

Die Themelocal Awards kehren 2022 als physisches Event zurück

11 Stunden ago
Wie man

So installieren Sie Schriftarten in Photoshop

15 Stunden ago
Sicherheit

So fügen Sie CAPTCHA-Schutz zu WordPress hinzu

1 Tag ago
Load More
Next Post

So erstellen Sie ein schwebendes Navigationsmenü in WordPress

Schreibe einen Kommentar Antworten abbrechen

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

EMPFOHLEN

So gewinnen Sie jedes Mal Apple Watch-Wettbewerbe

4 Monaten ago

So machen Sie in Apple Notes rückgängig

5 Monaten ago

16GB vs. 32GB MacBook Pro: Wie viel ist genug?

6 Monaten ago

Sprachlautstärke von Apple Maps ändern oder ausschalten (2022)

4 Monaten ago
ThemeLocal – Blog-Tipps, die wie von Zauberhand funktionieren

Wir helfen klugen Unternehmern, ihre Blogs in profitable Geschäfte zu verwandeln. Wir sind ein preisgekrönter Blog, der seit 2020 Bloggern und Unternehmern hilft.

Folge uns

Neueste Nachrichten

Netflix bestätigt werbefinanzierte Stufe – hier sind unsere großen Fragen

Juni 25, 2022

LG Gram 2022: Alle neuesten Laptops enthüllt und erklärt

Juni 25, 2022
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt

© 2022 ThemeLocal. Tous droits réservés.

No Result
View All Result
  • Bloggen
  • WordPress
    • Plugins
    • Themes
  • Shopify
  • E-Mail Marketing
  • Monetarisierung
  • SEO
  • Soziale Netzwerke
  • Tutorials
  • Bewertungen
  • Tipps
  • Sicherheit
  • Software und Dienste
  • Verkehrserzeugung
  • Anfängerleitfaden
  • Showcase

© 2022 ThemeLocal. Tous droits réservés.