Hogyan építsünk egyedi WordPress blokktémát a theme.json segítségével: Lépésről lépésre útmutató

Összefoglaló

Egyedi WordPress blokktéma építése a teljes hely szerkesztéssel (Full Site Editing, FSE) ijesztő lehet, de a theme.json leegyszerűsíti a folyamatot. Ez az útmutató végigvezeti Önt egy minimális blokktéma beállításán, a globális stílusok (például színek és tipográfia) meghatározásán a theme.json-ban, valamint egyedi sablonok létrehozásán blokk jelölőnyelv segítségével. Megtanulja, hogyan adhat hozzá blokkmintákat és stílusváltozatokat, lehetővé téve egy teljesen tervezhető webhely létrehozását PHP sablonfájlok nélkül. Kitérünk a gyakori hibákra, mint a klasszikus és blokktéma funkciók keverése, és bemutatjuk, hogyan tesztelheti a témáját. A végére egy modern, bővíthető blokktémája lesz, készen a éles használatra. Ez a megközelítés kihasználja a WordPress legújabb képességeit a gyorsabb, vizuálisabb fejlesztés érdekében.

Bevezetés

A teljes hely szerkesztés (FSE) forradalmasította a WordPress témafejlesztést, lehetővé téve, hogy vizuálisan tervezze meg webhelye minden részét. Sok fejlesztő azonban továbbra is klasszikus témákra támaszkodik, vagy küzd a blokktémák létrehozásával a semmiből. Az FSE erejének kulcsa a theme.json – egy konfigurációs fájl, amely vezérli a globális stílusokat, beállításokat és sablonokat. Ez a cikk gyakorlati, lépésről lépésre útmutatót nyújt egyedi blokktéma építéséhez a theme.json segítségével. Megtanulja, hogyan állítsa be a mappastruktúrát, határozza meg a színpalettákat és tipográfiai előbeállításokat, hozzon létre egyedi sablonokat blokk jelölőnyelvvel, és adjon hozzá stílusváltozatokat. A végére egy éles használatra kész blokktémája lesz, amely könnyen karbantartható és bővíthető. Merüljünk el, és tegyük érthetővé az FSE fejlesztést.

Az FSE jövőbeli hatásának szélesebb körű áttekintéséért nézze meg a Gutenberg FSE: A WordPress design jövője 2026-ban című cikket.

1. Minimális blokktéma beállítása

Egy blokktémához legalább két fájl szükséges: style.css és index.html. Hozzuk létre őket.

Mappastruktúra

Hozzon létre egy my-block-theme nevű mappát a wp-content/themes/ könyvtárban. Helyezze el benne:

• style.css
• index.html
• (opcionális) theme.json

style.css

Bár a blokktémák kevésbé támaszkodnak CSS-re, a style.css továbbra is szükséges a téma azonosításához:

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

A Requires at least: 5.9 sor biztosítja, hogy a téma együttműködjön az FSE funkcióval.

index.html

Ez a tartalék sablon. Blokk jelölőnyelvvel kell kezdődnie. Hozzon létre egy egyszerű elrendezést:

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

Ez blokk szintaxist használ a fejléc és lábléc sablonrészek beillesztésére, valamint a bejegyzés címének és tartalmának megjelenítésére.

Figyelmeztetés: A blokktémák nem tartalmazhatnak PHP sablonfájlokat, mint a header.php vagy footer.php. A klasszikus és blokk sablonok keverése megtöri az FSE-t.

A téma aktiválása

Töltse fel a mappát FTP-n vagy zip telepítéssel, és aktiválja. Látnia kell egy üres webhelyet a minimális szerkezettel. Következő lépésként stílust adunk neki a theme.json segítségével.

2. A theme.json elsajátítása: Globális stílusok és beállítások

A theme.json központosítja az összes tervezési vezérlést. A téma mappájának gyökerében található. Hozzunk létre egyet szín- és tipográfiai beállításokkal.

Alapszerkezet

{
    "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)"
        }
    }
}

