Zřízení child theme pro WordPress šablony

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.

Článek je součástí
Návodu na instalaci WordPress

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.

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á ž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á kromě 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, ale aby jste v administraci graficky odlišili mateřskou šablonu a child theme, doporučuji do obrázku screenshot.png pro child theme v grafickém editoru dopsat větším písmem „Child theme“.

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.

wordpress-child-theme-configurator-plugin-nastaveni-detail
Stránka pluginu v administraci WordPress

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.

wordpress-child-theme-configurator-plugin-nastaveni-krok1

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 si můžete template balíček pro child theme stáhnout i u nás – stáhnout (po kliknutí se stáhnou 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).

wordpress-aktivace-child-theme-v-administraci

Následně pracujete se soubory, které potřebujete upravit. Ty si nejprve zkopírujete z mateřské šablony (buď přes FTP nebo v případě pluginu Child Theme Configurator přes záložku Files).

Vytvoření souboborů pomocí pluginu Child theme configurator

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 využijte přes FTP.

editace function.php z administrace WordPress

WordPress obsahuje více jak osm kvalitních základních šablon od tvůrci WordPress. Tyto šablony jsou kvalitně napsané a jsou aktualizované. Seznam všech základních šablon WordPress najdete v článku „Přehled základních WordPress šablon„, nově do tohoto článku doplním i child theme ke konkrétním šablonám.

Napsat komentář