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.

VH

Vladimír Holan

Během své praxe v online marketingu a technologiích jsem měl možnost spolupracovat na zajímavých projektech a učit se od nejtalentovanějších lidí v oboru. O své zkušenosti a know-how se mohu podělit také s vámi.
Moje CV najdete na linkedin.com/in/VladimirHolan