Kuinka rakentaa mukautettu WordPress-lohkoteema theme.jsonilla: Vaiheittainen opas

Yhteenveto

Mukautetun WordPress-lohkoteeman rakentaminen Full Site Editing (FSE) -toiminnon avulla voi olla pelottavaa, mutta theme.json yksinkertaistaa prosessia. Tämä opas opastaa sinut minimaalisen lohkoteeman asetuksissa, globaalien tyylien, kuten värien ja typografian, määrittelyssä theme.jsonissa ja mukautettujen mallien luomisessa lohkomerkinnöillä. Opit lisäämään lohkokuviota ja tyylivariaatioita, mikä mahdollistaa täysin muunneltavan sivuston ilman PHP-mallitiedostoja. Käsittelemme yleisiä virheitä, kuten klassisten ja lohkoteemaominaisuuksien sekoittamista, ja näytämme, miten testata teemaasi. Lopuksi sinulla on moderni, laajennettava lohkoteema valmiina tuotantoon. Tämä lähestymistapa hyödyntää WordPressin uusimpia ominaisuuksia nopeampaan ja visuaalisempaan kehitykseen.

Johdanto

Full Site Editing (FSE) on mullistanut WordPress-teemakehityksen, mahdollistaen jokaisen sivuston osan visuaalisen suunnittelun. Monet kehittäjät kuitenkin luottavat edelleen klassisiin teemoihin tai kamppailevat lohkoteemojen luomisessa tyhjästä. Avain FSE:n voiman hyödyntämiseen on theme.json—asetustiedosto, joka hallitsee globaaleja tyylejä, asetuksia ja malleja. Tämä artikkeli tarjoaa käytännöllisen, vaiheittaisen oppaan mukautetun lohkoteeman rakentamiseen theme.jsonia käyttäen. Opit määrittämään kansiorakenteen, väripaletit ja typografia-asetukset, luomaan mukautettuja malleja lohkomerkinnöillä ja lisäämään tyylivariaatioita. Lopuksi sinulla on tuotantovalmiina oleva lohkoteema, jota on helppo ylläpitää ja laajentaa. Sukelletaan sisään ja selkeytetään FSE-kehitys.

Laajemman katsauksen saamiseksi siitä, miten FSE muokkaa WordPressin suunnittelun tulevaisuutta, tutustu artikkeliin Gutenberg FSE: WordPress-suunnittelun tulevaisuus vuonna 2026.

1. Minimaalisen lohkoteeman asetukset

Lohkoteema vaatii vähintään kaksi tiedostoa: style.css ja index.html. Luodaan ne.

Kansiorakenne

Luo kansio nimeltä my-block-theme wp-content/themes/-hakemistoon. Sen sisään sijoita:

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

style.css

Vaikka lohkoteemat käyttävät vähemmän CSS:ää, style.css vaaditaan teeman tunnistamiseen:

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

Requires at least: 5.9 -rivi varmistaa teeman yhteensopivuuden FSE-ominaisuuden kanssa.

index.html

Tämä on varamallisi. Sen on alettava lohkomerkinnöillä. Luo yksinkertainen asettelu:

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

Tämä käyttää lohkomerkintöjä sisällyttääkseen header- ja footer-osat, ja näyttää viestin otsikon ja sisällön.

Varoitus: Lohkoteemat eivät saa sisältää PHP-mallitiedostoja kuten header.php tai footer.php. Klassisten ja lohkoteemamallien sekoittaminen rikkoo FSE:n.

Teeman aktivointi

Lataa kansio FTP:llä tai zip-asennuksella ja aktivoi se. Sinun pitäisi nähdä tyhjä sivusto minimaalisella rakenteellasi. Seuraavaksi tyylitämme sen theme.jsonilla.

2. theme.jsonin hallinta: Globaalit tyylit ja asetukset

theme.json keskittää kaikki suunnittelun hallintatoiminnot. Se sijaitsee teemakansion juuressa. Luodaan sellainen väri- ja typografia-asetuksilla.

Perusrakenne

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

Tämä määrittelee väripaletin, fonttiperheet, fonttikoot ja globaalit tyylit. var()-funktiot viittaavat WordPressin automaattisesti luomiin CSS-mukautettuihin ominaisuuksiin. Käyttäjät voivat sitten muuttaa näitä Sivustoeditorissa.

