Vytvorenie child theme

Modul 5: Témy a pluginy · Čas čítania: 9 minút

Cieľ lekcie: Po tejto lekcii dokážete vytvoriť child theme (child theme) a budete vedieť, kedy ho potrebujete a kedy nie.

Kľúčové pojmy: child theme, nadradená téma (parent), Template: v style.css, functions.php, wp_enqueue_style, prepísanie šablóny, theme.json v child theme, Create Block Theme

Problém, ktorý rieši child theme

Predstavte si, že chcete mať hlavičku svojej klasickej témy trochu inú, a preto upravíte header.php v priečinku témy. Funguje to. O tri týždne vyjde aktualizácia témy, ktorú necháte nainštalovať automaticky (ako sa patrí, lekcia 7.2). Aktualizácia nahradí všetky súbory témy a vaša úprava je preč.

Child theme je malá téma, ktorá hovorí: „použi všetko z tej druhej témy (nadradenej témy, parent), okrem toho, čo mám ja vlastné.“ Svoje úpravy umiestnite do child theme. Nadradenú tému naďalej bežne aktualizujete a vaše úpravy zostanú zachované.

Kedy áno a kedy nie

Child theme potrebujete, ak chcete upraviť alebo doplniť súbory témy:

• chcete inú šablónu (pri klasickej téme PHP súbor, pri blokovej téme HTML šablónu);
• chcete vlastné CSS, ktoré je príliš veľké pre políčko na CSS;
• chcete vlastný PHP kód súvisiaci s vzhľadom (ďalší formát obrázka, ďalšiu pozíciu menu).

Child theme nepotrebujete, ak:

• upravujete blokovú tému v Editore stránky: tieto úpravy sú uložené v databáze a prežijú aktualizáciu (lekcia 5.1);
• pridávate iba trochu CSS cez Dodatočné CSS (v časti Prispôsobenie pri klasickej téme, alebo pri Štýloch v Editore stránky);
• chcete pridať funkciu, ktorá nemá nič spoločné so vzhľadom (formulár, prepojenie). Tá patrí do pluginu, aby prežila aj zmenu témy.

Child theme pre klasickú tému

Child theme je priečinok v wp-content/themes/ s aspoň jedným súborom: style.css. Predpokladajme, že vaša nadradená téma je v wp-content/themes/hoofdthema/. Vytvorte priečinok wp-content/themes/hoofdthema-child/ s týmto style.css:

/*
Theme Name:   Hoofdthema Child
Template:     hoofdthema
Description:  Vlastné úpravy pre example.com
Version:      1.0.0
Text Domain:  hoofdthema-child
*/

