Kaip sukurti pasirinktą WordPress blokinę temą naudojant theme.json: žingsnis po žingsnio

Santrauka

Sukurti pasirinktą WordPress blokinę temą naudojant Full Site Editing (FSE) gali atrodyti sudėtinga, bet theme.json supaprastina procesą. Šiame vadove sužinosite, kaip nustatyti minimalią blokinę temą, apibrėžti globalius stilius, tokius kaip spalvos ir tipografija, theme.json, bei kurti pasirinktinius šablonus naudojant blokų žymėjimą. Išmoksite pridėti blokų šablonus ir stiliaus variantus, leidžiančius sukurti visiškai dizaino valdomą svetainę be PHP šablonų failų. Apžvelgsime dažnas klaidas, pvz., klasikinių ir blokinių temų funkcijų maišymą, ir parodysime, kaip išbandyti temą. Galiausiai turėsite modernią, praplečiamą blokinę temą, paruoštą gamybai. Šis metodas išnaudoja naujausias WordPress galimybes greitesniam ir vizualesniam vystymui.

Įvadas

Full Site Editing (FSE) revoliucionavo WordPress temos kūrimą, leisdamas vizualiai suprojektuoti kiekvieną svetainės dalį. Tačiau daugelis programuotojų vis dar naudoja klasikines temas arba sunkiai kuria blokines temas nuo nulio. Raktas atrakinti FSE galią yra theme.json – konfigūracijos failas, valdantis globalius stilius, nustatymus ir šablonus. Šis straipsnis pateikia praktišką, žingsnis po žingsnio vadovą, kaip sukurti pasirinktą blokinę temą naudojant theme.json. Išmoksite nustatyti aplanko struktūrą, apibrėžti spalvų paletes ir tipografijos išankstinius nustatymus, sukurti pasirinktinius šablonus su blokų žymėjimu ir pridėti stiliaus variantus. Pabaigoje turėsite gamybai paruoštą blokinę temą, kurią lengva prižiūrėti ir plėsti. Pasinerkime ir išsiaiškinkime FSE kūrimą.

Norėdami platesnio požiūrio į tai, kaip FSE formuoja ateities WordPress dizainą, peržiūrėkite Gutenberg FSE: WordPress dizaino ateitis 2026.

1. Minimalios blokinės temos nustatymas

Blokinei temai reikia mažiausiai dviejų failų: style.css ir index.html. Sukurkime juos.

Aplanko struktūra

Sukurkite aplanką pavadinimu my-block-theme savo wp-content/themes/ kataloge. Įdėkite:

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

style.css

Nors blokinės temos mažiau priklauso nuo CSS, style.css vis dar reikalingas temos identifikavimui:

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

Eilutė Requires at least: 5.9 užtikrina, kad tema veikia su FSE funkcija.

index.html

Tai yra jūsų atsarginis šablonas. Jis turi prasidėti blokų žymėjimu. Sukurkite paprastą išdėstymą:

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

Tai naudoja blokų sintaksę, kad įtrauktų antraštės ir poraštės šablonų dalis bei rodytų įrašo pavadinimą ir turinį.

Įspėjimas: Blokinėse temose negali būti PHP šablonų failų, pvz., header.php arba footer.php. Klasikinių ir blokinių šablonų maišymas sugadins FSE.

Temos aktyvavimas

Įkelkite aplanką per FTP arba zip diegimą ir aktyvuokite. Turėtumėte matyti tuščią svetainę su minimalia struktūra. Toliau stilizuosime ją naudodami theme.json.

2. Įvaldyti theme.json: Globalūs stiliai ir nustatymai

theme.json centralizuoja visus dizaino valdiklius. Jis yra temos aplanko šaknyje. Sukurkime vieną su spalvų ir tipografijos nustatymais.

Pagrindinė struktū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)"
        }
    }
}