Vinkki: Käytä CSS-mukautettuja ominaisuuksia johdonmukaisuuden vuoksi. Vältä kovakoodattuja arvoja CSS-tiedostoissa; anna theme.jsonin olla ainoa totuuden lähde.

3. Mukautettujen mallien luominen

Lohkomallit ovat HTML-tiedostoja lohkomerkinnöillä. Ne noudattavat hierarkiaa, joka on samanlainen kuin klassiset mallitiedostot. Luo esimerkiksi single.html yksittäisille viesteille:

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

Vastaavasti luo page.html, archive.html jne. Voit myös luoda mukautettuja malleja lisäämällä wp:post-template-lohkon kyselysilmukan sisään.

Tarkempaa räätälöintiä varten harkitse mukautettujen lohkojen rakentamista. Lue lisää oppaasta Beyond Basic Blocks: Crafting Custom Gutenberg Blocks for Enhanced WordPress Functionality.

Malliosat

Luo parts/-kansio uudelleenkäytettäville osille. Esimerkiksi 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. Lohkokuviot ja tyylivariaatiot

Lohkokuvio on valmiiksi suunniteltu asettelu. Määrittele ne patterns/-kansiossa. Luo 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">Tervetuloa</h1>
        <!-- /wp:heading -->
        <!-- wp:paragraph {"align":"center","textColor":"white"} -->
        <p class="has-text-align-center has-white-color">Tämä on mukautettu hero-osio</p>
        <!-- /wp:paragraph -->
    </div>
</div>
<!-- /wp:cover -->

Tyylivariaatiot mahdollistavat käyttäjien vaihtaa koko ilmettä. Luo styles/default.json ja styles/dark.json, jotka ohittavat teema-asetukset.

5. Varoitukset ja parhaat käytännöt

• Suorituskyky: theme.json välimuistitetaan. Tyhjennä välimuisti muutosten jälkeen. Käytä wp_register_theme_json-koukkua tarvittaessa.
• Taaksepäin yhteensopivuus: Lohkoteemat toimivat vain WordPress 5.9:stä alkaen. Jos sivustosi on tuettava vanhempia versioita, harkitse hybridilähestymistapaa, mutta vältä mallitiedostojen sekoittamista.
• Lapsiteemat: Lohkoteemoja voidaan käyttää vanhempina teemoina klassisille lapsiteemoille, mutta ei päinvastoin. Käytä templatea style.css:ssä ilmoittaaksesi vanhemman lohkoteeman.
• Kansainvälistäminen: Käytä __()-funktiota PHP-malliosien sisällä käännettävissä merkkijonoissa. Lohkomerkinnöissä määritä tekstialue textDomain-attribuutilla.

Lisätietoja pluginien kehityksen parhaista käytännöistä on artikkelissa Building Robust WordPress Plugins: A Practical Guide to Best Practices.

Yhteenveto

Mukautetun lohkoteeman rakentaminen theme.jsonilla antaa sinulle mahdollisuuden luoda täysin muunneltava sivusto ilman PHP:n koskettamista. Seuraamalla tätä opasta olet määrittänyt minimaalisen teeman, määritellyt globaalit tyylit, luonut mukautettuja malleja ja lisännyt kuvioita. Muista testata perusteellisesti, erityisesti reunatapauksissa kuten arkistosivut tai mukautetut sisältötyypit. WordPressin kehittyessä lohkoteemoista tulee standardi. Ala hyödyntää FSE:tä tänään tehostaaksesi työnkulkuasi ja tarjotaksesi asiakkaille vertaansa vailla olevaa joustavuutta.

Jos haluat nopeuttaa teeman luomista entisestään, harkitse työkalun käyttöä, joka luo täydellisen sivuston kuvauksesta. Esimerkiksi voit kuvailla haluamasi asettelun ja saada käyttövalmiin lohkoteeman minuuteissa.

Valmis viemään lohkoteemasi verkkoon? Pelkällä tekstikuvauksella voit luoda täysin toimivan laskeutumissivun tai verkkosivuston—ilman koodausta.