Bērna tēmas (child theme) izveide

5. modulis: Tēmas un spraudņi · Lasīšanas laiks: 9 minūtes

Mācību mērķis: Pēc šīs nodarbības Jūs varēsiet izveidot bērna tēmu un zināsiet, kad tā ir nepieciešama un kad nav.

Galvenie jēdzieni: bērna tēma (child theme), vecāktēma (parent theme), Template: failā style.css, functions.php, wp_enqueue_style, veidnes pārrakstīšana, theme.json bērna tēmā, Create Block Theme

Problēma, ko atrisina bērna tēma

Pieņemsim, Jūs vēlaties nedaudz citādu savas klasiskās tēmas galveni un tāpēc pielāgojat header.php tēmas mapē. Tas strādā. Pēc trim nedēļām tēmai iznāk atjauninājums, ko Jūs ļaujat instalēt automātiski (kā tam jābūt, 7.2. nodarbība). Atjauninājums aizstāj visus tēmas failus, un Jūsu pielāgojums pazūd.

Bērna tēma (child theme) ir neliela tēma, kas saka: "izmantot visu no tās citas tēmas (vecāktēma, parent theme), izņemot to, kas ir man pašai." Jūs ievietojat savus pielāgojumus bērna tēmā. Vecāktēmu Jūs turpināt parasti atjaunināt, un Jūsu pielāgojumi paliek spēkā.

Kad vajadzīga un kad nav

Jums ir vajadzīga bērna tēma, ja vēlaties pielāgot vai papildināt tēmas failus:

• vēlaties citādu veidni (klasiskajai tēmai tas ir PHP fails, bloku tēmai HTML veidne);
• vēlaties savu CSS, kas ir pārāk liels Papildus CSS lodziņam;
• vēlaties savu PHP kodu, kas saistīts ar noformējumu (papildu attēla izmērs, papildu izvēlnes atrašanās vieta).

Jums nav vajadzīga bērna tēma, ja:

• Jūs pielāgojat bloku tēmu Vietnes redaktorā: šie pielāgojumi tiek saglabāti datubāzē un paliek spēkā pēc atjauninājuma (5.1. nodarbība);
• Jūs vienkārši pievienojat nedaudz CSS, izmantojot Papildus CSS (klasiskajai tēmai Tēmas pielāgošanā, bloku tēmai pie Stiliem Vietnes redaktorā);
• Jūs vēlaties pievienot funkciju, kas nav saistīta ar noformējumu (formu, savienojumu). Tai vieta ir spraudnī, lai tā paliktu spēkā arī pēc tēmas nomaiņas.

Bērna tēma klasiskajai tēmai

Bērna tēma ir mape wp-content/themes/ ar vismaz vienu failu: style.css. Pieņemsim, Jūsu vecāktēma atrodas wp-content/themes/hoofdthema/. Izveidojiet mapi wp-content/themes/hoofdthema-child/ ar šādu style.css:

/*
Theme Name:   Hoofdthema Child
Template:     hoofdthema
Description:  Pielāgojumi vietnei example.com
Version:      1.0.0
Text Domain:  hoofdthema-child
*/

