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.

Čtěte  Casper free responsivní Wordpress šablona

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ěte  Dopravní zóny ve WooCommerce - videonávod

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 ) );
 
 
}
Čtěte  4 OnePage free WordPress šablony
}

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/

 

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Related posts

15 Comments

    1. Musilda

      Využívání pluginů by se nemělo přehánět. V každém případě by správce webu měl vědět, jak funguje child theme.

      Reply
  1. Petr

    Dříve jsem o child theme nevěděl nic. Je to opravdu dobrá věc, ale pokud někdo chce udělat šablonu přímo na míru nějakému webu, kde bude spousta funkcí, raději bych volil úplně novou šablonu i za cenu, že ta šablona bude něco stát. Do budoucna se to jistě danému webu vyplatí.

    Pro klasické weby, ale stačí vytvořit child theme a zvesela vytvářet web.

    Reply
  2. Hamil1

    Děkuji za návod. Nakonec jsem to dokázal, ale až když jsem změnil get_stylesheet_directory_uri() na get_template_directory_uri().
    Jakou funkci má číslo 1000 v prvním řádku function.php?

    Reply
  3. Musilda

    To číslo určuje v jakém pořadí se bude provádět funkce zavěšená do hooku. 1000 je trochu prasárnička :-)

    Reply
  4. tomat

    Díky za tip Hamil1, funguje opravdu až po změně na get_template_directory_uri() , jestli je hodnota 1000 prasárnička proč ji v článku uvádíš? :)

    Reply
    1. Musilda

      Protože v zásadě to není špatně. Ale ten návod již stejně není aktuální a možná ještě dnes jej přepracuji.

      Reply
  5. Lucie

    Ahoj, jsem v tomhle začátečník, tak bych měla pro vás možná hloupý dotaz. Ten kod pro functions.php nahradí ten původní kod nebo ho jen k tomu původnímu z rodičovské šablony přidám? Předem díky za radu.

    Reply
    1. Musilda

      Dobrý den
      ten kód se vloží do functions.php v child theme.
      Podívejte se na odkaz na konci článku, tam najdete již hotovou child šablonu.

      Reply
    1. Musilda

      Nechybí. V textu je uvedeno, že se jedná o kód, který má být do souboru vložen.

      Reply
  6. Cokoliv

    Child-theme mi nefunguje pro soubory:
    bootstrap.js
    customizer.php
    functions.php

    Pro nektere dalsi funguje:
    footer.php
    page.php
    sidebar.php

    Nemate nekdo zkusenosti s resenim teto chyby? Dekuji.

    Reply
  7. Ivan

    V css souboru child šablony (Theme Name: Test Child) chybí parametr Template – bez něho nepůjde šablona aktivovat v administraci.

    Reply
  8. Klaris

    Zdravím,
    dostala jsem se poprvé k vytvoření Child Theme a mám prosbu ohledně stylů. Všude jsou uvedeny příklady pouze se style.css, ale jak mám zapsat kód do functions.php když mám css souborů více? Ve style.css jsou pouze informce o šabloně (ty co se dávají i do child) a pak jen „.sticky {} .bypostauthor {}“ ostatní styly jsou v jiné složce. Jsou tam i styly pro vzhled v administraci a editoru.

    Reply

Leave a Reply

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *