WordPress Child Theme, eli lapsiteema selitettynä

Vieraskirjoitus

WordPress sivut rakennetaan tyypillisesti jonkin teeman avulla. WordPress teeman muokkaaminen on helppoa niin kauan kuin pysytään ulkoasuteeman omien asetusten ja ominaisuuksien piirissä. Jos haluat kuitenkin tehdä muutoksia, jotka onnistuvat vain koodia muokkaamalla, kannattaa ehdottomasti ottaa käyttöön lapsiteema (child theme).

Tässä kirjoituksessa tutustumme siihen, mikä lapsiteema on ja kuinka se otetaan käyttöön WordPress-kotisivulle.

WordPress teeman muokkaaminen kannattaa toteuttaa lapsiteeman avulla

Mikä lapsiteema on?

Child Theme, eli lapsiteema on käytännössä valju kopio pääteemastasi. Se tarvitsee aina toimiakseen sivustolle asennetun pääteeman, josta se hakee käyttöön pääteeman omat ominaisuudet ja asetukset, jos niitä ei löydy lapsiteemasta. Lapsiteemasta ei esimerkiksi löydy kaikkia pääteeman tiedostoja, mutta pääteemaa vastaavia tiedostoja voi luoda ja muokata lapsiteeman hakemistorakenteeseen aina tarpeen mukaan.

Jos esimerkiksi haluat tehdä muokkauksia header.php-tiedostoon, sinun pitää kopioida (huom! kopioi, älä siirrä) ko. tiedosto pääteemasta lapsiteeman hakemistoon. Huomioi, että hakemistorakenteen tulee olla samanlainen eli jos header.php on vaikkapa pääteeman kansiossa Template, on myös lapsiteemaan luotava ensin kansio Template ja vasta sitten header.php kopioidaan kansioon. Nyt voit muokata lapsiteeman header.php-tiedostoa mielesi mukaan ja muutokset näkyvät sivustolla.

Miksi lapsiteema on suositeltava?

WordPress teeman muokkaaminen kannattaa aina toteuttaa lapsiteeman kautta. Ilman lapsiteemaa kaikki teeman tiedostoihin tehdyt muutokset katoavat teeman päivityksen yhteydessä. Nykyään WordPressin Oma CSS -muokkaimeen tehdyt muutokset säilyvät yleensä myös päivitysten jälkeen, mutta suosittelen silti ottamaan lapsiteeman käyttöön aina, jos aikoo kirjoittaa rivinkin omaa koodia, myös CSS-puolella.

Lapsiteeman luominen

Lapsiteeman voi rakentaa ns. perinteisellä tavalla luomalla lapsiteemalle oman hakemistokansion, kopioimalla sinne functions.php ja style.css -tiedostot pääteemasta ja muokkaamalla ko. tiedostoja niin, että ne toimivat lapsiteemassa. Tarkemmat ohjeet tähän löytyvät WordPressin Codexista

Jos tiedostojen luominen ja muokkaaminen ei kiinnosta, voit käyttää lapsiteeman luomiseen lisäosaa.

1. Uuden lisäosan lisääminen

Valitse Lisäosat – Lisää uusi

Kirjoita hakukenttään Child theme configurator (lisäosan sivusto löytyy osoitteesta: fi.wordpress.org/plugins/child-theme-configurator/)

hae child theme configurator

2. Asennus

Kun olet löytänyt oikean lisäosan, klikkaa Asenna.

Asenna child theme configurator

3. Käyttöönotto

Asennuksen valmistuttua klikkaa Ota käyttöön.

Ota child theme configurator käyttöön

4. Työkalun sijainti

Uusi työkalu löytyy vasemman reunan valikosta kohdasta Työkalut -> Child Themes

child themes

5. Luo lapsiteema seuraavasti:

5.1. Uuden lapsiteeman luominen

Laita valinta kohtaan Create a new child theme.

luo uusi lapsiteema

5.2. – 5.3. Pääteeman valitseminen

Valitse pääteema, josta haluat tehdä lapsiteeman ja klikkaa sitten Analyze.

Valitse lapsiteemalle teema

5.4. Hakemistonimen määrittäminen

Anna teemalle hakemistonimi. Tämä voi olla oletusmuodossaan eli Teemannimi-child.

Anna teemalle uusi hakemistonimi

5.5. Tyyliohjeiden tallennuspaikka

Laita valinta kohtaan Primary stylesheet.

