En vägg av text utan bilder är ett säkert sätt att tappa läsare inom de första fem sekunderna. Den utvalda bilden fungerar som inläggets omslag: det är vad folk ser i inläggsflödet, widgetar och förhandsvisningar i sociala medier. Den säljer klicket innan någon ens har läst rubriken.

Problemet är att WordPress inte tvingar författare att sätta en miniatyrbild. Ett inlägg sticker ut med ett stort foto, ett annat krymper till en liten ruta, ett tredje har ingen bild alls. Startsidan förvandlas till visuellt kaos, och Facebook och Telegram hämtar en slumpmässig logotyp istället för en meningsfull förhandsvisning.

Här följer en komplett genomgång av mekaniken för utvalda bilder: från att lägga till din första miniatyrbild till obligatoriska kontroller före publicering. Med fungerande kod, ett specifikt plugin och steg-för-steg-instruktioner.

💡 Snabb översikt:

• Lägga till en utvald bild via redigerarens sidopanel
• Förstå storlekar: vad WordPress gör under huven och hur du konfigurerar om det
• Installera Simple Image Sizes och justera dimensioner för ditt tema
• Automatisera miniatyrbildsuppsättning med kod i functions.php
• Hantera glömska författare: utan bild går inlägget till utkast

Hur utvalda bilder fungerar

Utvald bild (eller inläggsminiatyr) är ett metafält som temat använder för visning på tre viktiga ställen:

• Startsida och arkiv. En förhandsvisning med bild får exponentiellt fler klick än en ren textlänk.
• Själva inläggets sidhuvud. Temat visar miniatyrbilden ovanför eller strax under titeln, ofta över hela innehållets bredd.
• Sociala nätverk. Facebook, X och Telegram hämtar den utvalda bilden via Open Graph. Utan bild ersätter nätverket med vad det än hittar.

Funktionen har länge varit en WordPress-standard. Idag är det omöjligt att hitta ett anständigt tema utan stöd för den. Men implementeringskvaliteten varierar fortfarande från utvecklare till utvecklare: ett tema visar miniatyrbilden som en prydlig banner, ett annat sträcker en liten ruta till full bredd.

Lägga till en utvald bild: grundläggande mekanik

I inläggsredigeraren (Gutenberg eller Classic) finns en panel för "Utvald bild" till höger. Klicka på "Välj utvald bild", ladda upp en fil eller välj från mediebiblioteket, klicka på "Välj". Klart.

Nyans: WordPress kräver inte att författaren anger en bild. Glömdes den, går publiceringen till flödet med en tom plats. Vi tar upp lösningen på detta problem i avsnittet om obligatoriska kontroller.

Bildstorlekar: vad WordPress gör under huven

Varje WordPress-installation levereras med fyra storlekar från start:

• Full, originalfilen oförändrad
• Miniatyrbild, en kvadrat (som standard 150×150 px enligt WordPress medieinställningar), beskuren från mitten
• Mellan, skalad till en given maxbredd, ingen beskärning
• Stor, samma sak men med en högre gräns

Inställningarna finns under "Inställningar → Media". När en ny WordPress-bild laddas upp genererar WordPress alla fyra versioner plus ytterligare storlekar som registrerats av det aktiva temat. Varje version hamnar i wp-content/uploads/ som en separat fil.

Varför så många kopior? Utan dem skulle en designer behöva justera varje storlek manuellt för en specifik visningsplats. Med dem begär temat helt enkelt den nödvändiga varianten via the_post_thumbnail('medium') eller wp_get_attachment_image_src(). Mer om mediesubsystemets arkitektur i den officiella WordPress-dokumentationen.

Miniatyrbild är den enda storleken som beskärs med tvång. Resten skalas med bibehållna proportioner.

Ändra storleken på den utvalda bilden

Teman använder olika dimensioner. Vid temabyte eller för en ny uppgift kan storleken på den utvalda bilden behöva justeras.

Kontrollera först temainställningarna: "Utseende → Anpassa". Moderna teman erbjuder ofta ett reglage eller en rullgardinsmeny för miniatyrbildens bredd och höjd. Hittade du det, ändra med två klick.

Hittade du det inte, inga problem. Pluginet Simple Image Sizes löser uppgiften utan en enda rad kod.

