Skip to content

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

🖼 Kuinka lisätä eri taustoja WordPress-artikkeleille ja -sivuille
WordPressWordPress-teemat
6 min1,109 sanaa

🖼 Kuinka lisätä eri taustoja WordPress-artikkeleille ja -sivuille

Vakio WordPress-teema näyttää siistiltä, mutta kuukauden käytön jälkeen alat kaivata hieman yksilöllisyyttä. Värillinen tausta tärkeälle sivulle tai taustakuva tietyille artikkeleille on yksinkertainen tapa saada sisältö erottumaan visuaalisesti ilman koko sivuston uudelleensuunnittelua.

Voit toteuttaa tämän kolmella tavalla: parilla CSS-rivillä, pienellä PHP-pätkällä tai valmiilla lisäosalla. Mikään näistä menetelmistä ei vaadi syvällistä front-end-osaamista; sinun tarvitsee vain tietää, mihin koodi lisätään.

Alla käymme läpi kaikki kolme tapaa konkreettisten koodinpätkien, tiedostosijaintien ja rehellisen riskiarvion kera.

💡 Pikakatsaus:

  • Avaa header.php ja etsi body_class()-funktio. Se luo yksilölliset CSS-luokat jokaiselle sivulle ja artikkelille, jolloin voit kohdistaa taustat yksittäiseen artikkeliin asti.
  • Lisää CSS-sääntö sopivalla luokalla style.css-tiedostoon. Tausta näkyy vain kohdesivulla tai -artikkelissa vaikuttamatta muuhun sivustoon.
  • Luo mukautettu kenttä ja lisää PHP-pätkä functions.php-tiedostoon. Tausta asetetaan kuva-URL:n kautta suoraan WordPressin hallintapaneelista ilman CSS:n manuaalista muokkaamista.

Miten lisätä tausta CSS:n ja body_classin avulla

WordPress lisää automaattisesti joukon CSS-luokkia <body>-tagiin body_class()-funktion kautta. Näiden joukossa on yksilöllisiä tunnisteita tietyille artikkeleille tai sivuille, joten voit kohdistaa taustat kirurgisella tarkkuudella.

Varmista, että teemasi kutsuu body_class()-funktiota. Avaa Ulkoasu → Teematiedostoeditori ja etsi header.php-tiedosto:

WordPress-teemaeditori: header.php-tiedoston valinta

Etsi header.php:n sisältä avaava <body>-tagi. Sen vieressä pitäisi olla funktio:

1<body <?php body_class(); ?>>

Jos näet pelkän <body>-tagin ilman funktiota, lisää se. Useimmat nykyaikaiset teemat sisältävät tämän kutsun jo valmiiksi, mutta asia kannattaa tarkistaa.

Avaa nyt mikä tahansa sivustosi sivu ja katso sen lähdekoodia (klikkaa hiiren oikealla → Näytä sivun lähdekoodi Chromessa). Yksittäisessä artikkelissa näet jotakin tällaista:

1<body class="single single-post postid-1 single-format-standard logged-in">

Sivulla tuloste on erilainen:

1<body class="page page-id-2 page-template-default logged-in">

Tässä ovat keskeiset luokat, joihin voit kohdistaa CSS:llä:

  • .single, kaikki yksittäiset artikkelit. Mikä tahansa tähän luokkaan kohdistettu tyyli vaikuttaa jokaiseen blogiartikkeliin.
  • .postid-N, yksi tietty artikkeli, jonka ID = N. Ihanteellinen täsmätyylittelyyn.
  • .page, kaikki sivuston sivut.
  • .page-id-N, tietty sivu, jonka ID = N.
  • .single-format-standard, artikkelit, joissa on standardiformaatti.
  • .logged-in, koskee vain kirjautuneita käyttäjiä (hyödyllinen virheenetsinnässä).

Lisää nyt CSS:ää teemasi style.css-tiedostoon. Esimerkiksi mustan taustan asettaminen kaikille artikkeleille:

1.single {
2    background-color: #000;
3}

Ja taustakuvan asettaminen tietylle sivulle, jonka ID on 2:

1.page-id-2 {
2    background-image: url('/wp-content/uploads/2026/01/my-background.jpg');
3    background-size: cover;
4    background-position: center;
5}

Sivun tai artikkelin ID:n löydät hallintapaneelista: avaa sivulista, vie hiiri otsikon päälle, niin näet selaimen tilarivillä post=2 tai vastaavan numeron. Gutenberg-editorissa ID näkyy URL-osoitteessa: post.php?post=2&action=edit.

Tämän menetelmän etu on sen yksinkertaisuus: et koske PHP:hen, et asenna lisäosia ja tiedät tarkalleen, mikä luokka tekee mitäkin. Haittapuolena on, että teemaa vaihtaessasi kaikki style.css-tiedoston tyylit katoavat, ellet käytä lapsiteemaa.

