En vegg av tekst uten bilder er en sikker måte å miste lesere på i løpet av de første fem sekundene. Utvalgt bilde fungerer som innleggets forside: det er det folk ser i innleggsstrømmen, widgeter og forhåndsvisninger i sosiale medier. Det selger klikket før noen har lest overskriften.

Problemet er at WordPress ikke tvinger forfattere til å sette et miniatyrbilde. Ett innlegg skiller seg ut med et stort foto, et annet krymper til en liten firkant, et tredje har ikke noe bilde i det hele tatt. Forsiden blir til visuelt kaos, og Facebook og Telegram henter en tilfeldig logo i stedet for en meningsfull forhåndsvisning.

Nedenfor følger en komplett gjennomgang av mekanikken for utvalgte bilder: fra å legge til ditt første miniatyrbilde til obligatoriske sjekker før publisering. Med fungerende kode, en spesifikk plugin og trinnvise instruksjoner.

💡 Rask oversikt:

• Legge til et utvalgt bilde via redigeringspanelet
• Forstå størrelser: hva WordPress gjør under panseret og hvordan du konfigurerer det på nytt
• Installere Simple Image Sizes og justere dimensjoner for ditt tema
• Automatisere miniatyroppsett med kode i functions.php
• Håndtere glemsomme forfattere: uten bilde går innlegget til kladd

Slik fungerer utvalgte bilder

Utvalgt bilde (eller innleggsminiatyr) er et metafelt som temaet bruker for visning tre sentrale steder:

• Forside og arkiver. En forhåndsvisning med et bilde får eksponentielt flere klikk enn en ren tekstlenke.
• Selve innleggstoppen. Temaet viser miniatyrbildet over eller rett under tittelen, ofte i full innholdsbredde.
• Sosiale nettverk. Facebook, X og Telegram henter det utvalgte bildet via Open Graph. Uten bilde erstatter nettverket med det det måtte finne.

Funksjonen har lenge vært en WordPress-standard. I dag er det umulig å finne et anstendig tema uten støtte for den. Men implementeringskvaliteten varierer fortsatt fra utvikler til utvikler: ett tema viser miniatyrbildet som en ryddig banner, et annet strekker en liten firkant til full bredde.

Legge til et utvalgt bilde: grunnleggende mekanikk

I innleggsredigereren (Gutenberg eller Classic) er det et «Utvalgt bilde»-panel til høyre. Klikk «Velg utvalgt bilde», last opp en fil eller velg fra mediebiblioteket, klikk «Velg». Ferdig.

Nyanse: WordPress krever ikke at forfatteren setter et bilde. Glemmer man det, går publikasjonen til strømmen med en tom plass. Vi dekker løsningen på dette problemet i avsnittet om obligatoriske sjekker.

Bildestørrelser: hva WordPress gjør under panseret

Hver WordPress-installasjon kommer med fire størrelser ut av boksen:

• Full, den opprinnelige filen uendret
• Miniatyrbilde, en firkant (som standard 150×150 piksler i henhold til WordPress medieinnstillinger), beskåret fra midten
• Medium, skalert til en gitt maksimal bredde, ingen beskjæring
• Stor, det samme, men med en høyere grense

Innstillingene finnes under «Innstillinger → Media». Når du laster opp et nytt WordPress-bilde, genererer WordPress alle fire versjonene pluss ytterligere størrelser registrert av det aktive temaet. Hver versjon havner i wp-content/uploads/ som en separat fil.

Hvorfor så mange kopier? Uten dem måtte en designer manuelt justere hver størrelse for et spesifikt visningssted. Med dem ber temaet ganske enkelt om den nødvendige varianten gjennom the_post_thumbnail('medium') eller wp_get_attachment_image_src(). Mer om mediesubsystemets arkitektur i den offisielle WordPress-dokumentasjonen.

Miniatyrbilde er den eneste størrelsen som blir tvangsbeskåret. Resten skaleres mens proporsjonene bevares.

Endre størrelsen på det utvalgte bildet

Temaer bruker forskjellige dimensjoner. Ved temabytte eller for en ny oppgave kan størrelsen på det utvalgte bildet kreve justering.

Sjekk først temainnstillingene: «Utseende → Tilpass». Moderne temaer tilbyr ofte en glidebryter eller nedtrekksmeny for miniatyrbredde og -høyde. Fant du det, endrer du det i to klikk.

Fant du det ikke, ikke noe problem. Pluginen Simple Image Sizes løser oppgaven uten en eneste linje kode.

Simple Image Sizes: riktig verktøy for dimensjoner

