Skip to content

Kaikki WordPressistä, web-kehityksestä — ja paljon muuta

📝 Kuinka lisätä tekstiä julkaisun kuvaan WordPressissä

📝 Kuinka lisätä tekstiä julkaisun kuvaan WordPressissä

Olet valinnut täydellisen kuvan julkaisuusi, ladannut sen artikkelikuvaksi, julkaissut tekstin, eikä kuvateksti ilmestynyt. Tai se ilmestyi, mutta ei siihen kohtaan ja sillä tavalla kuin halusit. Kuulostaako tutulta?

WordPress itsessään ei näytä artikkelikuvien kuvatekstejä julkaisusivuilla. Se on teeman tehtävä, eivätkä kaikki teemat osaa hyödyntää mediakirjaston kuvatekstiä. Hyvä uutinen on, että voit lisätä tekstiä artikkelikuvan päälle ilman mallipohjien muokkaamista ja ilman kehittäjän palkkaamista: sisäänrakennettu lohko, yksi ilmainen lisäosa tai sivunrakennustyökalu hoitaa homman.

Alla on kolme toimivaa tapaa mille tahansa WordPress-versiolle (6.0 ja uudemmat), yksinkertaisimmasta joustavimpaan. Ei koodia, ei riskiä sivuston rikkoutumisesta, ja jokaisesta vaiheesta on kuvakaappaukset.

Tarkista ensin, tukeeko teemasi artikkelikuvan kuvatekstejä

💡 Pikaopas:

  • Tarkista, tukeeko WordPress-teemasi artikkelikuvan kuvatekstejä
  • Lisää tekstipeitto käyttämällä Gutenberg-editorin sisäänrakennettua Kansilohkoa
  • Asenna ilmainen FSM Custom Featured Image Caption -lisäosa joustavia kuvatekstejä varten
  • Luo mukautettu julkaisupohja Elementor Prolla täydellistä hallintaa varten

Ennen kuin asennat lisäosia ja opettelet lohkoja, avaa jokin sivustosi julkaisu ja katso, näkyykö kuvateksti artikkelikuvan alla juuri nyt.

Jotkin WordPress-teemat nimittäin osaavat käyttää mediakirjaston "Otsikko"-kenttää automaattisesti. Esimerkiksi oletusteema Twenty Twenty (ja useimmat modernit Full Site Editing -lohkoteemat) poimii kirjastossa kuvalle asetetun otsikon itsestään:

Twenty Twenty -teeman artikkelikuvan kuvateksti

Otsikko asetetaan täällä, WordPressin mediakirjastossa, "Otsikko"-kentässä tiedostoa muokattaessa:

WordPressin mediakirjaston kuvan otsikkokenttä

Jos teemasi tukee tätä mekanismia, ratkaisit ongelman 30 sekunnissa. Täytä vain "Otsikko" jokaiselle kuvalle, niin teema näyttää sen artikkelikuvan alla julkaisusivulla.

Mutta tämä ei toimi kaikilla. Vuotta aiemmin Twenty Nineteen ei näyttänyt mediakirjaston otsikkoa. Eivätkä useimmat kaupalliset teematkaan näytä. Jatketaan siis tapoihin, jotka toimivat varmasti.

1. Kansilohko Gutenberg-editorissa

Yksinkertaisin ja täysin natiivi tapa, sisäänrakennettu Kansilohko. Se ilmestyi Gutenberg-editorin julkaisun myötä ja sitä on päivitetty tasaisesti siitä lähtien: nykyaikaisissa WordPress-versioissa se tukee taustavideota, peittosuotimia, kiinteää taustaa ja koko leveyden asetteluja.

Miten se toimii: sen sijaan, että luottaisit teeman näyttävän artikkelikuvan, asetat Kansilohkon manuaalisesti julkaisun alkuun ja valitset haluamasi kuvan taustaksi. Kuvan päälle kirjoitat tekstiä, otsikon, alaotsikon tai mitä tahansa muuta sisältöä.

Lisää julkaisueditorissa uusi lohko, valitse Kansi (tai kirjoita /cover), lataa kuva ja syötä teksti:

Kansikuvalohko tekstillä Gutenberg-editorissa

Sivustolla tämä näyttää täysimittaiselta bannerilta, jossa on tekstiä artikkelikuvan päällä:

Kansikuvalohkon lopputulos tekstipeitolla sivustolla

Pari tärkeää vivahdetta. Ensinnäkin, Cover-lohkoa ei ole teknisesti linkitetty artikkelin nostokuvaan, vaan se on erillinen mediatiedosto sisällön sisällä. Jos teema näyttää nostokuvan edelleen automaattisesti, kuva toistuu. Ratkaisu: poista teeman asetuksista (Customizerin tai FSE-teemojen sivustoeditorin kautta) automaattinen nostokuvan näyttö yksittäisessä artikkelissa ja jätä vain Cover-lohko.

