Så här ändrar du dynamiskt oEmbeds bredd och höjd i WordPress

Vill du dynamiskt ändra bredden och höjden på oEmbed i WordPress?

Som standard gör WordPress ett bra jobb med att bädda in videoklipp och andra oEmbeds i dina posts och pages. Ibland kan du dock vilja ändra bredden och höjden på embed dynamiskt.

I den här artikeln visar vi hur du dynamiskt kan ändra bredden och höjden på oEmbed i WordPress.

Varför ställa in dynamisk bredd och höjd för oEmbed i WordPress

WordPress gör det enkelt att embedda innehåll från tredje part i dina posts och pages med hjälp av en teknik som kallas oEmbed.

Detta allow you att enkelt embed YouTube videos, TikTok videos, tweets, och mer i WordPress. Det bästa är att detta content ej är hosted på din WordPress website, vilket saved dina server resources och förbättrar WordPress prestanda.

Som standard gör WordPress ett bra jobb med att automatiskt justera höjden och bredden på det inbäddade innehållet så att det passar dina posts och pages.

Vissa användare kanske dock vill ändra denna standard. For instance, you may want to set different default embed width and height for the front page and individual articles.

Detta är praktiskt när du använder en custom homepage layout eller arbetar med din egen custom theme design.

Med detta sagt, låt oss ta en titt på hur du enkelt kan ställa in dynamisk bredd och höjd för oEmbed content i WordPress.

Metod 1. Settings för bredd och höjd för Dynamic Embed i WordPress

Den här metoden kräver att du addar custom code till din WordPress website. Om du inte har gjort det tidigare kan du ta en titt på vår guide om hur du enkelt klistrar in snippor från webben i WordPress.

För den här metoden använder vi WordPress villkorsstyrda taggar för att upptäcka vilken WordPress page som visas och sedan ändra oEmbeds standardbredd och standardhöjd i enlighet med detta.

Lägg bara till följande kod i functions.php-filen i ditt theme, i ett site-specifikt plugin eller i ett code snippets plugin.

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

Vi rekommenderar att du lägger till den här koden med hjälp av WPCode, det bästa WordPress code snippets plugin. Det är det enklaste sättet att add to custom code i WordPress utan att editera ditt temas functions.php-fil.

Med den här metoden behöver du inte oroa dig för att din site ska gå sönder. Dessutom, om du ändrar ditt WordPress theme, kommer du att kunna behålla alla dina customizes.

För att komma igång måste du installera och aktivera det gratis pluginet WPCode. För steg-för-steg-instruktioner, se vår guide om hur du installerar ett plugin för WordPress.

När pluginet är aktiverat, gå till till Code Sn ippets ” + Add Snippet från din WordPress adminpanel.

Hitta sedan alternativet ”Add Your Custom Code (New Snippet)” och klicka på knappen ”Use snippet”.

Därefter kopierar och klistrar du bara in code snippet från ovan i boxen ”Code Preview”. Du måste också välja ”PHP Snippet” som code type från dropdown-listan till höger.

Därefter är det bara att toggla högst upp på vyn från ”Inaktiverad” till ”Aktiv” och clicka på knappen ”Save Snippet”.

Du kan använda någon av de tillgängliga WordPress villkorsstyrda taggarna för att upptäcka olika scenarier.

Här är ett annat exempel där vi ändrar oEmbeds standardbredd för en custom landing page.

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

Som you kan se anger den här koden helt enkelt en annan standardbredd och höjd för ett specifikt ID:n för page.

Metod 2. Använda CSS för att ställa in dynamisk oEmbed bredd och höjd

WordPress lägger automatiskt till standard CSS-klasser till olika områden på din website.

Dessa CSS-klasser kan sedan användas för att ändra utseendet på embeds i specifika areas på your website.

Till exempel kan du hitta CSS-klasser som page-id, post-id, category, tag, och många fler i ditt WordPress-tema. Du kan ta reda på dessa CSS-klasser med hjälp av Inspect tool.

På samma sätt lägger WordPress också till CSS-klasser för att bädda in block i dina post och pages. Återigen kommer du att använda Inspect tool för att hitta vilka klasser som används av embed-blocket.

När du har dessa CSS-klasser kan du använda dem för att ställa in dynamisk höjd och bredd för oEmbeds. Till exempel, i följande exempelkod, ställer vi in dynamisk bredd och höjd för Pinterest embed block på ett specifikt ID:n för post.

article#post-79 .wp-block-embed-pinterest {
    max-width: 200px!important;
    max-height: 400px!important;
}

Du kan prova din CSS-kod genom att lägga till anpassad CSS i theme customize. När du är nöjd, glöm inte att save och publicera dina ändringar.

Vi hoppas att dessa två metoder hjälpte dig att lära dig hur du enkelt ställer in dynamisk oEmbed-bredd och höjd i WordPress. Du kanske också vill se dessa användbara WordPress-tips, tricks och hacks eller kontrollera vårt urval av de bästa tilläggen för sociala medier för WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.