Od nuly: Postupná příručka pro vytvoření profesionálního podtematu pro WordPress

V ekosystému WordPress představují podtémata (subthemes) bezpečnou základnu pro přizpůsobování a údržbu webových stránek. Umožňují vám převzít všechny funkce, styly a šablony z mateřského tématu (parent theme) a zároveň provádět změny v samostatném adresáři. To znamená, že když je vydáno bezpečnostní opravení nebo aktualizace funkcí mateřského tématu, můžete ji jednoduše aplikovat, aniž byste se museli obávat, že by byl přepsán váš pečlivě napsaný vlastní kód. Ať už jde o úpravy barev, změny rozložení stránek nebo přidání složitějších funkcí, použití podtémat je považováno za osvědčenou praxi.

Proč je nutné používat podtémata?

Přímá úprava souboru mateřského tématu je operace s vysokým rizikem. Jakmile dojde k aktualizaci mateřského tématu, všechny vaše změny budou ztraceny a budete muset je znovu ručně aplikovat – tento proces je velmi náchylný k chybám a je časově náročný. Ještě důležitější je, že v případě týmové spolupráce nebo při budoucí migraci webové stránky absence jasných záznamů o provedených změnách způsobí velké potíže.

Tento problém je vyřešen pomocí mechanismu “přepsání” („overwriting“). Když WordPress renderuje stránku, nejprve hledá odpovídající šablonové soubory v adresáři podtematu. Pokud je najde, použije verzi podtematu; pokud ne, automaticky se vrátí ke verzi mateřského tematu. Díky tomuto mechanismu můžete upravovat pouze ty části, které potřebujete, zatímco ostatní části i nadále využívají aktualizace a údržbu mateřského tematu.

Doporučujeme k přečtení. Úvodní průvodce vývojem WordPress temat: Postavte si své první téma od nuly。

Kromě toho je používání podtémat (subtopics) doporučeným postupem od samotného WordPressu. Udržují kód čistým a snadno udržovatelným, což je znak profesionálního vývoje.

UltaHost – hosting služby pro weby postavené na platformě WordPress

Záruka vrácení peněz do 30 dnů, neomezený šířka pásma a databáze, bezplatná ochrana proti DDoS útokům. Sleva 501 TP4T při nákupu na 3 roky.

přístupová stránka

Základní struktura vytvoření podtématu

Vytvoření podtématu je velmi jednoduché – stačí pouze dvě základní soubory: šablonu a soubor s funkcemi. Nejprve musíte… /wp-content/themes/ V adresáři vytvořte novou složku, která se obvykle nazývá “Název hlavního tématu-dítě” (např.: „Main-Topic-Child“). twentytwentyfour-child。

Vytvořit soubor se základními šablonami stylů

Podstatou podtématu je jeho soubor se šablonami (style sheet file). style.cssTento soubor neobsahuje pouze CSS pravidla, ale co je důležitější, jsou také poznámky v hlavičce souboru, které slouží k oznámení WordPressu, že se jedná o podtemu a o to, jaký je jeho nadtema.

/*
 Theme Name:   Twenty Twenty-Four Child
 Theme URI:    https://example.com/twentytwentyfour-child/
 Description:  Twenty Twenty-Four Child Theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentytwentyfour
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twentytwentyfour-child
*/

Mezi nimi,Template: Tento řádek je velmi důležitý – jeho hodnota musí přesně odpovídat názvu adresáře nadřízeného tématu, a to s ohledem na velikost písmen. Právě na základě tohoto řádku WordPress rozpoznává vztahy mezi nadřízenými a podřízenými tématy.

Zavést šablonu stylů nadřazeného tématu

Pokud existují pouze uvedené soubory, podtémata stále nemohou načíst styly nadřazených témat. Je nutné, abyste v souboru funkcí podtémata provedli potřebné úpravy. functions.php Použijte to v čínštině. wp_enqueue_scripts „Hook“ slouží k načítání šablon stylů mateřského tématu v pořadí.

Doporučujeme k přečtení. Nezbytné pro vytvoření profesionální webové stránky: Kompletní průvodce vývojem a personalizací temát pro WordPress。

<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );
function my_child_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' ),
        wp_get_theme()->get('Version')
    );
}
?>

get_template_directory_uri() Funkce získává URL adresu adresáře nadřazeného tématu. get_stylesheet_directory_uri() Získání URL aktuálního adresáře aktivních témat (podtémat) pomocí pole závislostí. array( 'parent-style' ) Ujistěte se, že se styly podtématek načtou až po stylech hlavního tématu, aby vaše vlastní CSS pravidla mohla správně přepsat styly hlavního tématu.

