Seinämä tekstiä ilman kuvia on varma tapa menettää lukijat ensimmäisten viiden sekunnin aikana. Artikkelikuva toimii julkaisun kantena: se näkyy artikkelilistauksessa, vimpaimissa ja some-esikatseluissa. Se myy klikkauksen ennen kuin kukaan on lukenut otsikkoa.

Ongelma on, että WordPress ei pakota kirjoittajia asettamaan pienoiskuvaa. Yksi artikkeli erottuu valtavalla valokuvalla, toinen kutistuu pieneen neliöön, kolmannessa ei ole kuvaa lainkaan. Etusivusta tulee visuaalinen kaaos, ja Facebook ja Telegram nappaavat satunnaisen logon järkevän esikatselun sijaan.

Alla on täydellinen erittely artikkelikuvan mekaniikasta: ensimmäisen pienoiskuvan lisäämisestä pakollisiin tarkistuksiin ennen julkaisua. Mukana toimivaa koodia, tietty lisäosa ja vaiheittaiset ohjeet.

💡 Pikaopas:

• Artikkelikuvan lisääminen editorin sivupalkin kautta
• Kuvakokojen ymmärtäminen: mitä WordPress tekee taustalla ja miten se määritetään uudelleen
• Simple Image Sizes -lisäosan asentaminen ja mittojen säätäminen teemallesi
• Pienoiskuvan asetuksen automatisointi koodilla functions.php-tiedostossa
• Unohtelevien kirjoittajien hallinta: ilman kuvaa artikkeli siirtyy luonnokseksi

Miten artikkelikuvat toimivat

Artikkelikuva (tai julkaisun pienoiskuva) on metakenttä, jota teema käyttää tulosteena kolmessa keskeisessä paikassa:

• Etusivu ja arkistot. Esikatselu, jossa on kuva, saa eksponentiaalisesti enemmän klikkauksia kuin pelkkä tekstilinkki.
• Itse artikkelin ylätunniste. Teema näyttää pienoiskuvan otsikon yläpuolella tai juuri sen alapuolella, usein koko sisältöalueen levyisenä.
• Sosiaaliset verkostot. Facebook, X ja Telegram hakevat artikkelikuvan Open Graphin kautta. Jos kuvaa ei ole, verkosto korvaa sen millä tahansa löytämällään.

Toiminto on ollut WordPress-standardi jo pitkään. Nykyään on mahdotonta löytää kunnollista teemaa ilman tukea sille. Mutta toteutuksen laatu vaihtelee yhä kehittäjittäin: yksi teema tulostaa pienoiskuvan siistinä bannerina, toinen venyttää pienen neliön koko leveydelle.

Artikkelikuvan lisääminen: perusmekaniikka

Artikkelieditorissa (Gutenberg tai Classic) on oikealla "Artikkelikuva"-paneeli. Klikkaa "Aseta artikkelikuva", lataa tiedosto tai valitse mediakirjastosta, klikkaa "Aseta". Valmis.

Nyanssi: WordPress ei vaadi kirjoittajaa asettamaan kuvaa. Jos sen unohtaa, julkaisu menee syötteeseen tyhjällä paikalla. Käsittelemme ratkaisun tähän ongelmaan pakollisia tarkistuksia käsittelevässä osiossa.

Kuvakoot: mitä WordPress tekee taustalla

Jokaisessa WordPress-asennuksessa on vakiona neljä kokoa:

• Täysi, alkuperäinen tiedosto muuttumattomana
• Pienoiskuva, neliö (oletuksena 150×150 px WordPressin media-asetusten mukaan), rajattu keskeltä
• Keskikoko, skaalattu annettuun maksimileveyteen, ei rajausta
• Suuri, sama mutta korkeammalla rajalla

Asetukset löytyvät kohdasta "Asetukset → Media". Kun lataat uuden WordPress-kuvan, WordPress luo kaikki neljä versiota sekä aktiivisen teeman rekisteröimät lisäkoot. Jokainen versio päätyy wp-content/uploads/-kansioon erillisenä tiedostona.

