Průvodce podřízenými šablonami ve WordPressu

Co je podřízená šablona ve WordPressu

Podřízená šablona (child theme) ve WordPressu je šablona, která dědí funkčnost, styly a soubory šablon z jiné šablony zvané rodičovská (parent). Podřízená šablona vám umožňuje měnit design a funkčnost webu bez přímé úpravy souborů rodičovské šablony. Proč je to důležité? Protože když rodičovskou šablonu aktualizujete, všechny vaše změny v jejích souborech se smažou a vrátí na výchozí stav.

Představte si tento scénář: koupili jste si prémiovou šablonu WordPressu, upravili jste CSS styly, přidali vlastní funkce do functions.php a změnili soubory šablon. O měsíc později autor šablony vydá aktualizaci s bezpečnostními záplatami. Šablonu aktualizujete a – všechny vaše úpravy jsou pryč. Musíte všechno dělat znovu od začátku. S podřízenou šablonou tento problém neexistuje, protože vaše změny jsou uložené v samostatných souborech, kterých se aktualizace netýkají.

Proč používat podřízenou šablonu

Existuje několik klíčových důvodů, proč používat podřízenou šablonu místo přímé úpravy rodičovské šablony.

Bezpečné aktualizace

To je hlavní důvod. Šablony WordPressu se pravidelně aktualizují bezpečnostními záplatami, opravami chyb a novými funkcemi. Bez podřízené šablony máte dvě špatné volby: aktualizovat šablonu a přijít o všechny úpravy, nebo šablonu neaktualizovat a vystavit web bezpečnostním zranitelnostem. S podřízenou šablonou rodičovskou šablonu aktualizujete bez obav, protože vaše změny jsou v podřízené šabloně v bezpečí.

Organizace kódu

Podřízená šablona jasně odděluje vaše úpravy od původního kódu šablony. Když se podíváte na soubory podřízené šablony, vidíte přesně, co jste oproti původnímu designu změnili. To usnadňuje ladění, dokumentaci i spolupráci s dalšími vývojáři. Pokud něco nefunguje správně, můžete soubor z podřízené šablony jednoduše smazat a vrátit se k původnímu chování rodičovské šablony.

Učení a experimentování

Podřízená šablona je bezpečným prostorem pro učení se vývoji ve WordPressu. Můžete experimentovat s CSS, PHP a soubory šablon bez obav, že web rozbijete. Pokud se něco pokazí, podřízenou šablonu deaktivujete a web se vrátí k původnímu vzhledu s rodičovskou šablonou. To je obzvlášť užitečné pro začátečníky, kteří se vývoj ve WordPressu teprve učí.

Vytvoření podřízené šablony krok za krokem

Vytvoření podřízené šablony je jednoduchý proces, který vyžaduje jen dva soubory. Tady je podrobný návod.

Krok 1: Vytvořte adresář

V adresáři wp-content/themes/ vytvořte novou složku pro podřízenou šablonu. K souborům přistupte přes Správce souborů v cPanelu nebo přes FTP. Konvence pojmenování je nazev-rodicovske-sablony-child. Pokud například používáte šablonu „flavor“, vytvořte složku „flavor-child“. Není to povinné, ale usnadní to identifikaci podřízené šablony. Název složky musí být mezi všemi šablonami na webu unikátní.

Krok 2: Vytvořte soubor style.css

V adresáři podřízené šablony vytvořte soubor style.css s následujícím hlavičkovým komentářem: Theme Name (povinné – unikátní název vaší podřízené šablony), Template (povinné – název adresáře rodičovské šablony, přesně tak, jak je složka pojmenovaná), Version, Description a Author. Pole Template je zásadní – musí přesně odpovídat názvu složky rodičovské šablony. Pokud je rodičovská šablona ve složce flavor, musí být Template hodnota flavor. Chyba v tomto poli znamená, že podřízená šablona nebude fungovat.

Krok 3: Vytvořte soubor functions.php

V podřízené šabloně vytvořte functions.php a přidejte funkci, která zařadí (enqueue) styly rodičovské šablony. To je nutné, aby podřízená šablona zdědila design rodičovské šablony. Použijte wp_enqueue_style() uvnitř funkce zavěšené na akci wp_enqueue_scripts. Zařaďte parent-style pomocí get_template_directory_uri() pro cestu k rodičovské šabloně a child-style pomocí get_stylesheet_directory_uri() pro cestu k podřízené šabloně, přičemž parent-style nastavte jako závislost, aby se načetl jako první.

Krok 4: Aktivace

Přejděte do administrace WordPressu, Vzhled → Šablony, a aktivujte svou podřízenou šablonu. Měli byste vidět web identický jako předtím – všechny styly a funkce rodičovské šablony. Pokud web vypadá úplně jinak (bez stylů), zkontrolujte, že functions.php správně zařadil styly rodiče a že hlavička Template v style.css je správná.

Úpravy podřízené šablony

Teď, když máte funkční podřízenou šablonu, můžete začít s úpravami.

Úpravy CSS

Své změny CSS přidávejte do souboru style.css podřízené šablony. Protože se podřízená šablona načítá PO rodičovské, mají vaše styly přednost (princip kaskády CSS). Pokud chcete například změnit barvu nadpisu, přidejte pravidlo do style.css podřízené šablony a to přepíše styl z rodičovské šablony. K určení přesných CSS selektorů, které potřebujete změnit, použijte vývojářské nástroje prohlížeče (F12).

