Kuidas ehitada kohandatud WordPressi plokiteemat theme.json-iga: samm-sammult juhend

Kokkuvõte

Kohandatud WordPressi plokiteema loomine täissaidi redigeerimisega (FSE) võib tunduda hirmutav, kuid theme.json lihtsustab protsessi. See juhend juhatab teid läbi minimaalse plokiteema seadistamise, globaalsete stiilide (nt värvid ja tüpograafia) määratlemise theme.json-is ning kohandatud mallide loomise plokimärgistuse abil. Õpite lisama plokimustreid ja stiilivariatsioone, võimaldades täielikult kujundatavat saiti ilma PHP-mallifailideta. Käsitleme levinud vigu, nagu klassikaliste ja plokiteema funktsioonide segamine, ning näitame, kuidas oma teemat testida. Lõpuks on teil kaasaegne, laiendatav plokiteema tootmiseks valmis. See lähenemine kasutab WordPressi uusimaid võimalusi kiiremaks ja visuaalsemaks arenduseks.

Sissejuhatus

Täissaidi redigeerimine (FSE) on revolutsiooniliselt muutnud WordPressi teemade arendust, võimaldades teil oma saidi iga osa visuaalselt kujundada. Kuid paljud arendajad toetuvad endiselt klassikalistele teemadele või näevad vaeva, et plokiteemasid nullist luua. Võti FSE jõu vallandamiseks on theme.json—konfiguratsioonifail, mis juhib globaalseid stiile, sätteid ja malle. See artikkel pakub praktilist, samm-sammult juhendit kohandatud plokiteema loomiseks theme.json abil. Õpite seadistama kaustastruktuuri, määratlema värvipalette ja tüpograafia eelseadeid, looma kohandatud malle plokimärgistusega ning lisama stiilivariatsioone. Lõpuks on teil tootmisvalmis plokiteema, mida on lihtne hooldada ja laiendada. Sukeldume ja demüstifitseerime FSE arendust.

Laiema ülevaate saamiseks FSE mõjust WordPressi disaini tulevikule vaadake Gutenberg FSE: WordPressi disaini tulevik 2026. aastal.

1. Minimaalse plokiteema seadistamine

Plokiteema nõuab vähemalt kahte faili: style.css ja index.html. Loome need.

Kaustastruktuur

Looge kaust nimega my-block-theme oma wp-content/themes/ kataloogis. Sisse paigutage:

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

style.css

Kuigi plokiteemad tuginevad CSS-ile vähem, on style.css endiselt vajalik teema identifitseerimiseks:

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

Rida Requires at least: 5.9 tagab, et teema töötab FSE funktsiooniga.

index.html

See on teie varumall. See peab algama plokimärgistusega. Looge lihtne paigutus:

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

See kasutab plokkide süntaksit, et lisada päise ja jaluse malli osad ning kuvada postituse pealkiri ja sisu.

Hoiatus: Plokiteemad ei tohi sisaldada PHP-mallifaile nagu header.php või footer.php. Klassikaliste ja plokimallide segamine rikub FSE.

Teema aktiveerimine

Laadige kaust üles FTP või zip installi kaudu ja aktiveerige see. Peaksite nägema tühja saiti oma minimaalse struktuuriga. Järgmisena kujundame selle theme.json-iga.

2. theme.json-i valdamine: globaalsed stiilid ja sätted

theme.json tsentraliseerib kõik disaini juhtelemendid. See asub teie teemakausta juurtasandil. Loome ühe koos värvi- ja tüpograafiaseadetega.

Põhistruktuur

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

See määratleb värvipaleti, fondiperekonnad, fondi suurused ja globaalsed stiilid. var() funktsioonid viitavad WordPressi poolt automaatselt genereeritud CSS-i kohandatud atribuutidele. Kasutajad saavad neid seejärel saidiredaktoris muuta.

Näpunäide: Kasutage järjepidevuse tagamiseks CSS-i kohandatud atribuute. Vältige väärtuste kõvakodeerimist CSS-failides; laske theme.json-il olla ainus tõeallikas.

3. Kohandatud mallide loomine

Plokimallid on HTML-failid plokimärgistusega. Need järgivad klassikaliste mallifailidega sarnast hierarhiat. Näiteks looge üksiku postituse jaoks single.html:

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

Samamoodi looge page.html, archive.html jne. Saate luua ka kohandatud malle, lisades wp:post-template ploki päringuringi.

Täpsemaks kohandamiseks kaaluge kohandatud plokkide loomist. Õppige, kuidas artiklis Beyond Basic Blocks: kohandatud Gutenbergi plokkide loomine WordPressi funktsionaalsuse parandamiseks.

Malli osad

Looge korduvkasutatavate osade jaoks kaust parts/. Näiteks 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 -->

Ja footer.html:

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

4. Plokimustrite ja stiilivariatsioonide lisamine

Plokimustrid on eelkujundatud paigutused. Määratlege need kaustas patterns/. Looge 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 -->

Stiilivariatsioonid võimaldavad kasutajatel vahetada kogu välimust. Looge styles/default.json ja styles/dark.json, mis alistavad teema sätted.

5. Hoiatused ja parimad tavad

• Jõudlus: theme.json puhverdatakse. Tühjendage puhver pärast muudatusi. Vajadusel kasutage wp_register_theme_json konksu.
• Tagasiühilduvus: Plokiteemad töötavad ainult alates WordPress 5.9-st. Kui teie sait peab toetama vanemaid versioone, kaaluge hübriidlähenemist, kuid vältige mallifailide segamist.
• Alamteemad: Plokiteemasid saab kasutada klassikaliste alamteemade vanemteemadena, kuid mitte vastupidi. Kasutage style.css-is template-i, et deklareerida vanem plokiteema.
• Rahvusvahelistamine: Kasutage tõlgitavate stringide jaoks PHP-malli osades funktsiooni __(). Plokimärgistuses määrake tekstidomeen atribuudi textDomain kaudu.

Täiendava teabe saamiseks pluginate arendamise parimate tavade kohta vaadake Tugevate WordPressi pluginate ehitamine: praktiline juhend parimatele tavadele.

Kokkuvõte

Kohandatud plokiteema loomine theme.json-iga annab teile võimaluse luua täielikult kujundatav sait ilma PHP-d puudutamata. Seda juhendit järgides olete seadistanud minimaalse teema, määratlenud globaalsed stiilid, loonud kohandatud mallid ja lisanud mustrid. Pidage meeles põhjalikult testida, eriti äärejuhtumite puhul nagu arhiivilehed või kohandatud postitüübid. WordPressi arenedes saavad plokiteemad standardiks. Hakake FSE-d kasutama juba täna, et oma töövoogu sujuvamaks muuta ja klientidele võrratut paindlikkust pakkuda.

Kui soovite teemade loomist veelgi kiirendada, kaaluge tööriista, mis genereerib kirjelduse põhjal terve saidi. Näiteks võite kirjeldada soovitud paigutust ja saada mõne minutiga kasutusvalmis plokiteema.

Valmis oma plokiteema ellu viima? Lihttekstikirjeldusega saate genereerida täielikult toimiva sihtlehe või veebisaidi—koodi pole vaja.