Rozšíření funkcí podtémat

Po vytvoření základní struktury můžete pokračovat dále… functions.php Tento soubor obsahuje kód, který umožňuje neomezené rozšiřování funkcí webové stránky. Tento kód bude spuštěn dříve než kód z mateřské (hlavní) tematiky. functions.php Spuštění souboru vám poskytuje skvělou příležitost k úpravě klíčových funkcí.

Vlastní funkce webové stránky

Například byste možná chtěli přidat na webové stránky nový vlastní typ článku s názvem “Projekt”. Můžete to udělat v rámci konfigurace podtemat (subtopics). functions.php Zaregistrujte ho v souboru.

Shared hosting na hosting.com

Vysoký výkon, vybavený procesorem AMD EPYC, úložištěm NVMe SSD a LiteSpeedem, nepřetržitá interní podpora odborníků 24 hodin denně a 7 dní v týdnu, pokročilá bezpečnostní opatření včetně SSL, ochrany proti útokům hrubou silou, malwaru a DDoS, úspora až 731 TB/měsíc.

přístupová stránka

add_action( 'init', 'register_project_post_type' );
function register_project_post_type() {
    $args = array(
        'public'      => true,
        'label'       => '项目',
        'has_archive' => true,
        'supports'    => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
        'menu_icon'   => 'dashicons-portfolio',
    );
    register_post_type( 'project', $args );
}

Zároveň můžete také odstranit některé nepotřebné funkce nadřazených témat. Například, pokud nadřazené téma přidalo podpisový panel, který nechcete, můžete to provést pomocí určité funkce. remove_action() Přijďte to odstranit. Předpokládejme, že mateřské téma je… init Na háčku se to používá. parent_theme_footer_widgets Funkce obsahuje nějaké doplňkové funkce („nástroje“), které můžete odstranit následujícím způsobem:

add_action( 'after_setup_theme', 'remove_parent_theme_features', 15 );
function remove_parent_theme_features() {
    remove_action( 'init', 'parent_theme_footer_widgets' );
}

Všimněte si, že zde je použito… after_setup_theme Hook byl nastaven s o něco vyšší prioritou (např. 15), aby bylo zajištěno, že kód mateřského tématu byl již spuštěn. add_actionTímto způsobem budeme mít… remove_action Aby to mohlo fungovat, je nutné…

Přepsat soubor šablony nadřazené tématiky

Jednou z nejsilnějších funkcí podtématu je možnost přepsat šablonové soubory nadřazeného tématu. Pokud chcete změnit způsob zobrazení jednotlivých článků, stačí upravit šablony obsažené v nadřazeném tématu. single.php Zkopírujte to do adresáře svého podtématu a poté proveďte úpravy. WordPress automaticky použije vaši verzi.

Doporučujeme k přečtení. Odkryjte svůj potenciál: Prozkoumejte klíčové technologie a osvědčené postupy při vytváření pokročilých témat pro WordPress。

Pro ještě detailnější kontrolu můžete dokonce přepsat jednotlivé části šablony (Template Parts) nebo konkrétní moduly šablony. Například, pokud chcete změnit způsob zobrazení metadat článku, můžete zkopírovat a upravit příslušné části šablony z mateřského tématu. template-parts/content-post-meta.php Soubor by měl být umístěn ve stejné cestě jako podtémata.

Pokročilé techniky vývoje podtémat

Když vývoj podtemat postoupí do pokročilejší fáze, budete se setkávat s pokročilými tématy, jako je lokalizace, dědičnost nastavení temat a samotné aktualizace podtemat.

Shared hosting od InterServeru

Sdílený hosting za 1 TB + 5 TB měsíčně za 2,50 USD, slevový kód tryinterserver pro první měsíc za 1 TB + 5 TB za 0,1 USD, a 461 skriptů cloudových aplikací k jednoduché instalaci.

přístupová stránka

Implementace lokálního překladu textu

Aby vaše podtémata podporovala více jazyků, je nutné správně nastavit textové pole (Text Domain) a používat funkce pro překlad. style.css „Hlava a…“ functions.php Prvním krokem je načtení textového pole.

在 functions.php V čínštině se používá load_child_theme_textdomain Funkce:

add_action( 'after_setup_theme', 'child_theme_localization_setup' );
function child_theme_localization_setup() {
    load_child_theme_textdomain( 'twentytwentyfour-child', get_stylesheet_directory() . '/languages' );
}