/* Jūsu CSS kods ir norādīts zemāk. */
.site-header { border-bottom: 3px solid #e8a33d; }

Vissvarīgākā rinda ir Template:. Tajā norādīts vecāktēmas mapes nosaukums (nevis nosaukums, ko redzat panelī). Ja tas precīzi nesakrīt (lielie burti, defises), WordPress sadaļā Izskats > Tēmas ziņos, ka vecāktēma trūkst.

Papildus izveidojiet functions.php, lai ielādētu stila lapas. Pareizais veids:

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

Vai vecāktēma pati ielādē savu stila lapu, atšķiras atkarībā no tēmas. Apskatiet Jūsu vecāktēmas dokumentāciju; dažas lūdz Jūs bērna tēmā arī ielādēt vecāktēmas stila lapu ar get_template_directory_uri() . '/style.css'. Ja Jūsu tīmekļa vietne pēc aktivizēšanas ir bez noformējuma, vecāktēmas stila lapa netiek ielādēta.

Ja vēlaties pielāgot veidni, nokopējiet to vienu failu (piemēram, header.php) no vecāktēmas uz savu bērna tēmu un pielāgojiet kopiju. WordPress vispirms meklē bērna tēmā, tad vecāktēmā. Nekopējiet visus failus: tad Jūs vairs nesaņemsiet vecāktēmas uzlabojumus.

Bērna tēmas functions.php neaizstāj vecāktēmas failu, bet tiek ielādēts pirms tā. Tiek izpildīti abi.

Bērna tēma bloku tēmai

Bloku tēmai process ir līdzīgs, ar bloku failiem:

• style.css ar to pašu galveni un Template:;
• theme.json: tas tiek apvienots ar vecāktēmas failu, tāpēc ievietojiet tajā tikai to, ko vēlaties mainīt (piemēram, krāsu paleti);
• templates/ un parts/, kas aizstāj vecāktēmas veidnes.

Bloku tēmai functions.php bieži nav nepieciešams, jo WordPress pats ielādē stilus no theme.json.

Ir oficiāls spraudnis Create Block Theme, kas no Vietnes redaktora izveido Jums bērna tēmu, ieskaitot Jūsu pielāgojumus datubāzē. Noderīgi, ja esat pielāgojis bloku tēmu un vēlaties šos pielāgojumus fiksēt failos (piemēram, lai pārnestu uz citu tīmekļa vietni).

Tā to uzstādāt savā vietnē

1. Izveidojiet mapi un failus savā datorā un pārbaudiet vecāktēmas mapi.
2. Augšupielādējiet mapi uz wp-content/themes/, izmantojot File Manager vai SFTP. Vai arī sapakojiet mapi zip formātā un augšupielādējiet to sadaļā Izskats > Tēmas > Pievienot jaunu > Augšupielādēt tēmu.
3. Dodieties uz Izskats > Tēmas. Jūsu bērna tēma būs redzama sarakstā. Aktivizējiet to.
4. Pārbaudiet savu tīmekļa vietni: izvēlnes un sīkrīki, pārslēdzoties uz bērna tēmu, var būt jāsasaista no jauna; iestatījumi no Tēmas pielāgošanas attiecas uz katru tēmu atsevišķi, tāpēc tie jāiestata vēlreiz vai jāeksportē ar spraudni.
5. Vecāktēmai jāpaliek instalētai. Nedzēsiet to; bez tās bērna tēma nestrādā.

Vēlams to vispirms izdarīt testa vidē (staging) (8.3. nodarbība), jo tēmas maiņa noslogotā tiešsaistes vietnē var īslaicīgi radīt nekārtību.

Kopsavilkums

• Bērna tēma saglabā Jūsu tēmas failu pielāgojumus ārpus vecāktēmas, lai atjauninājumi tos nepārrakstītu.
• Tā nav nepieciešama pielāgojumiem Vietnes redaktorā vai nelielam Papildus CSS; funkcijām vieta ir spraudnī.
• Minimums: mape ar style.css, kurā Template: precīzi norāda vecāktēmas mapi.
• Kopējiet tikai tās veidnes, kuras tiešām pielāgojat; bērna tēmas functions.php tiek izmantots līdzās vecāktēmas failam.
• Vecāktēma paliek instalēta un turpina tikt atjaunināta.

Tests (quiz)

Uzdevums

Uzdevums A5.2: Jūsu bērna tēmas pārbaude. Izveidojiet bērna tēmu savai tēmai testa vietnē vai testa vidē (staging) (8.3. nodarbība) un aktivizējiet to. Ievadiet tīmekļa vietnes adresi un bērna tēmas mapes nosaukumu. Programma pieprasīs wp-content/themes/<mape>/style.css un pārbaudīs: fails pastāv, tajā ir norādīts Theme Name: un Template:, vecāktēmas style.css šajā mapē arī pastāv, un sākumlapa norāda uz bērna tēmu (tātad tā ir aktīva).

Uzdevums D5.2: Ko Jūs mainījāt un kāpēc? Pierakstiet, kādi faili atrodas Jūsu bērna tēmā, ko Jūs katrā failā mainījāt un kāpēc to nevarēja izdarīt Vietnes redaktorā, Papildus CSS vai spraudnī. Atzīmējiet, ka vecāktēma joprojām ir instalēta un tai ir ieslēgti automātiskie atjauninājumi.

Papildu lasāmviela

Šie raksti apraksta soļus WebOké paneļos; citos paneļos process ir līdzīgs.

• DirectAdmin rokasgrāmata 11.1: File Manager atvēršana: pakotnes mapes
• DirectAdmin rokasgrāmata 11.2: Failu augšupielāde un lejupielāde
• DirectAdmin rokasgrāmata 11.7: Savienošanās ar FileZilla (FTP, FTPS un SFTP)
• Child themes (developer.wordpress.org, angļu valodā): https://developer.wordpress.org/themes/advanced-topics/child-themes/