Miten tehdä lapsiteema (child theme) oikein WordPressissä

20.6.2025 | Artikkeleita, IT, Kotisivut, Nettisivut, Tietoturva, Verkkokauppa, Verkkokehitys, Verkkosivut, Verkkotyökalu, WordPress

Mikä on lapsiteema WordPressissä?Mikä on lapsiteema WordPressissä?

Lapsiteema (child theme) on WordPress-teeman mukautettu versio, joka perii ulkoasun ja toiminnallisuudet emoteemalta (parent theme). Tärkein syy käyttää lapsiteemaa on se, että voit tehdä muutoksia teemaan ilman että ne häviävät, kun emoteemaa päivitetään. Tämä mahdollistaa turvallisen teeman kehittämisen ja testaamisen ilman riskiä, että WordPress-päivitykset rikkovat sivuston ulkoasua tai toimintoja.

Miksi käyttää lapsiteemaa?

Lapsiteeman käyttö on suositeltavaa aina, kun:

  • Haluat muuttaa teemaan liittyviä CSS-tyylejä tai PHP-koodia

  • Tarvitset mukautettuja funktioita

  • Et halua menettää muutoksia teemapäivityksissä

  • Kehität asiakaskohtaisia ratkaisuja WordPressiin

Esimerkiksi suositut teemat kuten Astra, OceanWP, GeneratePress ja Divi tukevat täysin lapsiteemojen käyttöä.

Mitä lapsiteema tarvitsee toimiakseen?

Lapsiteema tarvitsee vähintään kaksi tiedostoa:

  1. style.css – teeman tiedot ja mahdolliset mukautetut tyylit

  2. functions.php – emoteeman tyylien lataus ja mahdolliset PHP-muutokset

Lisäksi voit lisätä tarvittaessa muita tiedostoja, kuten template-parts, JavaScript-tiedostoja, kuvia tai mukautettuja sivupohjia.

Lapsiteeman hakemistorakenne

Lapsiteema sijaitsee kansiossa wp-content/themes/oma-lapsiteema/, ja sen sisällä voi olla esimerkiksi seuraavat tiedostot:

pgsql
oma-lapsiteema/
├── style.css
├── functions.php
├── screenshot.png (valinnainen)
├── js/
├── css/
└── template-parts/

Vaiheittainen ohje: miten tehdä lapsiteema

1. Luo kansio lapsiteemalle

Mene wp-content/themes-kansioon ja luo uusi kansio. Nimeä se esim. twentytwentyfour-child, jos emoteema on twentytwentyfour.

2. Luo style.css-tiedosto

Avaa tekstieditori ja lisää seuraavat rivit:

css
/*
Theme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
Version: 1.0
Author: Sinun Nimesi
Description: Lapsiteema Twenty Twenty-Four -teemalle
*/

Tärkeää: Template-rivi täytyy vastata emoteeman kansion nimeä (ei teeman nimeä hallintapaneelissa).

3. Luo functions.php-tiedosto

Lisää seuraava koodi:

php
<?php
add_action('wp_enqueue_scripts', 'child_theme_styles');function child_theme_styles() {
// Lataa emoteeman tyylit
wp_enqueue_style(’parent-style’, get_template_directory_uri() . ’/style.css’);// Lataa lapsiteeman tyylit
wp_enqueue_style(’child-style’, get_stylesheet_uri(), array(’parent-style’));
}

Tällä varmistetaan, että sekä emoteeman että lapsiteeman tyylit latautuvat oikeassa järjestyksessä.

Lapsiteeman aktivointi

  1. Kirjaudu WordPressin hallintapaneeliin

  2. Mene kohtaan Ulkoasu > Teemat

  3. Etsi uusi lapsiteema ja klikkaa Aktivoi

Jos kaikki on tehty oikein, WordPress käyttää nyt lapsiteemaa emoteeman pohjalta.

Lapsiteeman mukauttaminen

Kun lapsiteema on aktivoitu, voit alkaa tehdä mukautuksia:

  • Lisää omaa CSS:ää style.css-tiedostoon

  • Luo oma functions.php tiedosto lisäfunktioita varten

  • Kopioi ja muokkaa emoteeman mallipohjatiedostoja (esim. header.php, page.php)

  • Luo omia template-parts-osioita ja mukautettuja sivupohjia

WordPress käyttää aina ensin lapsiteeman tiedostoja, ja jos niitä ei ole, se hakee emoteeman vastaavat tiedostot. Näin lapsiteema ”ylikirjoittaa” vain sen, mitä haluat muokata.

Yleisiä virheitä lapsiteeman kanssa

  • Väärä template-nimi: Template-rivin pitää vastata emoteeman kansion nimeä, ei näkyvää teemanimikettä.

  • style.css puuttuu tai virheellinen: Tiedoston alkuun tarvitaan teeman metatiedot.

  • Functions.php ei lataa tyylejä oikein: Käytä get_template_directory_uri() emoteemalle ja get_stylesheet_uri() lapsiteemalle.

  • Lapsiteema ei näy hallinnassa: Varmista, että molemmat tiedostot (style.css ja functions.php) ovat olemassa ja oikein kirjoitettu.

Esimerkki: Lapsiteema Divi-teemalle

Divi on yksi suosituimmista premium-teemoista. Divin lapsiteeman tekeminen on täysin mahdollista, ja jopa suositeltavaa, jos haluat tehdä pysyviä mukautuksia.

  1. Luo kansio divi-child

  2. style.css:

css
/*
Theme Name: Divi Child
Template: Divi
*/

  1. functions.php:

php
<?php
function divi_child_enqueue_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'divi_child_enqueue_styles');

Vaihtoehtoisia tapoja luoda lapsiteema

Jos et halua tehdä tiedostoja käsin, voit käyttää lisäosia kuten:

Nämä työkalut luovat lapsiteeman automaattisesti, mutta suosittelemme silti tarkistamaan koodin manuaalisesti.

Voiko lapsiteemaa käyttää myös Gutenberg-lohkojen kanssa?

Kyllä. Lapsiteeman functions.php-tiedostossa voit rekisteröidä uusia lohkoja, lohkotyylejä, ja jopa lisätä omaa JavaScriptiä, joka muuttaa Gutenberg-editorin toimintaa.

Esimerkiksi:

php
function my_custom_block_styles() {
wp_enqueue_style('my-editor-style', get_stylesheet_directory_uri() . '/editor-style.css');
}
add_action('enqueue_block_editor_assets', 'my_custom_block_styles');

Lapsiteema ja WooCommerce

Jos kehität WooCommerce-verkkokauppaa, lapsiteema on erinomainen ratkaisu:

  • Muokkaa tuotesivujen rakennetta

  • Lisää uusia WooCommerce-hookkeja

  • Tyylittele ostoskori ja kassasivu uudelleen

WooCommercen tiedostoja voi kopioida woocommerce/-kansioon lapsiteemassa, jolloin voit mukauttaa näkymiä turvallisesti.

Yhteenveto

Lapsiteeman käyttö WordPressissä on fiksu ja turvallinen tapa tehdä räätälöityjä muutoksia ilman, että päivitykset rikkovat sivustoa. Sen tekeminen on helppoa, kun muistaa luoda kaksi tärkeintä tiedostoa oikein (style.css ja functions.php) ja ladata tyylit oikeassa järjestyksessä. Käyttämällä lapsiteemaa voit muokata teemaa vapaasti, ilman pelkoa siitä, että työsi katoaa.

Samankaltaisia artikkeleita: