WordPress návody

Jak vytvořit child theme a proč ho využívat

Autor příspěvku Tomáš Cirkl

Tvorbou child theme si v budoucnu můžete ušetřit spoustu práce. Child theme umožňují provádět úpravy určité šablony bez toho, abyste museli měnit její originální kód. Při tvorbě child theme se vytváří oddělené soubory, kterými se vybraná šablona upravuje, aniž byste do ní vůbec museli sáhnout. Díky tomu je aktualizace mnohem jednodušší a nikdy při ní nezničíte provedené změny. Dobré je také to, že child theme můžete kdykoliv deaktivovat a vrátit se k původní šabloně.

Jak vytvořit child theme

TIP: psali jsme také o jednoduché tvorbě child šablony pomocí pluginu

Na příkladu si ukážeme, jak vytvořit child theme. Jako základní šablonu si vezmeme Twenty Thirteen. Nejprve si musíme vytvořit složku šablony. Běžte do /wp-content/themes/ a vytvořte složku jejíž název vychází ze složky základní šablony s koncovkou child. V našem případě vytvoříme složku /twentythirteen-child/. Do nové složky vytvořte soubor style.css a vložte do něj záhlaví, které vidíte níže. Položky Name, URI, Description a Author jsou zcela na vás.

/*
Theme Name: Twenty Thirteen Child
Theme URI: http://wordpress.org/themes/twentythirteen
Description: Twenty Thirteen Child theme
Author: Tomas Cirkl
Author URI: https://wplama.cz/
Template: twentythirteen
Version: 1.0.0
*/

/* =Úprava šablony začíná za touto čarou:
——————————————————- */

Nejdůležitější položkou v záhlaví jeTemplate, kterým se identifikuje základní šablona a odkud se získávají základní informace. Ujistěte se, že je správně nastavena. Buďte přesní i co se do velikosti písmen týče. Pokud má cílová složka na začátku velké písmeno, napište ho také.

Nyní je ještě třeba zajistit vložení stylů z původní šablony. To uděláte vložením kódu níže do functions.php.

Aktivace child theme

Nyní nadešel čas, abyste se přihlásili do administrace WordPressu a v menu šli do Vzhled -> Šablony. V seznamu šablon najděte vámi vytvořené child theme a aktivujte ho. (Pokud jste child theme vytvářeli u sebe na disku, musíte ho nejdříve do WordPressu nahrát.) Ujistěte se, že je také ve WordPressu nahraná základní šablona.

Child theme v administraci

Úprava šablony a provádění změn

Nyní máte vše připraveno a můžete se pustit do úprav. Zatím není child theme od základní šablony vůbec k rozeznání, protože jediné co se zatím dělá je, že se importují informace ze style.css základní šablony. Princip child theme spočívá v tom, že importované informace ze style.css se zobrazují nad těmi, které dopíšete a tím pádem je přepisujete. Pokud například chceme změnit barvu textu v hlavičce webu z černé na modrou změníme style.css v child theme takto:

/*
Theme Name: Twenty Thirteen Child
Theme URI: http://wordpress.org/themes/twentythirteen
Description: Twenty Thirteen Child theme
Author: Tomas Cirkl
Author URI: https://wplama.cz/
Template: twentythirteen
Version: 1.0.0
*/

/* =Úprava šablony začíná za touto čarou:
——————————————————- */
.site-title {color:blue;}
.site-description {color:blue;}

Jakmile je změna provedena, změní se i vzhled šablony.

Child theme před úpravou

Child theme po úpravě

Jak upravit functions.php

Functions.php se v šabloně obvykle nachází v základní složce. Child theme si vždy načte functions.php ze základní šablony, ale pokud do něj chcete přidat další funkce, stačí do složky s child theme vytvořit soubor functions.php. Nové funkce se načtou před těmi se základní šablony. Functions.php by měl začínat PHP otevíracím tagem a končit ukončovacím tagem. Mezi tagy napište požadovaný kód.

Child theme functions.php

Úprava dalších souborů základní šablony

Kromě úravy CSS a functions.php můžete samozřejmě dělat další změny šablony. Tyto změny by měly být prováděny s opatrností, protože úpravy PHP souborů mohou narušit některé z funkcí základní šablony. Na rozdíl od úpravy functions.php, který je importován automaticky, dochází při úpravách PHP souborů k jejich úplné náhradě. Originální soubory šablony jsou ignorovány a namísto nich se použijí soubory v child theme. Pokud chcete upravovat další soubory základní šablony, je nejjednodušší způsobem zkopírovat je (včetně jejich cesty v šabloně) do child theme a poté je až upravit. Jestliže chcete upravovat /twentythirteen/inccustom-header.php, zkopírujte ho do /twentythirteen-child/inccustom-header.php. WordPress sám rozpozná, že došlo k nahrazení souboru.

