Select Page

Čo je to tá Dieťa téma?

Child Theme je téma, ktorá funguje spoločne s Parent Theme (rodičovskou témou). V tomto nastavení je rodič téma, ktorú ste si zvolili a dieťa ste Vy a vaše špeciálne nastavenia. Hlavným dôvodom prečo ľudia používajú Child Theme je, aby mohli spraviť zmeny do témy, ktorú používajú a zároveň mať možnosť túto tému aktualizovať.

Čo to znamená? Keď používam tému, ktorá sa mi páči, ale chcem v nej spraviť zopár zmien v štýlovaní (zmena fontu, zmena farieb) alebo upraviť funkcionalitu a daná téma mi to v nastaveniach neumožňuje, musím to napísať do kódu. Lenže ak zmením súbory témy, tak sa pri najbližšej aktualizácii témy moje zmeny premažú. A som tam, kde som bola. Alebo môžem neaktualizovať tému, ale to nechcem. Aktualizácie sú dobré, obzvlášť keď mám tému od dobrého developera, ktorý sleduje dianie v internetoch a spraví vylepšenia.

Vtedy prichádza na rad Child theme. Do Child theme môžte pridať akékoľvek svoje zmeny. Použitá bude téma, ktorú používate so zmenami, ktoré napíšete do child theme. Ak rodičovskú tému aktualizujete, Vaše zmeny budú stále uložené v Child theme.

Ako vytvoriť Child Theme

Samozrejme, najaktuálnejšie informácie by mali byť a vždy sú biblii všetkých WordPress developerov: WordPress Codexe. Alebo môžeš čítať ďalej.

Budete potrebovať prístup na FTP od webu, pre ktorý chcete vytvoriť Child Theme (server, meno, heslo). Prihláste sa do FTP pomocou nejakého FTP klienta. Ja používam Cyberduck.

1. Vytvorte priečinok. Nájdite priečinok /wp-content/themes/ a vytvorte v ňom nový priečinok s názvom Vašej Child témy.

2. Vytvorte style.css súbor. Postačí na to akýkoľvek textový editor, ako napríklad TextEdit (Mac) alebo Notepad (Windows), ale môžte samozrejme použiť aj editor na úpravu kódu, ako napríklad Sublime alebo Brackets. Vložte doňho tento text:

/*
Theme Name:   Tomáš Köppl
Theme URI:    https://nata.sk/child-theme
Description:  Tomášova Child téma šablóny Lodestar
Author:       Nata
Author URI:   https://nata.sk/
Template:     lodestar
Version:      1.0.0
*/

Ja som tu zjavne vytvárala tému pre môjho kamaráta Tomáša – rodičovská téma sa volá „Lodestar“ a jeho child theme som nazvala „Tomáš Köppl“.

Poďme si prejsť jednotlivé riadky. Theme Name: je názov Vašej Child témy, ktorý sa zobrazí v back ende WordPress, kde nastavujete témy. Niektorí ľudia použijú skrátka názov pôvodnej témy a pridajú „Child“ na koniec (napr. „Twenty Seventeen Child“). Ja som použila vlastný názov („Tomáš Köppl“). Nasledujúce riadky, Theme URI, Description, Author, Author URI sa zobrazia v nastaveniach, ale je v podstate jedno, čo tam dáte. Tu je podstatné snáď len to, že URI sú linky a ako napovedajú anglické názvy, Theme URI je link témy, Description je popis (je fajn mať tam napísané, že ide o Child tému nejakej šablóny), Author by ste mali byť vy, Author URI je link autora. A teraz prichádza dôležitá vec: Template. Sem skopírujte názov priečinku, v ktorom sa nachádza Vaša Parent Theme, teda rodičovská téma, z ktorej vychádzate. Nemeňte veľké písmená na malé alebo naopak. Ak by som sem napísala „Lodestar“ s veľkým L, tak by to nefungovalo.

Toto je minimum, ktoré je dôležité pre vytvorenie Child Theme. V tomto momente môžte ísť do WordPress nastavení Vzhľad a medzi témami nájdete svoju novú tému. Pravda, zatiaľ sa javí trocha fádna…

3. Vytvorte Screenshot. Toto je samozrejme iba kozmetická záležitosť, ale ja ju nikdy nepreskakujem. Vyzerá to pekne a ja mám rada pekné veci. Vytvorte si obrázok s názvom screenshot.png, ktorý sa zobrazí v nastaveniach tém. Ja obvykle urobím screenshot daného webu, ten orežem do potrebnej veľkosti (1200 x 900px). Nahrajte tento obrázok do priečinka vašej dcérskej témy.

4. Enqueue scripts. Ako to preložiť…. Zoraďte načítavanie kódov z oboch tém..? tak nejak. Aby ste mohli načítať potrebné skripty, najprv treba v priečinku dcérskej témy vytvoriť súbor functions.php. Ten môžte vytvoriť rovnakým spôsobom ako ste vytvorili style.css, až na to, že obsah bude iný. Prvý riadok bude začínať otváracím <?php.

<?php
function my_theme_enqueue_styles() {

$parent_style = 'parent-style'; // This is 'loadstar-style' for the Loadstar theme.

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'tomaskoppl-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

5. Aktivujte ju. Teraz stačí ísť do nastavení tém a aktivovať Vašu dcérsku tému.

6. Prispôsobte si ju! Teraz môžte pridať vlastné css na spodok dokumentu style.css. O pridávaní ďalších funkcií budem ešte (dúfam niekedy) písať.

Zdroje: