Sådan bygger du et brugerdefineret WordPress-bloktema med theme.json: En trin-for-trin-guide

Resumé

At bygge et brugerdefineret WordPress-bloktema med Full Site Editing (FSE) kan være skræmmende, men theme.json forenkler processen. Denne guide guider dig gennem opsætning af et minimalt bloktema, definition af globale stilarter som farver og typografi i theme.json, og oprettelse af brugerdefinerede skabeloner ved hjælp af blokmarkup. Du lærer at tilføje blokmønstre og stilvariationer, hvilket muliggør et fuldt designbart site uden PHP-skabelonfiler. Vi dækker almindelige fejl, såsom at blande klassiske og bloktemafunktioner, og viser hvordan du tester dit tema. Til sidst vil du have et moderne, udvideligt bloktema klar til produktion. Denne tilgang udnytter WordPress's nyeste muligheder for hurtigere, mere visuel udvikling.

Introduktion

Full Site Editing (FSE) har revolutioneret WordPress-temaudvikling, så du kan designe hver del af dit site visuelt. Men mange udviklere stoler stadig på klassiske temaer eller kæmper med at skabe bloktemaer fra bunden. Nøglen til at låse op for FSE's kraft er theme.json—en konfigurationsfil, der styrer globale stilarter, indstillinger og skabeloner. Denne artikel giver en praktisk, trin-for-trin guide til at bygge et brugerdefineret bloktema ved hjælp af theme.json. Du lærer at opsætte mappestrukturen, definere farvepaletter og typografiforudindstillinger, oprette brugerdefinerede skabeloner med blokmarkup og tilføje stilvariationer. Til sidst har du et produktionsklart bloktema, der er let at vedligeholde og udvide. Lad os dykke ned og afmystificere FSE-udvikling.

For et bredere blik på, hvordan FSE former fremtiden for WordPress-design, tjek Gutenberg FSE: Fremtiden for WordPress-design i 2026.

1. Opsætning af et minimalt bloktema

Et bloktema kræver minimum to filer: style.css og index.html. Lad os oprette dem.

Mappestruktur

Opret en mappe kaldet my-block-theme i din wp-content/themes/ mappe. Indeni placer:

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

style.css

Selvom bloktemaer er mindre afhængige af CSS, kræves style.css stadig til temaidendifikation:

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

index.html

Dette er din reserve-skabelon. Den skal starte med blokmarkup. Opret et simpelt 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"} /-->

Advarsel: Bloktemaer må ikke indeholde PHP-skabelonfiler som header.php eller footer.php. At blande klassiske og blokskabeloner vil bryde FSE.

Aktivering af temaet

Upload mappen via FTP eller zip-installation, og aktiver den. Du bør se et tomt site med din minimale struktur. Næste skridt er at style det med theme.json.

2. Behersk theme.json: Globale stilarter og indstillinger

theme.json centraliserer alle designkontroller. Den ligger i roden af din temamappe. Lad os oprette en med farve- og typografiindstillinger.

Grundlæggende 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)"
        }
    }
}

Tip: Brug CSS-variabler for konsistens. Undgå at hardcode værdier i CSS-filer; lad theme.json være den eneste kilde til sandhed.

3. Oprettelse af brugerdefinerede skabeloner

Blokskabeloner er HTML-filer med blokmarkup. De følger et hierarki svarende til klassiske skabelonfiler. For eksempel opret single.html til enkeltindlæg:

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

Tilsvarende opret page.html, archive.html osv. Du kan også oprette brugerdefinerede skabeloner ved at tilføje en wp:post-template blok inde i en forespørgselsloop.

For avanceret tilpasning, overvej at bygge brugerdefinerede blokke. Lær hvordan i Beyond Basic Blocks: At skabe brugerdefinerede Gutenberg-blokke til forbedret WordPress-funktionalitet.

Skabelondele

Opret en parts/ mappe til genanvendelige dele. 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. Tilføjelse af blokmønstre og stilvariationer

Blokmønstre er foruddesignede layouts. Definér dem i en patterns/ mappe. Opret 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 -->

Stilvariationer giver brugere mulighed for at skifte hele udseendet. Opret styles/default.json og styles/dark.json som tilsidesætter temaets indstillinger.

5. Advarsler og bedste praksis

• Ydeevne: theme.json caches. Ryd cachen efter ændringer. Brug wp_register_theme_json hook om nødvendigt.
• Bagudkompatibilitet: Bloktemaer virker kun fra WordPress 5.9. Hvis dit site skal understøtte ældre versioner, overvej en hybrid tilgang, men undgå at blande skabelonfiler.
• Børnetemaer: Bloktemaer kan bruges som overordnede temaer til klassiske børnetemaer, men ikke omvendt. Brug template i style.css for at erklære et overordnet bloktema.
• Internationalisering: Brug funktionen __() inde i PHP-skabelondele til oversættelige strenge. I blokmarkup, angiv tekstdomæne via attributten textDomain.

For mere om bedste praksis for pluginudvikling, se Building Robust WordPress Plugins: En praktisk guide til bedste praksis.

Konklusion

At bygge et brugerdefineret bloktema med theme.json giver dig mulighed for at skabe et fuldt designbart site uden at røre PHP. Ved at følge denne guide har du sat et minimalt tema op, defineret globale stilarter, oprettet brugerdefinerede skabeloner og tilføjet mønstre. Husk at teste grundigt, især for kanttilfælde som arkivsider eller brugerdefinerede indlægstyper. Efterhånden som WordPress udvikler sig, vil bloktemaer blive standarden. Begynd at udnytte FSE i dag for at strømline din arbejdsgang og tilbyde kunder enestående fleksibilitet.

Hvis du vil fremskynde temaskabelsen yderligere, overvej at bruge et værktøj, der genererer et komplet site fra en beskrivelse. For eksempel kan du beskrive dit ønskede layout og få et klar-til-brug bloktema på få minutter.

Klar til at gøre dit bloktema live? Med en almindelig tekstbeskrivelse kan du generere en fuldt funktionel landingsside eller hjemmeside – ingen kodning nødvendig.