Jak vytvořit vlastní WordPress blokové téma s theme.json: Průvodce krok za krokem

Souhrn

Vytvoření vlastního blokového tématu WordPress s Full Site Editing (FSE) může být náročné, ale theme.json proces zjednodušuje. Tento průvodce vás provede nastavením minimálního blokového tématu, definováním globálních stylů jako barvy a typografie v theme.json a vytvářením vlastních šablon pomocí blokového značení. Naučíte se přidávat blokové vzory a varianty stylů, což umožní plně designovatelný web bez PHP šablon. Pokryjeme běžné chyby, jako je míchání klasických a blokových funkcí, a ukážeme, jak téma testovat. Na konci budete mít moderní, rozšiřitelné blokové téma připravené k produkci. Tento přístup využívá nejnovější schopnosti WordPressu pro rychlejší a vizuálnější vývoj.

Úvod

Full Site Editing (FSE) revolucionizoval vývoj témat WordPress, což vám umožňuje vizuálně navrhovat každou část vašeho webu. Mnoho vývojářů však stále spoléhá na klasická témata nebo se potýká s vytvářením blokových témat od začátku. Klíčem k odemknutí síly FSE je theme.json – konfigurační soubor, který ovládá globální styly, nastavení a šablony. Tento článek poskytuje praktický průvodce krok za krokem pro vytvoření vlastního blokového tématu pomocí theme.json. Naučíte se nastavit strukturu složek, definovat barevné palety a typografické předvolby, vytvářet vlastní šablony s blokovým značením a přidávat varianty stylů. Na konci budete mít blokové téma připravené k produkci, které je snadné udržovat a rozšiřovat. Pojďme se ponořit a demystifikovat vývoj FSE.

Pro širší pohled na to, jak FSE utváří budoucnost designu WordPress, se podívejte na Gutenberg FSE: Budoucnost designu WordPress v roce 2026.

1. Nastavení minimálního blokového tématu

Blokové téma vyžaduje minimálně dva soubory: style.css a index.html. Pojďme je vytvořit.

Struktura složek

Vytvořte složku s názvem my-block-theme v adresáři wp-content/themes/. Uvnitř umístěte:

• style.css
• index.html
• (volitelně) theme.json

style.css

I když bloková témata spoléhají méně na CSS, style.css je stále vyžadován pro identifikaci tématu:

/*
Theme Name: My Block Theme
Theme URI: https://example.com
Author: Your Name
Description: A custom block theme built with theme.json.
Version: 1.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: my-block-theme
*/

Řádek Requires at least: 5.9 zajišťuje, že téma funguje s funkcí FSE.

index.html

Toto je vaše záložní šablona. Musí začínat blokovým značením. Vytvořte jednoduché rozvržení:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
    <!-- wp:post-title /-->
    <!-- wp:post-content /-->
</div>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Toto používá blokovou syntaxi k zahrnutí částí šablony záhlaví a zápatí a zobrazuje název příspěvku a obsah.

Upozornění: Bloková témata nesmí obsahovat PHP soubory šablon jako header.php nebo footer.php. Míchání klasických a blokových šablon naruší FSE.

Aktivace tématu

Nahrajte složku přes FTP nebo instalací zipu a aktivujte ji. Měli byste vidět prázdný web s vaší minimální strukturou. Dále jej nastylujeme pomocí theme.json.

2. Ovládnutí theme.json: Globální styly a nastavení

theme.json centralizuje všechny ovládací prvky designu. Nachází se v kořenu složky vašeho tématu. Vytvořme jeden s nastavením barev a typografie.

Základní struktura

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "primary",
                    "color": "#007cba",
                    "name": "Primary"
                },
                {
                    "slug": "secondary",
                    "color": "#005a87",
                    "name": "Secondary"
                },
                {
                    "slug": "background",
                    "color": "#ffffff",
                    "name": "Background"
                }
            ],
            "gradients": []
        },
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
                    "slug": "system",
                    "name": "System"
                },
                {
                    "fontFamily": "'Georgia', serif",
                    "slug": "serif",
                    "name": "Serif"
                }
            ],
            "fontSizes": [
                {
                    "slug": "small",
                    "size": "14px",
                    "name": "Small"
                },
                {
                    "slug": "medium",
                    "size": "18px",
                    "name": "Medium"
                },
                {
                    "slug": "large",
                    "size": "24px",
                    "name": "Large"
                }
            ]
        },
        "spacing": {
            "padding": true,
            "margin": true,
            "units": ["px", "em", "rem"]
        }
    },
    "styles": {
        "color": {
            "background": "var(--wp--preset--color--background)",
            "text": "var(--wp--preset--color--primary)"
        },
        "typography": {
            "fontFamily": "var(--wp--preset--font-family--system)",
            "fontSize": "var(--wp--preset--font-size--medium)"
        }
    }
}

