Vytvoření podřazené šablony (child theme)

Modul 5: Šablony a pluginy · Doba čtení: 9 minut

Cíl lekce: Po této lekci dokážete vytvořit podřazenou šablonu (child theme) a víte, kdy ji potřebujete a kdy ne.

Klíčové pojmy: podřazená šablona (child theme), nadřazená šablona (parent theme), Template: v style.css, functions.php, wp_enqueue_style, přepsání šablony, theme.json v podřazené šabloně, Create Block Theme

Problém, který řeší podřazená šablona

Představte si, že chcete mít záhlaví své klasické šablony trochu jinak, a proto upravíte header.php ve složce šablony. Funguje to. O tři týdny později vyjde aktualizace šablony, kterou necháváte instalovat automaticky (jak se sluší a patří, lekce 7.2). Aktualizace nahradí všechny soubory šablony a Vaše úprava je pryč.

Podřazená šablona (child theme) je malá šablona, která říká: „použij všechno z té druhé šablony (nadřazené šablony, parent theme), kromě toho, co mám já.“ Své úpravy umístíte do podřazené šablony. Nadřazenou šablonu dál běžně aktualizujete a Vaše úpravy zůstávají zachované.

Kdy ano a kdy ne

Podřazenou šablonu potřebujete, pokud chcete upravit nebo doplnit soubory šablony:

• chcete jinak nastavenou šablonu (u klasické šablony PHP soubor, u blokové šablony HTML šablonu);
• chcete vlastní CSS, které je příliš velké na políčko pro CSS;
• chcete vlastní PHP kód, který souvisí s vzhledem (další formát obrázku, další umístění menu).

Podřazenou šablonu nepotřebujete, pokud:

• upravujete blokovou šablonu v Úpravě webu: tyto úpravy jsou uložené v databázi a aktualizaci přežijí (lekce 5.1);
• pouze přidáváte trochu CSS přes CSS (v Přizpůsobit u klasické šablony, nebo u Styly v Úpravě webu);
• chcete přidat funkci, která nemá nic společného se vzhledem (formulář, propojení). Ta patří do pluginu, aby přežila i výměnu šablony.

Podřazená šablona pro klasickou šablonu

Podřazená šablona je složka v wp-content/themes/ s alespoň jedním souborem: style.css. Řekněme, že Vaše nadřazená šablona je ve wp-content/themes/hoofdthema/. Vytvořte pak složku wp-content/themes/hoofdthema-child/ s tímto souborem style.css:

/*
Theme Name:   Hoofdthema Child
Template:     hoofdthema
Description:  Vlastní úpravy pro example.com
Version:      1.0.0
Text Domain:  hoofdthema-child
*/

/* Vaše vlastní CSS se zobrazí níže. */
.site-header { border-bottom: 3px solid #e8a33d; }

Nejdůležitější řádek je Template:. Tam je uveden název složky nadřazené šablony (ne název, který vidíte v administraci). Pokud nesedí přesně (velká písmena, pomlčky), WordPress ve Vzhled > Šablony oznámí, že nadřazená šablona chybí.

Kromě toho vytvoříte functions.php, abyste načetli styly. Čistý způsob:

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'hoofdthema-child',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );
} );

To, zda nadřazená šablona sama načítá svůj vlastní stylesheet, se liší podle šablony. Podívejte se do dokumentace své nadřazené šablony; některé vyžadují, abyste v podřazené šabloně také načetli stylesheet nadřazené šablony pomocí get_template_directory_uri() . '/style.css'. Pokud Váš web po aktivaci vypadá bez formátování, stylesheet nadřazené šablony se nenačítá.

Pokud chcete upravit šablonu, zkopírujte jeden konkrétní soubor (například header.php) z nadřazené šablony do své podřazené a upravte kopii. WordPress se nejprve podívá do podřazené šablony, pak do nadřazené. Nekopírujte všechny soubory: pak už nedostanete vylepšení z nadřazené šablony.