Poté použijte v místech, kde je potřeba přeložit text, něco jako… esc_html__( 'Your Text', 'twentytwentyfour-child' ) Takové zabalení funkcí. Poté můžete použít nástroje jako Poedit k vytvoření požadovaného kódu. .po 和 .mo Přeložte soubor a uložte ho do podtématu. /languages/ V katalogu.

Bezpečné úpravy klíčových funkcí

Někdy potřebujete upravit složitou funkci v mateřském tématu, která však neposkytuje dostatečnou flexibilitu prostřednictvím hooků. Pokud je tato funkce “vyměnitelná” (pluggable), tj. lze ji jednoduše nahradit jinou verzí, můžete to provést bez potíží. if ( ! function_exists( ... ) ) Balíček, takže můžete to udělat v rámci podtématu… functions.php Můžete tuto funkci přímo znovu deklarovat v novém místě kódu, čímž ji zcela přepsáte.

Před pokusem o tuto operaci se nezapomeňte prověřit, jakým způsobem jsou funkce definovány v mateřském tématu. Pokud nejsou „vyměnitelné“ (tj. není možné je jednoduše přepsat), pokus o násilné předefinování může způsobit vážnou chybu. V takovém případě je bezpečnější kontaktovat vývojáře tohoto tématu nebo hledat jiné filtrační nástroje, které by splnily vaše požadavky.

Závěr

Vytváření podtemat pro WordPress je základní dovedností, kterou musí odborníci ovládat. Umožňuje vytvořit bezpečný a udržitelný proces personalizace, při kterém je váš vlastní kód jasně oddělen od základního kódu temat. Začněte tím, že vytvoříte soubor obsahující správné záhlaví (header information). style.css a také to, které načítá styly functions.php Od začátku přes přepis šablon a přidávání nových funkcí až po zpracování lokalizace a pokročilých úprav – každý krok je v souladu s nejlepšími postupy WordPressu. Neustálé využívání podtemů je pevnou základnou, která zajistí, že váš web bude v následujících letech stále aktualizován a zároveň si zachová svůj jedinečný vzhled a funkce.

Časté dotazy

Jaké jsou požadavky na názvy složek podtémat?

Název složky podtématu není přísně omezen, avšak pro lepší přehlednost se obvykle doporučuje používat formát “název hlavního tématu-dítě”, například: astra-childKlíčovým bodem je… style.css V záhlaví souboru Template: Toto pole musí mít hodnotu, která se úplně shoduje s názvem složky nadřazeného tématu, včetně velikosti písmen. Jinak WordPress nebude schopen správně vytvořit vztah mezi nadřazeným a podřízeným tématem.

Podporují všechny nadřízené tématy vytváření podtémat?

Většina moderních témat, která dodržují kódovací standardy WordPressu, plně podporuje podtémata. Teoreticky může být jakékoli téma použito jako mateřské (tj. „rodičovské“) téma. Některá špatně navržená nebo velmi stará témata však mohou mít problémy s fungováním podtémat kvůli používání absolutních cest při odkazování na zdroje nebo kvůli nedostatku potřebných šablonových souborů. Při výběru mateřského témata je rozumné si prostudovat jeho dokumentaci nebo recenze uživatelů.

Jak přemístit přímo upravený mateřský téma do podřízeného tématu?

Nejprve vytvořte v lokálním nebo testovacím prostředí nový podtémát na základě nezměněného původního nadtémátu. Poté porovnejte jednotlivé soubory nadtémátu, které jste dříve upravili, s původními verzemi. Tyto odlišnosti v kódu (mohou se týkat CSS, PHP nebo HTML) organizovaně přesuňte do odpovídajících souborů nového podtémátu: CSS přidejte do souborů nového podtémátu. style.cssFunkční kód by měl být umístěn zde. functions.phpUpravený soubor šablony se poté zkopíruje do adresáře podtématu a tam provedou potřebné změny. Jedná se o pečlivý proces, ale po jeho dokončení již nebudou potřeba další úpravy.

Ovlivní podtémata rychlost webové stránky?

Správně vytvořené podtémata mají na rychlost webové stránky minimální vliv. Další soubory CSS a JS jsou obvykle velmi malé a díky správnému pořadí jejich načítání lze jejich obsah efektivně sloučit a uložit do mezipaměti. Hlavní náročnost spojená s použitím podtemat může pocházet z… functions.php Do toho byla přidána složitá PHP logika. Proto je důležité udržovat kód podtematů stručným a efektivním – stejnými zásadami, kterými se řídíme při vývoji v hlavním tematu. Správné využití technologií ke cacheování může dále kompenzovat případné negativní vlivy na výkon.