Simple Image Sizes: rätt verktyg för dimensioner

Gratisplugin av Nicolas Juen, aktivt underhållet (nuvarande version 3.2.5, kräver PHP 8.0+). Efter installation, gå till "Inställningar → Media" och se alla registrerade storlekar, inklusive de som temat lade till men dolde.

För varje storlek, ange bredd och höjd. För utvald bild, orientera dig efter hur temat visar den. Fullbredds innehållsbanner, använd 1200×630 px (optimalt för sociala nätverk enligt Facebooks Open Graph-rekommendationer). Kvadratisk miniatyrbild i ett rutnät, 400×400 eller 600×600 px.

Fördelar:

• Ser alla storlekar, inklusive de som döljs av temat
• Möjliggör aktivering och inaktivering av storleksvisning i mediets infogningsmeny
• Genererar färdig add_image_size() PHP-kod för överföring till temat

Nackdelar:

• Kräver PHP 8.0+, fungerar inte på ärligt talat gamla webbhotell
• Minimalistiskt gränssnitt, inga visuella ledtrådar

Pris: gratis, ingen Pro-version.

🔗 Simple Image Sizes på WordPress.org

Vad du ska göra med gamla bilder

WordPress tillämpar nya storlekar endast på nyuppladdade bilder. Allt du laddat upp tidigare ligger kvar i de gamla dimensionerna.

Simple Image Sizes täcker även denna uppgift. På sidan "Inställningar → Media" bläddrar du ner till regenereringsblocket. Välj önskad storlek, ange inläggstyp och starta ombyggnaden. Pluginet går igenom alla befintliga bilder och skapar nya kopior med de uppdaterade storlekarna.

Varning: på webbplatser med tiotusentals filer äter regenerering upp serverutrymme. WordPress raderar inte gamla miniatyrbilder, de ligger kvar i mappen som dödvikt. Se till att du har ledigt diskutrymme innan du kör en massregenerering.

Automatisk inställning av utvald bild

När ett inlägg innehåller bilder men den utvalda bilden är tom kan WordPress ta den första bilden från innehållet och tilldela den som miniatyrbild. Praktiskt för författare som regelbundet glömmer detta steg, och för bloggar med strömmande publicering.

Mekaniken är enkel: om den utvalda bilden inte sätts manuellt hittar funktionen den första bifogade bilden via get_children och sätter den med set_post_thumbnail().

Koden läggs till i det aktiva temats functions.php. Jag rekommenderar starkt att göra detta via pluginet WPCode, ett stavfel i functions.php utan det kraschar sajten helt:

1
function autoset_featured() {
2
    global $post;
3
    $already_has_thumb = has_post_thumbnail( $post->ID );
4
    if ( ! $already_has_thumb ) {
5
        $attached_image = get_children( array(
6
            'post_parent'    => $post->ID,
7
            'post_type'      => 'attachment',
8
            'post_mime_type' => 'image',
9
            'numberposts'    => 1,
10
        ) );
11
        if ( $attached_image ) {
12
            foreach ( $attached_image as $attachment_id => $attachment ) {
13
                set_post_thumbnail( $post->ID, $attachment_id );
14
            }
15
        }
16
    }
17
}
18
 
19
add_action( 'the_post', 'autoset_featured' );
20
add_action( 'save_post', 'autoset_featured' );
21
add_action( 'draft_to_publish', 'autoset_featured' );
22
add_action( 'new_to_publish', 'autoset_featured' );
23
add_action( 'pending_to_publish', 'autoset_featured' );
24
add_action( 'future_to_publish', 'autoset_featured' );

Funktionen triggas på sex hooks: the_post, save_post och alla statusövergångar av typen *_to_publish. Efter tilldelningen ligger miniatyrbilden kvar även om du tar bort bilden från inläggets brödtext.

Nackdel: om författaren inte infogade en enda bild i texten blir det ingen miniatyrbild. För det scenariot, se nästa avsnitt.

Obligatorisk kontroll: ingen miniatyrbild, ingen publicering

Enkel och strikt metod: författaren klickar på "Publicera", och WordPress sparar inlägget som ett utkast och visar en varning. Utan en utvald bild går publiceringen inte igenom.

Två kodsnuttar i functions.php:

Del 1, kontroll vid sparande (endast för inläggstypen post):