Miksi näin monta kopiota? Ilman niitä suunnittelijan pitäisi säätää jokainen koko manuaalisesti tiettyä tulostuspaikkaa varten. Niiden avulla teema yksinkertaisesti pyytää tarvittavan variantin funktioilla the_post_thumbnail('medium') tai wp_get_attachment_image_src(). Lisää media-alijärjestelmän arkkitehtuurista virallisessa WordPress-dokumentaatiossa.

Pienoiskuva on ainoa koko, joka rajataan pakotetusti. Muut skaalautuvat mittasuhteet säilyttäen.

Artikkelikuvan koon muuttaminen

Teemat käyttävät eri mittoja. Teemaa vaihdettaessa tai uutta tehtävää varten artikkelikuvan kokoa voi olla tarpeen säätää.

Tarkista ensin teeman asetukset: "Ulkoasu → Mukauta". Nykyaikaiset teemat tarjoavat usein liukusäätimen tai pudotusvalikon pienoiskuvan leveydelle ja korkeudelle. Jos löydät sen, muuta se kahdella klikkauksella.

Jos et löytänyt, ei hätää. Simple Image Sizes -lisäosa ratkaisee tehtävän ilman yhtäkään koodiriviä.

Simple Image Sizes: oikea työkalu mittoihin

Ilmainen lisäosa Nicolas Juenilta, aktiivisesti ylläpidetty (nykyinen versio 3.2.5, vaatii PHP 8.0+). Asennuksen jälkeen mene kohtaan "Asetukset → Media" ja näet kaikki rekisteröidyt koot, mukaan lukien ne, jotka teema lisäsi mutta piilotti näkyvistä.

Aseta kullekin koolle leveys ja korkeus. Artikkelikuvalle ota suuntaa siitä, miten teema tulostaa sen. Koko sisältöalueen levyinen banneri, käytä 1200×630 px (optimaalinen sosiaalisille verkostoille Facebookin Open Graph -suositusten mukaan). Neliönmuotoinen pienoiskuva ruudukossa, 400×400 tai 600×600 px.

Hyvät puolet:

• Näkee kaikki koot, myös teeman piilottamat
• Mahdollistaa koon näyttämisen käyttöönoton ja poistamisen median lisäyspudotusvalikossa
• Luo valmiin add_image_size() PHP-koodin siirrettäväksi teemaan

Huonot puolet:

• Vaatii PHP 8.0+, ei toimi suoraan sanottuna vanhoilla palvelimilla
• Pelkistetty käyttöliittymä, ei visuaalisia vihjeitä

Hinta: ilmainen, ei Pro-versiota.

🔗 Simple Image Sizes WordPress.orgissa

Mitä tehdä vanhoille kuville

WordPress soveltaa uusia kokoja vain uusiin latauksiin. Kaikki aiemmin lataamasi pysyvät vanhoissa mitoissa.

Simple Image Sizes hoitaa tämänkin tehtävän. Mene "Asetukset → Media" -sivulle ja vieritä alas regenerointilohkoon. Valitse tarvittava koko, määritä sisältötyyppi ja käynnistä uudelleenrakennus. Lisäosa käy läpi kaikki olemassa olevat kuvat ja luo uudet kopiot päivitetyillä mitoilla.

Varoitus: sivuilla, joilla on kymmeniä tuhansia tiedostoja, regenerointi syö palvelintilaa. WordPress ei poista vanhoja pikkukuvia, vaan ne jäävät kansioon kuolleena painona. Varmista ennen massaregenerointia, että levyllä on tilaa.

Automaattinen artikkelikuvan asetus

Kun artikkelissa on kuvia, mutta artikkelikuva on tyhjä, WordPress voi ottaa sisällön ensimmäisen kuvan ja asettaa sen pikkukuvaksi. Kätevää kirjoittajille, jotka säännöllisesti unohtavat tämän vaiheen, ja blogeille, joissa julkaistaan virtana.

Mekaniikka on yksinkertainen: jos artikkelikuvaa ei ole asetettu manuaalisesti, funktio etsii ensimmäisen liitetyn kuvan get_children-funktiolla ja asettaa sen set_post_thumbnail()-funktiolla.

