Vaikinės temos (child theme) kūrimas

5 modulis: Temos ir įskiepiai · Skaitymo trukmė: 9 min.

Mokymosi tikslas: po šios pamokos galėsite sukurti vaikinę temą (child theme) ir žinosite, kada ji reikalinga, o kada ne.

Pagrindinės sąvokos: vaikinė tema (child theme), tėvinė tema (parent tema), Template: faile style.css, functions.php, wp_enqueue_style, šablono perrašymas, theme.json vaikinėje temoje, Create Block Theme

Problema, kurią išsprendžia vaikinė tema

Tarkime, norite šiek tiek pakeisti savo klasikinės temos antraštę, ir tam koreguojate header.php failą temos aplanke. Viskas veikia. Po trijų savaičių pasirodo temos atnaujinimas, kurį leidžiate įdiegti automatiškai (kaip ir dera, 7.2 pamoka). Atnaujinimas pakeičia visus temos failus, ir Jūsų pakeitimas dingsta.

Vaikinė tema (child theme) yra maža tema, kuri sako: „naudok viską iš tos kitos temos (tėvinės temos, parent temos), išskyrus tai, ką turiu pati.“ Savo pakeitimus įrašote vaikinėje temoje. Tėvinę temą ir toliau galite atnaujinti, o Jūsų pakeitimai išlieka.

Kada reikia, o kada ne

Vaikinės temos Jums reikia, jei norite keisti arba papildyti temos failus:

• norite kitokio šablono (klasikinėje temoje tai PHP failas, blokų temoje HTML šablonas);
• norite savo CSS, kuris per didelis CSS laukeliui;
• norite savo PHP kodo, susijusio su išvaizda (papildomas nuotraukos formatas, papildoma meniu vieta).

Vaikinės temos nereikia, jei:

• keičiate blokų temą per Tinklalapio redaktorių: tie pakeitimai saugomi duomenų bazėje ir išlieka po atnaujinimo (5.1 pamoka);
• tik pridedate šiek tiek CSS per Papildomas CSS (Išvaizdos redaktoriuje, jei naudojama klasikinė tema, arba prie Stilių Tinklalapio redaktoriuje);
• norite pridėti funkciją, neturinčią nieko bendra su išvaizda (formą, susiejimą su kita sistema). Tokia funkcija priklauso įskiepiui, kad išliktų ir pakeitus temą.

Vaikinė tema klasikinei temai

Vaikinė tema yra aplankas wp-content/themes/ viduje, kuriame yra bent vienas failas: style.css. Tarkime, Jūsų tėvinė tema yra aplanke wp-content/themes/hoofdthema/. Tuomet sukurkite aplanką wp-content/themes/hoofdthema-child/ su tokiu style.css turiniu:

/*
Theme Name:   Hoofdthema Child
Template:     hoofdthema
Description:  Individualūs pritaikymai svetainei example.com
Version:      1.0.0
Text Domain:  hoofdthema-child
*/

