Ako vytvoriť vlastnú blokovú tému WordPress s theme.json: Podrobný návod

Zhrnutie

Vytvorenie vlastnej blokovej témy WordPress s Full Site Editing (FSE) môže byť náročné, ale theme.json tento proces zjednodušuje. Tento návod vás prevedie nastavením minimálnej blokovej témy, definovaním globálnych štýlov, ako sú farby a typografia v theme.json, a vytváraním vlastných šablón pomocou blokového značkovania. Naučíte sa pridávať blokové vzory a varianty štýlov, čo umožní plne dizajnovateľnú stránku bez PHP šablónových súborov. Preberieme bežné chyby, ako je miešanie klasických a blokových funkcií, a ukážeme, ako otestovať vašu tému. Na konci budete mať modernú, rozšíriteľnú blokovú tému pripravenú na produkciu. Tento prístup využíva najnovšie schopnosti WordPressu pre rýchlejší a vizuálnejší vývoj.

Úvod

Full Site Editing (FSE) revolucionizoval vývoj tém WordPress, umožňuje vám vizuálne navrhovať každú časť vašej stránky. Mnoho vývojárov však stále spolieha na klasické témy alebo sa snaží vytvoriť blokové témy od začiatku. Kľúčom k odomknutiu sily FSE je theme.json — konfiguračný súbor, ktorý riadi globálne štýly, nastavenia a šablóny. Tento článok poskytuje praktický, krok za krokom návod na vytvorenie vlastnej blokovej témy pomocou theme.json. Naučíte sa nastaviť štruktúru priečinkov, definovať farebné palety a typografické predvoľby, vytvárať vlastné šablóny s blokovým značkovaním a pridávať varianty štýlov. Na konci budete mať blokovú tému pripravenú na produkciu, ktorá sa ľahko udržiava a rozširuje. Poďme sa ponoriť a demystifikovať vývoj FSE.

Pre širší pohľad na to, ako FSE formuje budúcnosť dizajnu WordPress, pozrite si Gutenberg FSE: Budúcnosť dizajnu WordPress v roku 2026.

1. Nastavenie minimálnej blokovej témy

Bloková téma vyžaduje minimálne dva súbory: style.css a index.html. Poďme ich vytvoriť.

Štruktúra priečinkov

Vytvorte priečinok s názvom my-block-theme v adresári wp-content/themes/. Do neho vložte:

• style.css
• index.html
• (voliteľne) theme.json

style.css

Aj keď blokové témy menej spoliehajú na CSS, style.css je stále potrebný na identifikáciu témy:

/*
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
*/

Riadok Requires at least: 5.9 zaisťuje, že téma funguje s funkciou FSE.

index.html

Toto je vaša záložná šablóna. Musí začínať blokovým značkovaním. Vytvorte jednoduché rozloženie:

<!-- 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žíva blokovú syntax na zahrnutie častí šablóny hlavičky a päty a zobrazuje názov príspevku a obsah.

Upozornenie: Blokové témy nesmú obsahovať PHP šablónové súbory ako header.php alebo footer.php. Miešanie klasických a blokových šablón zlomí FSE.

Aktivácia témy

Nahrajte priečinok cez FTP alebo inštaláciu zipu a aktivujte ho. Mali by ste vidieť prázdnu stránku s vašou minimálnou štruktúrou. Ďalej ju upravíme pomocou theme.json.

2. Ovládanie theme.json: Globálne štýly a nastavenia

theme.json centralizuje všetky ovládacie prvky dizajnu. Nachádza sa v koreňovom adresári vašej témy. Vytvorme jeden s nastaveniami farieb a typografie.

Základná štruktúra

{
    "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 farebnú paletu, rodiny písiem, veľkosti písiem a globálne štýly. Funkcie var() odkazujú na vlastné CSS vlastnosti automaticky generované WordPressom. Používatelia ich potom môžu zmeniť v editore stránok.

Tip: Pre konzistenciu používajte vlastné CSS vlastnosti. Vyhnite sa pevnému kódovaniu hodnôt v CSS súboroch; nech theme.json je jediným zdrojom pravdy.

3. Vytváranie vlastných šablón

Blokové šablóny sú HTML súbory s blokovým značkovaním. Riadia sa hierarchiou podobnou klasickým šablónovým súborom. Napríklad vytvorte single.html pre jednotlivé príspevky:

<!-- 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"} /-->

Podobne vytvorte page.html, archive.html atď. Vlastné šablóny môžete vytvoriť aj pridaním bloku wp:post-template do cyklu dotazov.

Pre pokročilé prispôsobenie zvážte vytváranie vlastných blokov. Naučte sa ako v Beyond Basic Blocks: Tvorba vlastných blokov Gutenberg pre vylepšenú funkcionalitu WordPress.

Časti šablón

Vytvorte priečinok parts/ pre opakovane použiteľné časti. Naprí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. Pridávanie blokových vzorov a variantov štýlov

Blokové vzory sú predpripravené rozloženia. Definujte ich v priečinku patterns/. Vytvorte 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 štýlov umožňujú používateľom prepínať celý vzhľad. Vytvorte styles/default.json a styles/dark.json, ktoré prepisujú nastavenia témy.

5. Upozornenia a osvedčené postupy

• Výkon: theme.json je ukladaný do vyrovnávacej pamäte. Po zmenách vymažte vyrovnávaciu pamäť. V prípade potreby použite háčik wp_register_theme_json.
• Spätná kompatibilita: Blokové témy fungujú len od WordPress 5.9. Ak vaša stránka musí podporovať staršie verzie, zvážte hybridný prístup, ale vyhnite sa miešaniu šablónových súborov.
• Dcérske témy: Blokové témy môžu byť použité ako rodičovské témy pre klasické dcérske témy, ale nie naopak. Použite template v style.css na deklarovanie rodičovskej blokovej témy.
• Internacionalizácia: Použite funkciu __() v PHP častiach šablón pre preložiteľné reťazce. V blokovom značkovaní zadajte textovú doménu pomocou atribútu textDomain.

Pre viac informácií o osvedčených postupoch vývoja pluginov si pozrite Building Robust WordPress Plugins: Praktický sprievodca osvedčenými postupmi.

Záver

Vytvorenie vlastnej blokovej témy pomocou theme.json vám umožňuje vytvoriť plne dizajnovateľnú stránku bez nutnosti siahať na PHP. Podľa tohto návodu ste nastavili minimálnu tému, definovali globálne štýly, vytvorili vlastné šablóny a pridali vzory. Nezabudnite dôkladne otestovať, najmä okrajové prípady, ako sú archívne stránky alebo vlastné typy príspevkov. Ako sa WordPress vyvíja, blokové témy sa stanú štandardom. Začnite využívať FSE ešte dnes na zefektívnenie pracovného toku a ponúknite klientom bezkonkurenčnú flexibilitu.

Ak chcete tvorbu témy ešte viac urýchliť, zvážte použitie nástroja, ktorý vygeneruje kompletnú stránku z popisu. Napríklad môžete opísať požadované rozloženie a mať pripravenú blokovú tému na použitie v priebehu niekoľkých minút.

Pripravení spustiť vašu blokovú tému? S popisom v čistom texte môžete vygenerovať plne funkčnú vstupnú stránku alebo webovú stránku – bez nutnosti kódovania.