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.
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/)
2. Asennus
Kun olet löytänyt oikean lisäosan, klikkaa Asenna.
3. Käyttöönotto
Asennuksen valmistuttua klikkaa Ota käyttöön.
4. Työkalun sijainti
Uusi työkalu löytyy vasemman reunan valikosta kohdasta Työkalut -> Child Themes
5. Luo lapsiteema seuraavasti:
5.1. Uuden lapsiteeman luominen
Laita valinta kohtaan Create a new child theme.
5.2. – 5.3. Pääteeman valitseminen
Valitse pääteema, josta haluat tehdä lapsiteeman ja klikkaa sitten Analyze.
5.4. Hakemistonimen määrittäminen
Anna teemalle hakemistonimi. Tämä voi olla oletusmuodossaan eli Teemannimi-child.
5.5. Tyyliohjeiden tallennuspaikka
Laita valinta kohtaan Primary stylesheet.
5.6. WordPress style queue
Laita valinta kohtaan Use the WordPress style queue.
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
5.8. Pääteeman valikkojen ja vimpaimien kopiointi
Laita valinta ruutuun Copy menus widgets and…
5.9. Lapsiteeman luominen
Klikkaa Create new child theme.
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.
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
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.
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.
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.