Od nuly ke jedničce: Postupný návod, jak ovládnout základní dovednosti vývoje moderních WordPress temat

Základní koncepty vývoje moderních temát pro WordPress

Architektura moderních WordPress temát se výrazně liší od tradičních způsobů vývoje. Hlavní změnou je komplexní použití blockových temát (Block Themes) a režimu celosálového editování (Full Site Editing – FSE). To znamená, že vzhled a uspořádání temátu – od záhlaví, patice až po obsah článků – lze construovat a upravovat pomocí “blocků” v editoru Gutenberg, bez nutnosti přímého psaní složitých PHP šablon.

Struktura základních souborů v moderním designu byla zásadně zjednodušena. Nejdůležitějším z těchto souborů je šablonový soubor.theme.jsonDefinuje globální nastavení tématu, palety barev, formátování a další aspekty. Dalším zásadně důležitým souborem je…index.htmlNahradilo tradiční…index.phpJako výchozí šablonu se používají statické, editorem interpretovatelné HTML bloky k vytvoření strukturálního rámce stránky.style.cssSoubor stále existuje a slouží především k deklaraci informací o tématu, ale většina definic CSS stylů byla přesunuta jinam.theme.jsonNebo je spravován editorem.

Pro zachování zpětné kompatibilitě WordPress zkontroluje, zda v kořenovém adresáři tématu existuje…block-templates或templatesSouborové složky. Tyto složky slouží k ukládání blokových HTML šablon, například…single.html或page.htmlBudou použity před PHP šablonovými soubory. Zároveň závisí způsob zpracování stylů a front-end zdrojů pocházejících z témat na…wp_enqueue_style和wp_enqueue_scriptFunkce jsou obvykle umístěny v hlavním souboru.functions.phpPro registraci a zařazení do fronty postupujte zde.

Doporučujeme k přečtení. Vývoj WordPress temát od základů po pokročilé znalosti: Postupná příručka pro vytváření vlastních webových stránek。

Pochopení tohoto změnění v přístupu – od psaní pevných PHP šablon k definování stylů a struktury pomocí JSON a blokových značek – je prvním krokem k osvojení moderního vývoje tematických stránek.

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

Vytvoření a konfigurace klíčových souborů tématu

Pro vytvoření moderního tématu pro WordPress je nejprve potřeba…wp-content/themesV adresáři vytvořte novou složku určenou k ukládání tematických materiálů. To platí i pro tematické bloky (block themes).style.cssSoubor je stále nutným “identifikačním” souborem a blok komentářů na jeho začátku musí obsahovat určité informace.

/*
Theme Name: 我的现代主题
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 一个使用全站编辑的现代WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-modern-theme
*/

Následně potřebujete vytvořit “mozek” pro moderní téma…theme.jsonTento JSON soubor se nachází v hlavním adresáři tématu a slouží k centrálnímu řízení globálních stylů a nastavení tématu. Pomocí tohoto souboru můžete definovat vzhled systému formátování (např. velikost písma, rodiny písem), paletu barev, výchozí styly bloků atd. Pluginy a podtémata mohou tyto nastavení dále překrývat, čímž umožňují vlastní personalizaci stylů. Základní…theme.jsonStruktura je následující:

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "name": "黑色", "slug": "black", "color": "#000000" },
        { "name": "白色", "slug": "white", "color": "#ffffff" }
      ]
    },
    "typography": {
      "fontSizes": [
        { "name": "小", "slug": "small", "size": "14px" },
        { "name": "中", "slug": "medium", "size": "20px" }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "white",
      "text": "black"
    },
    "typography": {
      "fontSize": "var(--wp--preset--font-size--medium)"
    }
  },
  "customTemplates": [
    {
      "name": "宽幅页面",
      "title": "宽幅页面",
      "postTypes": [ "page" ]
    }
  ]
}

Hlavní šablona tématuindex.htmlByla definována výchozí strukturní podoba stránky. Skládá se výhradně z blokových značek obklopených HTML komentáři, které jsou plně rozpoznatelné editorem. Například:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-content {"layout":{"type":"constrained"}} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Taková struktura jasně rozděluje záhlaví stránky, hlavní obsahovou oblast a patku a to pomocí…wp:post-contentObsah článků se dynamicky načítá po částech. Nakonec je potřeba v kořenovém adresáři tématu vytvořit adresář s názvem „Template Parts“ (Šablony částí).partsA umístit to dovnitř.header.html和footer.htmlSoubory obsahující komponenty.

Doporučujeme k přečtení. Populární úvodní průvodce pro rok 2026: Jak vytvořit svůj první WordPress téma od nuly。

Vytváření stránek pomocí šablon a šablonových komponent

V blokových tematech je rozložení stránky především construováno pomocí šablon (Templates) a částí šablon (Template Parts). Šablony slouží k definování celkového rámce konkrétních typů stránek (např. jednotlivých článků, archivních stránek), zatímco části šablon jsou znovupoužitelné moduly, jako jsou záhlaví a patičky stránky.