Přepsání šablon (template override)

WordPress používá hierarchii šablon k určení, který soubor použít pro zobrazení stránky. Podřízená šablona může přepsat jakýkoli soubor šablony z rodičovské šablony tím, že vytvoří soubor se stejným názvem. Pokud například chcete změnit vzhled jednoho příspěvku, zkopírujte single.php z rodičovské šablony do podřízené a upravte ho. WordPress automaticky použije verzi z podřízené šablony. DŮLEŽITÉ: zkopírujte celý soubor, ne jen část, kterou měníte, protože soubor podřízené šablony rodičovskou verzi zcela nahradí.

Specifika functions.php

Na rozdíl od souborů šablon, kde podřízená šablona rodičovskou nahrazuje, se functions.php z podřízené šablony načítá PŘED functions.php rodičovské šablony. To znamená, že oba soubory jsou aktivní zároveň. Je to užitečné, protože můžete přidávat nové funkce bez kopírování celého functions.php rodičovské šablony. Ale pozor – pokud nadefinujete funkci se stejným názvem jako v rodičovské šabloně (a rodič používá kontrolu if(!function_exists())), bude mít vaše verze přednost.

Přidávání nových souborů šablon

Kromě přepisování existujících souborů šablon může podřízená šablona přidávat zcela nové. Můžete například vytvořit vlastní šablonu stránky, která v rodičovské šabloně neexistuje. Přidejte PHP soubor s komentářem Template Name nahoře a bude dostupný jako možnost v editoru WordPressu při vytváření nové stránky. Je to účinný způsob, jak přidat specifická rozvržení pro vstupní stránky, portfolio nebo jiné vlastní potřeby.

Pokročilé techniky

Odstranění akcí a filtrů rodiče

Někdy chcete funkčnost z rodičovské šablony odstranit místo přidávání nové. Použijte remove_action() a remove_filter() ve functions.php podřízené šablony k odstranění hooků, které rodičovská šablona zaregistrovala. To vyžaduje znalost přesného názvu funkce, hooku a priority z rodičovské šablony. Tyto informace najdete v prohlédnutí zdrojového kódu rodičovské šablony. Pozn.: remove_action() musí být zavolán až po registraci akce – použijte hook after_setup_theme s pozdější prioritou.

Přepsání šablon WooCommerce

Pokud používáte WooCommerce, může podřízená šablona přepsat soubory šablon WooCommerce vytvořením adresáře woocommerce/ uvnitř podřízené šablony. Chcete-li například upravit vzhled stránky produktu, zkopírujte content-single-product.php z wp-content/plugins/woocommerce/templates/ do wp-content/themes/vase-child-sablona/woocommerce/ a upravte ho. WooCommerce automaticky použije vaši verzi.

Použití podřízené šablony s page buildery

Pokud používáte Elementor, Divi nebo jiný page builder, podřízená šablona se i tak doporučuje. Page builder ukládá obsah do databáze, takže nezávisí na souborech šablon, ale úpravy CSS, vlastní PHP funkce a změny hlavičky/patičky by měly být v podřízené šabloně. Většina populárních šablon (Astra, GeneratePress, OceanWP) má oficiální podřízené šablony ke stažení z webu autora šablony.

Časté chyby a jak se jim vyhnout

• Špatná hlavička Template: Template musí přesně odpovídat názvu adresáře rodičovské šablony. I rozdíl ve velkých/malých písmenech může způsobit problém.
• Chybějící zařazení stylu rodiče: Bez správného zařazení (enqueue) podřízená šablona nezdědí design rodičovské šablony a web bude vypadat rozbitě.
• Kopírování příliš mnoha souborů: Nekopírujte do podřízené šablony všechny soubory z rodičovské. Kopírujte POUZE soubory, které skutečně měníte. Příliš mnoho kopií znamená, že pro tyto soubory nebudete dostávat aktualizace z rodičovské šablony.
• Zapomenutý PHP tag: functions.php musí začínat tagem <?php. Bez něj WordPress soubor nerozpozná jako PHP a bude ho ignorovat.
• Úpravy podřízené šablony místo Přizpůsobení (Customizer): Pro jednoduché změny (barvy, písma, rozvržení) použijte Přizpůsobení WordPressu, které ukládá nastavení do databáze. Podřízenou šablonu používejte pro strukturální změny, které Přizpůsobení nepokrývá.

Závěr

Podřízené šablony WordPressu jsou nezbytným nástrojem pro každého, kdo upravuje vzhled nebo funkčnost svého webu. Vytvoří se za 5 minut (dva soubory), chrání vaše úpravy před aktualizacemi rodičovské šablony a poskytují organizovaný způsob správy vlastního kódu. Ať už měníte jen pár pravidel CSS, nebo stavíte složitá přepsání šablon, vždy používejte podřízenou šablonu. V BeoHostingu vám naše podpora pomůže vytvořit a nakonfigurovat podřízenou šablonu pro váš web na WordPressu, abyste mohli design bezpečně upravovat bez obav ze ztráty změn.