Gratis plugin av Nicolas Juen, aktivt vedlikeholdt (nåværende versjon 3.2.5, krever PHP 8.0+). Etter installasjon, gå til «Innstillinger → Media» og se alle registrerte størrelser, inkludert de temaet la til, men skjulte for visning.

For hver størrelse, sett bredde og høyde. For utvalgt bilde, orienter deg etter hvordan temaet viser det. Fullbredde innholdsbanner, bruk 1200×630 piksler (optimalt for sosiale nettverk i henhold til Facebooks Open Graph-anbefalinger). Firkantet miniatyrbilde i et rutenett, 400×400 eller 600×600 piksler.

Fordeler:

• Ser alle størrelser, inkludert de som er skjult av temaet
• Tillater aktivering og deaktivering av størrelsesvisning i nedtrekksmenyen for mediainnsetting
• Genererer ferdig add_image_size() PHP-kode for overføring til temaet

Ulemper:

• Krever PHP 8.0+, kjører ikke på ærlig talt gamle hosts
• Minimalistisk grensesnitt, ingen visuelle hint

Pris: gratis, ingen Pro-versjon.

🔗 Simple Image Sizes på WordPress.org

Hva du gjør med gamle bilder

WordPress bruker nye størrelser bare på nye opplastinger. Alt du lastet opp tidligere forblir i de gamle dimensjonene.

Simple Image Sizes dekker også denne oppgaven. På siden «Innstillinger → Media» blar du ned til regenereringsblokken. Velg ønsket størrelse, angi innholdstype og start gjenoppbyggingen. Utvidelsen går gjennom alle eksisterende bilder og lager nye kopier med de oppdaterte størrelsene.

Advarsel: på nettsteder med titusenvis av filer spiser regenerering serverplass. WordPress sletter ikke gamle miniatyrbilder, de blir liggende i mappen som dødvekt. Før masseregenerering bør du forsikre deg om at du har ledig diskplass.

Automatisk oppsett av utvalgt bilde

Når et innlegg inneholder bilder, men det utvalgte bildet er tomt, kan WordPress ta det første bildet fra innholdet og tilordne det som miniatyrbilde. Praktisk for forfattere som jevnlig glemmer dette steget, og for blogger med strømmepublisering.

Mekanikken er enkel: hvis det utvalgte bildet ikke er satt manuelt, finner funksjonen det første vedlagte bildet via get_children og setter det via set_post_thumbnail().

Kode legges til i det aktive temaets functions.php. Jeg anbefaler på det sterkeste å gjøre dette via WPCode-utvidelsen, en skrivefeil i functions.php uten denne knekker nettstedet fullstendig:

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

Funksjonen utløses på seks kroker: the_post, save_post og alle *_to_publish-statusoverganger. Etter tilordning forblir miniatyrbildet selv om du fjerner bildet fra innleggsteksten.

Ulempe: hvis forfatteren ikke satte inn et eneste bilde i teksten, blir det ikke noe miniatyrbilde. For dette scenarioet, se neste avsnitt.

Obligatorisk sjekk: intet miniatyrbilde, ingen publisering

Enkel og streng metode: forfatteren klikker «Publiser», og WordPress lagrer innlegget som et utkast og viser en advarsel. Uten et utvalgt bilde går ikke publiseringen gjennom.

To kodebiter i functions.php:

Del 1, sjekk ved lagring (kun for post-typen):

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, feilmelding 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
}

Meldingsteksten er fullt tilpassbar, bytt ut strengen inni <p><strong>...</strong></p> med din egen.

Forhåndsvisning av miniatyrbilde i innleggslisten

Standardtabellen «Innlegg → Alle innlegg» viser tittel, forfatter, kategorier, stikkord og dato. Utvalgt bilde er ikke der. For å sjekke hvilke innlegg som mangler et miniatyrbilde, må du åpne hvert enkelt. Med 50+ publiseringer er dette irriterende.

Koden nedenfor legger til en Thumbs-kolonne i tabellen for innlegg og sider:

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
}

Forhåndsvisningsstørrelsen er satt til 100×100 piksler, tilstrekkelig for rask visuell kontroll. Trenger du større, bytt ut array(100, 100) med array(200, 200). Mer om parametere i the_post_thumbnail-dokumentasjonen.

For sider legger du til disse to linjene i begynnelsen av kodebiten:

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

Nå kan du i «Sider → Alle sider»-delen også se hvor det finnes et miniatyrbilde og hvor det ikke gjør det.

Gjør miniatyrbildet klikkbart

Et godt tema pakker automatisk utvalgt bilde inn i en lenke til innlegget. Et dårlig tema viser et statisk bilde som ikke fører noe sted. Den besøkende klikker på forhåndsvisningen på forsiden, og ingenting skjer.

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