/* Jūsų CSS kodas pateikiamas žemiau. */
.site-header { border-bottom: 3px solid #e8a33d; }

Svarbiausia eilutė yra Template:. Joje nurodomas tėvinės temos aplanko pavadinimas (ne pavadinimas, kurį matote Skydelyje). Jei jis nurodytas netiksliai (didžiosios raidės, brūkšneliai), WordPress ties Išvaizda > Temos praneš, kad trūksta tėvinės temos.

Be to, sukuriate functions.php, kad būtų įkeliami stiliaus failai. Tvarkingas būdas tai padaryti:

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

Ar tėvinė tema pati įkelia savo stiliaus failą, priklauso nuo konkrečios temos. Pasižiūrėkite savo tėvinės temos dokumentaciją; kai kurios reikalauja, kad vaikinėje temoje taip pat įkeltumėte tėvinės temos stiliaus failą naudodami get_template_directory_uri() . '/style.css'. Jei po aktyvavimo Jūsų svetainė atrodo be jokio formatavimo, vadinasi, tėvinės temos stiliaus failas neįkeliamas.

Jei norite keisti šabloną, nukopijuokite tą vieną failą (pavyzdžiui, header.php) iš tėvinės temos į savo vaikinę temą ir redaguokite kopiją. WordPress pirmiausia ieško vaikinėje temoje, paskui tėvinėje. Nekopijuokite visų failų: tuomet nebegausite tėvinės temos patobulinimų.

Vaikinės temos functions.php nepakeičia tėvinės temos atitinkamo failo, o yra įkeliamas prieš jį. Vykdomi abu failai.

Vaikinė tema blokų temai

Blokų temoje viskas veikia panašiai, su blokų failais:

• style.css su tokia pačia antrašte ir Template:;
• theme.json: ji sujungiama su tėvinės temos faile esančiais nustatymais, todėl į ją įrašote tik tai, ką norite pakeisti (pavyzdžiui, spalvų paletę);
• templates/ ir parts/, kurie pakeičia tėvinės temos atitinkamus šablonus.

Blokų temoje functions.php dažnai nereikalingas, nes WordPress pati įkelia stilius iš theme.json.

Yra oficialus įskiepis Create Block Theme, kuris iš Tinklalapio redaktoriaus sukuria vaikinę temą už Jus, įskaitant Jūsų duomenų bazėje esančius pakeitimus. Patogu, jei pakeitėte blokų temą ir norite tuos pakeitimus užfiksuoti failuose (pavyzdžiui, kad galėtumėte perkelti juos į kitą svetainę).

Kaip tai įdiegti savo svetainėje

1. Sukurkite aplanką ir failus savo kompiuteryje bei patikrinkite tėvinės temos aplanko pavadinimą.
2. Įkelkite aplanką į wp-content/themes/ naudodami Failų tvarkyklę arba per SFTP. Arba supakuokite aplanką į zip failą ir įkelkite jį per Išvaizda > Temos > Naujas > Įkelti temą.
3. Eikite į Išvaizda > Temos. Jūsų vaikinė tema bus tarp kitų. Aktyvuokite ją.
4. Patikrinkite savo svetainę: pereinant prie vaikinės temos gali tekti iš naujo susieti meniu ir valdiklius; Išvaizdos redaktoriaus nustatymai galioja kiekvienai temai atskirai, todėl juos reikės nustatyti iš naujo arba eksportuoti įskiepio pagalba.
5. Tėvinė tema turi likti įdiegta. Jos nepašalinkite; be jos vaikinė tema neveiks.

Pirmiausia geriau tai darykite bandomojoje aplinkoje (staging) (8.3 pamoka), nes temos keitimas veikiančioje, aktyviai naudojamoje svetainėje gali laikinai sukelti netvarką.

Santrauka

• Vaikinė tema išsaugo Jūsų temos failų pakeitimus atskirai nuo tėvinės temos, kad atnaujinimai jų neperrašytų.
• Jos nereikia pakeitimams Tinklalapio redaktoriuje ar nedideliam kiekiui Papildomo CSS; funkcijos priklauso įskiepiui.
• Minimaliai reikia aplanko su style.css, kuriame Template: tiksliai nurodo tėvinės temos aplanko pavadinimą.
• Kopijuokite tik tuos šablonus, kuriuos iš tikrųjų keičiate; vaikinės temos functions.php veikia kartu su tėvinės temos atitinkamu failu.
• Tėvinė tema lieka įdiegta ir toliau atnaujinama.

Testas (quiz)

Užduotis

Užduotis A5.2: Jūsų vaikinės temos patikrinimas. Sukurkite vaikinę temą savo temai, savo bandomojoje svetainėje arba bandomojoje aplinkoje (staging) (8.3 pamoka), ir aktyvuokite ją. Įveskite svetainės adresą ir vaikinės temos aplanko pavadinimą. Programa patikrins failą wp-content/themes/<aplankas>/style.css ir patikrins: ar failas egzistuoja, ar jame nurodyta Theme Name: ir Template:, ar tame aplanke esanti tėvinės temos style.css taip pat egzistuoja, ir ar pagrindinis puslapis nurodo į vaikinę temą (taigi ji yra aktyvi).

Užduotis D5.2: Ką pakeitėte ir kodėl? Užrašykite, kokie failai yra Jūsų vaikinėje temoje, ką pakeitėte kiekviename faile ir kodėl to nebuvo galima padaryti Tinklalapio redaktoriuje, Papildomame CSS ar įskiepyje. Pažymėkite, kad tėvinė tema vis dar įdiegta ir turi automatinius atnaujinimus.

Papildoma literatūra

Šiuose straipsniuose aprašyti veiksmai WebOké valdymo skydeliuose; kituose skydeliuose jie veikia panašiai.

• DirectAdmin vadovas 11.1: Atidaryti failų tvarkyklę: Jūsų paslaugų paketo katalogai
• DirectAdmin vadovas 11.2: Failų įkėlimas ir parsisiuntimas
• DirectAdmin vadovas 11.7: Prisijungimas naudojant FileZilla (FTP, FTPS ir SFTP)
• Vaikinės temos (child themes) (developer.wordpress.org, anglų kalba): https://developer.wordpress.org/themes/advanced-topics/child-themes/