Lapsiteeman tekeminen

Moduuli 5: Teemat ja lisäosat · Lukuaika: 9 minuuttia

Oppimistavoite: Tämän oppitunnin jälkeen osaat tehdä lapsiteeman ja tiedät, milloin sitä tarvitaan ja milloin ei.

Keskeiset käsitteet: lapsiteema (child theme), vanhempiteema (parent theme), Template: style.css:ssä, functions.php, wp_enqueue_style, sivupohjan ylikirjoittaminen, theme.json lapsiteemassa, Create Block Theme

Ongelma, jonka lapsiteema ratkaisee

Oletetaan, että haluat muuttaa perinteisen teemasi otsikkoaluetta hieman, ja muokkaat sitä varten tiedostoa header.php teemakansiossa. Se toimii. Kolme viikkoa myöhemmin teemalle tulee päivitys, jonka annat asentua automaattisesti (niin kuin kuuluukin, oppitunti 7.2). Päivitys korvaa kaikki teeman tiedostot, ja muutoksesi katoaa.

Lapsiteema (child theme) on pieni teema, joka sanoo: "käytä kaikkea siitä toisesta teemasta (vanhempiteema, parent theme), paitsi sitä mitä minulla itselläni on." Omat muutoksesi laitat lapsiteemaan. Vanhempiteemaa jatkat vain päivittämistä, ja muutoksesi säilyvät.

Milloin kyllä ja milloin ei

Tarvitset lapsiteeman, jos haluat muokata tai täydentää teeman tiedostoja:

• haluat muuttaa sivupohjaa (perinteisessä teemassa PHP-tiedosto, lohkoteemassa HTML-sivupohja);
• haluat omaa CSS:ää, joka on liian suuri Oma CSS -kenttään;
• haluat omaa PHP-koodia, joka liittyy ulkoasuun (ylimääräinen kuvakoko, ylimääräinen valikkosijainti).

Et tarvitse lapsiteemaa, jos:

• muokkaat lohkoteemaa Sivustoeditorissa: nuo muutokset ovat tietokannassa ja säilyvät päivityksen yli (oppitunti 5.1);
• lisäät vain vähän CSS:ää kohdassa Oma CSS (perinteisessä teemassa Mukauttimessa, tai lohkoteemassa Tyyleissä Sivustoeditorissa);
• haluat lisätä toiminnon, joka ei liity mitenkään ulkoasuun (lomake, integraatio). Se kuuluu lisäosaan, jotta se säilyy teeman vaihdon yli.

Lapsiteema perinteiselle teemalle

Lapsiteema on kansio polussa wp-content/themes/, jossa on vähintään yksi tiedosto: style.css. Oletetaan, että vanhempiteemasi on kansiossa wp-content/themes/hoofdthema/. Tee silloin kansio wp-content/themes/hoofdthema-child/, johon tulee tämä style.css:

/*
Theme Name:   Hoofdthema Child
Template:     hoofdthema
Description:  Omat muokkaukset sivustolle example.com
Version:      1.0.0
Text Domain:  hoofdthema-child
*/

/* Oma CSS tulee tähän alle. */
.site-header { border-bottom: 3px solid #e8a33d; }

Tärkein rivi on Template:. Siinä on vanhempiteeman kansion nimi (ei se nimi, jonka näet hallinnassa). Jos se ei täsmää tarkalleen (isot kirjaimet, väliviivat), WordPress ilmoittaa kohdassa Ulkoasu > Teemat, että vanhempiteema puuttuu.

Lisäksi teet tiedoston functions.php tyylitiedostojen lataamista varten. Siisti tapa tehdä se:

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'hoofdthema-child',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );
} );

Lataako vanhempiteema oman tyylitiedostonsa itse, vaihtelee teemasta riippuen. Katso vanhempiteemasi dokumentaatiosta; jotkin pyytävät sinua lataamaan lapsiteemassa myös vanhemman tyylitiedoston komennolla get_template_directory_uri() . '/style.css'. Jos sivustosi näyttää aktivoinnin jälkeen muotoilemattomalta, vanhemman tyylitiedostoa ei ladata.

Jos haluat muokata sivupohjaa, kopioi se yksi tiedosto (esimerkiksi header.php) vanhemmalta lapseesi ja muokkaa kopiota. WordPress katsoo ensin lapsesta, sitten vanhemmasta. Älä kopioi kaikkia tiedostoja: silloin et enää saa vanhemman parannuksia.

Lapsen functions.php ei korvaa vanhemman vastaavaa, vaan se ladataan ennen sitä. Molemmat suoritetaan.

