Jak vytvořit Divi child theme – kompletní průvodce

Vytvoření child theme, tedy odvozené šablony Divi je nejlepší způsob, jak v této prémiové šabloně pro WordPress provádět pokročilá nastavení a nemuset se bát, že se s každou aktualizací ztratí. V případě rozsáhlých úprav má ale child theme i další výhody. Jednou z těch hlavních je uspořádání veškerého CSS na jedno místo. Vaši spolupracovníci tak k němu budou mít snadný přístup a naopak klienti, kteří by do něj zasahovat neměli, k němu pustit nemusíte. V tomto článku vám popíšeme a ukážeme, jak Divi child theme vytvořit. Náš kompletní průvodce bude užitečný zejména pro začátečníky (jak s Divi, tak i s redakčním systémem WordPress), ale užitečné rady v něm možná najdou i vývojáři, kteří se chystají nasadit odvozenou šablonu u svých klientů.

Proč potřebujete Divi child theme

Jak už jsme dříve vysvětlovali v obecném článku o child theme, důvodem je zejména zachování úprav po aktualizaci šablony. Aktualizace chodí průběžně a jakékoli vaše zásahy přímo do souborů se při nich ztratí, protože jsou nahrazeny novými oficiálními soubory s kódem autorů. Aby se to nedělo, vytváří se v prostřední redakčního systému WordPress pro aktuální šablonu její odvozená podoba, tzv. child theme.

Odvozená (podřízená) šablona zdědí design a funkce rodičovské šablony (parent theme), což je šablona, kterou hodláte používat, v tomto případě Divi. Všechny soubory, které převedete pod child theme, zůstanou při aktualizaci bez změny, o své úpravy v nich nepřijdete. V child theme tedy můžete bez obav přidat velké množství CSS, JavaScriptu či třeba PHP, do souborů parent theme zasahovat nemusíte vůbec.

Je možné používat Divi bez child theme?

Divi umožňuje přidávat vlastní CSS na mnoha místech, např. v Divi Builderu nebo v přizpůsobení a nastavení šablony. Dokonce v ní najdete vylepšený editor pro přidávání vlastního kódu. Kód přidaný tímto způsobem se zachová i při aktualizacích. Dalo by se tedy namítat, že u drobných úprav provedených uživatelem právě takto, je zbytečné child theme zřizovat. Ukažme si tedy příklady situací, kdy byste si child zřídit měli a kdy to naopak není nezbytné.

Divi šablona
Série o vynikající šabloně Divi

Koupit Divi šablonu

Divi child theme byste měli používat v těchto případech:

  • Plánujete-li provádět změny v kódu konkrétních souborů šablony (nejčastěji functions.php).
  • Plánujete-li přidávat stovky řádků kódu (nejen CSS).
  • Chcete-li spolupracovat s ostatními a urychlit dobu vývoje tím, že budete mít vše na jednom místě.
  • Nechcete-li, aby vaši klienti rozbíjeli váš kód. Jeho ukrytí v podřízené šabloně ho rozhodně ochrání před ostatními.

Divi child theme nemusíte používat v těchto případech:

  • Plánujete-li provádět drobné úpravy tématu. Přidání malého množství CSS (například méně než 100 řádků) přes Přizpůsobit nepředstavuje vážný důvod pro založení child theme.
  • Neplánujete-li spolupracovat s více lidmi.
  • Nevadí-li vám, že vaši klienti uvidí vaše úpravy kódu v nastavení šablony.

Co budete potřebovat k vytvoření Divi child theme

K vytvoření child theme šablony Divi budete potřebovat následující:

  • nainstalovanou a aktivovovanou šablonu Divi;
  • textový editor (prakticky jakýkoli, stačí i základní, který je součástí každého operačního systému);
  • FTP klient, např. TotalCommander či FileZilla, pro přístup k souborům šablony, jejich úpravě, nahrávání či odstraňování (není nutný, pokud budete nahrávat child theme zkomprimované jako ZIP);
  • šálek kávy či jiný oblíbený nápoj.

Z čeho se child theme skládá

Nejzákladnější podoba child theme se skládá z pouhých tří věcí:

  1. adresáře s odvozenou šablonou,
  2. souboru style.css (do nějž budete ukládat své CSS),
  3. souboru functions.php (který musí obsahovat funkci wp_enqueue_scripts, protože právě ta přebírá soubor stylů z parent theme).

1) Vytvoření adresáře

Existují dva způsoby, jak do redakčního systému WordPress přidat soubory odvozené šablony. Složku s child theme můžete buď přidat přímo mezi šablony, nebo můžete vytvořit složku mimo WordPress, zazipovat ji a nahrát jako novou šablonu.

Chcete-li vytvořit novou složku pro odvozenou šablonu přímo, budete se muset dostat do složky, v níž jsou všechny šablony ukládány (wp-content/themes/). Tam vytvořte novou složku a pojmenujte ji „divi-child“. Cesta k souborům odvozené šablony tedy bude wp-content/themes/divi-child.

Složku s odvozenou šablonou můžete vytvořit i u sebe v počítači a pojmenovat ji „divi-child“.