1
add_action( 'save_post', 'pu_validate_thumbnail' );
2
 
3
function pu_validate_thumbnail( $post_id ) {
4
    if ( get_post_type( $post_id ) != 'post' ) {
5
        return;
6
    }
7
 
8
    if ( ! has_post_thumbnail( $post_id ) ) {
9
        set_transient( 'pu_validate_thumbnail_failed', 'true' );
10
        remove_action( 'save_post', 'pu_validate_thumbnail' );
11
        wp_update_post( array( 'ID' => $post_id, 'post_status' => 'draft' ) );
12
        add_action( 'save_post', 'pu_validate_thumbnail' );
13
    } else {
14
        delete_transient( 'pu_validate_thumbnail_failed' );
15
    }
16
}

Del 2, felmeddelande i admin:

1
add_action( 'admin_notices', 'pu_validate_thumbnail_error' );
2
 
3
function pu_validate_thumbnail_error() {
4
    if ( get_transient( 'pu_validate_thumbnail_failed' ) == 'true' ) {
5
        echo '<div class="notice notice-error"><p><strong>You must set a featured image before publishing.</strong></p></div>';
6
        delete_transient( 'pu_validate_thumbnail_failed' );
7
    }
8
}

Meddelandetexten är fullt anpassningsbar, ersätt strängen inuti <p><strong>...</strong></p> med din egen.

Förhandsvisning av miniatyrbild i inläggslistan

Standardtabellen "Inlägg → Alla inlägg" visar titel, författare, kategorier, etiketter och datum. Utvald bild finns inte med. För att kontrollera vilka inlägg som saknar miniatyrbild måste du öppna varje enskilt inlägg. Med 50+ publikationer är detta irriterande.

Koden nedan lägger till en Thumbs-kolumn i tabellen för inlägg och sidor:

1
add_filter( 'manage_posts_columns', 'posts_columns', 5 );
2
add_action( 'manage_posts_custom_column', 'posts_custom_columns', 5, 2 );
3
 
4
add_filter( 'manage_post-type_posts_columns', 'posts_columns', 5 );
5
add_action( 'manage_post-type_posts_custom_column', 'posts_custom_columns', 5, 2 );
6
 
7
function posts_columns( $defaults ) {
8
    $defaults['riv_post_thumbs'] = __( 'Thumbs' );
9
    return $defaults;
10
}
11
 
12
function posts_custom_columns( $column_name, $id ) {
13
    if ( $column_name === 'riv_post_thumbs' ) {
14
        if ( has_post_thumbnail() ) {
15
            echo the_post_thumbnail( array( 100, 100 ) );
16
        } else {
17
            _e( 'No Thumbnail For Post' );
18
        }
19
        echo '<style>.column-riv_post_thumbs img{max-height:100px;max-width:100px;}</style>';
20
    }
21
}

Förhandsvisningsstorleken är satt till 100×100 px, tillräckligt för snabb visuell kontroll. Behöver du större, ersätt array(100, 100) med array(200, 200). Mer om parametrar i dokumentationen för the_post_thumbnail.

För sidor, lägg till dessa två rader i början av kodsnutten:

1
add_filter( 'manage_pages_columns', 'posts_columns', 5 );
2
add_action( 'manage_pages_custom_column', 'posts_custom_columns', 5, 2 );

Nu kan du även i avsnittet "Sidor → Alla sidor" se var det finns en miniatyrbild och var det inte gör det.

Gör tumnagelbilden klickbar

Ett bra tema slår automatiskt in den utvalda bilden i en länk till inlägget. Ett dåligt tema matar ut en statisk bild som inte leder någonstans. Besökaren klickar på förhandsvisningen på startsidan, och ingenting händer.

Åtgärdas med ett filter i functions.php:

1
function wcs_auto_link_post_thumbnails( $html, $post_id, $post_image_id ) {
2
    $html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
3
    return $html;
4
}
5
add_filter( 'post_thumbnail_html', 'wcs_auto_link_post_thumbnails', 10, 3 );

Filtret post_thumbnail_html fångar upp tumnagelbildens HTML-utdata och slår in den i en länk med get_permalink(). Inläggets titel hamnar i title-attributet via esc_attr(), säkert och informativt.

Ändra texten "Välj utvald bild"

