Child theme je odvozená šablona. Vytvořit si v redakčním systému WordPress child theme neboli odvozenou šablonu je nezbytný krok v případě, kdy se chystáte do jejího kódu zasahovat, tedy v případě, kdy se ji chystáte upravovat k obrazu svému. V tomto článku přinášíme nejen informace o tom, jak child theme vlastně funguje, ale také návod, jak odvozenou šablonu vytvořit.
Co je child theme a jak funguje
Child theme je šablona odvozená od mateřské šablony (parent theme), se kterou je nadále provázána (mateřská šablona = jakákoli šablona). Pokud se rozhodnete vámi vybranou šablonu upravovat více, než umožňuje tlačítko Přizpůsobit, měli byste si child theme zřídit. Důvod je jednoduchý – vaše úpravy CSS a PHP souborů mohou být při aktualizaci šablony nahrazeny původním (originálním) kódem autora a vy budete po každé takové aktualizaci soubory upravovat znovu (ať už ručně nebo ze záloh). Změny provedené v odvozené šabloně zůstanou aktuální i po aktualizaci.
Článek je součástí
Návodu na instalaci WordPress
Tip: Aktualizace byste ve vlastním zájmu provádět měli, více v našem článku Jak aktualizovat WordPress.
Child theme funguje v zásadě jednoduše. Vytvořením oddělených souborů získáte možnost šablonu libovolně upravovat, aniž by hrozilo, že budou změny ztraceny při aktualizacích, protože nezasahujete přímo do originálního kódu. Do odvozené šablony kopírujete pouze ty soubory, které chcete dále upravovat. Všechny ostatní soubory zůstávají v mateřské šabloně. Soubory v child theme pak budou mít vždy před těmi z mateřské šablony přednost a změny v mateřské šabloně (např. při aktualizaci) se nedotknou úprav, které jste v nich provedli. Mateřskou šablonu musíte mít neustále instalovanou, nesmíte jí smazat, protože child theme s ní pracuje.
Jak vytvořit child theme
Child theme můžete vytvořit 2 způsoby – ručně, nebo pomocí pluginu. Obě možnosti si ukážeme na nové šabloně Twenty Nineteen od tvůrců WordPress. Návod počítá s tím, že již máte nainstalovanou šablonu Twenty Nineteen.
Vytvoření odvozené šablony ručně
1. Vytvořte adresář pro child theme.
V adresáři /wp-content/themes/ vytvořte novou složku. Pojmenovat ji můžete libovolně, avšak pro přehlednost doporučujeme zachovat název mateřské šablony, za nějž přidáte -child, např. twentynineteen-child. K vytvoření adresáře použijte FTP program.
2. Vytvořte style.css
V adresáři /wp-content/themes/twentynineteen-child/ vytvořte soubor style.css a vložte níže uvedený kód. Pokud chcete změnit styly, například barvu písma a podobně pište kód na nový řádek pod komentář „Pod tento řádek můžete vkládat vlastní kód.“.
/*
Theme Name: Twenty Nineteen Child
Theme URI: https://github.com/WordPress/twentynineteen
Template: twentynineteen
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2019 default theme is designed to show off the power of the block editor. It features custom
styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on
your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a
photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans
serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.
Tags: one-column,flexible-header,accessibility-ready,custom-colors,custom-menu,custom-logo,editor
style,featured-images,footer-widgets,rtl-language-support,sticky-post,threaded-comments,translation-ready
Pod tento řádek můžete vkládat vlastní kód. */3. Vytvořte functions.php.
Pomocí souboru functions.php načteme styly z mateřské šablony, v našem případě z Twenty Nineteen. Soubor functions.php se používá vedle načtení stylů (style.css) z mateřské šablony také na vkládání kódů, které doplňují nebo upravují konkrétní funkce. Pokud plánujete úpravu kódu zejména kvůli úpravě vzhledu šablony, je to ideální řešení. Pokud se však chystáte více zasahovat do funkcionality, je vhodnějším řešením tvorba samostatného pluginu, který bude vámi požadované funkce obsahovat nezávisle na šabloně.
V adresáři /wp-content/themes/twentynineteen-child/ vytvořte soubor functions.php s tímto obsahem:
<php
// Začátek povinného obsahu. NEMAZAT!
add_action( 'wp_enqueue_scripts', 'enqueue_parent_css', 10 );
function enqueue_parent_css() {
wp_enqueue_style( 'parent-style', trailingslashit( get_template_directory_uri() ) . 'style.css', array( ) );
}// Konec povinného obsahu. Pod tento řádek můžete vkládat svůj kód.
?>4. Vložte obrázek šablony
Do adresáře /wp-content/themes/twentynineteen-child/ nahrajte obrázek ve formátu PNG s názvem screenshot (screenshot.png). Tento obrázek můžete překopírovat z mateřské šablony. Pro grafické odlišení child theme od mateřské šablony však doporučujeme do obrázku pro odvozenou šablonu doplnit v grafickém editoru „Child theme“ větším písmem.
Vytvoření odvozené šablony pomocí pluginu
Celý výše uvedený proces si můžete usnadnit a child theme vytvořit pomocí pluginu. Vyhledejte a nainstalujte si plugin Child Theme Configurator. Po aktivaci se tento plugin objeví v menu Nástroje.
Po kliknutí na položku Child Theme Configurator v menu Nástroje se vám nabídne možnost vytvořit child theme vybrané nainstalované šablony. Jednoduše ji vyberete a potvrdíte tlačítkem Analyze.
Pokud je možné child theme vytvořit, v následujících krocích zvolíte požadované parametry a máte hotovo. Plugin vytvoření odvozené šablony vyřeší za vás.
Stažení a nahrání template child theme
Vedle pluginu existuje ještě jedna možnost jednodušší než tvorba výše uvedených souborů. Pro vybrané šablony obvykle není problém najít připravený balíček souborů pro tvorbu child theme. Tyto soubory nahrajete do nové složky (např. /nazevsablony-child) v adresáři /wp-content/themes/.
Pro šablonu Twenty Nineteen najdete template balíček pro child theme i u nás > stáhnout (po kliknutí získáte soubory child theme). Toto child theme stačí nahrát do WordPress, a pokud máte instalovanou šablonu Twenty Nineteen, tak aktivovat.
Práce s child theme
Ať už zvolíte kterýkoli postup, před dalšími kroky je třeba child theme aktivovat (standardně ve správě šablon v administraci).
Následně pracujete se soubory, které potřebujete upravit. Ty si zkopírujete z mateřské šablony (buď přes FTP nebo v případě pluginu Child Theme Configurator přes záložku Files).
Pracovat s nimi můžete tak, jak jste zvyklí – lokálně a následně je nahrát přes FTP nebo přes editor v administraci WordPress. Pozor, některé bezpečnostní pluginy zakazují editaci pluginů a šablon přímo z administrace. Pokud tomu tak je, editujte přes FTP.
WordPress obsahuje více než osm kvalitních základních šablon od tvůrci WordPress. Tyto šablony jsou dobře napsané a jsou aktualizované. Seznam všech základních šablon najdete v článku Přehled základních WordPress šablon, kam nově doplníme i child theme ke konkrétním šablonám.