Tekstisein ilma piltideta on kindel viis kaotada lugejad esimese viie sekundiga. Esiletõstetud pilt toimib postituse kaanena: see on see, mida inimesed näevad postituste voos, vidinates ja sotsiaalmeedia eelvaadetes. See müüb kliki enne, kui keegi on pealkirja lugenudki.

Probleem on selles, et WordPress ei sunni autoreid pisipilti määrama. Üks postitus paistab silma hiiglasliku fotoga, teine kahaneb tillukeseks ruuduks, kolmandal pole üldse pilti. Avaleht muutub visuaalseks kaoseks ning Facebook ja Telegram tõmbavad sisuka eelvaate asemel juhusliku logo.

Allpool on täielik ülevaade esiletõstetud pildi mehaanikast: alates esimese pisipildi lisamisest kuni kohustuslike kontrollideni enne avaldamist. Koos töötava koodi, konkreetse pluginaga ja samm-sammuliste juhistega.

💡 Kiire ülevaade:

• Esiletõstetud pildi lisamine redaktori külgriba kaudu
• Suuruste mõistmine: mida WordPress kapoti all teeb ja kuidas seda ümber seadistada
• Simple Image Sizes paigaldamine ja mõõtmete kohandamine oma teemale
• Pisipildi seadistamise automatiseerimine koodiga failis functions.php
• Unustavate autorite käsitlemine: ilma pildita läheb postitus mustandisse

Kuidas esiletõstetud pildid töötavad

Esiletõstetud pilt (või postituse pisipilt) on metaväli, mida teema kasutab väljundiks kolmes võtmekohas:

• Avaleht ja arhiivid. Pildiga eelvaade saab eksponentsiaalselt rohkem klikke kui paljas tekstilink.
• Postituse päis ise. Teema kuvab pisipildi pealkirja kohal või selle all, sageli kogu sisu laiuses.
• Sotsiaalvõrgustikud. Facebook, X ja Telegram tõmbavad esiletõstetud pildi Open Graph'i kaudu. Ilma pildita asendab võrgustik selle ükskõik millega, mida ta leiab.

See funktsioon on juba ammu WordPressi standard. Täna on võimatu leida korralikku teemat, mis seda ei toetaks. Kuid teostuse kvaliteet varieerub arendajati endiselt: üks teema väljastab pisipildi korraliku bännerina, teine venitab tillukese ruudu täislaiuseks.

Esiletõstetud pildi lisamine: põhimehaanika

Postituse redaktoris (Gutenberg või Classic) on paremal paneel „Esiletõstetud pilt". Klõpsake „Määra esiletõstetud pilt", laadige fail üles või valige meediateegist, klõpsake „Määra". Valmis.

Nüanss: WordPress ei nõua autorilt pildi määramist. Kui see ununeb, läheb publikatsioon voogu tühja kohaga. Selle probleemi lahendust käsitleme kohustuslike kontrollide osas.

Pildi suurused: mida WordPress kapoti all teeb

Iga WordPressi installatsiooniga tuleb karbist välja neli suurust:

• Täissuurus, originaalfail muutmata kujul
• Pisipilt, ruut (vaikimisi 150×150 px vastavalt WordPressi meedia seadetele), kärbitud keskelt
• Keskmine, skaleeritud etteantud maksimaalsele laiusele, ei kärbita
• Suur, sama, kuid kõrgema piiriga

Seaded asuvad kohas „Seaded → Meedia". Uue WordPressi pildi üleslaadimisel genereerib WordPress kõik neli versiooni pluss aktiivse teema poolt registreeritud lisasuurused. Iga versioon salvestatakse eraldi failina kausta wp-content/uploads/.

Miks nii palju koopiaid? Ilma nendeta peaks disainer iga suurust konkreetse väljundkoha jaoks käsitsi kohandama. Nendega küsib teema lihtsalt vajaliku variandi läbi the_post_thumbnail('medium') või wp_get_attachment_image_src(). Rohkem meedia alamsüsteemi arhitektuuri kohta leiate ametlikust WordPressi dokumentatsioonist.

Pisipilt on ainus suurus, mida sunniviisiliselt kärbitakse. Ülejäänud skaleeritakse proportsioone säilitades.

Esiletõstetud pildi suuruse muutmine

Teemad kasutavad erinevaid mõõtmeid. Teemat vahetades või uue ülesande puhul võib esiletõstetud pildi suurus vajada kohandamist.

Esmalt kontrollige teema seadeid: „Välimus → Kohanda". Kaasaegsed teemad pakuvad sageli liugurit või rippmenüüd pisipildi laiuse ja kõrguse jaoks. Leidsite, muutke kahe klõpsuga.

Ei leidnud, pole probleemi. Simple Image Sizes plugin lahendab ülesande ilma ühegi koodireata.

Simple Image Sizes: õige tööriist mõõtmete jaoks