Miten asettaa tausta mukautetun kentän ja PHP:n avulla

Jos haluat vaihtaa taustakuvaa suoraan hallintapaneelista ilman CSS:n kaivelua joka kerta, mukautetun kentän menetelmä toimii hyvin. Luot kentän kuva-URL:lle, ja pieni PHP-pätkä functions.php-tiedostossa lisää sen background-image-attribuuttiin.

Lisää seuraava koodi aktiivisen teemasi functions.php-tiedostoon. Jos käytät kolmannen osapuolen teemaa, muista käyttää lapsiteemaa; muuten muutokset katoavat päivitysten yhteydessä:

1<?php
2/**
3 * Adds an inline style for body background via a custom field.
4 * Replace 'myprefix' with your own unique prefix.
5 */
6function myprefix_custom_field_background() {
7    $background = get_post_meta( get_the_ID(), 'myprefix_background_image', true );
8    if ( $background ) {
9        ?>
10        <style type="text/css">
11            body {
12                background-image: url( "<?php echo esc_url( $background ); ?>" );
13            }
14        </style>
15        <?php
16    }
17}
18add_action( 'wp_head', 'myprefix_custom_field_background' );

Funktio kytkeytyy wp_head-koukkuun, ja inline-tyyli lisätään sivun <head>-osioon. esc_url() puhdistaa URL:n poistaen mahdollisesti vaaralliset merkit, kun taas get_post_meta() hakee kentän arvon nykyiselle artikkelille.

Avaa nyt mikä tahansa artikkeli tai sivu hallintapaneelissa, etsi Mukautetut kentät -lohko ja luo kenttä nimeltä myprefix_background_image. Liitä arvoksi taustakuvan koko URL-osoite. Tallenna, ja tausta näkyy vain tässä artikkelissa.

Jos mukautetut kentät -lohko ei näy: avaa editori, klikkaa kolmea pistettä oikeassa yläkulmassa → Asetukset → Paneelit ja ota käyttöön "Mukautetut kentät".

Huomioi: kuvan on oltava jo ladattuna WordPressin mediakirjastoon; käytä suoraa linkkiä tiedostoon, älä liitesivua.

Lisäosat taustoille: kun koodi ei ole sinun juttusi

CSS ja PHP kattavat useimmat tarpeet, mutta jos suosit visuaalista lähestymistapaa, tässä on mitä markkinoilta löytyy.

WP-Backgrounds Lite: historiaa ja opit

WP-Backgrounds Lite -lisäosan käyttöliittymä hallintapaneelissa

WP-Backgrounds Lite oli suosittu ilmainen ratkaisu taustoille useita vuosia sitten. Lisäosalla pystyi asettamaan eri taustoja artikkeleille, sivuille ja mukautetuille sisältötyypeille, ja se sisälsi tuen diaesityksille ja videotaustoille. Kesäkuusta 2021 lähtien se on kuitenkin ollut suljettu WordPress.org-hakemistossa "Security Issue" -ilmoituksella, ja useat riippumattomat arviot viittasivat piilotettuihin linkkeihin sivuston koodissa.

Tärkein opetus: tehtäviin, jotka voi ratkaista parilla CSS-rivillä, ei kannata asentaa vahvistamatonta lisäosaa. Mutta jos todella tarvitset lisäosan, tarkista viimeisin päivityspäivä ja aktiivisten asennusten määrä.

Custom Backgrounds: kaupallinen lähestymistapa

Custom Backgrounds -lisäosan sivu CodeCanyonissa

RightHere:n Custom Backgrounds -lisäosa CodeCanyonissa antaa täyden hallinnan: taustat artikkeleille, sivuille, taksonomioille ja arkistoille, parallaksiefektit, ajastimet ja useat taustat per sivu. Lisäosa on maksullinen, ja siitä on esikatselumahdollisuus ennen ostoa.

Haittapuoli: tekijä ei ole päivittänyt tuotetta useaan vuoteen, joten yhteensopivuus nykyisten WordPress-versioiden kanssa on kyseenalainen. Kertaluontoiseen projektiin se on toimiva ratkaisu; pitkäaikaista sivustoa varten kannattaa katsoa aktiivisesti ylläpidettyjä vaihtoehtoja.

Video- ja parallaksitaustat WPBakerylle

Parallaksiefektin tausta-asetukset WPBakeryssa

Jos käytät WPBakery Page Builder -lisäosaa (entinen Visual Composer), MegaMainin Parallax & Video Background -lisäosa tuo täydet videotaustat ja parallaksivierityksen suoraan rakentajan käyttöliittymään. YouTube, Vimeo ja ladatut MP4/WebM -tiedostot ovat tuettuja, samoin kuin neljä parallaksisuuntaa ja mahdollisuus poistaa efekti käytöstä mobiilissa.