Šablony jsou obvykle uloženy v složce tématu.templatesV té složce. WordPress automaticky najde vhodné šablony podle typu požadovaného vyhledávání. Například…single.htmlSlouží k zobrazení jediného článku.page.htmlPoužívá se pro statické stránky.home.html或index.htmlPoužito pro domovskou stránku blogu. Můžete…theme.json的customTemplatesNěkteré šablony jsou nastaveny jako vlastní a uživatelé si je mohou vybrat v editoru stránek.

Šablony a jejich komponenty jsou uloženy na…partsV této složce došlo k výraznému zvýšení míry opakovaného využití kódu a usnadnění jeho údržby. Byl vytvořen soubor obsahující záhlaví stránek (header file).header.htmlVrchní část stránky lze vytvořit pomocí bloku s názvem stránky, navigačního bloku a dalších prvků. Pro vytvoření souboru s patičkou (footer) postupujte následovně:footer.htmlMůžete zde umístit informace o autorských právech a oblast pro přidávání dalších funkcí („widgetů“).

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

Typický…header.htmlMožná to vypadá následovně:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<header class="wp-block-group">
    <!-- wp:site-title /-->
    <!-- wp:navigation {"ref":4} /-->
</header>
<!-- /wp:group -->

V tomto příkladu…wp:navigationBloky jsou identifikovány podle svých vlastností nebo charakteristik.refAtribut odkazuje na navigační menu vytvořené a uložené v sekci “Vzhled” -> “Editor” (jehož ID je 4), což ilustruje výhody oddělení editace obsahu a struktury na celém webu. Tím, že jsou tyto komponenty referencovány v hlavním šabloně,Můžete je poté vložit na stránku.

Pro složitější uspořádání lze využít…wp:group、wp:columns、wp:queryPoužívejte bloky k vytváření řádků, sloupců a cyklického obsahu. Například:wp:queryBloky mohou dynamicky zobrazovat nejnovější články – to odpovídá funkci hlavního cyklu v tradičních tematických stránkách – ale nyní je to všechno konfigurováno pomocí vizuálního editoru.

Doporučujeme k přečtení. Od nuly k mistrovství: Kompletní průvodce vývojem WordPress temat a praktické tutoriály。

Přidání funkcí a stylů pomocí souborů funkcí

I když se bloková témata do značné míry spoléhají na…theme.jsonA HTML šablony, ale…functions.phpSoubory zůstávají středobodem funkce rozšiřování témat. Jedná se o PHP soubory, které nemají žádnou návratovou hodnotu a slouží k přidávání funkcí, registraci stylových skriptů, definování podpory pro témata atd.

Jednou z základních operací je registrace a zařazení do fronty šablon stylů a skriptů pro dané téma. I když většina stylů pochází…theme.jsonPro správu stránek pravděpodobně budete stále potřebovat další vlastní CSS kódy.

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

function my_modern_theme_setup() {
    // 添加对特定功能的支持，例如自定义标志
    add_theme_support('custom-logo');
    // 通过区块编辑器添加主题样式
    add_theme_support('wp-block-styles');
    // 添加对全站编辑器的支持
    add_theme_support('editor-styles');
}
add_action('after_setup_theme', 'my_modern_theme_setup');

function my_modern_theme_scripts() {
    // 排队主题的主样式表
    wp_enqueue_style(
        'my-modern-theme-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get('Version')
    );
    // 排队编辑器样式
    add_editor_style('style-editor.css');
}
add_action('wp_enqueue_scripts', 'my_modern_theme_scripts');

functions.phpJe to také skvělé místo pro přidávání vlastních funkčních vlastností. Například můžete použít…register_block_styleFunkce registruje pro existující klíčové bloky (např. odstavce) vlastní vizuální varianty, takže se tyto varianty zobrazí v panelu “Styl” editoru k výběru uživatelem.

// 为段落块注册一个“特别提示”样式
register_block_style(
    'core/paragraph',
    array(
        'name'         => 'notice',
        'label'        => __( '特别提示', 'my-modern-theme' ),
        'inline_style' => '.is-style-notice { padding: 1em; border-left: 4px solid #00a0d2; background-color: #f0f8ff; }',
    )
);

Kromě toho můžete také používat háčky (hooky), jako např.wp_head、wp_footerVložte vlastní kód, nebo to provádějte prostřednictvím…add_filterZměňte výchozí chování dotazu, výstupní obsah atd. Pro komplexní požadavky na přizpůsobení může být vytvoření malého pluginu modularnějším řešením.

Témata testování a ladění

Po dokončení vývoje je velmi důležité téma podrobit komplexnímu testování. Nejprve byste měli téma aktivovat v lokálním prostředí nebo dočasného prostředí a zkontrolovat, zda je základní rozvrh předních stránek, responzivní design, styl všech klíčových prvků (nadpisy, odstavce, obrázky, galerie, tlačítka atd.) správně zobrazen, a zda navigační menu a odkazy fungují.

