Kako zgraditi prilagojeno temo blokov WordPress z theme.json: Vodič po korakih

Povzetek

Izdelava prilagojene teme blokov WordPress s polnim urejanjem spletnega mesta (FSE) je lahko zastrašujoča, vendar theme.json poenostavi postopek. Ta vodič vas vodi skozi nastavitev minimalne teme blokov, definiranje globalnih stilov, kot so barve in tipografija v theme.json, ter ustvarjanje prilagojenih predlog z uporabo oznak blokov. Naučili se boste dodajati vzorce blokov in različice stilov, kar omogoča popolnoma oblikovljivo spletno mesto brez datotek predlog PHP. Pokrili bomo pogoste napake, kot je mešanje klasičnih funkcij in funkcij teme blokov, ter pokazali, kako preizkusiti svojo temo. Na koncu boste imeli sodobno, razširljivo temo blokov, pripravljeno za produkcijo. Ta pristop izkorišča najnovejše zmožnosti WordPressa za hitrejši in bolj vizualni razvoj.

Uvod

Polno urejanje spletnega mesta (FSE) je revolucioniralo razvoj tem WordPress, kar vam omogoča vizualno oblikovanje vsakega dela spletnega mesta. Toda mnogi razvijalci še vedno uporabljajo klasične teme ali se borijo z ustvarjanjem tem blokov iz nič. Ključ do odklepanja moči FSE je theme.json – konfiguracijska datoteka, ki nadzoruje globalne stile, nastavitve in predloge. Ta članek ponuja praktičen vodič po korakih za izgradnjo prilagojene teme blokov z uporabo theme.json. Naučili se boste nastaviti strukturo map, definirati barvne palete in prednastavitve tipografije, ustvariti prilagojene predloge z oznakami blokov ter dodati različice stilov. Na koncu boste imeli temo blokov, pripravljeno za produkcijo, ki jo je enostavno vzdrževati in razširjati. Poglobimo se in demistificirajmo razvoj FSE.

Za širši pogled na to, kako FSE oblikuje prihodnost oblikovanja WordPress, si oglejte Gutenberg FSE: Prihodnost oblikovanja WordPress v 2026.

1. Nastavitev minimalne teme blokov

Tema blokov zahteva najmanj dve datoteki: style.css in index.html. Ustvarimo ju.

Struktura map

Ustvarite mapo z imenom my-block-theme v vašem imeniku wp-content/themes/. Vanjo postavite:

• style.css
• index.html
• (neobvezno) theme.json

style.css

Čeprav se teme blokov manj zanašajo na CSS, je style.css še vedno potreben za identifikacijo teme:

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

Vrstica Requires at least: 5.9 zagotavlja, da tema deluje s funkcijo FSE.

index.html

To je vaša nadomestna predloga. Začeti mora z oznakami blokov. Ustvarite preprosto postavitev:

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

To uporablja sintakso blokov za vključitev delov predloge glave in noge ter prikazuje naslov in vsebino objave.

Opozorilo: Teme blokov ne smejo vsebovati datotek predlog PHP, kot sta header.php ali footer.php. Mešanje klasičnih in blokovnih predlog bo prekinilo FSE.

Aktiviranje teme

Prenesite mapo prek FTP ali namestite zip ter jo aktivirajte. Videli boste prazno spletno mesto s svojo minimalno strukturo. Nato jo bomo oblikovali z theme.json.

2. Obvladovanje theme.json: Globalni stili in nastavitve

theme.json centralizira vse nadzorne elemente oblikovanja. Nahaja se v korenu vaše mape teme. Ustvarimo ga z barvnimi in tipografskimi nastavitvami.

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

To definira barvno paleto, družine pisav, velikosti pisav in globalne stile. Funkcije var() se sklicujejo na CSS lastnosti po meri, ki jih WordPress samodejno ustvari. Uporabniki jih lahko nato spremenijo v urejevalniku spletnega mesta.

Namig: Uporabite CSS lastnosti po meri za doslednost. Izogibajte se trdemu kodiranju vrednosti v datotekah CSS; naj bo theme.json edini vir resnice.

3. Ustvarjanje prilagojenih predlog

Predloge blokov so datoteke HTML z oznakami blokov. Sledijo hierarhiji, podobni klasičnim predlogam. Na primer, ustvarite single.html za posamezne objave:

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

Podobno ustvarite page.html, archive.html itd. Prav tako lahko ustvarite prilagojene predloge z dodajanjem bloka wp:post-template znotraj zanke poizvedb.

Za napredno prilagajanje razmislite o izdelavi blokov po meri. Naučite se, kako v Onkraj osnovnih blokov: Izdelava blokov Gutenberg po meri za izboljšano funkcionalnost WordPress.

Deli predlog

Ustvarite mapo parts/ za večkrat uporabne dele. Na primer, 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 -->

In footer.html:

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

4. Dodajanje vzorcev blokov in različic stilov

Vzorci blokov so vnaprej oblikovane postavitve. Definirajte jih v mapi patterns/. Ustvarite 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 -->

Različice stilov uporabnikom omogočajo preklop celotnega videza. Ustvarite styles/default.json in styles/dark.json, ki preglasijo nastavitve teme.

5. Opozorila in najboljše prakse

• Zmogljivost: theme.json je predpomnjen. Po spremembah počistite predpomnilnik. Po potrebi uporabite kavelj wp_register_theme_json.
• Vzvratna združljivost: Teme blokov delujejo samo od WordPress 5.9 naprej. Če mora vaše spletno mesto podpirati starejše različice, razmislite o hibridnem pristopu, vendar se izogibajte mešanju predlog datotek.
• Podrejene teme: Teme blokov se lahko uporabljajo kot nadrejene teme za klasične podrejene teme, ne pa obratno. Uporabite template v style.css za deklaracijo nadrejene teme blokov.
• Internacionalizacija: Uporabite funkcijo __() znotraj PHP delov predlog za prevodne nize. V oznakah blokov določite besedilno domeno prek atributa textDomain.

Za več o najboljših praksah razvoja vtičnikov si oglejte Izgradnja robustnih vtičnikov WordPress: Praktični vodič za najboljše prakse.

Zaključek

Izdelava prilagojene teme blokov z theme.json vam omogoča ustvarjanje popolnoma oblikovljivega spletnega mesta brez dotikanja PHP. Po tem vodiču ste nastavili minimalno temo, definirali globalne stile, ustvarili prilagojene predloge in dodali vzorce. Ne pozabite temeljito preizkusiti, zlasti za robne primere, kot so arhivske strani ali vrste objav po meri. Ko se WordPress razvija, bodo teme blokov postale standard. Začnite izkoriščati FSE že danes, da poenostavite svoj potek dela in strankam ponudite neprimerljivo prilagodljivost.

Če želite še bolj pospešiti ustvarjanje tem, razmislite o uporabi orodja, ki ustvari celotno spletno mesto iz opisa. Na primer, opisujete želeno postavitev in v nekaj minutah dobite temo blokov, pripravljeno za uporabo.

Pripravljeni, da svojo temo blokov zaživite? Z opisom v navadnem besedilu lahko ustvarite popolnoma delujočo ciljno stran ali spletno mesto – brez kodiranja.