Ilustrace k článku

Child theme (odvozená šablona): proč a jak na ni

Jak na to, Šablony a spol.

Pokud hodláte měnit cokoliv, při čemž byste museli zasahovat do šablony, tak byste měli vytvořit child theme (tzv. odvozenou šablonu). Kromě toho,  že je jedno ze správných řešení problému, tak si ušetříte spoustu práce. Při úpravách v child theme upravujete pouze zkopírované či přidané soubory a do originálního kódu vůbec nezasahujete. Tím, že neupravujete přímo vlastní kód šablony, se nepřipravíte o jednoduché aktualizace, resp. při aktualizacích nepřijde o provedené úpravy. Při aktualizaci se totiž přepíše stará šablona šablonou novou, aktualizovanou.

Child theme můžete vytvořit ručně a na internetu vygooglíte bezpočet návodů, jak na to. Ruční tvorba šablon zahrnuje několik nevýhod: za a) musíte tomu alespoň trochu rozumět a za b) pokud chcete přenést nastavení již používané šablony, tak to může trvat dlouho a být to pěkná otrava. Když ale použijete plugin, tak se výšezmíněným problémům vyhnete. Pro tvorbu odvozené šablony obvykle využívám plugin Child Theme Configurator, který je dostupný z WordPress repozitáře zdarma.

Instalace pluginu

Nejprve nainstalujeme plugin Child Theme Configurator

  • Administrace WP -> Pluginy -> Instalace pluginů
  • Vyhledáme Child Theme Configurator
  • Klikneme na Instalovat
  • Klikneme na Aktivovat

child theme configurátor

Tvorba child theme (odvozené šablony)

V administraci vybereme Nástroje -> Child themes.
Vyberete akci – v našem případě nové child theme CREATE a new Child Theme (bod 1) a nastavíte šablonu, ze které budete child theme tvořit (bod 2) a kliknete na Analyze. Pokud máte již šablonu odvozenou, tak v této části uvidíte další možná nastavení.

nastavení v pluginu

Potom, co plugin šablonu zanalyzujete, budete moci nastavit další parametry.
Nejprve pojmenujete adresář šablony (může být třeba název webu – ale bez diakritiky) nebo nechte standardní názevšablony-child, čímž nic nezkazíte (bod 4).
Vyberete, kde chcete ukládat nové styly (bod 5).
V bodě 6 vyberete, jak se bude nakládat se souborem se styly mateřské šablony, doporučuji použít Use the WordPress style queue.

nastavení v pluginu

V kroku 7 si můžete nastavit upravit jméno odvozené šablony, popisek, autora apod., pokud chcete, jinak nechte původní. Pro úpravy je nutno rozkliknout malou šipku pro zobrazení formuláře.

child-theme_03
V bodě 8 přijde jedna z důležitých kladů tohoto pluginu. Pokud jste šablonu, ze které vytváříte šablonu odvozenou, používali již nějakou dobu, znamená  to, že ji máte nastavenou, máte vytvořená menu, widgety a podobně. Plugin je schopný vám tato nastavení přenést i do nově vytvořené šablony a ulehčit vám tak spoustu práce a trápení. Doporučuji tedy zaškrtnout.
Kliknutím na Create New Child Theme vytvoříte novou odvozenou šablonu přesně podle zadaných parametrů (bod 9).

child-theme_04

Práce s child šablonou

Šablonu máme vytvořenou a je třeba ji zaktivovat (Vzhled > šablony). Můžeme s ní pracovat tak, jak uznáme za vhodné – stáhnout si jí lokálně přes FTP a provádět úpravy anebo je provádět přes editor přímo ve WordPressu.
Pokud chcete změny dělat přes editor, tak se vám bude hodit nejspíše i funkce kopírování vybraných souborů z nadřazené šablony do šablony vytvořené. V Child Theme Configuratoru přibyly další volby v záložkách. Pokud přejdete na záložku Soubory Files, tak si zaškrtnutím můžete vybrat, které soubory se překopírují do vaší odvozené šablony a pustit se do jejich úprav (není problém to udělat kdykoliv později to budete potřebovat).

child-theme_05

S pluginem můžete dělat spousty dalších věcí – exportovat šablony, upravovat styly, resetovat změny apod., to už ale musíte prozkoumat sami.
Podařilo se vám vytvořit odvozenou šablonu? Doufám, že ano, ale pokud budete mít potíže, napište mi do komentářů a zkusím vám poradit. Děláte child šablony jinak či máte tip na lepší plugin? Sem s ním!

Komentáře (8)

  1. Díky za tip k vytvoření odvozené šablony 🙂 Jen mám asi problém. Jsem začátečník, vytvořila jsem si stránky a předělala vzhled stažené šablony k obrazu svému (nijak ale nezasahuji do kódů apod., to neumím). Samozřejmě ji nemám už nějakou dobu aktualizovanou. Dá se nějak všechno jednoduše zkopírovat do nově vytvořené odvozené šablony, nebo mám smůlu a musím vše dělat znovu? Děkuji moc

    1. Dobrý den, pokud jste jen měnila nastavení šablony a nezasahovala do kódů, tak byste o žádné úpravy při její aktualizaci neměla přijít. Udělala bych si zálohu stránek a zaktualizovala. Jinak plugin umí překopírovat současné nastavení do odvozené šablony.

  2. Ahoj, zajímalo by mě jestli doporučuješ použití pluginu nebo tvorbu child theme ručně. Sám jsem tvořil child theme spíše pomocí kódu.

    1. V principu je to jedno. „Ručně“ ho netvořím v podstatě nikdy. Plugin pomůže, když už máš zaběhlou šablonu a chceš vytvořit child theme a zároveň chceš zachovat umístění widgetů, menu, jejího nastavení apod. Pokud to dělám na čisté instalaci, tak používám WP-CLI.

  3. Dobrý den, mohu se zeptat trochu mimo téma? Když si koupím nějakou placenou šablonu, mohu ji používat pro více webů nebo jen pro jeden?

    Děkuji za radu.

    Ivan

    1. Dobrý den, to máte obvykle uvedeno u licence dané šablony, resp. také kde ji koupíte. Obvykle ji můžete použít pro jednu instalaci (multisite se v tomto případě počítá také za jednu), v některých případech můžete zakoupit „unlimited instals“ anebo to autor neomezuje. Např. na ThemeForestu je standardně jedna licence, ale Divi má unlimited website usage. Když napíšete, co chcete kupovat, můžeme se na to podívat společně.

  4. Dobrý den, děkuji za super návod. Potřebovala bych v child theme upravit pár drobností (většinou jen upravit text, který nejde upravit jinak). Jen netuším, zda ho teď – po instalaci a aktivaci ChTC – mohu upravit přímo v editoru…

    1. Pokud máte aktivní child theme a soubor, který chcete editovat do něj máte zkopírovaný (a jedná se např. o šablonu strany), tak ho upravit přímo v editoru můžete. Pokud se ale jedná např. o nevhodný překlad, tak je možná pohodlnější použít plugin Loco translate a upravit překlad v něm (týká se to i třeba lokalizace WooCommerce apod.)

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *