Jak na úpravy WordPress šablon pomocí child theme

Chcete-li vlastní web, pravděpodobně ho postavíte na WordPressu. Je to rozumná volba. Dříve nebo později se ale setkáte s potřebou upravit si používanou šablonu k obrazu svému. A správným postupem při úpravách je child theme.

Ať už využíváte šablonu přímo od WordPressu, nebo některou z obrovské spousty ostatních, je několik doporučení, které byste měli znát ještě předtím, než se do úprav pustíte. Dnes se budu věnovat z mého pohledu tomu nejdůležitějšímu, a tím je využití tzv. child themes.

WordPress pro účely úprav šablon vytvořil metodiku child theme, což je ve stručnosti šablona, která dědí funkcionalitu od jiné šablony, rodičovské, či chcete-li nadřazené. Umožní vám upravovat nebo přidávat funkcionalitu rodičovské šabloně, aniž byste do ní museli jakkoliv zasahovat. Další výhody jsou:

  • bezpečnost – pokud se při úpravách něco nepovede, stačí v nastavení pouze přepnout zpět tu původní (rodičovské)

  • vytvoření a práce s child theme je velmi jednoduchá

  • pokud upravíte nějakou šablonu (bez použití child theme), a vyjde její nová verze kterou si updatujete, přijdete o své úpravy. S child theme zůstanou vaše úpravy i po updatu zachovány

  • pokud s WordPressem začínáte, je to dobrý způsob jak se učit a zároveň upravovanou šablonu nerozvrtat

Vytvoření child theme

Na serveru, v adresáři se šablonami (wp-content/themes) vytvořte novou složku. Do názvu zkopírujte název adresáře šablony, kterou chcete upravit, a na konec přidejte „-child“. Mezi původním názvem a „-child“ nesmí být mezery.

Druhým krokem je v nově vytvořeném adresáři vytvořit soubor style.css, který bude mít v úvodu následující hlavičku (příklad):

/*

Theme Name: Twenty Fourteen Child

Theme URI: http://example.com/twenty-fourteen-child/

Description: Twenty Fourteen Child Theme

Author: John Doe

Author URI: http://example.com

Template: twentyfourteen

Version: 1.0.0

*/

@import url("../twentyfourteen/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

Upravte jednotlivé řádky, aby odpovídali vaší šabloně.

Tím je child theme v základu hotová. Úpravy stylů, které provedete v tomto souboru, „přepíší“ styly rodičovské šablony (ty nicméně zůstanou nedotčeny na serveru v adresáři původní šablony, no není to paráda? :-). Otestujte si, zda jste postupovali správně a změňte zde styl nějakého viditelného prvku webu.

Ostatní soubory šablony

Kromě stylů tímto způsobem můžete upravovat i další soubory šablony, jednotlivé php soubory. Například můžete upravit hlavičku a patičku (header.php a footer.php), nebo soubor pro zobrazování příspěvků (content.php) atd atd. Stačí daný soubor zkopírovat z rodičovské šablony do vaší child theme. Zkopírované soubory tam lze upravit a WordPress jimi pak opět bezpečně „přepíše“ původní soubory.

Já do child theme umisťuji také některé další soubory, se kterými v upravené šabloně pracuji, např. obrázky loga, favicon, různé ikony navigace apod. Na ně se pak odkazuji v php souborech jednoduše takto, př.:

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="Holan.eu" />

Úpravy funkcí (soubor functions.php)

Upravovat můžete samozřejmě i funkce (typicky umístěné v souboru functions.php) a to podobným způsobem – vytvoříte soubor functions.php ve své child theme a umístíte zde své úpravy. Píšu „podobným“, protože u funkcí platí drobná výjimka v tom, jak WordPress functions.php zpracovává. Na rozdíl od style.css a ostatních souborů nepoužije WordPress obsah souboru functions.php k „přepsání“ toho původního, ale k jeho „doplnění“.

Zálohování child theme šablony

Jak už tušíte, tak zálohování vašeho vele-díla je také brnkačka. Prostě a jednoduše zkopírujete ze serveru celý adresář „vase_sablona-child“ se všemi soubory a podsložkami a je to.

Důležité zdroje

Materiály k child theme včetně dalších technických detailů najdete přímo na WordPressu. Rozhodně také doporučuji prostudovat si základy WordPressu v podobě Template Hierarchy – to se určitě vyplatí, protože je zde popsáno, jak WordPress šablony fungují, co které soubory v šabloně dělají a kde je najít.