Tai apibrėžia spalvų paletę, šriftų šeimas, šriftų dydžius ir globalius stilius. Funkcijos var() nurodo CSS pasirinktines savybes, automatiškai sugeneruotas WordPress. Vartotojai gali jas keisti Svetainės Redaktoriuje.

Patarimas: Naudokite CSS pasirinktines savybes dėl nuoseklumo. Venkite kietų kodų reikšmių CSS failuose; tegul theme.json yra vienintelis tiesos šaltinis.

3. Pasirinktinių šablonų kūrimas

Blokiniai šablonai yra HTML failai su blokų žymėjimu. Jie laikosi hierarchijos, panašios į klasikinius šablonų failus. Pavyzdžiui, sukurkite single.html atskiriems įrašams:

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

Panašiai sukurkite page.html, archive.html ir t.t. Taip pat galite kurti pasirinktinius šablonus pridėdami wp:post-template bloką užklausos cikle.

Dėl pažangaus pritaikymo apsvarstykite galimybę kurti pasirinktinius blokus. Sužinokite, kaip tai padaryti, skaitydami Už pagrindinių blokų ribų: pasirinktinių Gutenberg blokų kūrimas patobulintam WordPress funkcionalumui.

Šablonų dalys

Sukurkite parts/ aplanką pernaudojamoms dalims. Pavyzdžiui, 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 -->

Ir footer.html:

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

4. Blokų šablonų ir stiliaus variantų pridėjimas

Blokų šablonai yra iš anksto suprojektuoti išdėstymai. Apibrėžkite juos patterns/ aplanke. Sukurkite 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 -->

Stiliaus variantai leidžia vartotojams perjungti visą išvaizdą. Sukurkite styles/default.json ir styles/dark.json, kurie perrašo temos nustatymus.

5. Įspėjimai ir geriausia praktika

• Našumas: theme.json yra talpykloje. Išvalykite talpyklą po pakeitimų. Jei reikia, naudokite wp_register_theme_json kablį.
• Atgalinis suderinamumas: Blokinės temos veikia tik nuo WordPress 5.9. Jei jūsų svetainė turi palaikyti senesnes versijas, apsvarstykite hibridinį metodą, bet venkite maišyti šablonų failus.
• Vaiko temos: Blokinės temos gali būti naudojamos kaip pagrindinės temos klasikinėms vaiko temoms, bet ne atvirkščiai. Naudokite template style.css faile, kad deklaruotumėte pagrindinę blokinę temą.
• Internacionalizacija: Naudokite funkciją __() PHP šablonų dalyse verčiamoms eilutėms. Blokų žymėjime nurodykite teksto domeną per textDomain atributą.

Daugiau apie geriausią praktiką kuriant papildinius skaitykite Kurti patikimus WordPress papildinius: praktinis geriausios praktikos vadovas.

Išvada

Sukurti pasirinktą blokinę temą su theme.json suteikia jums galimybę sukurti visiškai dizaino valdomą svetainę neliečiant PHP. Vykdydami šį vadovą, nustatėte minimalią temą, apibrėžėte globalius stilius, sukūrėte pasirinktinius šablonus ir pridėjote šablonus. Nepamirškite nuodugniai išbandyti, ypač kraštinius atvejus, tokius kaip archyvų puslapiai ar pasirinktiniai įrašų tipai. Kai WordPress vystosi, blokinės temos taps standartu. Pradėkite naudoti FSE jau šiandien, kad supaprastintumėte savo darbo eigą ir pasiūlytumėte klientams neprilygstamą lankstumą.

Jei norite dar labiau pagreitinti temos kūrimą, apsvarstykite galimybę naudoti įrankį, kuris sugeneruoja visą svetainę iš aprašymo. Pavyzdžiui, galite aprašyti norimą išdėstymą ir per kelias minutes gauti paruoštą naudoti blokinę temą.

Pasiruošę paleisti savo blokinę temą? Su paprasto teksto aprašymu galite sugeneruoti visiškai funkcionalų nukreipimo puslapį ar svetainę – nereikia jokio kodavimo.