Child theme

Co je child theme

Tzv. Child theme (někdy se jí říká i odvozená šablona) je šablona, která přebírá funkcionalitu, vlastnosti, funkce, styly a vše ostatní ze své rodičovské šablony (parent theme). Výhodou však je, že do child theme můžete přidat nové funkce (styly, logiku kódu, chování…), které “přetíží” ty definované v té rodičovské. A pokud provedete aktualizaci rodičovské šablony, vaše změny zůstanou.

Co třeba často na webech řeším (a tím pádem je to i v jejich child theme)?

• Chcete mít aktualizace pod kontrolou a jejich automatické provedení vypnout?
• Používáte pro překlady Polylang? Přidejte si vlastní ikonky do menu.
• Věděli jste, že má DIVI builder standardně vypnuté zoomování (což je vlastně UX antipattern)?
• Pracujete na e-shopu a chcete v seznamu produktů zobrazit vlastní informace?
• Chcete změnit např. šablony e-mailů, které chodí z WooCommerce? Nebo jiné šablony, které jsou součástí pluginů?
• Chcete změnit e-mail, ze kterého WP odesílá e-maily (pokud pluginy nemají vlastní nastavení)?
• a další…

Důvody použití

• Máte kousek kódu, který potřebujete do webu, ale nechcete kvůli němu dělat plugin.
  • Zpravidla se takové kousky dávají do souboru “functions.php“, který je ve složce wp_includes. A jak správně tušíte – ten zmizí s aktulizací WP. Proto se takové kousky kódu (někdy se jim říká snippety) dávají do child theme (do souboru functions.php).
  • Spousta takových snippetů řeší to, co by jinak řešily pluginy. Ušetříte tak na počtu pluginů a snížíte nebezpečí, že nějaký nebude s jiným fungovat.
• Libovolné úpravy rodičovské (rozložení prvků jednotlivých šablon, logika kódu… cokoli je v šabloně).
  • Např. jste si koupili šablonu a nelíbí se vám, jak vypadá konkrétní rozložení prvků např. pro šablonu autora článku – díky child theme si ho můžete změnit a změny se s aktualizacemi neztratí.
  • Pokud děláte hodně změn (které by téměř vystačily na celou novou šablonu) – i tady je dobré popřemýšlet, zda nepoužít raději child theme. Nehrozí totiž, že zapomenete naformátovat konkrétní funkci (např. seznam produktů v kategorii) – v takovém případě se použije rodičovská verze, která vás zachrání.
• Potřebujete mít “verze” webu, mezi kterými chcete jednoduše přepínat – pak přepnete jen child theme.
• Pokud si chcete udělat svůj balíček změn “na míru” a pracujete často s jednou šablonou/builderem – pak si můžete udělat univerzální child theme, přepoužívat ji a šetřit si tak čas.
• Nějaká další použití…

Nevýhody

• Child theme je závislá na své rodičovské šabloně. Tj. může se stát, že budete child theme muset více/méně upravit, pokud ji chcete přepoužívat mezi šablonami.

Chcete vidět Child theme v praxi?

Jak ji vytvořit

Manuálně

Na tom zapracuji do budoucna 🙂

Pomocí pluginu

1. Instalujete a aktivujete plugin Child Theme Configurator (Lilaea Media):

2. Ve WP menu ho pak najdete pod Tools (Nástroje) -> Child Theme.

3. Zvolíte možnost “CREATE a new Child Theme“ a pak si necháte analyzovat šablonu, kterou aktuálně používáte (pro kontrolu, zda je child theme vytvořit).

4. Následně vložíte potřebné údaje:

• název – většinou se používá “{rodicovska_sablony}-child”, aby bylo jasné, že jde o child šablonu (a od které je odvozena).
• v child theme attributes pak vyplníte autora, popis…
• zbytek necháte, jak je (nebo změníte, podle potřeby).

5. Tlačítkem “Create New Child Theme“ potom vytvoříte novou child theme.

6. Nyní máte mezi šablonami o jednu navíc – vedle rodičovské (a všechno ostatních, pokud jich tam bylo více) se objeví nová child Theme, jak jsme ji nastavili.

Po vytvoření obsahuje child theme jen to naprosto základní, co odvozená šablona obsahovat má. Doporučuji před aktivací zkontrolovat šablonu v náhledu, abyste měli jistotu, že je vytvořena správně.

Co s vytvořenou child theme?

Po vytvoření ji pak můžete libovolně upravovat:

• přepisovat soubory klasických šablon (např. pro příspěvek, stránku, blog…),
• přidávat překlady,
• upravovat styly…
• A hlavně přidávat drobné kousky kódu do functions.php souboru. Mnohdy je výhodnější použít nějaký filtr nebo akci, které WP nabízí, než danou věc řešit pluginem (pokud je dostatečně malá).

Přidat kód do functions.php

Functions.php většinou slouží pro malé kousky kódu, které mění chování webu, na které byste jinak potřebovali plugin. Např.:

• změna odesílatele e-mailů,
• přidat podporu pro SVG,
• zobrazit v košíku procentuální slevu,
• spoustu dalšího.

Upravit functions.php můžete dvěma způsoby

Doporučení: Je lepší takové věci řešit někde jinde než na produkčním webu (lokální vývoj, subdoména), aby se vám nestalo, že se “upíšete” a shodíte klientovi web.

1. Ve WP menu najděte Appearance (Vzhled) -> Theme file editor – najdete si functions.php a můžete tvořit.
   • Pokud máte v rámci zabezpečení webu editaci z webu vypnut, musíte jít možností 2. níže.
   • Není to úplně komfortní cesta a pokud uděláte typografickou chybu v kódu (např. zapomenete středník), tak si můžete shodit web. Opravíte ho pak možností 2. (vizte níže):
2. Na FTP najdete soubor a můžete ho upravovat, jak libo,
   • pravděpodobně ho najdete ve složce www/wp-content/themes/{theme_name}.
   • Když uděláte někde chybu, pořád jste na FTP a můžete ji snadno opravit. Navíc – WP už umí posílat e-maily v případě chyby, tedy (většinou) vám dorazí e-mail s popisem, kde je problém.

Užitečné snippety

Na internetu je spousta užitečných snippetů, které vám mnohdy dost zjednoduší život.

• https://wpmudev.com/blog/shun-the-plugin-100-wordpress-code-snippets-from-across-the-net/
• https://themeisle.com/blog/code-snippets-for-wordpress/

Je několik snippetů, které ráda používám já. Najdete ve webových zákuscích – v části “snippety”.

Zdroje

• https://vyladeny-web.cz/child-theme/
• https://www.wpbeginner.com/beginners-guide/wordpress-child-theme-pros-cons/

Potřebujete s Child theme pomoci?