1.5.3 Lapsiteema
Huolimatta WordPressin teematarjonnan uskomattoman laajasta tarjonnasta ja moninaisuudesta valittuun teemaan halutaan lähes poikkeuksetta tehdä jonkinlaisia muutoksia. Muokkaamalla sivuja asennettuun lapsiteemaan vältyt tulevaisuudessa monilta ongelmilta. Varsinkin, jos teet muutoksia esimerkiksi ohjelmakoodiin, kannattaa ottaa käyttöön lapsiteema (Child-theme) jo ennen mitään muokkauksia.
Lapsiteemaa voidaan nimensä mukaisesti kuvailla vertauksella äidistä ja lapsesta. Äitinä WordPressissa on sivuston pääteema, joka ladataan WordPressiin. Lapsiteema on äititeeman kopio, johon voidaan lisätä määrittelyitä korvaamaan äititeeman vastaavia muotoiluja. Selain, jonka kautta selaaja sivuja katsoo, hakee tietoja lapsiteeman kautta ja korvaa äititeeman asetuksia vastaavilla lapsiteeman asetuksilla, jos sellaisia on olemassa.
Miksi käyttää lapsiteemaa?
Lapsi teema toimii ikään kuin muokkaavana tasona varsinaisen teeman edessä. Lapsiteema sisältää teemaan ja sivustoon vaikuttavat tiedostot, kuten CSS-muotoilu.
Kun sivu latautuu lapsiteeman tiedostojen koodit ovat hierarkiassa ennen pääteeman tiedostojen koodia, joten ne luetaan ensin ja selain näyttää niiden mukaisen ulkoasun verkkosivusta niiltä osin, kuin ne vastaavat pääteeman tiedoston koodin määritteitä. Lapsiteema ei vaikuta kuitenkaan muihin pääteeman muotoiluihin ja määritteisiin vaan ne latautuvat normaalisti.
Teeman päivityksessä pääteeman päivitykset korvaavat olemassa olevaa koodia. Jos lapsiteemaa ei käytetä päivitykset korvaavat kaikki teeman muokatut tiedot uusilla, joten ne pyyhkiytyvät yli päivityksen yhteydessä. Jos käytämme lapsiteemaa päivitykset vaikuttavat vain äititeemaan. Lapsiteema säilyy muuttumattomana ja muokkauksemme säilyvät ennallaan.
Toki lapsiteemaa ei tarvitse aina välttämättä tehdä. Jos olet kaikin puolin tyytyväinen hankkimaasi teemaan ja saat kaikki tarvittavat asiat säädettyä suoraan teeman muokkaimesta, lapsiteeman teko ei ole välttämätöntä. Jos taas teet muutoksia koodillisesti, tällöin lapsiteeman käyttö on erittäin suositeltavaa.
Itse otan poikkeuksetta lapsiteeman käyttöön heti sivuston asennuksen jälkeen ennen mitään muita muokkauksia.
Kuinka lapsiteema otetaan käyttöön?
Lapsiteeman luomiseen on periaatteesa kaksi tapaa:
- Manuaalisesti FTP-yhteyttä käyttäen
- WordPress-lisäosan avulla (Child Theme Configurator)
Tutustumme tällä kurssilla lapsiteeman lisäämiseen lisäosan avulla, joka on kätevin tapa lapsiteeman käyttöönottamiseen.
Child Theme Configurator
Käytämme lapsiteeman luomiseen lisäosaa nimeltä Child Theme Configurator, joka on tällä hetkellä yksi suosituimpia työkaluja lapsiteeman luomiseen ja ylläpitoon. Asenna lisäosa lisäosat-osioista ja ota lisäosa käyttöön.
Kun lisäosa on asentunut ja otettu käyttöön, voit avata sen Työkalut -valikosta.
Lisäosan ensimmäisellä välilehdellä on Create a new Child Theme -valinta, joka täytyy olla aktiivisena ja Select a Parent Theme -pudotusvalikosta valitaan teema, johon lapsiteema tehdään. Kun olet tehnyt toimenpiteet paina Analyze-painiketta.
Lisäosa tutkii onko valittu teema sopiva lapsiteeman luontiin ja tulostaa vastaukseksi analyysin tuloksen. Jos tuloksena on vihreää voimme aloittaa määrittelemään asennettavan lapsiteemamme asetuksia.
Kohdassa 4 nimetään lapsiteeman tiedostohakemisto. Asetus kannattaa jättää olemassa olevaan muotoon.
Kohdan 5 Voit valita luodaanko teemaan erillinen tyylitiedosto, johon teet omia CSS-muotoiluja vai lisäätkö muotoilut olemassa olevaan tyylitiedostoon. Käytännössä voit jättää tämän kohdan ennalleen.
Kohdassa 6 määritellään tyylititedoston käsittelytapoja ja oletuksena oleva tapa toimii parhaiten.
Kohdassa 7 on painike, jonka kautta voit itse määritellä eri parametrejä lapsiteeman määritteille. Voit esimerkiksi antaa nimen lapsiteemalle.
Kohta 8 Asettamalla ruksi tähän kohtaan voit tuoda perusteemasta olemassa olevat menuvalikot, vimpaimet ja muut mukautetut asetukset lapsiteemaan. Klikkaa siis tämä toiminto aktiiviseksi.
Kohdassa 9 aloitetaan uuden lapsiteeman luomisprosessin painamalla painiketta.
Paina Create New Child Theme -painiketta ja lisäosa luo uuden lapsiteeman. Lapsiteeman asentamisen jälkeen kannattaa aina tarkastella, jos lisäosan näkymässä tulee virheilmoituksia tai -huomautuksia. Responsive-teeman ollessa kyseessä lisäosa pyytää vielä ajamaan lapsiteeman configuroititoiminnon. Painike löytyy sivun alalaidasta. Kun olet painanut painiketta lapsiteema saa viimeiset asetukset kuntoon ja voit siirtyä eteenpäin.
Seuraavaksi voit ottaa lapsiteeman käyttöön Teemat-valikosta ja tarkastaa miltä sivut näyttävät.
Voit vilkaista myös lisäosan muita välilehtiä joista voit esimerkiksi määritellä teemalle esikatselukuvan ja tarkastella oman CSS-tyylitiedoston koodia, josta löytyvät miltei samat tiedot, kuin aiemmin manuaalisesti asetetussa versiossa.
Kun olet ottanut lapsiteeman käyttöön voit ottaa FTP-yhteyden palvelimelle ja navigoida lapsiteeman kansioon sekä tutkia millaisia tiedostoja se sisältää.
Child Theme Configurator on luonut lapsiteeman kansioon functions.php ja style.css tiedostot sekä screenshot.png kuvatiedoston, joka on kuva jota käytetään teeman tunnuskuvana ohjauspaneelin Teemat-osiossa. Voit tehdä kuvan tilalle oman tyylisen kuvan, jos haluat. On kuitenkin tarpeen muistaa, että kuva tulee olla saman kokoinen fyysisiltä mitoiltaan kuin oheinen kuva (1200x900px).
Lapsiteeman hyödyntäminen
Edellä huomattiin, että lapsiteeman kansiossa on vain kaksi tiedostoa, jotka molemmat toimivat siten, että WordPress lataa niiden sisältämän koodin perusteeman koodin jälkeen, joten ne yliajavat sivustolla perusteeman samanlaiset koodit.
Samalla logiikalla, jos halutaan muotoilla esimerkiksi sivun header-osaa, voidaan kopioida header.php tiedosto isäntäteeman kansiosta lapsiteeman kansioon käyttämällä lisäosan välilehteä Files. Tulevat muutokset tehdään kopioituun lapsiteeman header.php-tiedostoon. Näin ollen lapsiteeman header.php-tiedosto yliajaa perusteeman tiedoston koodauksen sivustolla sillä se ladataan sivun latausprosessissa isäntätiedoston jälkeen.
Voidaan kopioida siis mikä tahansa tiedosto lapsiteeman kansioon ja tehdä siihen muutoksia. Tulee kuitenkin muistaa, että tiedoston sijainti tulee vastata tarkalleen isäntätiedoston sijaintia lapsiteeman kansiossa, jotta se toimii.
Harjoitus
Siirretään seuraavaksi lapsiteemaan harjoitussivulle muokattava teeman tiedosto, jonka polku on partials/single/title.php. Etsi tiedostoista vastaava polku, valitse se aktiiviseksi klikkaamalla ja paina Copy Selected to Child Theme-painiketta.
Siirry seuraavaksi Ulkoasu/Teeman tiedostoeditori-toimintoon hallintapaneelissa ja huomaat, että se on ilmestynyt lapsiteeman tiedostoihin.
