Hur man dynamiskt ändrar oEmbed-bredd och höjd i WordPress

Vill du att ditt inbäddade innehåll ska se perfekt ut på din WordPress-webbplats, oavsett skärmstorlek?

Som standard gör WordPress ett utmärkt jobb med att bädda in videor och andra oEmbeds i dina inlägg och sidor. Baserat på vår erfarenhet behöver du dock ibland mer kontroll över deras storlek.

Att dynamiskt kunna ändra inbäddningarnas bredd och höjd är viktigt för responsiv design, vilket säkerställer att din webbplats ser bra ut på telefoner, surfplattor och stationära datorer. Det låter dig också finjustera layouten på ditt innehåll för ett mer polerat utseende. 

I den här artikeln visar vi hur du dynamiskt ändrar oEmbed-bredd och höjd i WordPress.

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

WordPress gör det enkelt att bädda in innehåll från tredje part i dina inlägg och sidor med hjälp av en teknik som kallas oEmbed.

Detta gör att du enkelt kan bädda in YouTube-videor, Facebook-inlägg, TikTok-videor, tweets och mycket mer i WordPress. Det bästa är att detta innehåll inte är värd på din WordPress-webbplats, vilket sparar dina serverresurser och förbättrar WordPress-prestandan.

Som standard gör WordPress ett utmärkt jobb med att automatiskt justera höjden och bredden på det inbäddade innehållet så att det passar dina inlägg och sidor.

Vissa användare kanske dock vill ändra detta standardbeteende. Du kanske till exempel vill ställa in olika standardbredd och -höjd för inbäddningar för startsidan och enskilda artiklar.

Detta är användbart när du använder en anpassad startsidelayout eller arbetar med din egen anpassade tema design.

Med det sagt, låt oss titta på hur man enkelt ställer in dynamisk bredd och höjd för oEmbed-innehåll i WordPress.

Vi visar dig två olika metoder, du kan använda snabblänkarna nedan för att hoppa direkt till den metod du är intresserad av.

• Metod 1. Ställa in dynamisk inbäddningsbredd och höjd i WordPress
• Metod 2. Använda CSS för att ställa in dynamisk oEmbed-bredd och -höjd

Metod 1. Ställa in dynamisk inbäddningsbredd och höjd i WordPress

Den här metoden kräver att du lägger till anpassad kod på din WordPress-webbplats. Om du inte har gjort det tidigare, ta en titt på vår guide om hur du enkelt klistrar in kodavsnitt från webben i WordPress.

För den här metoden kommer vi att använda WordPress villkorliga taggar för att upptäcka vilken WordPress-sida som visas och sedan ändra standardvärdena för oEmbed-bredd och höjd därefter.

Lägg helt enkelt till följande kod i din temas functions.php-fil, ett webbplatsspecifikt plugin eller ett plugin för kodavsnitt.

//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 pluginet för kodavsnitt för WordPress. Det är det enklaste sättet att lägga till anpassad kod i WordPress utan att redigera din temas functions.php-fil.

Med den här metoden behöver du inte oroa dig för att bryta din webbplats. Dessutom, om du byter WordPress-tema, kommer du att kunna behålla alla dina anpassningar.

För att komma igång måste du installera och aktivera den kostnadsfria WPCode-pluginen. För steg-för-steg-instruktioner, se vår guide om hur man installerar en WordPress-plugin.

När pluginet är aktiverat, gå till sidan Kodavsnitt » + Lägg till avsnitt från din WordPress-administratörspanel.

Hitta sedan alternativet ‘Lägg till din anpassade kod (nytt kodavsnitt)’ och klicka på knappen ‘+ Lägg till anpassat kodavsnitt’.

Välj sedan 'PHP-avsnitt' som kodtyp från alternativen som visas på skärmen.

Därefter kan du lägga till ett namn för ditt anpassade kodavsnitt, vilket kan vara vad som helst för att hjälpa dig att komma ihåg vad koden är till för.

Kopiera sedan helt enkelt kodavsnittet ovan och klistra in det i rutan 'Kodförhandsgranskning'.

När det är gjort, byt helt enkelt växeln högst upp på skärmen från 'Inaktiv' till 'Aktiv' och klicka på knappen 'Spara avsnitt'.

Du kan använda alla tillgängliga WordPress villkorliga taggar för att upptäcka olika scenarier.

Här är ett annat exempel där vi ändrar oEmbeds standardbredd för en anpassad landningssida.

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 du kan se ställer den här koden helt enkelt in en annan standardbredd och höjd för en specifik sid-ID.

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 delar av din webbplats.

Dessa CSS-klasser kan sedan användas för att ändra utseendet på inbäddningar i specifika områden på din webbplats.

Du kan till exempel 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 Inspektera-verktyget.

På samma sätt lägger WordPress också till CSS-klasser till inbäddningsblock i dina inlägg och sidor. Återigen, du kommer att använda Inspektera-verktyget för att hitta vilka klasser som används av inbäddningsblocket.

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-inbäddningsblocket på ett specifikt inläggs-ID.

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 temats anpassningsverktyg. När du är nöjd, glöm inte att spara och publicera dina ändringar.

Vi hoppas att dessa två metoder hjälpte dig att enkelt ställa in dynamisk oEmbed-bredd och höjd i WordPress. Du kanske också vill se dessa användbara WordPress-tips, -knep och -hacks eller kolla in vårt urval av de bästa plugins för sociala medier för WordPress.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.