Filteret post_thumbnail_html fanger opp HTML-en for miniatyrbildet og pakker det inn i en lenke med get_permalink(). Innleggstittelen legges i title-attributtet via esc_attr(), trygt og informativt.

Endre teksten «Sett utvalgt bilde»

Når nettstedet har automatisk oppsett av miniatyrbilder fra innhold, villeder standardetiketten «Sett utvalgt bilde» forfatterne. Det ser ut som om bildet må settes manuelt, selv om systemet gjør det selv.

Endre teksten til noe 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' );

Filteret admin_post_thumbnail_html håndterer HTML-blokken for utvalgt bilde i redigeringspanelet. Bytt ut teksten inni __( ... ) i det andre str_replace-argumentet.

Video: slik fungerer det i praksis

Hvis du foretrekker en visuell demonstrasjon, her er en komplett gjennomgang fra WPBeginner: fra å legge til ditt første miniatyrbilde til å finjustere størrelser og automatisering.

⁉️🤔 Ofte stilte spørsmål

Hvorfor vises ikke det utvalgte bildet på nettstedet?

Mest sannsynlig støtter ikke temaet funksjonen post-thumbnails. Sjekk functions.php: det skal være en linje add_theme_support( 'post-thumbnails' ). Hvis den ikke er der, legg den til. Andre årsak: i temainnstillingene er visning av utvalgt bilde deaktivert for en bestemt innholdstype. Tredje: en hurtigbuffer-plugin holder en gammel versjon av siden, tøm hurtigbufferen.

Hva er forskjellen på utvalgt bilde og forsidebilde?

Utvalgt bilde er et metafelt for innlegget som temaet bruker til forhåndsvisninger i feeds, arkiver og Open Graph. Forsidebilde er en blokk inne i innholdet (dukket opp i Gutenberg) som kun vises i selve innlegget og ikke påvirker sosiale nettverk. Du kan bruke begge samtidig: forsidebilde for visuell inngang til artikkelen, utvalgt bilde til alt annet.

Hvilken størrelse bør jeg bruke for utvalgte bilder?

For sosiale nettverk er det optimale formatet 1200×630 px (forhold 1,91:1) ifølge Facebooks utviklerdokumentasjon. For innleggsoversikten på forsiden, orienter deg etter det som er satt i temainnstillingene. Hvis temaet bruker kvadratiske miniatyrbilder, 600×600 eller 800×800 px. Før opplasting, komprimer bildet til 100-150 KB via TinyPNG eller ShortPixel.

Er det obligatorisk å sette et utvalgt bilde for hvert innlegg?

Teknisk sett nei. Men uten det ser forsiden og sosiale nettverk rotete ut, og klikkbarheten synker med 2-3 ganger. Hvis du er redd for å glemme det, bruk koden for obligatorisk sjekk fra avsnittet over eller plugin-en Quick Featured Images, som setter inn et standard miniatyrbilde for innlegg uten bilde.

Hvordan fjerner eller erstatter jeg et utvalgt bilde?

I innleggsredigering, klikk på det gjeldende utvalgte bildet i sidepanelet. Mediebiblioteket åpnes, klikk «Fjern utvalgt bilde». Etter det blir knappen igjen til «Sett utvalgt bilde». Last opp et nytt.

Kan jeg bruke ett bilde som utvalgt bilde for flere innlegg?

Ja, WordPress har ingen begrensninger. Velg samme fil fra mediebiblioteket for ulike innlegg. Men hvis bildet gjentas i feeden, ser det ut som en feil eller forglemmelse. For visuell variasjon er det bedre å velge unike miniatyrbilder.

Hva du bør gjøre med utvalgte bilder akkurat nå

Utvalgt bilde er ikke et «valgfritt» element, men en obligatorisk del av hvert innlegg. Uten det henter sosiale nettverk tilfeldig innhold, forsiden mister visuell struktur, og klikkbarheten synker eksponentielt.

Gå gjennom sjekklisten på ti minutter:

• Åpne et hvilket som helst innlegg og forsikre deg om at utvalgt bilde er satt.
• Sjekk hvordan det ser ut på forsiden og i sosiale nettverk (Facebook Sharing Debugger er til hjelp).
• Hvis størrelsene ikke stemmer med forventningene, installer Simple Image Sizes og juster dimensjonene.
• Hvis du jobber med et forfatterteam, legg til koden for obligatorisk sjekk slik at publisering uten miniatyrbilde havner i utkast.

Disse ti minuttene vil spare deg for timer med manuell redigering og dusinvis av tapte lesere. Gjør det nå.