Newsletter 365tipů můžete číst zdarma. Placené předplatné je dobrovolná podpora, která pomáhá webu pokračovat.
Podpořit 365tipů

TIP#3263: Jak k nějaké šabloně na WordPressu přidávat vlastní věci? Třeba přes “child theme”. Praktické postřehy

Pustil jsem se do předělávek 365tipů (ale i FeedIT.cz) s pomocí Codex AI. Jde to vlastně snadno a otevírá to podstatně víc možností, než obvyklé využití předem daných věcí v nějaké konkrétní šabloně či pluginu.

Klíčový prvek je tam Child Themes. Samostatná šablona, která používá rodičovskou šablonu jako základ. Smysl je jednoduchý: můžete přidat vlastní CSS, PHP, části šablon nebo úpravy vzhledu, aniž by vám je příští aktualizace původní šablony přepsala. 

WordPres dokumentace child themes popisuje jako rozšíření rodičovské šablony, které ve výchozím stavu přebírá design i funkčnost rodičovské/parent šablonyPtheme, ale dovoluje vlastní úpravy oddělit od původních souborů.

Takže child theme použijete tehdy, když chcete upravovat soubory šablony, přidávat vlastní PHP, vlastní CSS soubory, upravovat template soubory, doplnit vlastní blokové části nebo měnit chování šablony přes hooks/filters. A můžete i přidávat funkčnost, kterou si například přidáte do menu.

Umožní ponechat parent theme aktualizovatelnou. Vlastní úpravy jsou v oddělené samostatné složce ve wp-content/themes/. Parent theme se může aktualizovat a child theme zůstává.

Samozřejmě to nevyřeší automaticky špatně napsanou šablonu, nechrání před konflikty pluginů, nepřenese vždy nastavení Customizeru a není to dobré místo pro všechno.

Jakmile začnete v child theme masivně přepisovat šablony, může se z toho stát údržbové peklo. WordPress dokumentace výslovně upozorňuje, že u rozsáhlých úprav může být lepší parent theme forknout a udělat vlastní plnohodnotnou šablonu.

Vzhled patří do šablony. Funkčnost webu, která má přežít výměnu šablony, patří spíš do pluginu. WordPress u functions.php sám upozorňuje, že i když může fungovat podobně jako plugin, obecné funkce nezávislé na vzhledu je lepší dávat do pluginu.

Minimální child theme: co musí obsahovat

Úplné minimum je složka vaší child theme a soubor style.css s hlavičkou. Klíčové je pole Template, které musí přesně odpovídat názvu složky parent theme. WordPress dokumentace uvádí style.css jako nezbytný soubor child theme a upozorňuje, že hodnota Template musí být stoprocentní shoda s názvem složky rodičovské šablony. Tohle je častá chyba, kdy neuvedete přesný název složky.

/*
Theme Name: Moje Child Theme
Template: nazev-slozky-parent-theme
Version: 1.0
*/

Po nahrání do wp-content/themes/ se vaše child theme objeví v administraci mezi šablonami.

Ale pozor, samotný style.css ještě nemusí znamenat, že se automaticky načte vaše CSS. To záleží na parent theme.

WordPress automaticky negarantuje, že se child theme CSS načte přesně tak, jak čekáte. Dokumentace upozorňuje, že různé parent themes načítají styly různě: některé načítají parent i child stylesheet, některé jen parent, některé jen aktivní stylesheet, některé u blokových šablon nemusí klasický stylesheet načítat vůbec.

Někdy prostě musíte načíst i parent stylesheet, jindy ne. Neexistuje univerzální pravidlo pro všechny šablony. Je potřeba se podívat, co dělá parent theme.

functions.php: nepřepisuje parent, ale přidává se k němu

Soubor functions.php v child theme slouží pro vlastní PHP kód. Můžete v něm přidávat hooks, filters, registrovat styly, skripty, podporu funkcí šablony a drobné úpravy.

Nepřepíše functions.php parent theme. Načítají se oba soubory. WordPress dokumentace uvádí, že při aktivní child theme se functions.php child theme načte těsně před functions.php parent theme.

A rozhodně nekopírujte celý functions.php z parent theme do child theme. Dokumentace varuje, že to může způsobit fatální chyby kvůli duplicitním názvům funkcí. Vytváříte si vlastní a do child theme dávejte jen vlastní kód. Ideálně přes hooks/filters. Každou funkci pojmenujte unikátně,

Co ještě byste měli vědět?

Aktivace “child theme” převezme skoro všechno z originálu, ale některé věci ne. 

Custom CSS (Vzhled → Přizpůsobit → Dodatečné CSS) v Nastavení bude prázdné, z parent se nepřenáší do child. Před aktivací child theme zkopírujte toto vlastní CSS bokem. Po aktivaci ho vložte do child theme — ideálně už ne do Customizeru, ale do style.css child theme.

Není jisté, že všechna nastavení původní šablony budou platit i v nové, typicky například ne nastavení velikosti fontů. Customizer a některá nastavení šablony se ukládají jako nastavení aktivní šablony.

Child theme je pro WordPress jiná aktivní šablona, i když používá parent theme.  Díky tomu může mít child theme vlastní nastavení, vlastní barvy, vlastní menu pozice, vlastní logo, vlastní fonty nebo vlastní rozvržení.