Zadruhé je nutné provést důkladné testování pomocí editoru Gutenberg. Vytvořte nové stránky a články, zkuste používat různé bloky k vytvoření složitějších rozvrhů a ověřte, zda nástrojová lišta a nastavovací panely těchto bloků fungují správně. Také zkuste přizpůsobit jejich vzhled pomocí vlastních stylů.theme.jsonZda je definovaná paleta barev nebo velikost písma správně aplikována na dané bloky. Zejména je důležité otestovat celostátní editor (“Vzhled” -> “Editor”) a zkusit změnit nadpisy, podpisy, šablony domovské stránky atd., abyste se ujistili, že po uložení změn jsou tyto změny správně zobrazeny na webové stránce.

Odladění je klíčovou součástí moderního vývoje. Otevřete nástroje pro vývojáře v prohlížeči (F12) a zkontrolujte, zda neexistují chyby v JavaScriptu nebo konflikty v CSS kódu.wp-config.phpNastavit v nastaveníchdefine('WP_DEBUG', true);Na stránce mohou být zobrazeny varování a chyby PHP, což vám pomůže rychle lokalizovat problémy v kódu. Zároveň se ujistěte, že téma dodržuje kódovací standardy WordPressu, a prověřte v validátoru W3C v konzoli, zda neexistují chyby v HTML struktuře.

Na závěr proveďte testy kompatibility napříč různými prohlížeči (Chrome, Firefox, Safari, Edge) a zařízeními (počítače, tablety, mobilní telefony), abyste se ujistili, že všichni uživatelé mají stejný zážitek při používání vašeho produktu.

Závěr

Vývoj moderních WordPress temát představuje inovaci v pojetí – přechází se od psaní procedurálních PHP šablon k použití nových metod a nástrojů, které umožňují efektivnější a flexibilnější tvorbu webových stránek.theme.jsonDeklarativní vývoj založený na blokových značkách a celosíťovém editování. Vývojáři musí tuto techniku dobře ovládat.theme.jsonPoužijte konfiguraci k definování globálního stylu, využijte šablony HTML bloků k vytvoření struktury stránek a prostřednictvím…functions.phpByly provedeny vylepšení funkcionalit. Tento režim výrazně snižuje překážky při vytváření vlastních rozvrhů a poskytuje tvůrcům obsahu velkou designovou svobodu; zároveň však vyžaduje, aby vývojáři dobře porozuměli systému blokového editoru. Díky dodržování výše uvedeného základního postupu při vývoji dovedností budete schopni vytvořit flexibilní, výkonné a připravené na budoucnost WordPress tématy.

Časté dotazy

Potřebujete znalosti PHP pro práci s tématy typu ###?
Ano, je to stále potřeba. I když je hlavní struktura stránky definována pomocí HTML šablon,functions.phpSoubory jsou stále nezbytné pro přidávání funkcí týkajících se temat, registraci stylových skriptů, a pro hlubokou personalizaci pomocí háčků a filtrů. Kromě toho je znalost PHP zásadní při vytváření dynamických šablonových komponentů založených na vlastních dotazech nebo při zpracovávání složité obchodní logiky.

Mohou blokové témata a tradiční témata coexistovat?

Možné. WordPress inteligentně určí typ tématu. Pokud vaše hlavní složka s tematem obsahuje…theme.jsonSoubory atemplates/partsSoubory s blokovými šablonami v dané složce budou WordPressem rozpoznány jako blokové téma a funkce pro celosálovou editaci budou aktivovány. I přes přítomnost těchto souborů však systém ponechá jako zálohu tradiční systém PHP šablon používaný v daném tématu. Pokud pro konkrétní požadavek neexistuje odpovídající bloková šablona, systém se automaticky přepne na použití příslušné PHP šablony.single.php）。

Jak přidat vlastní CSS do mého tématu bloku?

Existují hlavně tři způsoby. Nejlepším způsobem je…theme.jsonDokumenty jsoustylesČást kódu slouží k přidání CSS stylů, které se aplikují na celý web nebo na konkrétní části stránek. Dále je možné tyto styly nastavit přímo v tematických nastaveních („temách“).style.cssDo souboru napište další pravidla stylů. Pro dynamičtější vzhled nebo styly určené konkrétním stránkám můžete také použít…functions.phpPoužijte to v čínštině.wp_add_inline_stylePřidávejte vlastní styly přímo do funkcí, nebo je registrujte pro konkrétní bloky.

Představuje režim úprav celé webové stránky riziko pro stávající webové stránky?

U webových stránek, které již obsahují data, je potřeba přechod na zcela nové téma bloků provádět opatrně. Doporučujeme nejprve kompletně otestovat nové téma v testovacím prostředí (např. v lokálním vývojovém prostředí nebo dočasné webové stránce), abyste se ujistili, že všechny stávající informace budou správně zobrazeny a že se rozvrh stránek nezmění. Před provedením převodu je nezbytné zkopírovat celou webovou stránku (včetně souborů a databáze). Funkce celostátního editoru jsou sice výkonné, ale při přímé úpravě šablon může dojít k problémům, které ovlivní všechny stránky využívající danou šablonu.