221
Zobrazení

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

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: Jan Lasac
Author URI: https://blog.janlasac.cz/
Template: twentythirteen
Version: 1.0.0
*/

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

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

Nejdůležitějšími položkami záhlaví jsou Template a @import, kterými se identifikuje základní šablona a odkud se získávají základní informace. Ujistěte se, že je správně nastavena cesta do css souboru základní šablony. 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é.

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.

Ú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 themeod 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: Jan Lasac
Author URI: https://blog.janlasac.cz/
Template: twentythirteen
Version: 1.0.0
*/

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

/* =Ú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.

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-footer.php, zkopírujte ho do /twentythirteen-child/inccustom-footer.php. WordPress sám rozpozná, že došlo k nahrazení souboru.

Užitečné odkazy k child theme

Child Theme Configurator – 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?

(221)

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