Child Theme ve WordPress

Na sobotní konferenci jsem zdůrazňoval důležitost použití child themes ve WordPressu. Bohužel se ukázalo, že ne každý si dovede představit, jak vlastně taková child theme funguje.

Když si na váš web nainstalujete šablonu, tak takovou šablonu je možné aktualizovat, pokud tedy autor nějakou aktualizaci udělá.

Nikdo z nás však nenajde šablonu, jenž mu vyhovuje absolutně. A pokud chcete upravit vzhled webu, zásahům do šablony se nevyhnete. Ať již upravujete css styly, nebo přímo kód v souborech.

Po aktualizaci o vše přijdete!

Při aktualizaci se šablona smaže a nahrají se nové soubory. Díky tomu přijdete o vámy pracně vyvořené úpravy a můžete začít znovu. Naštěstí vývojáři WordPressu vytvořili child themes, tak aby jste mohli šablonu používat bez obavy ze stráty úprav.

V child šabloně pak řešíte jen ty části kódu, nebo stylů, jenž chcete upravit. Vše ostatní se načítá z rodičovské šablony.

Potřebujete například upravit zobtazování titulku detilu stránky. V rodičovské šabloně máte soubor content-page.php, jenž překopírujete do složky child theme a v něm upravíte html kód titulku.

WordPress si nejprve zjistí, jaké soubory jsou v child theme a ty soubory pak již v rodičovské šabloně nenačítá.

Jak vytvořit child theme?

Pokud se vám nechce číst návod a raději se podíváte na video, jedno jsem natočil již pře nějakou dobou a najdete jej na webu wp-see.com.

Ti co raději čtou se mohou věnovat návodu zde v článku.

Co budeme potřebovat pro child theme?

Rodičovskou šablonu. Pokud si koupíte šablonu třeba na ThemeForest, často složka, jenž si stáhnete, obsahuje zip soubor se šablonou a zip soubor označený nazev-sablony-child. Pokud ano, máte vyhráno. Nahrejte obě složky a aktivujte child. Máte hotovo a dál číst nepotřebujete.

Pokud tam ale child není, musíte si ji vytvořit. Ve složce themes, kde máte všechny šablony vytvořte složku a nazvěte ji nazev-sablony-child.

Nyní se vraťte do složky rodičovské šablony a otevřete si soubor style.css.

Na jeho začátku uvidíte tento kód:

/*
Theme Name: Test
Theme URI: 
Author: Vladislav Musilek
Author URI: toret.cz
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: test
Tags:
*/

Této části se říká stylesheet header a je to životně důležitá součást šablony. WordPress podle této části kódu zjišťuje existenci šablony a informace o ní. Zde vidíte, že šablonu jsme nazvali Test.

Dalším krokem je vytvoření prázdného css souboru style.css ve složce child theme. Soubor nemusí kromě stylesheet headeru obsahovat žádný jiný kód. Header je však nutné upravit:

/*
Theme Name: Test Child
Theme URI: 
Author: Vladislav Musilek
Author URI: toret.cz
Description: Test Child Theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: parenttheme
Text Domain: test
Tags:

Tím máme připravenou šablonu tak, že ji vidíme v administraci a můžeme ji aktivovat.
Všimněte si rozdílu, oproti původnímu zápisu, kdy je navíc položka Template. Ta říká, jaká šablona je te rodičovská. Vždy do ní zapisujeme název šložky rodičovské šablony, například Template: avada.

Co ještě musíme udělat je, že WordPressu musíme říci, odkud má načítat css styly pro šablonu.

Dříve se to řešilo pomocí zápisu import ve style.css, ale tato metoda je již zavržená a správný způsob je pomocí enqueue.

Načtení css stylů pro child theme

Nyní musíme ve složce child šablony vytvořit soubor functions.php, tedy stejný soubor, jenž se nachází i v rodičovské šabloně.

Do něj vložíme tento kód:
(upraveno 4.12.2015 z důvodu neaktuálnosti kódu)

add_action( 'wp_enqueue_scripts', 'your_child_theme_enqueue_styles' );
function your_child_theme_enqueue_styles() {
    // Parent style id - replace your child theme name
    $parent_style = 'parent-style';
 
    // Enqueue Parent theme's style
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    // Enqueue Child theme's style 
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) );
 
 
}

Hotovo!

Child theme máte připravenou a můžete začít upravovat šablonu dle vašich potřeb.

Určitě se stane, že narazíte na problémy, některé věci nejsou úplně jednoduché, ale je to jediná správná cesta.

Poznámka:
Aktuálně je k dispozici připravená child theme, kterou jsi jen stáhnete, změníte název složky rodičovské šablony a můžete upravovat – http://musilda.cz/child-theme-snadno-a-rychle/