Tasuta plugin Nicolas Juenilt, aktiivselt hooldatud (praegune versioon 3.2.5, nõuab PHP 8.0+). Pärast paigaldamist minge „Seaded → Meedia" ja näete kõiki registreeritud suurusi, sealhulgas neid, mille teema lisas, kuid vaate eest peitis.

Iga suuruse jaoks määrake laius ja kõrgus. Esiletõstetud pildi puhul lähtuge sellest, kuidas teema seda väljastab. Täislaiuses sisubänner, kasutage 1200×630 px (optimaalne sotsiaalvõrgustike jaoks vastavalt Facebook Open Graph'i soovitustele). Ruudukujuline pisipilt ruudustikus, 400×400 või 600×600 px.

Plussid:

• Näeb kõiki suurusi, sealhulgas neid, mille teema on peitnud
• Võimaldab lubada ja keelata suuruse kuvamist meedia sisestamise rippmenüüs
• Genereerib valmis add_image_size() PHP koodi teemasse ülekandmiseks

Miinused:

• Nõuab PHP 8.0+, ei tööta ausalt öeldes vanadel hostidel
• Minimalistlik liides, visuaalsed vihjed puuduvad

Hind: tasuta, Pro versiooni pole.

🔗 Simple Image Sizes WordPress.org-is

Mida teha vanade piltidega

WordPress rakendab uusi suurusi ainult värsketele üleslaadimistele. Kõik varem üles laaditu jääb vanadesse mõõtmetesse.

Simple Image Sizes katab ka selle ülesande. Lehel „Seaded → Meedia" keri alla taastamise plokini. Vali vajalik suurus, määra postituse tüüp ja käivita uuesti loomine. Plugin käib läbi kõik olemasolevad pildid ja loob uued koopiad uuendatud suuruste alusel.

Hoiatus: kümnete tuhandete failidega saitidel sööb taastamine serveriruumi. WordPress ei kustuta vanu pisipilte, need jäävad kausta surnud raskusena. Enne massilist taastamist veendu, et kettal on ruumi.

Automaatne esiletõstetud pildi seadistamine

Kui postitus sisaldab pilte, kuid esiletõstetud pilt on tühi, saab WordPress võtta sisust esimese pildi ja määrata selle pisipildiks. Mugav autoritele, kes selle sammu regulaarselt unustavad, ja voogedastusega blogidele.

Mehaanika on lihtne: kui esiletõstetud pilti pole käsitsi määratud, leiab funktsioon get_children abil esimese manustatud pildi ja määrab selle set_post_thumbnail() kaudu.

Kood lisatakse aktiivse teema functions.php faili. Soovitan tungivalt teha seda WPCode plugina kaudu, sest kirjaviga functions.php-s ilma selleta lõhub saidi täielikult:

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

Funktsioon käivitub kuuel konksul: the_post, save_post ja kõik *_to_publish oleku üleminekud. Pärast määramist jääb pisipilt alles isegi siis, kui eemaldad pildi postituse sisust.

Miinus: kui autor ei lisanud teksti ühtegi pilti, siis pisipilti ei teki. Selle stsenaariumi jaoks vaata järgmist jaotist.

Kohustuslik kontroll: pole pisipilti, pole avaldamist

Lihtne ja range meetod: autor klõpsab „Avalda" ning WordPress salvestab postituse mustandina ja näitab hoiatust. Ilma esiletõstetud pildita avaldamine ei lähe läbi.

Kaks koodijuppi failis functions.php:

Osa 1, kontroll salvestamisel (ainult post tüübile):

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, veateade administraatoris:

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
}

Teate tekst on täielikult kohandatav, asenda string <p><strong>...</strong></p> sees enda omaga.

Pisipildi eelvaade postituste nimekirjas

Standardne tabel „Postitused → Kõik postitused" näitab pealkirja, autorit, kategooriaid, silte ja kuupäeva. Esiletõstetud pilti seal pole. Et kontrollida, millistel postitustel pisipilt puudub, pead igaühe eraldi avama. 50+ publikatsiooni puhul on see tüütu.

Allolev kood lisab postituste ja lehtede tabelisse veeru Thumbs:

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
}

Eelvaate suuruseks on seatud 100×100 px, mis on piisav kiireks visuaalseks kontrolliks. Kui on vaja suuremat, asenda array(100, 100) väärtusega array(200, 200). Rohkem parameetrite kohta leiad the_post_thumbnail dokumentatsioonist.

Lehtede jaoks lisa need kaks rida jupi algusesse:

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

Nüüd näed jaotises „Lehed → Kõik lehed" samuti, kus on pisipilt ja kus mitte.

Pisipildi klikitavaks muutmine

Hea teema mähib esiletõstetud pildi automaatselt postituse lingi sisse. Halb teema väljastab staatilise pildi, mis ei vii kuhugi. Külastaja klikib avalehel eelvaatel ja midagi ei juhtu.

Parandatud ühe filtriga failis 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 );