functions.php podřazené šablony nenahrazuje ten z nadřazené šablony, ale je načten před ním. Oba se spustí.

Podřazená šablona pro blokovou šablonu

U blokové šablony to funguje stejně, s blokovými soubory:

• style.css se stejnou hlavičkou a Template:;
• theme.json: ten se sloučí s tím z nadřazené šablony, takže do něj vložíte jen to, co chcete změnit (například barevnou paletu);
• templates/ a parts/, které nahrazují ty z nadřazené šablony.

Functions.php u blokové šablony často není potřeba, protože WordPress sám načítá styly z theme.json.

Existuje oficiální plugin Create Block Theme, který z Úpravy webu vytvoří podřazenou šablonu za Vás, včetně Vašich úprav uložených v databázi. Hodí se, pokud jste upravili blokovou šablonu a chcete tyto úpravy zaznamenat do souborů (například abyste je mohli přenést na jiný web).

Jak to nastavit na svém webu

1. Vytvořte složku a soubory na svém počítači a zkontrolujte název složky nadřazené šablony.
2. Nahrajte složku do wp-content/themes/ pomocí Správce souborů nebo přes SFTP. Nebo složku zabalte jako zip a nahrajte ji ve Vzhled > Šablony > Nová > Nahrát šablonu.
3. Přejděte do Vzhled > Šablony. Podřazená šablona je tam uvedena. Aktivujte ji.
4. Zkontrolujte svůj web: menu a widgety může být po přepnutí na podřazenou šablonu potřeba znovu propojit; nastavení z Přizpůsobit platí pro každou šablonu zvlášť, takže je buď nastavíte znovu, nebo exportujete pomocí pluginu.
5. Nadřazená šablona musí zůstat nainstalovaná. Neodstraňujte ji; podřazená šablona bez ní nefunguje.

Vyzkoušejte to nejprve v testovacím prostředí (staging) (lekce 8.3), protože výměna šablony na rušném živém webu může chvíli vypadat neuspořádaně.

Shrnutí

• Podřazená šablona uchovává Vaše úpravy souborů šablony mimo nadřazenou šablonu, takže je aktualizace nepřepíšou.
• Nepotřebujete ji pro úpravy v Úpravě webu nebo trochu CSS navíc; funkce patří do pluginu.
• Minimum: složka se style.css, kde Template: přesně udává název složky nadřazené šablony.
• Kopírujte jen šablony, které skutečně upravujete; functions.php podřazené šablony existuje vedle toho z nadřazené šablony.
• Nadřazená šablona zůstává nainstalovaná a dál se aktualizuje.

Kvíz

Úkol

Úkol A5.2: Zkontrolujte svoji podřazenou šablonu (child theme). Vytvořte podřazenou šablonu pro svou šablonu na testovacím webu nebo v testovacím prostředí (staging) (lekce 8.3) a aktivujte ji. Vyplňte adresu webu a název složky podřazené šablony. Program vyžádá wp-content/themes/<složka>/style.css a zkontroluje: soubor existuje, je v něm uveden Theme Name: a Template:, style.css nadřazené šablony v dané složce také existuje a domovská stránka odkazuje na podřazenou šablonu (je tedy aktivní).

Úkol D5.2: Co jste upravili a proč? Zapište si, jaké soubory jsou ve Vaší podřazené šabloně, co jste v každém souboru upravili a proč to nešlo udělat v Úpravě webu, v CSS nebo v pluginu. Zaškrtněte, že nadřazená šablona je stále nainstalovaná a má automatické aktualizace.

Další čtení

Tyto články popisují kroky v panelech WebOké; v jiných panelech fungují obdobně.

• Příručka k DirectAdmin 11.1: Otevření Správce souborů: složky ve Vašem balíčku
• Příručka k DirectAdmin 11.2: Nahrávání a stahování souborů
• Příručka k DirectAdmin 11.7: Připojení pomocí FileZilla (FTP, FTPS a SFTP)
• Child themes (developer.wordpress.org, anglicky): https://developer.wordpress.org/themes/advanced-topics/child-themes/