tavis nörttimaailmassa

EksisONE - artikkeleita ja ohjeita nörttimaailmasta

WordPress ja lapsiteema (child theme)

WordPressissä on yksi vakava puute. Se on teemojen muokkaaminen niin, että muutokset säilyisivät. Jos muokkaat mitä tahansa teeman php-tiedostoa, niin jokainen päivitys jyrää muutoksen. Siihen on olemassa yksi ratkaisu ja se on lapsiteeman käyttö. Siinäkin on omat heikkoutensa, mutta muutakaan ei ole.

Lapsiteema on eräällä tavalla kopio varsinaisesta teemasta; oikeammin vain muutetulta osilta. Kun kävijä saapuu sivuille, niin WordPress katsoo ensin lapsiteemasta löytyykö sieltä tarvittava (eli se muutettu) ja jos ei, niin jatketaan varsinaisen teeman kanssa.

Kun teema päivitetään, niin lapsiteemaan ei kosketa. Silloin php-tiedostoihin (tai tyylitiedostoon) tehdyt muutokset säilyvät. Ongelmaa ei ole, jos teemantekijä ei ole päättänyt muokata, kehittää tai muuttaa juuri sitä php-tiedostoa, jossa sinulla on muutokset. WordPresshän ei käytä alkuperäisestä teemasta niitä osia, jotka löytyvät lapsiteemasta.

Muokkasin kevyesti käyttämääni Kallyas-teemaa. Kallyas laittaa avainsanat eli tagit jutun loppuun ja halusin ne alkuun, jossa on muutkin metatiedot. Ilman lapsiteemaa olisin joutunut tekemään muokkaukset joka kerta päivityksen jälkeen, mutta lapsiteeman kanssa sitä vaivaa ei ollut.

Kallyas muokkaa myös muutamia Woocommerceen liittyviä pohjia, eli siltä osin se on kuin Woocommercen lapsiteema. Minä tein muutaman muokkauksen lisää ja muokatut php-tiedostot siirtyivät Kallyaksen lapsiteemaan. Nyt omat muutokset säilyivät, vaikka Woocommerce tai Kallyas päivittyisivätkin.

Kaikki oli hyvin. Paitsi, että yhden päivityksen jälkeen kaikki hajosi. Kesti jonkun aikaa oivaltaa, että ongelma oli Kallyaksen ytimessä. Rakennetta oli muutettu ja juurikin minun muokkaamani ja lapsiteemassa olevat tiedostot eivät enää toimineetkaan.

Toki tuosta selvisi rakentamalla muokkaukset Kallyasin uusin tiedostoihin ja siirtämällä ne lapsiteemaan, mutta ongelman löytäminen ja korjaaminen veivät turhaa aikaa ja vaivaa. Nimittäin selvittäminen etukäteen, että mitä kaikkia tyylin php-tiedostoja päivitys koskee, ei olekaan mikään läpihuutojuttu.

Fiksut ja viitseliäiset käyttävät testiversiota. Erittäin suositeltava ja kaunis ajatus. Joskus jopa maksetut premium-teemat ja -lisäosat toimivat stage-sivustolla, mutta eivät läheskään aina. Joten testaaminen ilman, että joutuu maksamaan tyylin/lisäosan tekijälle ekstraa, on turhan usein pelkkää unelmaa. Siksi niin monet, minä mukaanlukien, eivät sitä tee.

Mutta kuten sanottua, niin muutakaan vaihtoehtoa ei ole, joten lapsiteemoja on käytettävä.

Lapsiteeman tekeminen

Useimmissa (kaikissa?) premium-teemoissa on joko sisäänrakennettuna tai valinnaisena lapsiteema. Jos on, niin kytke se käyttöön.

Sinulla on silloin teemoissa näkyvissä ”originaali”teema, sekä lapsiteema. Otat normaalisti lapsiteeman käyttöön ja homma on siltä osin valmis. Valmis kylläkin tarkoittaa vain sitä, että sinulla on erillinen functions.php ja CSS- eli tyylitiedosto, jotka ovat muokattavissa ilman pelkoa päivityksistä.

Jos käyttämäsi teema ei lapsiteemaa tarjoa, niin sinulla on kolme vaihtoehtoa:

  • asenna lisäosa, joka tekee lapsiteeman sinulle; niitä on useita ja Child Theme Configurator (Lilaea Media) lienee eniten asennettu
  • teet lapsiteeman itse, joka on sinällään melkoisen triviaali temppu
  • jos sinulla ei ole tarvetta muokata teeman php-tiedostoja ja ainoa tarve on functions.php ja CSS-tiedoston muokkaus, niin et tarvitse lapsiteemaa; Code Snippets hoitaa asian paljon paremmin

Tee-se-itse

Joudut tekemään ainakin yhden hakemiston ja kaksi tiedostoa, joten tarvitset jonkun tavan päästä sivustosi tiedostoihin käsiksi. Voit käyttää cPanelia, FTP:tä tai shelliä, mitä sitten haluatkaan.

Luo themes hakemistoon lapsiteeman hakemisto. Voit nimetä sen miten haluat, mutta lähes standardiksi on noussut <teeman nimi>-child. Kallyaksen tapauksessa se olisi kallyas-child.

Luo lapsiteeman hakemistoon tiedosto style.css. Avaa ja lisää sinne tämä:

/*
Theme Name: <teema> Child
Template: <teema>
Text-Domain: <teema>-child
*/
  • Theme Name voi olla mikä vain, se näkyy WordPressissä teemojen hallinnassa teeman nimenä.
  • Template kertoo mihin teemaan lapsiteema kohdistuu; sen täytyy olla originaalin teeman hakemistonimi.
  • Text-Domain helpottaa käännösten tekemistä ja laita siihen lapsiteeman hakemistonimi.

Luo lapsiteeman hakemistoon tiedosto functions.php. Avaa ja lisää sinne tämä:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);

function enqueue_child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>

Se ottaa varsinaisen teeman (kutsuu sitä sitten originaaliksi, isäntäteemaksi tai miksi tahansa) tyylitiedoston käyttöön. Jos sinulta puuttuu lapsiteeman aktivoinnin jälkeen mm. ulkonäkö kokonaan, niin olet luultavasti kirjoittanut tiedostoon style.css kohdan Template väärin.

Älä kopioi varsinaisen teeman functions.php tiedostoa. Tähän on tarkoitus laittaa ainoastaan lisättävät ja muutetut asiat. Kaikessa muussa WordPress käyttää varsinaisen teeman php-tiedostoja, myös functions.php -tiedostoa.

Aktivoi lapsiteema. Kirjaudu normaalisti WordPressin hallintaan ja ota lapsiteema käyttöön normaalisti menemällä Ulkoasu > Teemat.

Lapsiteeman muokkaus

Koska teemaa muokataan lapsiteemassa, ei alkuperäisessä, eikä lapsiteemassa ole kuin tiedostot functios.php ja style.css, niin muokattavat tiedostot kopioidaan lapsiteemaan.

Oleellista on, että teemassa ja lapsiteemassa on samanlainen hakemistorakenne.

Kun halusin Kallyaksessa tagien näkyvän alussa muun metatiedon kanssa, ja muutin hieman layoutia noiden suhteen, niin jouduin muokkaamaan tiedostoja:

  • components/blog/default-single-modern/single-details.php
  • components/blog/default-single-modern/single-details-date.php
  • components/blog/default-single-modern/single-main.php
  • components/blog/default-single-common/single-tags.php
  • components/blog/default-single-modern/single-details-author.php
  • components/blog/default-single-modern/single-content.php

Nuo kaikki oli kopioitava lapsiteemaan ja täsmälleen samalla hakemistorakenteella. Ja tässä näkyy hyvin lapsiteeman ongelma. Jos/kun Kallyas muuttaa tapaa esittää artikkelit, niin muutos ei näy sivustolla, koska teemapäivitys ei koske lapsiteemaa ja lapsiteeman takia muutuneita asioita ei oteta käyttöön. Ja jos muutos oli tarpeeksi radikaali, niin asioita menee rikki.

Aidosti noin ei kovinkaan usein tapahdu ja koskee enemmälti tuoreita tyylejä malliin versio 1.0.

Vinkkinä: kun muokkaat teemaa, niin kirjaa aina ylös mitä olet muuttanut, mistä tiedostosta ja mistä se tiedosto löytyy. Helpottaa huomattavasti asioiden fiksaamista, kun kolmen vuoden päästä jokin menee taatusti rikki – minä en ainakaan muista mitä olen tehnyt ja minne.

Minusta hyvä politiikka on:

  • teeman php-muutokset tehdään aina lapsiteemaan
  • functions.php -tiedoston lisäykset tehdään aina Code Snippets lisäosaan; silloin ne säilyvät, vaikka teema vaihtuisi
  • tyyliin tehtävät CSS-muutokset tehdään lapsiteemaan (tai teeman asetuksissa) silloin kun ne koskevat nimenomaan juuri sitä nimenomaista teemaa; muutoin ne laitetaan Code Snippets lisäosaan