Alamteema (child theme) loomine

Moodul 5: Teemad ja pluginad · Lugemisaeg: 9 minutit

Õpieesmärk: pärast seda õppetundi oskad luua alamteema (child theme) ja tead, millal seda vaja on ja millal mitte.

Põhimõisted: alamteema (child theme), ülemteema (parent), Template: failis style.css, functions.php, wp_enqueue_style, malli ülekirjutamine, theme.json alamteemas, Create Block Theme

Probleem, mille alamteema lahendab

Oletame, et soovid oma klassikalise teema päist veidi muuta ja muudad selleks faili header.php teemakaustas. See töötab. Kolm nädalat hiljem ilmub teemale uuendus, mis paigaldub automaatselt (nagu peab, vt õppetund 7.2). Uuendus asendab kõik teema failid ja sinu muudatus kaob.

Alamteema (child theme) on väike teema, mis ütleb: „kasuta kõike selle teise teema (ülemteema ehk parent) juurest, välja arvatud see, mis mul endal on.“ Oma muudatused paned alamteemasse. Ülemteemat uuendad jätkuvalt tavapäraselt ja su muudatused jäävad alles.

Millal vaja ja millal mitte

Alamteema on vajalik, kui soovid muuta või täiendada teema faile:

• soovid muuta malli (klassikalise teema puhul PHP-fail, plokiteema puhul HTML-mall);
• soovid lisada oma CSS-i, mis on liiga mahukas CSS-i väljale;
• soovid lisada oma PHP-koodi, mis on seotud kujundusega (lisapildiformaat, lisamenüükoht).

Alamteemat ei ole vaja, kui:

• muudad plokiteemat saidiredaktoris: need muudatused salvestuvad andmebaasi ja jäävad alles ka pärast uuendust (õppetund 5.1);
• lisad ainult natuke CSS-i välja Täiendav CSS kaudu (klassikalise teema puhul kohandajas (Customizer) või plokiteema puhul saidiredaktori Stiilide juures);
• soovid lisada funktsiooni, millel pole kujundusega mingit pistmist (vorm, lõiming). See kuulub pluginasse, et see jääks alles ka teemavahetuse korral.

Alamteema klassikalisele teemale

Alamteema on kaust kaustas wp-content/themes/, milles on vähemalt üks fail: style.css. Oletame, et su ülemteema asub kaustas wp-content/themes/hoofdthema/. Loo siis kaust wp-content/themes/hoofdthema-child/, kus on selline style.css:

/*
Theme Name:   Hoofdthema Child
Template:     hoofdthema
Description:  Oma kohandused example.com jaoks
Version:      1.0.0
Text Domain:  hoofdthema-child
*/