Koodi lisätään aktiivisen teeman functions.php-tiedostoon. Suosittelen vahvasti tekemään tämän WPCode-lisäosan kautta, sillä kirjoitusvirhe functions.php-tiedostossa ilman sitä kaataa koko sivuston:

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

Funktio käynnistyy kuudesta koukusta: the_post, save_post ja kaikki *_to_publish-tilasiirtymät. Asetuksen jälkeen pikkukuva säilyy, vaikka poistaisit kuvan artikkelin rungosta.

Haittapuoli: jos kirjoittaja ei lisännyt yhtään kuvaa tekstiin, pikkukuvaa ei tule. Tätä skenaariota varten katso seuraava osio.

Pakollinen tarkistus: ei pikkukuvaa, ei julkaisua

Yksinkertainen ja tiukka menetelmä: kirjoittaja klikkaa "Julkaise", ja WordPress tallentaa artikkelin luonnoksena ja näyttää varoituksen. Ilman artikkelikuvaa julkaisu ei mene läpi.

Kaksi koodinpätkää functions.php-tiedostossa:

Osa 1, tarkistus tallennuksen yhteydessä (vain post-tyypille):

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
}

Osa 2, virheilmoitus hallintapuolella:

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
}

Viestin teksti on täysin muokattavissa, korvaa merkkijono <p><strong>...</strong></p>-elementin sisällä omallasi.

Pikkukuvan esikatselu artikkelilistauksessa

Tavallinen "Artikkelit → Kaikki artikkelit" -taulukko näyttää otsikon, kirjoittajan, kategoriat, avainsanat ja päivämäärän. Artikkelikuvaa siinä ei ole. Tarkistaaksesi, mistä artikkeleista pikkukuva puuttuu, joudut avaamaan jokaisen erikseen. Yli 50 julkaisun kohdalla tämä on ärsyttävää.

Alla oleva koodi lisää Thumbs-sarakkeen artikkeleiden ja sivujen taulukkoon:

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
}

Esikatselun kooksi on asetettu 100×100 px, mikä riittää nopeaan visuaaliseen tarkistukseen. Jos tarvitset suuremman, korvaa array(100, 100) arvolla array(200, 200). Lisätietoja parametreista the_post_thumbnail-dokumentaatiossa.

Sivuja varten lisää nämä kaksi riviä koodinpätkän alkuun:

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

Nyt "Sivut → Kaikki sivut" -osiossa näet myös, missä on pikkukuva ja missä ei.

Tee pienoiskuvasta klikattava

Hyvä teema käärii automaattisesti artikkelikuvan linkkiin, joka vie artikkeliin. Huono teema tulostaa staattisen kuvan, joka ei johda minnekään. Vierailija klikkaa esikatselukuvaa etusivulla, eikä mitään tapahdu.

Korjataan yhdellä filtterillä functions.php-tiedostossa:

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

post_thumbnail_html-filtteri nappaa pienoiskuvan HTML-tulosteen ja käärii sen linkkiin get_permalink()-funktiolla. Artikkelin otsikko menee title-attribuuttiin esc_attr()-funktion kautta, turvallisesti ja informatiivisesti.

"Aseta artikkeli­kuva" -tekstin vaihtaminen

Kun sivustolla on automaattinen pienoiskuvien asetus sisällöstä, vakio "Aseta artikkelikuva" -teksti johtaa kirjoittajia harhaan. Näyttää siltä, että kuva pitää asettaa käsin, vaikka järjestelmä tekee sen itse.

Vaihda teksti johonkin informatiivisempaan:

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

admin_post_thumbnail_html-filtteri käsittelee artikkelikuvan HTML-lohkon editorin sivupalkissa. Korvaa mikä tahansa teksti __( ... )-kutsun sisällä toisessa str_replace-argumentissa.

Video: miten kaikki toimii käytännössä

Jos pidät visuaalisesta esityksestä, tässä on WPBeginnerin kattava läpikäynti: ensimmäisen pienoiskuvan lisäämisestä kokojen ja automaation hienosäätöön.

⁉️🤔 Usein kysytyt kysymykset

Miksi artikkelikuva ei näy sivustolla?

Todennäköisimmin teema ei tue post-thumbnails-toimintoa. Tarkista functions.php: siellä pitäisi olla rivi add_theme_support( 'post-thumbnails' ). Jos sitä ei ole, lisää se. Toinen syy: teeman asetuksissa artikkelikuvan näyttö on poistettu käytöstä tietyltä sisältötyypiltä. Kolmas: välimuistilisäosa pitää hallussaan sivun vanhaa versiota, tyhjennä välimuisti.

Mitä eroa on artikkelikuvalla ja kansikuvalla?

Artikkelikuva on artikkelin metatietokenttä, jota teema käyttää esikatselukuviin syötteissä, arkistoissa ja Open Graphissa. Kansikuva on sisällön sisällä oleva lohko (ilmestyi Gutenbergissa), joka näkyy vain artikkelin rungossa eikä vaikuta sosiaalisiin verkostoihin. Voit käyttää molempia yhtä aikaa: kansikuva visuaalisena sisäänheittona artikkeliin, artikkelikuva kaikkeen muuhun.

Mitä kokoa artikkelikuvissa kannattaa käyttää?

Sosiaalisia verkostoja varten optimaalinen formaatti on 1200×630 px (suhde 1,91:1) Facebookin kehittäjä­dokumentaation mukaan. Etusivun artikkeliruudukossa suuntaa katse siihen, mitä teeman asetuksissa on määritelty. Jos teema käyttää neliömäisiä pienoiskuvia, 600×600 tai 800×800 px. Ennen latausta pakkaa kuva 100-150 kilotavuun TinyPNG:llä tai ShortPixelillä.

Onko artikkelikuvan asettaminen pakollista jokaiselle artikkelille?

Teknisesti ei. Mutta ilman sitä etusivu ja sosiaaliset verkostot näyttävät huolittelemattomilta, ja klikattavuus putoaa 2-3-kertaisesti. Jos pelkäät unohtavasi, käytä yllä olevan osion pakollisen tarkistuksen koodia tai Quick Featured Images -lisäosaa, joka asettaa oletuspienoiskuvan artikkeleille, joissa ei ole kuvaa.

Miten poistan tai vaihdan artikkelikuvan?

Napsauta artikkelin muokkausnäkymässä nykyistä artikkelikuvaa sivupalkissa. Mediakirjasto avautuu, napsauta "Poista artikkelikuva". Sen jälkeen painike muuttuu takaisin "Aseta artikkelikuva" -tilaan. Lataa uusi kuva.

Voinko käyttää samaa kuvaa artikkelikuvana useassa artikkelissa?

Kyllä, WordPress ei aseta rajoituksia. Valitse sama tiedosto mediakirjastosta eri artikkeleille. Mutta jos kuva toistuu syötteessä, se näyttää bugilta tai huolimattomuusvirheeltä. Visuaalisen vaihtelun vuoksi on parempi valita uniikit pienoiskuvat.

Mitä artikkelikuville kannattaa tehdä juuri nyt

Artikkelikuva ei ole "valinnainen" elementti, vaan pakollinen osa jokaista artikkelia. Ilman sitä sosiaaliset verkostot poimivat satunnaista sisältöä, etusivu menettää visuaalisen rakenteensa ja klikattavuus romahtaa.

Käy tarkistuslista läpi kymmenessä minuutissa:

• Avaa mikä tahansa artikkeli ja varmista, että artikkelikuva on asetettu.
• Tarkista, miltä se näyttää etusivulla ja sosiaalisissa verkostoissa (Facebook Sharing Debugger avuksi).
• Jos koot eivät vastaa odotuksia, asenna Simple Image Sizes ja säädä mitat.
• Jos työskentelet kirjoittajatiimin kanssa, lisää pakollisen tarkistuksen koodi, jotta julkaisu ilman pienoiskuvaa menee luonnokseksi.

Nämä kymmenen minuuttia säästävät tunteja manuaalista muokkaamista ja kymmeniä menetettyjä lukijoita. Tee se nyt.