Parallaksivieritys tarkoittaa, että taustakuva liikkuu etualaan nähden eri nopeudella. Se näyttää vaikuttavalta, mutta mobiililaitteilla se usein pätkii, joten mahdollisuus poistaa efekti älypuhelimilla on tässä ratkaisevaa.

Lisäosa toimii WPBakeryn sisällä: lisäät taustan riville tai sarakkeeseen tutun käyttöliittymän kautta ilman erillistä valikkoa. Hinta on kertamaksu CodeCanyonissa, ja päivityksiä julkaistaan säännöllisesti.

Lyhyt video aiheesta: taustakuvan lisääminen yksittäisille sivuille ja lohkoille WordPressissä. Se toimii täydennyksenä yllä kuvatuille menetelmille, ja koko prosessi näytetään oikealla sivustolla.

⁉️🤔 Usein kysytyt kysymykset

Voinko asettaa eri taustoja eri artikkelikategorioille?

Kyllä, jos teemasi lisää kategorialuokan post_class()-funktion kautta tulostussilmukassa. Tämä näkyy yleensä muodossa .category-news tai .category-portfolio. Avaa kategoria-arkistosivun lähdekoodi ja etsi luokka <article>-tagista. Sen jälkeen kyseessä on tavallinen CSS-sääntö style.css-tiedostossa. Vaihtoehtoisesti: ehdollinen tagi has_category() PHP-pätkässä.

Mitä teen, jos body_class()-funktio puuttuu header.php:stä?

Lisää se manuaalisesti avaavaan <body>-tagiin: korvaa <body> tagilla <body <?php body_class(); ?>>. Jos header.php ei ole muokattavissa (teema on lukittu), luo lapsiteema, kopioi pääteeman header.php ja tee muokkaus kopioon.

Tausta ei näy CSS:n lisäämisen jälkeen. Mistä johtuu?

Kolme yleistä syytä: (1) selaimen välimuisti, avaa sivu incognito-tilassa; (2) toinen CSS-valitsin ohittaa taustasi, tarkista kehittäjätyökaluilla (F12), onko sääntösi yliviivattu; (3) kuvan polku on virheellinen, käytä absoluuttista URL-osoitetta sivuston juuresta alkaen kauttaviivalla.

Onko lapsiteeman käyttö pakollista functions.php-muokkauksiin?

Erittäin suositeltavaa. Suorat muokkaukset pääteeman functions.php-tiedostoon katoavat ensimmäisessä teemapäivityksessä. Lapsiteema eristää muutoksesi: luo kansio, lisää style.css otsikkotietoineen ja functions.php koodeineen. Se vie viisi minuuttia ja säästää tunteja päivitysten yhteydessä.

Mikä voi korvata WP-Backgrounds Liten tänään?

Yksinkertaisiin taustoihin tämän artikkelin CSS-menetelmä kattaa täysin lopetetun lisäosan toiminnallisuuden. Jos tarvitset visuaalista käyttöliittymää, käytä Gutenbergin Kansilohkoa: se tarjoaa taustakuvan tekstipeitolla mille tahansa sivulle tai artikkelille. Parallaksi- ja videotaustoihin käytä WPBakery-lisäosaa yllä olevasta katsauksesta.

Yhteenveto: mikä menetelmä valita omaan tarpeeseesi

Menetelmän valinta kiteytyy kahteen kysymykseen: kuinka usein vaihdat taustoja ja kuinka mukavaa sinulle on muokata koodia.

  • Jos haluat asettaa kerran ja unohtaa, käytä CSS:ää body_class()-funktion kautta. Kaksi riviä style.css-tiedostossa, nolla lisäosaa, toimii missä tahansa teemassa.
  • Jos tausta vaihtuu säännöllisesti eri artikkeleille, käytä PHP-pätkää mukautetun kentän kanssa. Lataa kuva mediakirjastoon, liitä URL kenttään, valmista.
  • Jos työskentelet WPBakerylla ja tarvitset videotaustoja, käytä Parallax & Video Background -lisäosaa.
  • Jos et halua koskea koodiin lainkaan, Gutenbergin sisäänrakennettu Kansilohko kattaa useimmat taustakuvatarpeet ilman ainuttakaan lisäosaa.

Aloita CSS:stä (se vie viisi minuuttia eikä sisällä riskejä). Ja jos käytät jotakin epätyypillistä taustatekniikkaa, jota emme käsitelleet, jaa se kommenteissa.

Toimitus
ToimitusToimitustiimi→ All publications

Ammattimainen kirjoittajien ja toimittajien tiimi, joka on erikoistunut laadukkaan sisällön luomiseen.