Užitečné odkazy k child theme

The One Click Child Theme Plugin – vytvoří child theme.

The WordPress Codex – detailnější pohled na child themes ve WordPress kodexu.

Už jste někdy child theme vytvářeli? Nebo raději editujete základní šablonu?

O autorovi

Tomáš Cirkl

Baví mě Internet a zvláště pak redakční systém WordPress. Jsem pravidelným účastníkem a přednášejícím na WordCamp Praha a WordPress konferencích.

31 komentářů

  • Děkuji za užitečný návod!
    Trochu jsem se zablokovala při vyplnění správně Template. Šablona, kterou používám totiž nemám v původní style.css ani jinde tuto položku uvedenu. Je to možné? Kde získám správný text do řádku Template?

    • Díky!

      Řádek s Template vychází z adresářového jména rodičovské šablony. Například, když je rodičovská šablona Twenty Fifteen, tak Template bude jméno složky v níž se šablona nachází – twentyfifteen.

      Style.css by mělo být obsaženo v každé WordPress šabloně. Jakou šablonu používáte?

      • Jasně, díky, už to chápu. Trochu mě zmátla ta informace o pohlídání si velkých / malých písmen. Ale je fakt, že někdo může složku s šablonou nazvat s velkým počátečním písmenem. Používám komerční šablonu Dante.

  • Díky za super návod. Dodnes jsem netušil co je child theme a k čemu slouží, vše jsem složitě upravoval 🙁 Ještě jendou díky! Hned to půjde lépe 🙂

  • Návod je to hezký, jen já bojuji s vytvořením – protože jsem 100% lama a ještě k tomu skoro slepá, šablonu jsem sama neupravovala. Původní člověk však už není k mání a finance na zaplacení ajťáka nemám. Snažím se tedy vytvořit child theme sama. Pomocí PSPad jsem zjistila, jaké změny byly provedeny, jen nevím, jak je vložit do odvozené šablony. Hledám proto konkrétnější rady.
    Můžete mi, prosím, pomoci?

  • Díky za návod, na který jsem bohužel narazil asi hodinu potom, co jsem upravil “na hulváta” šablonu. Měl bych jen jeden dotaz. Aktualizují se šablony samy, nebo to jde vždy pouze manuálně?

  • Dobrý den,

    Předem bych chtěl velmi poděkovat za tento návod, moc mi pomohl. Jen bych měl pár připomínek.

    1. Stáhl jsem si šablonu se kterou se mi stáhla i CHILD verze. Pochopil jsem správně, že oboje musím nahrát do wordpressu a aktivovat tu CHILD verzi?

    2. Když vím, že šablonu budu opravdu hodně opravovat (myšleno i jiné věci než function.php a style.css) mám prostě z mateřské šablony vzít všechny soubory a vložit je do CHILD verze? (např.: budu chtít upravovat header.php. Mám tedy vzít header.php a pouze ho přesunout do CHILD verze?)

    Děkuji Vám mnohokrát, mám v tom ještě trošku guláš.

  • Dobrý den, díky za návod, vcelku jsem podle něj child šablonu rozchodil. Problém, který mám, tkví v tom, že mám v šabloně dvě css (style.css a theme.css)
    Změny, které popisujete, jsem provedl pro obě dvě, ale když se kouknu do zdroje stránky, style.css se načítá z child adresáře, ale theme.css soustavně z originálu.
    Řešení je zkopírovat styly z theme.css do style.css, ale tím přijdu o výhody, které child šablona nabízí. Pokud máte nějakou radu, budu za ni rád. V editoru child šablony theme.css vidím, ale není aplikovaná.
    Děkuji.

    • Zdravím,

      veškeré úpravy stylů dávejte do style.css v child šabloně. Tento soubor se načte až nakonec a ovlivníte s ním styly i ze souboru theme.css v originální šabloně. Pokud by jste chtěl, aby se v child šabloně načítaly styly z theme.css, tak byste si ji musel přidal.

      Například nalinkováním z style.css

      /* Další css soubory */

      @import url(‘css/theme.css’);
      @import url(‘css/colors.css’);

  • Nezdá se mi, že by to fungovalo. V adresáři /Revera-child/ mám style.css. V něm po hlavičce následuje pouze toto:

    @import url(“../Revera/style.css”);
    @import url(“../Revera/theme.css”);

    /* Úprava šablony začíná za touto čarou:
    ————————————- */

    .fwidgets{ background: #cccccc; }

    Měním barvu jen proto, abych otestoval funcionalitu, ale web se stále zobrazuje podle původní definice v adresáři /Revera/theme.css. Tedy se nepřepisuje.

  • Ahoj Tome, dá se v Child šabloně řešit i soubory z podadresáře?
    Respektive mám nazev_sablony/slozka/soubor.php a nevím jak tento soubor dostat do child šablony.

    • Petře, ve složce s nazev_sablony-child vytvoříš složku slozka a až do ní dáš soubor.php. Celá cesta tedy bude: nazev_sablony-child/slozka/soubor.php.

      Takto to používám u mnoha šablon a funguje bezvadně :).

  • Child-theme mi nefunguje pro soubory:
    bootstrap.js
    customizer.php
    functions.php

    Pro nektere dalsi funguje:
    footer.php
    page.php
    sidebar.php

    Nemate nekdo zkusenosti s resenim teto chyby? Dekuji.

  • Chcem sa spýtať – aké sú licenčné možnosti takýmto spôsobom upravovať rôzne ďalšie “free templaty” od rôznych tvorcov, ktoré sú k dispozícií aj na WP.
    Inak povedané – čo ak sa mi páči nejaká iná šablóna, uvedená v ponuke WP. Je si z nej možné s čistým svedomím spraviť child tému kde dosť výrazne zmením jej pôvodný dizajn a uvediem svoje iniciály čo by tvorcu?

  • Pokud má moje použitá šablona už možnost vkládat custom css v základu, má smysl dělat si child theme?

  • Tome,
    super článek, jen bych doporučoval odstranit řádek @import ze souboru CSS. Tuto dříve používanou funkčnost doporučují přestat používat i sami vývojáři WordPressu.
    Toto řešení totiž zbytečně natahuje čas potřebný pro načtení CSS – místo toho je doporučeno vytvořit v child theme soubor functions.php a v něm definovat cestu k původním CSS souboru.

  • Ahoj,
    ja som zvedavá, že či sú situácie kedy child tému nie je vhodné použiť. Napríklad ak má téma šikovný základ plus prvky ktoré sa mi páčia, ale inak ju z väčšej časti poupravím – povedzme tých 50-75%, vrátane zásahu do customizera, stále sa oplatí riešiť to cez child tému? Alebo v takomto prípade je lepšie zakázať aktualizácie a zeditovať priamo hlavnú tému?
    Áno ja viem že najideálnejšie by bolo vytvoriť si vlastnú tému, ale na to si zatiaľ netrúfam – neviem či by som zvládla optimalizáciu pre rôzne browsery.

  • Dobrý deň,

    ak chcem zachovať preklad niektorých pluginov – napr. Woocommerce aj po aktualizácii, chcem využiť child tému. nie je mi celkom jasné kam mám prekladový súbor po a mo uložiť. bude správna cesta táto? /web /wp-content /themes /Child-Theme/ – len neviem čo ďalej? nechcem prekladať šablónu ale plugin. mám pridať /plugins/woo/language…

    prosím môžete mi s tým pomôcť?

    ďakujem Alica

    • Zdravím,

      překlad pluginu (po+mo) nemusíte nahrávat do child šablony. Lepší je to nahrát do wp-content/languages/plugins/. Tady se to při aktualizaci neztratí.

        • ešte poprosím o radu. vložila som po a mo súbory, no aj tak sa mi to nepreložilo. potrebujem preložiť len niektoré slová vo woo – ako checkout, search, view cart – ostatné je preložené. mám loco translate a tam je všetko preložené, nechápem prečo toto zostáva v angličtine. Prosím môžete mi poradiť, kde to mám opraviť?

          ďakujem Alica

  • Nepochopil jsem jednu věc. Pokud dám do původního souboru funkcions.php kod pro kopírování do child šablony, tak se při aktualizaci hlavní šablony přepíše a tudíž child přestane fungovat. Chtěl bych udělat child pro šablonu kterou používám, ale mám v ní tolik uprav, že nevím jak je zachovat.

    • Tak jsem to vyzkoušel. A bohužel přestal se zobrazovat uvodní obrázek a nefunguje přizpůsobení šablony, takže tam úvodní obrázek nejde vložit.

Zanechat komentář

Přijďte 1.11. na naše WordPress Školení

Získejte více informací o WordPress!

Připojte se do našeho emailového seznamu a nenechte si ujít informace, novinky a návody ze světa WordPressu.

Úspěšně jste se zapsali do našeho newsletteru. Děkujeme!