/* Váš vlastný CSS kód nájdete nižšie. */
.site-header { border-bottom: 3px solid #e8a33d; }

Najdôležitejší riadok je Template:. Tam musí byť názov priečinka nadradenej témy (nie názov, ktorý vidíte v administrácii). Ak nesedí presne (veľké/malé písmená, spojovníky), WordPress v časti Vzhľad > Témy nahlási, že nadradená téma chýba.

Okrem toho vytvoríte functions.php, ktorý načíta štýly. Správny spôsob:

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

To, či si nadradená téma sama načítava svoj vlastný stylesheet, sa líši podľa témy. Pozrite si dokumentáciu svojej nadradenej témy; niektoré vyžadujú, aby ste v child theme načítali aj stylesheet nadradenej témy pomocou get_template_directory_uri() . '/style.css'. Ak vaša stránka po aktivácii vyzerá bez formátovania, znamená to, že stylesheet nadradenej témy sa nenačítava.

Ak chcete upraviť šablónu, skopírujte ten jeden súbor (napríklad header.php) z nadradenej témy do svojho child theme a upravte kópiu. WordPress sa pozrie najprv do child theme, potom do nadradenej témy. Nekopírujte všetky súbory: potom by ste prišli o vylepšenia z nadradenej témy.

functions.php child theme nenahrádza ten z nadradenej témy, ale načíta sa pred ním. Vykonajú sa oba.

Child theme pre blokovú tému

Pri blokovej téme to funguje rovnako, so súbormi blokov:

• style.css s rovnakou hlavičkou a Template:;
• theme.json: ten sa zlúči s tým z nadradenej témy, takže doň zadáte iba to, čo chcete zmeniť (napríklad farebnú paletu);
• templates/ a parts/, ktoré nahradia tie z nadradenej témy.

functions.php pri blokovej téme často nie je potrebný, pretože WordPress si štýly z theme.json načítava sám.

Existuje oficiálny plugin Create Block Theme, ktorý z Editora stránky vytvorí child theme za vás, vrátane vašich úprav z databázy. Hodí sa, ak ste upravili blokovú tému a chcete tieto úpravy zaznamenať do súborov (napríklad aby ste ich preniesli na inú webovú stránku).

Takto to nastavíte na svojej stránke

1. Vytvorte priečinok a súbory na vlastnom počítači a skontrolujte priečinok nadradenej témy.
2. Nahrajte priečinok do wp-content/themes/ cez Web FTP alebo pomocou SFTP. Alebo priečinok zbaľte do zip súboru a nahrajte ho cez Vzhľad > Témy > Pridať > Nahrať tému.
3. Prejdite do Vzhľad > Témy. Váš child theme sa tam zobrazí. Aktivujte ho.
4. Skontrolujte svoju stránku: menu a widgety možno budete musieť po prepnutí na child theme znova prepojiť; nastavenia z Prispôsobenia platia pre každú tému osobitne, takže ich nastavíte znova, alebo ich exportujete pomocou pluginu.
5. Nadradená téma musí zostať nainštalovaná. Neodstraňujte ju; child theme bez nej nefunguje.

Toto radšej najprv vyskúšajte v testovacom prostredí (staging) (lekcia 8.3), pretože prepnutie témy na vyťaženej živej stránke môže byť chvíľu neprehľadné.

Zhrnutie

• Child theme uchováva vaše úpravy súborov témy mimo nadradenej témy, takže ich aktualizácie neprepíšu.
• Nepotrebujete ho pri úpravách v Editore stránky alebo pri troche Dodatočného CSS; funkcie patria do pluginu.
• Minimálne potrebujete priečinok so style.css, v ktorom Template: presne uvádza priečinok nadradenej témy.
• Kopírujte iba tie šablóny, ktoré naozaj upravujete; functions.php child theme sa pridá popri tom z nadradenej témy.
• Nadradená téma zostáva nainštalovaná a naďalej sa aktualizuje.

Kvíz

Úloha

Úloha A5.2: Skontrolujte svoj child theme. Vytvorte child theme pre svoju tému, na testovacej stránke alebo v testovacom prostredí (staging) (lekcia 8.3), a aktivujte ho. Zadajte adresu stránky a názov priečinka child theme. Program overí wp-content/themes/<priečinok>/style.css a skontroluje: súbor existuje, obsahuje Theme Name: a Template:, súbor style.css nadradenej témy v danom priečinku tiež existuje a domovská stránka odkazuje na child theme (je teda aktívny).

Úloha D5.2: Čo ste upravili a prečo? Zapíšte si, ktoré súbory sa nachádzajú vo vašom child theme, čo ste v každom súbore upravili a prečo to nebolo možné urobiť v Editore stránky, v Dodatočnom CSS alebo v pluginu. Potvrďte, že nadradená téma je stále nainštalovaná a má zapnuté automatické aktualizácie.

Ďalšie čítanie

Tieto články popisujú postup v paneloch WebOké; v iných paneloch funguje podobne.

• Návod na DirectAdmin 11.1: Otvorenie Web FTP: zložky vo vašom balíku
• Návod na DirectAdmin 11.2: Nahrávanie a sťahovanie súborov
• Návod na DirectAdmin 11.7: Pripojenie cez FileZilla (FTP, FTPS a SFTP)
• Child themes (developer.wordpress.org, anglicky): https://developer.wordpress.org/themes/advanced-topics/child-themes/