programmer

Lapsiteeman tekeminen

Lapsiteema eli Child Theme

 

WordPress-verkkosivut voi tehdä täysin ilman omaa koodaamista, mutta joskus voi olla tarvetta muokata ulkoasua omalla koodilla mieleiseksi. Tällöin suosittelen tekemään Lapsiteeman. Jos lapsiteemaa ei ole tehtynä, ja olet koodannut ”isäntäteemaan” (alkuperäiseen), kaikki koodisi häviää seuraavan päivityksen myötä. Lapsiteema on kopio pääteemasta, mutta siinä ei ole kaikkia tiedostoja. Lapsiteemassa muokataan yleensä ulkoasua tyylitiedostossa (style.css) ja toiminnallisuutta functions.php tiedostossa. Ja varsin usein siellä onkin vain nämä 2 tiedostoa.

 

Miten Lapsiteema tehdään?

Ihan ensimmäisenä päivitä kaikki päivitykset ja ota varmuuskopio. Jos jotain menee pieleen, niin voit palauttaa varmuuskopion. Tarkasta myös, että sivusto toimii oikein päivitysten jälkeen.

Child-teeman tekeminen onnistuu WordPressin omalla lisäosalla, esimerkiksi: Child Theme configuration. Itse olen tasan kerran sitä käyttänyt. Ihan näppärä työkalu, jos ei halua ”koodata”, mutta en käy sitä tässä nyt läpi. Lisäosasta löytyy aika paljon ohjeita netistä. Voin tehdä siitä myöhemmin erillisen postauksen. Minulle Lapsiteeman tekeminen on opetettu WordPress-koulutuksessa ns. ”käsin” ja koen, että se on nopeampi ja helpompi tapa.

Ensinnäkin sinulla tulee olla pääsy palvelimella tiedoston hallintaan. Lapsiteema tehdään themes-kansioon. Löytyy polusta public_html –> wp-content –> themes.

kansiorakenne-childtheme

Themes-kansioon luodaan uusi kansio. Kansion voi periaatteessa nimetä ihan niin kuin haluaa, mutta yleisesti käytetty (ja suositeltu) tapa on nimetä teeman mukaan eli: teemannimi-child.

 

luo-childtheme-kansioTähän child-kansioon tehdään 2 tiedostoa: style.css ja functions.php.

 

luo-style-css

luo-functions-php

style.css tiedostoon on suositeltavaa laittaa teeman ja tekijän tietoja.

teema-tekija-tiedot

Tämän jälkeen joutuu vähän tekemään koodia toiseen tekemääsi tiedostoon eli functions.php. Tämän voi tehdä myös linkittämällä isäntäteeman tyylit style.css tiedostoon, esim. näin: @import url(“../generatepress/style.css”);

functions-php

Nyt Child-teema on tehty ja voit mennä WordPressiin aktivoimaan sen.

aktivoi-childtheme

Tarkasta samalla, että sivusto toimii oikein ja näyttää samalta kuin ennen. Nyt voit alkaa tekemään ulkoasumuutoksia Lapsiteeman style.css tiedostoon. Huomioi, että kaikki oma koodi ja muutokset tehdään Lapsiteemaan! Ja jos lisäät kansioita/tiedostoja lapsiteemaan, niin kansiorakenne täytyy olla sama kuin isäntäteemassa! Huom! KOPIOI tiedostot isäntäteemasta, ÄLÄ SIIRRÄ. Isäntäteemasta ei saa poistaa mitään!

 

Google Analytics – koodi

Google Analytics – seurannan voi lisätä useammalla eri tavalla. Itse lisään sen koodina header.php tiedostoon ja teen siis Lapsiteeman Google Analytics koodia varten, vaikka en muuta siihen koodaisikaan. Kopioin isäntäteemasta header.php tiedoston ja lisään Google Analytics koodin <head> tägien väliin.

google-analytics-koodi

 

Terkuin Miia 🙂

Share on facebook
Share on twitter
Share on linkedin