/* Sinu enda CSS tuleb allpool. */
.site-header { border-bottom: 3px solid #e8a33d; }

Kõige tähtsam rida on Template:. Sinna tuleb ülemteema kausta nimi (mitte nimi, mida näed haldusliideses). Kui see pole täpselt õige (suurtähed, sidekriipsud), teatab WordPress lehel Välimus > Teemad, et ülemteema puudub.

Lisaks loo functions.php, et laadida stiilifailid. Korrektne viis:

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

See, kas ülemteema laadib ise oma stiilifaili, sõltub teemast. Vaata oma ülemteema dokumentatsiooni; mõned paluvad alamteemas laadida ka ülemteema stiilifail koodiga get_template_directory_uri() . '/style.css'. Kui su sait on pärast aktiveerimist ilma kujunduseta, siis ülemteema stiilifaili ei laadita.

Kui soovid muuta malli, kopeeri see üks fail (näiteks header.php) ülemteemast oma alamteemasse ja muuda koopiat. WordPress vaatab kõigepealt alamteemast, siis ülemteemast. Ära kopeeri kõiki faile: siis ei saa sa enam ülemteema parandusi.

Alamteema fail functions.php ei asenda ülemteema oma, vaid laetakse sellest varem. Mõlemad käivitatakse.

Alamteema plokiteemale

Plokiteema puhul töötab see samamoodi, plokifailidega:

• style.css sama päisega ja väljaga Template:;
• võimalik oma theme.json: see ühendatakse ülemteema omaga, nii et pane sinna ainult see, mida soovid muuta (näiteks värvipalett);
• võimalikud mallid kaustades templates/ ja parts/, mis asendavad ülemteema omi.

Plokiteema puhul ei ole functions.php sageli vaja, sest WordPress laadib stiilid ise failist theme.json.

On olemas ametlik plugin Create Block Theme, mis loob saidiredaktorist alamteema, sealhulgas sinu andmebaasis tehtud muudatused. Kasulik, kui oled plokiteemat muutnud ja soovid need muudatused failidesse jäädvustada (näiteks et need teisele saidile kaasa võtta).

Nii paigaldad selle oma saidile

1. Loo kaust ja failid oma arvutis ning kontrolli ülemteema kausta nime.
2. Laadi kaust üles kataloogi wp-content/themes/, kasutades File Manager või SFTP kaudu. Või pakenda kaust zip-failiks ja laadi see üles lehel Välimus > Teemad > Uus teema > Laadi teema üles.
3. Mine lehele Välimus > Teemad. Sinu alamteema on nimekirjas olemas. Aktiveeri see.
4. Kontrolli oma saiti: menüüd ja vidinad võib olla vaja alamteemale üleminekul uuesti siduda; kohandaja (Customizer) seaded kehtivad teema kaupa, nii et pead need uuesti sisestama või ekspordid need pluginaga.
5. Ülemteema peab alles jääma. Ära kustuta seda; alamteema ei tööta ilma selleta.

Tee seda eelistatult esmalt testkeskkonnas (staging) (õppetund 8.3), sest teemavahetus elaval saidil, kus on palju liiklust, võib ajutiselt segadust tekitada.

Kokkuvõte

• Alamteema hoiab sinu teemafailide muudatused ülemteemast eraldi, nii et uuendused neid üle ei kirjuta.
• Seda pole vaja muudatustele saidiredaktoris ega natukesele Täiendavale CSS-ile; funktsioonid kuuluvad pluginasse.
• Minimaalne: kaust failiga style.css, kus Template: osutab täpselt ülemteema kaustale.
• Kopeeri ainult need mallid, mida tegelikult muudad; alamteema functions.php lisandub ülemteema omale.
• Ülemteema jääb alles ja jätkab uuendamist.

Test (quiz)

Ülesanne

Ülesanne A5.2: Sinu alamteema kontrollimine. Loo oma teemale alamteema testkeskkonnas või staging-is (õppetund 8.3) ja aktiveeri see. Sisesta saidi aadress ja alamteema kausta nimi. Programm pärib faili wp-content/themes/<kaust>/style.css ja kontrollib: fail on olemas, selles on väljad Theme Name: ja Template:, selles kaustas viidatud ülemteema style.css on samuti olemas ning avaleht viitab alamteemale (see on seega aktiivne).

Ülesanne D5.2: Mida muutsid ja miks? Kirjuta üles, millised failid su alamteemas on, mida igas failis muutsid ja miks seda ei saanud teha saidiredaktoris, Täiendava CSS-iga ega pluginaga. Märgi, et ülemteema on endiselt paigaldatud ja sellel on automaatsed uuendused.

Lisalugemist

Need artiklid kirjeldavad samme WebOké juhtpaneelides; teistes juhtpaneelides toimib see sarnaselt.

• DirectAdmin juhend 11.1: File Manageri avamine: paketi kaustad
• DirectAdmin juhend 11.2: Failide üleslaadimine ja allalaadimine
• DirectAdmin juhend 11.7: Ühendumine FileZillaga (FTP, FTPS ja SFTP)
• Alamteemad (child themes) (developer.wordpress.org, inglise keeles): https://developer.wordpress.org/themes/advanced-topics/child-themes/