Filter post_thumbnail_html püüab pisipildi HTML-väljundi kinni ja mähib selle get_permalink() abil lingi sisse. Postituse pealkiri läheb esc_attr() kaudu title atribuuti, turvaline ja informatiivne.

Teksti „Määra esiletõstetud pilt" muutmine

Kui saidil on sisust pisipiltide automaatne seadistamine, eksitab standardne silt „Määra esiletõstetud pilt" autoreid. Tundub, et pilt tuleb käsitsi määrata, kuigi süsteem teeb seda ise.

Muuda tekst millekski informatiivseks:

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

Filter admin_post_thumbnail_html käsitleb esiletõstetud pildi HTML-plokki toimetaja külgribal. Asenda teises str_replace argumendis suvaline tekst __( ... ) sees.

Video: kuidas see kõik praktikas töötab

Kui eelistad visuaalset demonstratsiooni, siis siin on WPBeginneri põhjalik läbivaatus: alates esimese pisipildi lisamisest kuni suuruste peenhäälestuse ja automatiseerimiseni.

⁉️🤔 Korduma kippuvad küsimused

Miks esiletõstetud pilti saidil ei kuvata?

Suure tõenäosusega ei toeta teema funktsiooni post-thumbnails. Kontrolli functions.php faili: seal peaks olema rida add_theme_support( 'post-thumbnails' ). Kui seda pole, lisa see. Teine põhjus: teema seadetes on esiletõstetud pildi kuvamine konkreetse postituse tüübi jaoks keelatud. Kolmas: mõni puhverdamise plugin hoiab lehe vana versiooni, tühjenda puhver.

Mis vahe on esiletõstetud pildil ja kaanepildil?

Esiletõstetud pilt on postituse meta-väli, mida teema kasutab eelvaadete jaoks voogudes, arhiivides ja Open Graph'is. Kaanepilt on sisuplokk (ilmus Gutenbergis), mis kuvatakse ainult postituse kehas ega mõjuta sotsiaalvõrgustikke. Saad kasutada mõlemat korraga: kaant visuaalseks sissejuhatuseks artiklisse, esiletõstetud pilti kõige muu jaoks.

Mis suurust peaksin esiletõstetud piltide puhul kasutama?

Sotsiaalvõrgustike jaoks on optimaalne formaat 1200×630 px (suhe 1,91:1) vastavalt Facebooki arendaja dokumentatsioonile. Avalehe postituste ruudustiku puhul lähtu sellest, mis on teema seadetes määratud. Kui teema kasutab ruudukujulisi pisipilte, siis 600×600 või 800×800 px. Enne üleslaadimist tihenda pilt TinyPNG või ShortPixeliga 100-150 KB suuruseks.

Kas esiletõstetud pildi määramine on iga postituse puhul kohustuslik?

Tehniliselt ei ole. Kuid ilma selleta näevad avaleht ja sotsiaalvõrgustikud lohakad välja ning klikitavus langeb 2-3 korda. Kui kardad unustada, kasuta ülaltoodud jaotises olevat kohustusliku kontrolli koodi või pluginat Quick Featured Images, mis asendab pildita postituste puhul vaikimisi pisipildi.

Kuidas eemaldada või asendada esiletõstetud pilti?

Postituse toimetajas kliki külgribal praegusel esiletõstetud pildil. Meediakogu avaneb, kliki „Eemalda esiletõstetud pilt". Pärast seda muutub nupp taas „Määra esiletõstetud pilt". Lae üles uus pilt.

Kas ma võin kasutada ühte pilti mitme postituse esiletõstetud pildina?

Jah, WordPress ei sea sellele piiranguid. Vali erinevate postituste jaoks meediakogust sama fail. Kuid kui pilt voos kordub, näeb see välja nagu viga või tähelepanematus. Visuaalse mitmekesisuse huvides on parem valida unikaalsed pisipildid.

Mida esiletõstetud piltidega kohe teha

Esiletõstetud pilt ei ole „valikuline" element, vaid iga postituse kohustuslik osa. Ilma selleta asendavad sotsiaalvõrgustikud suvalise sisu, avaleht kaotab visuaalse struktuuri ja klikitavus langeb plahvatuslikult.

Käi kümne minutiga see kontrollnimekiri läbi:

• Ava ükskõik milline postitus ja veendu, et esiletõstetud pilt on määratud.
• Kontrolli, kuidas see avalehel ja sotsiaalvõrgustikes välja näeb (Facebook Sharing Debugger on abiks).
• Kui suurused ei vasta ootustele, paigalda Simple Image Sizes ja kohanda mõõtmeid.
• Kui töötad autorite meeskonnaga, lisa kohustusliku kontrolli kood, et ilma pisipildita publikatsioon läheks mustandisse.

Need kümme minutit säästavad tunde käsitsi toimetamist ja kümneid kaotatud lugejaid. Tee seda kohe.