Toiseksi, Cover-lohko antaa sinulle tekstiä kuvan päälle, mutta ei klassista "kuvatekstiä kuvan alle". Jos tarvitset nimenomaan kuvatekstin (kuten valokuvissa artikkelissa), katso seuraavaa tapaa.

FSM Custom Featured Image Caption, ilmainen lisäosa WordPress.orgista, joka ratkaisee täsmälleen yhden tehtävän: lisää muokattavan kuvatekstin nostokuvaan. Toimii Gutenbergin, klassisen editorin ja jopa Divi-teemojen kanssa (yhteensopivuusasetuksen kautta asetuksissa).

Huhtikuussa 2026 lisäosalla on versio 1.26, yli 5 000 aktiivista asennusta ja arvosana 4,6/5. Sitä päivitetään säännöllisesti, viimeisin julkaisu tuli ulos 27. huhtikuuta 2026.

Asenna lisäosa kohdasta Lisäosat → Lisää uusi, aktivoi se. Mene sitten kohtaan Asetukset → FSM Custom Featured Image Caption ja määritä toiminta:

FSM Custom Featured Image Caption -lisäosan asetussivu

Tärkeimmät asetukset, joihin kannattaa kiinnittää huomiota:

  • Näytä kuvatekstit listauksissa, ota käyttöön, jos haluat nähdä kuvatekstit paitsi artikkelin sisällä, myös arkisto-/kategoriasivuilla;
  • CSS kuvatekstille, luokka(t) kuvatekstin tyylittelyyn (oletus wp-caption-text);
  • Salli HTML-koodi, sallii HTML:n kuvatekstin sisällä;
  • Mukautettu tyyli, kenttä inline-CSS:lle, jos haluat siirtää kuvatekstin kuvan päälle.

Oletuksena lisäosa ottaa otsikon WordPressin mediakirjaston "Otsikko"-kentästä ja näyttää sen tavallisena kuvatekstinä nostokuvan alla:

Artikkelikuvan kuvateksti oletustyylillä FSM-lisäosassa

Jos haluat tekstin "leijuvan" kuvan päällä, lisää suunnilleen tämä CSS Mukautettu tyyli -kenttään:

position: relative; bottom: 50px; left: 35px; color: white; font-size: 22px;

Lopputulos, teksti siirtyy ylös ja asettuu kuvan alaosan päälle:

Kuvateksti kuvan päällä CSS:n avulla FSM-lisäosassa

FSM tarjoaa myös [FSM_featured_image]-lyhytkoodin nostokuvan ja kuvatekstin manuaaliseen sijoittamiseen mihin tahansa sisällössä, ja siinä on size-parametri yhden WordPressin vakiokoon valitsemiseksi. Ja kehittäjille on PHP-funktiot get_FSM_featured_image_caption() ja the_FSM_featured_image_caption(), joissa on yksityiskohtaiset tulostusparametrit.

3. Elementor Pro -rakentaja, täysi hallinta artikkelipohjasta

Jos et tarvitse vain "lisää kuvateksti", vaan täyden hallinnan siitä, miltä artikkelisivu näyttää, mukaan lukien nostokuvan, tekstin, metatietojen ja kommenttien mukautetun sijoittelun, ota käyttöön Elementor Pro.

Keskeinen työkalu tässä on Theme Builder. Sen avulla voit luoda mukautetun Single Post Template -pohjan: pohjan, joka soveltuu automaattisesti kaikkiin artikkeleihin (tai valittuihin kategorioihin) ja joka kootaan Elementorin visuaalisessa editorissa widgeteistä.

Näin se tehdään:

  • Asenna ilmainen Elementor ja aktivoi Elementor Pro (Theme Builder -ominaisuus, vain Pro-versiossa).
  • Mene kohtaan Pohjat → Theme Builder → Lisää uusi, valitse tyypiksi Single Post.
  • Raahaa Elementor-editorissa Featured Image -widget pohjalle, tämä on nostokuvasi.
  • Lisää Post Title -widget (tai Heading dynaamisella tagilla) kuvan päälle, määritä sijoittelu Absolute Positioning -toiminnolla (saatavilla Pro-versiossa).
  • Julkaise pohja, se soveltuu kaikkiin sivuston artikkeleihin.

Featured Image -widgetin asetuksissa voit valita koon (thumbnail, medium, large, full) ja asettaa tasauksen:

Artikkelikuvan widgetin asetukset Elementor-teemarakentajassa

Elementor Pro maksaa rahaa (alkaen 59 $/vuosi yhdelle sivustolle kesäkuussa 2026, ajantasaiset hinnat osoitteessa elementor.com/pricing), ja tehtävään "lisää vain tekstiä kuvan päälle" tämä on liioittelua. Mutta jos käytät jo Elementoria sivuston suunnitteluun, Theme Builder ratkaisee artikkelikuvakysymyksen kokonaan ja antaa lisäksi hallinnan ylätunnisteeseen, alatunnisteeseen, arkistosivuihin ja 404-sivuun.

⁉️🤔 Usein kysytyt kysymykset

Voinko lisätä tekstiä artikkelikuvan päälle ilman lisäosia?