Valitse tyyliohjeen tallennuspaikka

5.6. WordPress style queue

Laita valinta kohtaan Use the WordPress style queue.

valitse wordpress tyyli

5.7. Lapsiteeman tietojen muokkaaminen

Jos haluat muokata lapsiteeman nimeä ja muita lisätietoja, klikkaa Show/hide child theme attributes.

  • Child theme name = Uuden lapsiteeman nimi
  • Theme website = Teeman nettisivu
  • Author = Teeman tekijä
  • Author website = Teeman tekijöiden nettisivu
  • Theme description = Teeman kuvaus
  • Theme tags = Teemaan liittyvät avainsanat
  • Version = Teeman versio
Muokkaa lapsiteeman tietoja

5.8. Pääteeman valikkojen ja vimpaimien kopiointi

Laita valinta ruutuun Copy menus widgets and…

Laita valinta ruutuun

5.9. Lapsiteeman luominen

Klikkaa Create new child theme.

klikkaa luo uusi lapsiteema

6. Teeman esikatselu ja julkaisu

Sivun yläosaan tulee ilmoitus onnistuneesta lapsiteeman luonnista. Klikkaa linkkiä Preview your child theme nähdäksesi, miltä lapsiteema näyttää sivustollasi. Jos kaikki näyttää samalta kuin pääteeman kanssa, klikkaa Aktivoi & julkaise.

Esikatsele lapsiteema
Aktivoi ja julkaise sivu

Nyt sivustolla on aktiivisena teemana luomasi lapsiteema. Sivuston lataamisen yhteydessä haetaan tietoja ensin lapsiteemasta ja niiden puuttuessa haku kohdistuu pääteemaan.

Koska sivustolla ei kannata säilyttää turhia tiedostoja, voi Child theme configurator  -lisäosan poistaa heti onnistuneen lapsiteeman luonnin jälkeen. Toimi seuraavasti.

7. Asennettujen lisäosien sijainti

Asennetut lisäosat

Vasemman reunan valikosta valitaan  Lisäosat -> Asennetut lisäosat.

8. Child Theme Configuratorin poisto

Tekstin Child theme configurator alta klikataan Poista käytöstä ja kun sivu päivittyy, klikataan samasta kohdasta Poista ja vahvistetaan poistaminen.

Poista Child Theme configurator
vahvista child theme configuratorin poisto

Miten lapsiteemaa muokataan?

Lapsiteeman kansiot ja tiedostot löytyvät nyt webhotellin tiedostoista kohdasta /wp-content/themes/ Kansiossa on aluksi vain 2-3 tiedostoa ja suurin osa muutoksista onkin selkeintä tehdä näihin functions.php ja style.css -tiedostoihin. Mikäli sinulla on tarvetta muokata jotain muuta teeman tiedostoa, niin etsi se ensin pääteemastasi, kopioi tiedosto (huom! kopioi, älä siirrä) ja liitä se sitten lapsiteeman hakemistoon. Muista kopioida myös hakemistorakenne. Tee haluamasi muokkaukset vasta lapsiteeman tiedostoon. Ennen muokkauksen aloittamista kannattaa aina varmistaa, että sivusto toimii oikein. Myös varmuuskopio kannattaa ottaa ennen muutosten tekemistä.

Jos lapsiteeman tiedoston muokkaamisen jälkeen tulee virhetilanne eikä sivusto esim. lataudu lainkaan, voit aina palauttaa tilanteen ennalleen poistamalla tekemäsi muokkaukset tai koko tiedoston lapsiteemasta. Älä koskaan poista tiedostoa pääteemasta! En myöskään suosittele muokkaamaan pääteeman tiedostoja, sillä muokkaukset katoavat päivitysten yhteydessä.

Itse teen nykyään lapsiteeman automaattisesti jo WordPress-asennuksen yhteydessä, koska aina voi tulla eteen tilanne, jossa koodia tarvitsee muokkailla omiin tarkoituksiin sopivaksi.

Annika Pulkkinen

Vieraskirjoittaja

Annika Pulkkinen on Sivutaikuri ja ongelmanratkaisija. Verkkosivustojen suunnittelun ja rakentamisen lisäksi hän nauttii suunnattomasti siitä, että voi opastaa sinua WordPress-maailman sokkeloissa, joissa hän on itse pyörinyt aktiivisesti vuodesta 2014 lähtien.