Vyberte stránku

Návod na vytvoření Divi child theme

Naposledy aktualizováno: 18.05.2022

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?

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.

Štítek:
Kategorie: Website