Kyllä, Gutenberg-editorin sisäänrakennetun Kansilohkon avulla. Lisäät lohkon kirjoituksen alkuun, asetat kuvan taustaksi ja kirjoitat tekstin päälle. Huono puoli on, että lohkoa ei ole linkitetty kirjoituksen "Artikkeli"-kenttään: kun vaihdat artikkelikuvan hallintapuolella, Kansilohko ei päivity itsestään, vaan kuva täytyy vaihtaa käsin. Hyvä puoli on, että se toimii ilman mitään lisäosia, myös WordPressissä, jossa ei ole lisäosien asennusoikeuksia.

Tukeeko FSM Custom Featured Image Caption Divi-teemaa?

Kyllä, versiosta 1.21 alkaen lisäosan asetuksissa on "Ota käyttöön yhteensopivuus Divi-teemojen kanssa" -valinta. Se korvaa Divin vakio-artikkelikuvan tulostusfunktion lisäosan koukulla. Ratkaisu on kokeellinen (riippuu Divin versiosta ja tietystä asettelusta), mutta toimii useimmissa tyypillisissä asetteluissa. Jos kuvateksti ei ilmestynyt, joudut todennäköisimmin lisäämään CSS:ää Mukauttajassa.

Mitä tehdä, jos FSM-lisäosan aktivoinnin jälkeen kuvateksti ei näy?

Kolme yleisintä syytä. Ensimmäinen: teema ei käytä get_the_post_thumbnail()-funktiota artikkelikuvan tulostamiseen (harvinaista, mutta tapahtuu räätälöidyissä teemoissa). Toinen: mediakirjaston "Otsikko"-kenttää ei ole täytetty, eikä kirjoituseditorissa ole määritetty mukautettua kuvatekstiä, joten lisäosalla ei ole mitään näytettävää. Kolmas: teeman CSS-ristiriita (kuvateksti on HTML:ssä, mutta visuaalisesti piilotettu tai sulautuu taustaan). Tarkista sivun koodi selaimen tarkastustyökalulla, jos <figcaption>-tagi, jolla on luokka wp-caption-text, on läsnä, kyse on CSS-ongelmasta.

Miten FSM eroaa suljetusta Featured Image Captionista?

Featured Image Caption -lisäosa (tekijä Christiaan Conover) suljettiin WordPress.orgissa huhtikuussa 2025 hakemistosääntöjen rikkomisen vuoksi, eikä se ole enää asennettavissa. FSM Custom Featured Image Caption on toimiva ja päivitetty vaihtoehto: versio 1.26 huhtikuulta 2026, aktiivinen tuki, enemmän asetuksia (mukaan lukien shortcode, PHP-funktiot kehittäjille ja Divi-yhteensopivuustila). Jos käytit Featured Image Captionia aiemmin, vaihda FSM:ään, logiikka on samankaltainen, ja ominaisuuksia on enemmän.

Tarvitsenko Elementor Pron, jos haluan vain kuvatekstin artikkelikuvan alle?

Et. Elementor Pro ja Teemarakentaja on työkalu kirjoituspohjan täyteen hallintaan, ei erikoistunut ratkaisu kuvateksteille. Jos tehtävä rajoittuu tekstin lisäämiseen artikkelikuvan päälle tai alle, Kansilohko (ilmainen, natiivi) tai FSM-lisäosa (ilmainen, joustava) riittävät. Elementor Pro on järkevä silloin, kun rakennat yleisesti kirjoitusten ulkoasua Elementorilla ja haluat hallita artikkelikuvaa osana sivuston yhtenäistä suunnittelujärjestelmää.

Mikä menetelmä sopii sivustollesi?

Valinta tiivistyy kolmeen skenaarioon, ja vastaus riippuu siitä, miten sivustosi on juuri nyt rakennettu.

Jos työskentelet puhtaalla Gutenbergilla etkä halua asentaa ylimääräisiä lisäosia, käytä Kansilohkoa. Minuutti asentaa, ei riippuvuuksia, ja teksti kuvan päällä näyttää siistiltä millä tahansa laitteella.

Jos tarvitset nimenomaan kuvatekstin erillisenä elementtinä (teksti kuvan alla, muotoilulla ja shortcode-tuella), asenna FSM Custom Featured Image Caption. Se on ilmainen, säännöllisesti päivitetty ja kattaa valtaosan "artikkelikuvan kuvateksti" -skenaarioista.

Jos olet jo Elementor Pron ekosysteemissä, Teemarakentaja ratkaisee kirjoituksen ulkoasukysymyksen kokonaan, mukaan lukien artikkelikuvan tekstillä, metatiedot, sivupalkin ja kommentit. Mutta pelkkää kuvatekstiä varten Pro-lisenssin ostaminen ei ole perusteltua: aloita Kansilohkolla tai FSM:llä.

Kokeile tilanteeseesi sopivinta menetelmää heti, ja jos jokin menee pieleen, palaa kysymyksen kanssa kommentteihin. Vastaamme.