Vytvoření Child theme je poměrně jednoduché a zvládne to i začátečník bez hlubších znalostí tvorby webu. Zároveň je Child theme jedním ze základů při tvorbě webových stránek pomocí předpřipravené šablony. Užitečnost je obrovská a provedení jednoduché.
- Proč vytvořit Divi child theme?
- Jak vytvoření child šablony pomáhá?
- Co je potřeba pro vytvoření child theme?
- Krok 1 – Vytvořte složku DIVI Child Theme
- Krok 2 – Vytvořte soubor Style.css pro úpravy CSS
- Krok 3 – Vytvořte soubor Functions.php
- Krok 4 – Vytvořte si náhledový obrázek
- Krok 5 – Aktivujte si vaši Child Theme
- Krok 6 – Otestujte, zda vše funguje
Proč vytvořit Divi child theme?
Když chcete provádět úpravy ve vaší šabloně (Divi) bez toho, abyste se při každé aktualizaci šablony báli, že veškeré vaše změny budou smazány novou aktualizací. Také chcete všechny vaše úpravy shromažďovat na jednom místě.
Jak vytvoření child šablony pomáhá?
Odvozená šablona (child theme) zachová vaše veškeré úpravy také po aktualizaci Divi šablony. Kdykoliv se aktualizuje Divi šablona, tak se upraví také všechny soubory související se šablonou. Takže pokud jste provedli úpravy přímo v souborech šablony, tak tyto úpravy budou nenávratně pryč (pokud neobnovíte zálohu). Child theme eliminuje situaci, kdy budou vaše úpravy smazány, protože místo přímých souborů šablony, přidáte speciální soubor (složku), která nebude aktualizací upravena a zachová vaše specifické úpravy.
Co je potřeba pro vytvoření child theme?
- Nainstalována a aktivována mateřská šablona (v našem případě Divi)
- Textový editor pro úpravu souborů
- FTP klient
- 10 minut času
Krok 1 – Vytvořte složku DIVI Child Theme
Vytvořte novou složku přímo ve vašem WordPressu pomocí FTP klienta. Nejprve běžte do složky, kde máte přímo soubory k vaší Divi šabloně (wp-content/themes/). Potom vytvořte novou složku uvnitř wp-content/themes/ a pojmenujte ji “divi-child”. Budete tak mít novou složku, jejíž lokace bude wp-content/themes/divi-child.
Krok 2 – Vytvořte soubor Style.css pro úpravy CSS
Uvnitř vaší nové složky vytvořte pomocí textového editoru nový soubor se jménem style.css (musíte použít přesně takové jméno souboru, aby ho WordPress rozpoznal). Do nového souboru vložte následující text:
/*
Theme Name: Divi Child
Description: Divi Child Theme
Template: Divi
Version: 1.0.0
*/
/* =Theme customization starts here
——————————————————- */
Krok 3 – Vytvořte soubor Functions.php
Vytvořte další soubor uvnitř vaší child theme složky. Pojmenujte jej functions.php (název souboru musí být přesně takový) a přidejte do souboru 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‘ );
Krok 4 – Vytvořte si náhledový obrázek
WordPress umožňuje vytvořit náhled (thumbnail) šablony, který bude viditelný v prostředí WordPress. Pro vytvoření náhledu pro vaši child theme musíte nejprve vytvořit obrázek (doporučené rozměry jsou 1200 px na šířku a 900 px na výšku) a uložte je pod názvem screenshot.png (opět musíte použít přesně tento název). Potom tento obrázek přidejte pomocí FTP klienta do vaší složky, kde máte již soubory style.css a functions.php.
Krok 5 – Aktivujte si vaši Child Theme
Potom co si vytvoříte vaší odvozenou šablonu (child theme) včetně všech potřebných souborů (style.css a functions.php), tak je zapotřebí si child theme aktivovat v prostředí WordPress. Na vaší WordPress nástěnce klikněte na Appearances > Themes (Vzhled > Šablony) stránku a šablonu aktivujte.
Krok 6 – Otestujte, zda vše funguje
Abyste si otestovali, zda jste udělali vše správně a child theme funguje, tak přidejte nějaké CSS úpravy v souboru style.css vaší Child theme a soubor uložte. Po uložení byste provedení změny měli vidět na vašich webovkách. V případě, že používáte pokročilé cachování, tak jej otevřete v anonymním okně vašeho prohlížeče.