Lapsiteema lohkoteemalle

Lohkoteemassa se toimii samalla tavalla, lohkotiedostoilla:

• style.css samalla otsikolla ja Template:-rivillä;
• mahdollisesti oma theme.json: se yhdistetään vanhemman tiedoston kanssa, joten laitat siihen vain sen mitä haluat muuttaa (esimerkiksi värivalikoiman);
• mahdollisesti sivupohjat kansioissa templates/ ja parts/, jotka korvaavat vanhemman vastaavat.

functions.php ei lohkoteemassa usein ole tarpeen, koska WordPress lataa tyylit theme.json-tiedostosta itse.

On olemassa virallinen lisäosa, Create Block Theme, joka tekee Sivustoeditorista lapsiteeman puolestasi, mukaan lukien tietokannassa olevat muutoksesi. Kätevä, jos olet muokannut lohkoteemaa ja haluat tallentaa muutokset tiedostoihin (esimerkiksi vietäväksi toiselle sivustolle).

Näin otat sen käyttöön sivustollasi

1. Tee kansio ja tiedostot omalla tietokoneellasi ja tarkista vanhempiteeman kansio.
2. Lataa kansio hakemistoon wp-content/themes/ File Managerilla tai SFTP:llä. Tai pakkaa kansio zip-tiedostoksi ja lataa se kohdassa Ulkoasu > Teemat > Uusi teema > Lataa teema.
3. Siirry kohtaan Ulkoasu > Teemat. Lapsiteemasi on listassa. Aktivoi se.
4. Tarkista sivustosi: valikot ja vimpaimet saattavat vaatia uudelleenkytkentää lapsiteemaan vaihdettaessa; Mukauttimen asetukset ovat teemakohtaisia, joten aseta ne uudelleen tai vie ne lisäosalla.
5. Vanhempiteeman on pysyttävä asennettuna. Älä poista sitä; lapsi ei toimi ilman sitä.

Tee tämä mieluiten ensin testiympäristössä (staging) (oppitunti 8.3), sillä teeman vaihto vilkkaalla live-sivustolla voi hetkeksi sotkea asioita.

Yhteenveto

• Lapsiteema säilyttää teematiedostoihin tehdyt muutoksesi vanhempiteeman ulkopuolella, jotta päivitykset eivät ylikirjoita niitä.
• Et tarvitse sitä Sivustoeditorin muutoksiin tai vähäiseen Oma CSS -käyttöön; toiminnot kuuluvat lisäosaan.
• Minimissään: kansio, jossa on style.css ja jossa Template: osoittaa tarkalleen vanhempiteeman kansioon.
• Kopioi vain ne sivupohjat, joita todella muokkaat; lapsen functions.php tulee vanhemman rinnalle.
• Vanhempiteema pysyy asennettuna ja sitä jatketaan päivittämään.

Tietovisa

Tehtävä

Tehtävä A5.2: Lapsiteemasi tarkistaminen. Tee lapsiteema teemallesi testisivustollasi tai testiympäristössä (staging) (oppitunti 8.3), ja aktivoi se. Täytä sivuston osoite ja lapsiteeman kansion nimi. Ohjelma hakee tiedoston wp-content/themes/<kansio>/style.css ja tarkistaa: tiedosto on olemassa, siinä on Theme Name: ja Template:, vanhemman style.css on olemassa siinä kansiossa, ja etusivu viittaa lapsiteemaan (se on siis aktiivinen).

Tehtävä D5.2: Mitä muokkasit ja miksi? Kirjaa, mitä tiedostoja lapsiteemassasi on, mitä muokkasit kussakin tiedostossa ja miksi se ei onnistunut Sivustoeditorissa, Oma CSS:ssä tai lisäosassa. Varmista, että vanhempiteema on edelleen asennettuna ja sillä on automaattiset päivitykset käytössä.

Lue lisää

Nämä artikkelit kuvaavat vaiheet WebOkén paneeleissa; muissa paneeleissa toiminta on vastaavaa.

• DirectAdmin-ohje 11.1: Tiedostonhallinnan (File Manager) avaaminen: paketin kansiot
• DirectAdmin-ohje 11.2: Tiedostojen lataaminen ja lataaminen koneelle
• DirectAdmin-ohje 11.7: Yhdistäminen FileZillalla (FTP, FTPS ja SFTP)
• Child themes (developer.wordpress.org, englanniksi): https://developer.wordpress.org/themes/advanced-topics/child-themes/