2) Vytvoření souboru style.css pro přidání vlastního CSS

Ve složce nového motivu vytvořte pomocí textového editoru soubor s názvem style.css (název musí být přesně takový, jinak jej WordPress nerozpozná). Do souboru doplňte níže uvedené informace.

/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */

Naprosto nezbytným je v parametr „Template“, který správně identifikuje název adresáře vaší rodičovské šablony, v tomto případě Divi. Parametry jako název šablony („Theme Name“), URI, její popis („Description“) a autor („Author“) můžete vyplnit dle vlastní úvahy. Odvozenou šablonu můžete např. pojmenovat podle názvu společnosti, ať už vaší, či vašeho klienta. Tento název se zobrazí ve výpisu šablon přímo ve WordPress.

3) Vytvoření souboru functions.php

Dalším krokem je založení souboru s názvem functions.php, do něhož vložte následující kód.

<?php
function my_theme_enqueue_styles() { 
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Poté soubor uložte. Tento kód je specifický pro Divi a je upravenou verzí jiné funkce, s níž WordPress pracuje. Na konec nemusíte přidávat ukončovací znaky ?>. Uvedenému kódu rozumět nemusíte, stačí jej zkopírovat a vložit do příslušně pojmenovaného PHP souboru. Kód pro style.css a functions.php je převzatý ze stánek autora elegantthemes.com.

4) Vytvoření náhledového obrázku šablony

Tento krok již nepatří mezi ty tři nezbytné, je volitelný. WordPress umožňuje zobrazení miniatury, která bude sloužit jako obrázek vaší odvozené šablony v přehledu šablon ve WordPress.

Chcete-li vytvořit miniaturu pro své child theme, vytvořte obrázek o velikosti 1200×900 px a uložte jej pod názvem screenshot.png (název souboru musí být přesně takový, aby jej WordPress rozpoznal). Poté jej přidejte do složky odvozené šablony vedle dvou souborů, které tam již máte (style.css a functions.php).

Aktivace Divi child theme

A to je vše. Vaše odvozená šablona je připravena k nahrání a aktivaci. Pokud jste přidali složku a soubory child theme přímo do adresáře (přes FTP), není třeba motiv do WordPressu nahrávat. Již se tam nachází. Stačí přejít přes menu do Vzhled > Šablony a odvozenou šablonu jednoduše aktivovat.

Pokud jste složku s child theme vytvořili v počítači, můžete ji také zkomprimovat (ZIP). Nahrání a aktivace child theme tímto způsobem se neliší od běžné šablony, stačí jej nahrát přes stránku Vzhledy > Motivy a aktivovat jej.

  • Šablona Divi - instalace child theme
  • Šablona Divi - instalace child theme

Chcete-li otestovat, zda vaše podřízené téma funguje správně, přidejte do souboru style.css u child theme nějaké CSS a uložte změny. Tyto změny byste měli ihned spatřit přímo na svém webu. Možná ale budete muset stránku otevřít v jiném prohlížeči nebo anonymním okně pro případ, že je uložena v mezipaměti.

Úprava souboru functions.php

V souboru functions.php jsou uloženy hlavní funkce Divi. Abychom mohli přidat vlastní funkce, vytvořili jsme soubor functions.php ve složce odvozené šablony. Tento soubor však zcela nepřepíše funkce rodičovského tématu. Přidá do něj nové funkce podobně, jako to dělá soubor style.css pro nadřazený soubor stylů.

Protože se jedná o soubor PHP, je důležité, aby byl veškerý váš kód správně uvozen i ukončen. Přidat sem můžete jakékoli nové funkce, a to ihned za kód, který jste do souboru functions.php již vložili při zakládání odvozené šablony.

Úprava souborů šablony Divi

V child theme ale nejste omezeni pouze na úpravu souborů style.css a functions.php. Můžete přidávat a upravovat libovolné soubory rodičovské šablony. Můžete kompletně restrukturalizovat a upravit jakoukoli část šablony. Na rozdíl od úpravy souboru functions.php je ale třeba vámi vybrané soubory šablony zcela nahradit novými. Je to proto, že původní soubor nadřazeného tématu (Divi) je ignorován a místo něj je použit právě ten nový.

Chceme-li upravit soubor šablony, musíme nejprve zkopírovat starý soubor a teprve poté jej začít upravovat. Za tímto účelem jednoduše zkopírujte a vložte původní soubor motivu do složky child theme a ujistěte se, že název souboru a jeho umístění jsou naprosto stejné. Například pokud chceme upravit soubor Divi/includes/navigation.php, zkopírujeme a vložíme tento soubor do souboru divi-child/includes/navigation.php.

Ovšem pozor – Divi i WordPress se neustále zlepšují a přizpůsobují. Může tedy nastat situace (po mnoha aktualizacích Divi), že se některé soubory motivu Divi změní. Pokud se bude jednat o ty soubory, které jste si převedli do odvozené šablony, může vám child theme přestat správně fungovat. Stane se tak proto, že v child theme jednoduše používáte zastaralý kód, který je třeba aktualizovat, aby odpovídal kódu z posledních aktualizací.

Napsat komentář