WordPressiin on saatavilla tuhansia ilmaisia ja maksullisia teemoja. Kattavasta tarjonnasta huolimatta monesti teemoihin halutaan tehdä omia muutoksia. Teemoja voi muokata monella tapaa, mutta jos muokkauksen tekee väärin, se voi aiheuttaa jatkossa turhaa päänvaivaa. Omien muutoksien tekeminen teemoihin kannattaa tehdä lapsiteeman kautta. Tällä kertaa käymme läpi, miten lapsiteeman voi luoda ja mitä etuja siitä on.

Mitä hyötyä lapsiteemasta on?

Jos asentaa teeman ja tekee sen koodiin suoraan muutoksia, kaikki muutokset menettää, jos teema päivitetään uudempaan versioon jossakin kohtaa. Jos omat räätälöinnit tekee lapsiteemaan, tällöin isäntäteeman päivitys ei kadota muutoksia. Tämä on lapsiteeman suurin hyöty. Isäntäteeman pystyy siis helposti pitämään ajan tasalla ja samalla lapsiteemassa voi käyttää isäntäteeman uusimpia ominaisuuksia.

Lapsiteemaa käyttämällä kaikki omat räätälöinnit ovat myös yhdessä paikassa helposti löydettävissä. Jos muutokset tekee muokkaamalla alkuperäistä teemaa, ne hukkuvat nopeasti muun koodin sekaan.

Milloin on järkevää tehdä lapsiteema?

Lapsiteemaa ei tarvitse aina tehdä. Jos käytät jotakin valmisteemaa ja saat kaikki tarvittavat asiat säädettyä suoraan WordPressin ylläpidosta, tällöin lapsiteeman teko on yleensä turhaa. Jos sinun tarvitsee tehdä muutoksia koodillisesti, tällöin lapsiteeman käyttö on erittäin suositeltavaa.

Kuinka tehdä lapsiteema?

Lapsiteeman teko on yksinkertaista. Tässä artikkelissa teemme lapsiteeman Twenty Fourteen -teemalle.

Ensin lapsiteemaa varten pitää luoda oma kansio wp-content/themes -hakemistoon. Hakemiston nimen voi määrittää itse, mutta hyvä tapa on laittaa nimeksi isäntäteeman nimi ja perään -child. Esimerkiksi siis twentyfourteen-child.

lapsiteeman-rakenne

Teemassa pitää olla style.css -tiedosto. Tyylitiedoston alussa pitää määrittää vähintään lapsiteeman nimi ja isäntäteeman hakemisto. Teeman nimen voi määrittää itse. Nimi näytetään ylläpidon teemalistauksessa. Templaten arvoksi tulee laittaa isäntäteeman hakemiston nimi.  Yleensä lapsiteemaan halutaan isäntäteeman tyylimääritteet mukaan. Tyylit voi ladata CSS:n @import-määritteellä.

[gist id=”8268368″]

Tämän jälkeen lapsiteeman voi ottaa käyttöön ylläpidossa. Sivusto näyttää teeman käyttöönoton jälkeen ihan samalta kuin oletus Twenty Fourteen -teema. Nyt kuitenkin voimme tehdä teemaan muokkauksia menettämättä niitä, kun Twenty Fourteen päivittyy.

Jo tehtyyn tyylitiedostoon voi lisätä omat tyylimuokkaukset tarpeen mukaan. Jos haluaa esimerkiksi vaihtaa artikkelien ja sivujen otsikoiden fonttikokoa, tiedostoon voi tehdä seuraavan muutoksen.

[gist id=”8268379″]

Kuinka muokata muutakin kuin tyylejä?

Isäntäteemaan on aina määritetty erilaisia sivupohjia. Näitä pohjia voi räätälöidä lapsiteemassa kopioimalla halutut pohjat lapsiteemaan ja sitten tekemällä niihin muutoksia. Sivupohjat tarkastetaan siis ensin lapsiteemasta ja sitten isäntäteemasta. Jos sivupohja löytyy lapsiteemasta sitä käytetään, muussa tapauksessa sivupohja ladataan isäntäteemasta.

Voimme esimerkiksi muokata Twenty Fourteen -teeman alatunnistetta kopioimalla isäntäteeman hakemistosta tiedoston footer.php ja tekemällä siihen omia muutoksia.

Alla esimerkiksi muokattu footer.php, johon on laitettu WP-Oppaan copyright merkintä.

[gist id=”8268388″]

lapsiteema-alatunniste

functions.php

Teemaan on mahdollista lisätä functions.php-tiedosto, joka käyttäytyy eri tavalla kuin sivupohjat. Isäntäteemassa on myös yleensä functions.php-tiedosto, mutta tätä tiedostoa ei voi ylikirjoittaa samalla tavalla kuin sivupohjia. Jos sekä isäntä-, että lapsiteemassa on functions.php-tiedosto, tällöin ne molemmat ladataan (lapsiteeman functions.php ladataan ensin). Functions.php-tiedostoon voi lisätä kaikenlaista PHP-koodia, joka muokkaa sivuston logiikkaa. Toiminnallisuuksien muokkaus tapahtuu käyttäen esimerkiksi WordPressin koukkuja.

Kirjoittaja Niko Vittaniemi

Hei, Olen Niko Vittaniemi. Olen WP-oppaan ylläpitäjä, WPWoofin perustaja ja puuhamies täällä valoisassa nörttiluolassa Keminmaassa. Myyntivetoiset WordPress ja WooCommerce sivustot ovat lähellä sydäntäni Jos koet, että voin auttaa sinua, yhteystietoni löydät kotisivuiltani.

Keskustele ja kysy

  • Elisa sanoo:

    Ohjeen kpl:sta ’Milloin on järkevää tehdä lapsiteema? kysymys: Jos teema antaa mahdollisuuden vaihtaa esim. valikon fontin Wordpressin ohjausnäkymän teeman työkaluissa, niin kumoaako teeman päivitys senkin ja tarvitaan lapsiteema? Toinen: Jos teemaan voi asentaa Page Builder Pluginin, niin silloin kai lapsiteeman teko on välttämätön? Uskalluksen puutetta lähteä tekemään… Jos pelkillä tyylimuutoksilla lapsiteemaan selviää, niin uskallan. Siinä vaiheessa jos tarvitaan php-koodia, osaaminen loppuu.

    • Timo Leiniö sanoo:

      Ylläpidossa olevat asetukset eivät päivitysten yhteydessä yleensä katoa. Joskus olen törmännyt joiden asetusten katoamiseen silloin kun teemasta on tullut iso päivitys esim. versiosta 2 versioon 3. Jos Page Builder tulee teeman mukana niin silloinkaan ei välttämättä lapsiteema ole pakollinen. Keskimäärin kuitenkin sanoisin, että jos tiedostat että joskus saattaa olla tarve tehdä isompia tyylimuokkauksia, lapsiteema kannattaa tehdä heti, sillä se on helpompaa silloin kun teeman ottaa käyttöön ensimmäisen kerran.

  • Simo P. sanoo:

    Olen vasta aloittelija WordPress teeman muokkaamisesta ”lapsiteemana”. Voiko tuon ” ”Proudly powered ……….WordPress” (”Voimanlähteenä WordPress” ) poistaa tai vaihtaa haluamakseen .Siis ensin kopioida koko ” footer.php” tuohon itse tehtyyn css tyylitiedoston sisään) Onko tuosta ohjetta(tai videota ) suomeksi?

    Jossain palstoilla joku kirjoitti ”copyright” tietojen muuntamisen kiellosta, mutta miten tuon footerFooter / Alatunniste Footer eli alatunniste on sivustollasi ja verkkokaupassa sijaitsevin kaikkein alimmaisin alue. Kyseisellä alueella useasti näet esim. Tietoja meistä, jokinlaista linkkilistausta sivuston sisältöön ja mahdollisesti jopa uutiskirjeen tilausta. tekstin kanssa, jos sen ”php” tiedoston ensin kokonaisena kopioi lapsiteeman itse tehdyn css tiedoston sisään

    • Timo Leiniö sanoo:

      Proudly tekstin voi kyllä poistaa. Se miten sisältöä kannattaa muokata riippuu hyvin pitkälti siitä miten isäntäteema on tehty. Jos tekstin pystyy muuttamaan koukulla tai filtterillä (lue lisää http://codex.wordpress.org/Plugin_API) kannattaa käyttää niitä. Jos ei onnistu niin sitten kopioi koko footer.php tiedosto lapsiteemaan ja tee siihen muutokset.

      Suomenkielistä ohjetta tähän ei valitettavasti löydy ainakaan WP-Oppaasta.

  • Petri Virta sanoo:

    Kiitos Timo kaikin puolin mahtavasta opasblogista. Esimerkiksi juuri tämä lapsiteema juttu oli varsin hyödyllinen!

    Eräässä käyttämässäni teemassa on pitkä liuta tyylitiedostoja, joista loput on sijoitettu alakansioon (assets/stylesheets/). Minulla on ollut ongelmia saada näissä tiedostoissa sijaitsevia määrityksiä määriteltyä uudelleen tuolla lapsiteeman style.css:llä. Oletko törmännyt itse vastaavanlaiseen ongelmaan?

    • Timo Leiniö sanoo:

      Hyvä että artikkeleista on hyötyä!

      Muissa kansioissa olevia tyylitiedostoja pitäisi pystyä importaamaan ihan samalla tavalla kuin tuossa ylläolevassa esimerkissä on eli

      @import url(”../twentyfourteen/style.css”);

      Url-osoite pitää vain asettaa oikein. Se voisi tällaisessa tapauksessa olla esim. jotain seuraavanlaista

      @import url(”../teemannimi/assets/stylesheets/tiedostonnimi.css”);

  • samikeijonen sanoo:

    Monesti tosiaan pelkkä style.css tiedosto lapsiteemaan (tai alateemaan) riittää. Jos joskus jostakin syystä on tarvetta functions.php tiedoston käyttöön, niin tässä lisälukemista. http://justintadlock.com/archives/2010/12/30/wordpress-theme-function-files

    Samalla kannattaa lukea kaikki muutkin ohjeet kyseiseltä sivulta.

  • Ville Polvela sanoo:

    Saatavilla on myös ilmainen lisäosa nimeltä One Click Child Theme, joka tekee lapsiteeman WP:n hallinnassa yhdellä klikkauksella ja luo uuden tyylitiedoston.

    • Timo Leiniö sanoo:

      Niinhän noita lisäosia nykyään löytyy joka lähtöön :) Kyseinen lisäosa on aika vanha, ilmeisesti kuitenkin toimii edelleen? Itse en tuota ole käyttänyt.

Lisää uusi kommentti

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *