WordPress Child Theme, eli lapsiteema selitettynä

Käyttäessäsi valmisteemaa voit muokata sivustosi ulkoasua ja toimintoja teeman mahdollistamissa rajoissa. 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-sivustolla.

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?

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. https://codex.wordpress.org/Child_Themes

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 https://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 näin:

7. Asennettujen lisäosien sijainti

Vasemman reunan valikosta valitaan  Lisäosat -> Asennetut 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 WordPressin asennuksen yhteydessä, koska aina voi tulla eteen tilanne, jossa koodia tarvitsee muokkailla omiin tarkoituksiin sopivaksi.

Webdesigner, yrittäjän henkilökohtainen assistentti.

Share
Tweet
Share
Pin
+1