Ez meghatároz egy színpalettát, betűcsaládokat, betűméreteket és globális stílusokat. A var() függvények a WordPress által automatikusan generált CSS egyéni tulajdonságokra hivatkoznak. A felhasználók ezeket a Hely szerkesztőben módosíthatják.

Tipp: Használjon CSS egyéni tulajdonságokat a konzisztencia érdekében. Kerülje az értékek keménykódolását CSS-fájlokban; a theme.json legyen az egyetlen forrás.

3. Egyedi sablonok létrehozása

A blokksablonok HTML fájlok blokk jelölőnyelvvel. Hierarchiájuk hasonló a klasszikus sablonfájlokéhoz. Például hozza létre a single.html fájlt egyedi bejegyzésekhez:

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

Hasonlóan hozza létre a page.html, archive.html stb. fájlokat. Egyedi sablonokat is létrehozhat egy wp:post-template blokk hozzáadásával egy lekérdezési ciklusban.

Haladó testreszabáshoz fontolja meg egyedi blokkok építését. Tudja meg, hogyan a Túl az alapblokkokon: Egyedi Gutenberg blokkok készítése a WordPress funkcióinak bővítéséhez című cikkben.

Sablonrészek

Hozzon létre egy parts/ mappát az újrafelhasználható részek számára. Például 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 -->

És footer.html:

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

4. Blokkminták és stílusváltozatok hozzáadása

A blokkminták előre megtervezett elrendezések. Határozza meg őket egy patterns/ mappában. Hozza létre a patterns/hero.php fájlt:

<?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 -->

A stílusváltozatok lehetővé teszik a felhasználók számára, hogy teljes megjelenést váltsanak. Hozza létre a styles/default.json és styles/dark.json fájlokat, amelyek felülírják a téma beállításait.

5. Figyelmeztetések és legjobb gyakorlatok

• Teljesítmény: A theme.json gyorsítótárazva van. Változtatások után törölje a gyorsítótárat. Szükség esetén használja a wp_register_theme_json hookot.
• Visszafelé kompatibilitás: A blokktémák csak WordPress 5.9-től működnek. Ha webhelyének támogatnia kell a régebbi verziókat, fontolja meg a hibrid megközelítést, de kerülje a sablonfájlok keverését.
• Gyermektémák: A blokktémák szülőtémaként használhatók klasszikus gyermektémákhoz, de fordítva nem. Használja a template kulcsot a style.css-ben a szülő blokktéma deklarálásához.
• Nemzetköziesítés: Használja a __() függvényt a PHP sablonrészekben a lefordítható karakterláncokhoz. Blokk jelölőnyelvben adja meg a szövegtartományt a textDomain attribútum segítségével.

További információ a beépülő modul fejlesztésének legjobb gyakorlatairól: Robusztus WordPress beépülő modulok építése: Gyakorlati útmutató a legjobb gyakorlatokhoz.

Következtetés

Egyedi blokktéma építése a theme.json segítségével lehetővé teszi, hogy teljesen tervezhető webhelyet hozzon létre PHP érintése nélkül. Az útmutató követésével beállított egy minimális témát, meghatározta a globális stílusokat, létrehozott egyedi sablonokat és hozzáadott mintákat. Ne felejtse el alaposan tesztelni, különösen a peremfeltételek esetén, mint az archív oldalak vagy egyéni bejegyzéstípusok. Ahogy a WordPress fejlődik, a blokktémák lesznek a szabvány. Kezdje el már ma kihasználni az FSE-t a munkafolyamat egyszerűsítésére és az ügyfelek számára páratlan rugalmasság biztosítására.

Ha még tovább szeretné gyorsítani a téma létrehozását, fontoljon meg egy olyan eszközt, amely egy leírás alapján generál egy teljes webhelyet. Például leírhatja a kívánt elrendezést, és percek alatt kap egy készen használható blokktémát.

Készen áll, hogy élesben is használja blokktémáját? Egy egyszerű szöveges leírással generálhat egy teljesen funkcionális céloldalt vagy webhelyet – kód nélkül.