Toto definuje barevnou paletu, rodiny písem, velikosti písem a globální styly. Funkce var() odkazují na vlastní CSS vlastnosti automaticky generované WordPressem. Uživatelé je pak mohou změnit v Editoru webu.

Tip: Používejte vlastní CSS vlastnosti pro konzistenci. Vyhněte se pevnému zakódování hodnot v CSS souborech; nechte theme.json být jediným zdrojem pravdy.

3. Vytváření vlastních šablon

Blokové šablony jsou HTML soubory s blokovým značením. Řídí se hierarchií podobnou klasickým souborům šablon. Například vytvořte single.html pro jednotlivé příspěvky:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-title {"level":1} /-->
    <!-- wp:post-featured-image /-->
    <!-- wp:post-content /-->
    <!-- wp:post-navigation-link {"type":"previous"} /-->
    <!-- wp:post-navigation-link {"type":"next"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Podobně vytvořte page.html, archive.html atd. Vlastní šablony můžete také vytvořit přidáním bloku wp:post-template do smyčky dotazu.

Pro pokročilé přizpůsobení zvažte vytvoření vlastních bloků. Naučte se jak v Mimo základní bloky: Vytváření vlastních Gutenberg bloků pro rozšířenou funkcionalitu WordPress.

Části šablony

Vytvořte složku parts/ pro opakovaně použitelné části. Například header.html:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<header class="wp-block-group">
    <!-- wp:site-logo /-->
    <!-- wp:navigation {"themeLocation":"primary"} /-->
</header>
<!-- /wp:group -->

A footer.html:

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">&copy; 2025 My Site</p>
<!-- /wp:paragraph -->

4. Přidávání blokových vzorů a variant stylů

Blokové vzory jsou předpřipravená rozvržení. Definujte je ve složce patterns/. Vytvořte patterns/hero.php:

<?php
/**
 * Title: Hero
 * Slug: my-block-theme/hero
 * Categories: hero
 */
?>
<!-- wp:cover {"overlayColor":"primary","minHeight":50,"align":"full"} -->
<div class="wp-block-cover alignfull" style="min-height:50vh">
    <span aria-hidden="true" class="wp-block-cover__background has-primary-background-color"></span>
    <div class="wp-block-cover__inner-container">
        <!-- wp:heading {"textAlign":"center","level":1,"style":{"color":{"text":"#ffffff"}}} -->
        <h1 class="has-text-align-center has-text-color" style="color:#ffffff">Welcome</h1>
        <!-- /wp:heading -->
        <!-- wp:paragraph {"align":"center","textColor":"white"} -->
        <p class="has-text-align-center has-white-color">This is a custom hero section</p>
        <!-- /wp:paragraph -->
    </div>
</div>
<!-- /wp:cover -->

Varianty stylů umožňují uživatelům přepínat celé vzhledy. Vytvořte styles/default.json a styles/dark.json, které přepíší nastavení tématu.

5. Upozornění a osvědčené postupy

• Výkon: theme.json je ukládán do mezipaměti. Po změnách vymažte mezipaměť. V případě potřeby použijte háček wp_register_theme_json.
• Zpětná kompatibilita: Bloková témata fungují pouze od WordPress 5.9. Pokud váš web musí podporovat starší verze, zvažte hybridní přístup, ale vyhněte se míchání souborů šablon.
• Dětská témata: Bloková témata lze použít jako nadřazená témata pro klasická dětská témata, ale ne naopak. Použijte template v style.css k deklaraci nadřazeného blokového tématu.
• Internacionalizace: Použijte funkci __() uvnitř PHP částí šablon pro přeložitelné řetězce. V blokovém značení specifikujte textovou doménu pomocí atributu textDomain.

Pro více informací o osvědčených postupech vývoje pluginů viz Vytváření robustních WordPress pluginů: Praktický průvodce osvědčenými postupy.

Závěr

Vytvoření vlastního blokového tématu s theme.json vám umožňuje vytvořit plně designovatelný web bez nutnosti sahat do PHP. Podle tohoto průvodce jste nastavili minimální téma, definovali globální styly, vytvořili vlastní šablony a přidali vzory. Nezapomeňte důkladně testovat, zejména pro okrajové případy jako archivní stránky nebo vlastní typy příspěvků. Jak se WordPress vyvíjí, bloková témata se stanou standardem. Začněte využívat FSE ještě dnes, abyste zefektivnili svůj pracovní postup a nabídli klientům bezkonkurenční flexibilitu.

Pokud chcete tvorbu tématu ještě více urychlit, zvažte použití nástroje, který generuje kompletní web z popisu. Můžete například popsat požadované rozvržení a během několika minut mít hotové blokové téma k použití.

Připraveni uvést své blokové téma do provozu? S popisem v prostém textu můžete vygenerovat plně funkční vstupní stránku nebo web – bez nutnosti kódování.