När webbplatsen har automatisk hämtning av tumnaglar från innehåll vilseleder standardetiketten "Välj utvald bild" skribenterna. Det verkar som att bilden måste sättas manuellt, trots att systemet gör det självt.

Ändra texten till något informativt:

1
function change_featured_image_text( $content ) {
2
    return $content = str_replace(
3
        __( 'Set featured image' ),
4
        __( 'Thumbnail will be set automatically from the first image in the post' ),
5
        $content
6
    );
7
}
8
add_filter( 'admin_post_thumbnail_html', 'change_featured_image_text' );

Filtret admin_post_thumbnail_html hanterar HTML-blocket för utvald bild i redigerarens sidopanel. Byt ut valfri text inuti __( ... ) i det andra str_replace-argumentet.

Video: så fungerar allt i praktiken

Om du föredrar en visuell demonstration, här är en komplett genomgång från WPBeginner: från att lägga till din första tumnagel till att finjustera storlekar och automatisering.

⁉️🤔 Vanliga frågor

Varför visas inte den utvalda bilden på webbplatsen?

Troligtvis har temat inte stöd för funktionen post-thumbnails. Kontrollera functions.php: där ska finnas en rad add_theme_support( 'post-thumbnails' ). Om den inte finns där, lägg till den. Andra orsaken: i temainställningarna är visning av utvald bild inaktiverad för en specifik inläggstyp. Tredje: ett caching-plugin håller en gammal version av sidan, rensa cachen.

Vad är skillnaden mellan utvald bild och omslagsbild?

Utvald bild är ett metafält för inlägg som temat använder för förhandsvisningar i flöden, arkiv och Open Graph. Omslagsbild är ett block inuti innehållet (kom med Gutenberg) som bara visas i inläggets brödtext och inte påverkar sociala nätverk. Du kan använda båda samtidigt: omslagsbild för visuell ingång till artikeln, utvald bild för allt annat.

Vilken storlek ska jag använda för utvalda bilder?

För sociala nätverk är det optimala formatet 1200×630 px (1,91:1-förhållande) enligt Facebooks utvecklardokumentation. För inläggsrutnätet på startsidan, utgå från vad som är inställt i temainställningarna. Om temat använder kvadratiska tumnaglar, 600×600 eller 800×800 px. Komprimera bilden till 100-150 KB via TinyPNG eller ShortPixel innan du laddar upp den.

Är det obligatoriskt att sätta en utvald bild för varje inlägg?

Tekniskt sett nej. Men utan den ser startsidan och sociala nätverk röriga ut, och klickfrekvensen sjunker med 2-3 gånger. Om du är rädd för att glömma, använd koden för obligatorisk kontroll från avsnittet ovan eller pluginet Quick Featured Images, som ersätter med en standardtumnagel för inlägg utan bild.

Hur tar jag bort eller ersätter en utvald bild?

I inläggsredigeraren, klicka på den aktuella utvalda bilden i sidopanelen. Mediabiblioteket öppnas, klicka på "Ta bort utvald bild". Därefter blir knappen åter "Välj utvald bild". Ladda upp en ny.

Kan jag använda en bild som utvald bild för flera inlägg?

Ja, WordPress har inga begränsningar för det. Välj samma fil från mediabiblioteket för olika inlägg. Men om bilden upprepas i flödet ser det ut som en bugg eller förbiseende. För visuell variation är det bättre att välja unika tumnaglar.

Vad du ska göra med utvalda bilder just nu

Utvald bild är inte ett "valfritt" element, utan en obligatorisk del av varje inlägg. Utan den ersätter sociala nätverk med slumpmässigt innehåll, startsidan förlorar visuell struktur och klickfrekvensen sjunker exponentiellt.

Gå igenom checklistan på tio minuter:

• Öppna ett inlägg och kontrollera att den utvalda bilden är satt.
• Kontrollera hur den ser ut på startsidan och i sociala nätverk (Facebook Sharing Debugger till hjälp).
• Om storlekarna inte motsvarar förväntningarna, installera Simple Image Sizes och justera dimensionerna.
• Om du arbetar med ett team av skribenter, lägg till koden för obligatorisk kontroll så att publicering utan tumnagel går till utkast.

Dessa tio minuter sparar timmar av manuell redigering och dussintals förlorade läsare. Gör det nu.