Slik bygger du et tilpasset WordPress-blokktema med theme.json: En trinn-for-trinn-guide

Sammendrag

Å bygge et tilpasset WordPress-blokktema med Full Site Editing (FSE) kan virke skremmende, men theme.json forenkler prosessen. Denne guiden går gjennom oppsettet av et minimalt blokktema, definering av globale stiler som farger og typografi i theme.json, og opprettelse av egendefinerte maler ved hjelp av blokkmarkør. Du vil lære å legge til blokkmønstre og stilvarianter, noe som muliggjør et fullt designbart nettsted uten PHP-malfiler. Vi dekker vanlige feil, som å blande klassiske og blokkbaserte temafunksjoner, og viser hvordan du tester temaat ditt. Til slutt vil du ha et moderne, utvidbart blokktema klart for produksjon. Denne tilnærmingen utnytter WordPress sine nyeste funksjoner for raskere og mer visuell utvikling.

Introduksjon

Full Site Editing (FSE) har revolusjonert WordPress-temautvikling, slik at du kan designe hver del av nettstedet visuelt. Men mange utviklere stoler fortsatt på klassiske temaer eller sliter med å lage blokktemaer fra bunnen av. Nøkkelen til å låse opp FSEs kraft er theme.json – en konfigurasjonsfil som styrer globale stiler, innstillinger og maler. Denne artikkelen gir en praktisk, trinn-for-trinn-guide til å bygge et tilpasset blokktema ved hjelp av theme.json. Du vil lære å sette opp mappestrukturen, definere fargepaletter og typografipresett, lage egendefinerte maler med blokkmarkør, og legge til stilvarianter. Til slutt vil du ha et produksjonsklart blokktema som er enkelt å vedlikeholde og utvide. La oss dykke inn og avmystifisere FSE-utvikling.

For en bredere oversikt over hvordan FSE former fremtiden for WordPress-design, sjekk ut Gutenberg FSE: Fremtiden for WordPress-design i 2026.

1. Sette opp et minimalt blokktema

Et blokktema krever minimum to filer: style.css og index.html. La oss opprette dem.

Mappestruktur

Opprett en mappe som heter my-block-theme i wp-content/themes/-katalogen din. Inni legger du:

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

style.css

Selv om blokktemaer er mindre avhengige av CSS, er style.css fortsatt nødvendig for temainnidentifikasjon:

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

Linjen Requires at least: 5.9 sikrer at temaet fungerer med FSE-funksjonen.

index.html

Dette er standardmalen din. Den må starte med blokkmarkør. Lag en enkel layout:

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

Dette bruker blokksyntaks for å inkludere topp- og bunntekstmaler, og viser innleggstittel og innhold.

Merk: Blokktemaer må ikke inneholde PHP-malfiler som header.php eller footer.php. Å blande klassiske og blokkbaserte maler vil ødelegge FSE.

Aktivere temaet

Last opp mappen via FTP eller zip-installasjon, og aktiver den. Du bør se et tomt nettsted med din minimale struktur. Deretter skal vi style det med theme.json.

2. Mestre theme.json: Globale stiler og innstillinger

theme.json sentraliserer alle designkontroller. Det ligger i roten av temamappen din. La oss lage en med farge- og typografiinnstillinger.

Grunnleggende struktur

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

Dette definerer en fargepalett, skriftfamilier, skriftstørrelser og globale stiler. var()-funksjonene refererer til CSS-egendefinerte egenskaper som WordPress automatisk genererer. Brukere kan deretter endre disse i Site Editor.

Tips: Bruk CSS-egendefinerte egenskaper for konsistens. Unngå hardkodede verdier i CSS-filer; la theme.json være den eneste sannhetskilden.

3. Opprette egendefinerte maler

Blokkmaler er HTML-filer med blokkmarkør. De følger et hierarki som ligner på klassiske malfiler. For eksempel, opprett single.html for enkeltinnlegg:

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

På samme måte oppretter du page.html, archive.html, osv. Du kan også opprette egendefinerte maler ved å legge til en wp:post-template-blokk i en spørringsløkke.

For avansert tilpasning, vurder å bygge egendefinerte blokker. Lær hvordan i Beyond Basic Blocks: Å lage tilpassede Gutenberg-blokker for forbedret WordPress-funksjonalitet.

Maldeler

Opprett en parts/-mappe for gjenbrukbare deler. For eksempel, 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 -->

Og footer.html:

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

4. Legge til blokkmønstre og stilvarianter

Blokkmønstre er forhåndsdesignede layouter. Definer dem i en patterns/-mappe. Opprett 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">Velkommen</h1>
        <!-- /wp:heading -->
        <!-- wp:paragraph {"align":"center","textColor":"white"} -->
        <p class="has-text-align-center has-white-color">Dette er en tilpasset helteseksjon</p>
        <!-- /wp:paragraph -->
    </div>
</div>
<!-- /wp:cover -->

Stilvarianter lar brukere bytte hele utseender. Opprett styles/default.json og styles/dark.json som overstyrer temainnstillinger.

5. Fallgruver og beste praksis

• Ytelse: theme.json blir bufret. Tøm bufferen etter endringer. Bruk wp_register_theme_json-hooken om nødvendig.
• Bakoverkompatibilitet: Blokktemaer fungerer kun fra WordPress 5.9. Hvis nettstedet ditt må støtte eldre versjoner, vurder en hybrid tilnærming, men unngå å blande malfiler.
• Barnetemaer: Blokktemaer kan brukes som overordnede temaer for klassiske barnetemaer, men ikke omvendt. Bruk template i style.css for å erklære et overordnet blokktema.
• Internasjonalisering: Bruk __()-funksjonen i PHP-maldeler for oversettbare strenger. I blokkmarkør, spesifiser tekstdomene via textDomain-attributtet.

For mer om beste praksis for pluginutvikling, se Å bygge robuste WordPress-plugins: En praktisk guide til beste praksis.

Konklusjon

Å bygge et tilpasset blokktema med theme.json gir deg muligheten til å lage et fullt designbart nettsted uten å røre PHP. Ved å følge denne guiden har du satt opp et minimalt tema, definert globale stiler, laget egendefinerte maler og lagt til mønstre. Husk å teste grundig, spesielt for kanttilfeller som arkivsider eller egendefinerte innleggstyper. Etter hvert som WordPress utvikler seg, vil blokktemaer bli standarden. Begynn å utnytte FSE i dag for å strømlinjeforme arbeidsflyten din og tilby kunder uovertruffen fleksibilitet.

Hvis du vil øke temaopprettelsen ytterligere, vurder å bruke et verktøy som genererer et komplett nettsted fra en beskrivelse. For eksempel kan du beskrive ønsket layout og få et klart til bruk blokktema på få minutter.

Klar til å ta blokktemaet ditt i bruk? Med en ren tekstbeskrivelse kan du generere en fullt funksjonell landingsside eller nettside – ingen koding nødvendig.