Hur man bygger ett anpassat WordPress-blocktema med theme.json: En steg-för-steg-guide

Sammanfattning

Att bygga ett anpassat WordPress-blocktema med Full Site Editing (FSE) kan vara avskräckande, men theme.json förenklar processen. Den här guiden går igenom hur du skapar ett minimalt blocktema, definierar globala stilar som färger och typografi i theme.json och skapar anpassade mallar med blockmarkup. Du lär dig att lägga till blockmönster och stilvariationer, vilket möjliggör en helt designbar webbplats utan PHP-mallfiler. Vi går igenom vanliga misstag, som att blanda klassiska och blocktemafunktioner, och visar hur du testar ditt tema. I slutet har du ett modernt, utbyggbart blocktema redo för produktion. Detta tillvägagångssätt utnyttjar WordPress senaste funktioner för snabbare, mer visuell utveckling.

Introduktion

Full Site Editing (FSE) har revolutionerat WordPress-temautvecklingen genom att låta dig designa varje del av din webbplats visuellt. Men många utvecklare förlitar sig fortfarande på klassiska teman eller kämpar med att skapa blockteman från grunden. Nyckeln till att låsa upp FSE:s kraft är theme.json – en konfigurationsfil som kontrollerar globala stilar, inställningar och mallar. Den här artikeln ger en praktisk, steg-för-steg-guide för att bygga ett anpassat blocktema med theme.json. Du lär dig att skapa mappstrukturen, definiera färgpaletter och typografiförinställningar, skapa anpassade mallar med blockmarkup och lägga till stilvariationer. I slutet har du ett produktionsklart blocktema som är lätt att underhålla och utöka. Låt oss dyka in och avmystifiera FSE-utveckling.

För en bredare bild av hur FSE formar framtiden för WordPress-design, kolla in Gutenberg FSE: Framtiden för WordPress-design 2026.

1. Skapa ett minimalt blocktema

Ett blocktema kräver minst två filer: style.css och index.html. Låt oss skapa dem.

Mappstruktur

Skapa en mapp som heter my-block-theme i din wp-content/themes/-katalog. Placera inuti:

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

style.css

Även om blockteman är mindre beroende av CSS, krävs style.css fortfarande för temanidentifiering:

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

Raden Requires at least: 5.9 säkerställer att temat fungerar med FSE-funktionen.

index.html

Detta är din reservmall. Den måste börja med blockmarkup. Skapa 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"} /-->

Detta använder blocksyntax för att inkludera header- och footer-malldelar, och visar inläggstitel och innehåll.

Varning: Blockteman får inte innehålla PHP-mallfiler som header.php eller footer.php. Att blanda klassiska och blockmallar kommer att bryta FSE.

Aktivera temat

Ladda upp mappen via FTP eller zip-installation och aktivera den. Du borde se en tom webbplats med din minimala struktur. Nästa steg är att styla den med theme.json.

2. Bemästra theme.json: Globala stilar och inställningar

theme.json centraliserar alla designkontroller. Den finns i rotkatalogen för ditt tema. Låt oss skapa en med färg- och typografiinställningar.

Grundstruktur

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

Detta definierar en färgpalett, teckensnittsfamiljer, teckenstorlekar och globala stilar. var()-funktionerna refererar till CSS-anpassade egenskaper som automatiskt genereras av WordPress. Användare kan sedan ändra dessa i webbplatsredigeraren.

Tips: Använd CSS-anpassade egenskaper för konsekvens. Undvik att hårdkoda värden i CSS-filer; låt theme.json vara den enda källan till sanning.

3. Skapa anpassade mallar

Blockmallar är HTML-filer med blockmarkup. De följer en hierarki som liknar klassiska mallfiler. Skapa till exempel single.html för enstaka inlägg:

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

Skapa på samma sätt page.html, archive.html, etc. Du kan också skapa anpassade mallar genom att lägga till ett wp:post-template-block inuti en frågeslinga.

För avancerad anpassning, överväg att bygga anpassade block. Lär dig hur i Bortom grundläggande block: Skapa anpassade Gutenberg-block för förbättrad WordPress-funktionalitet.

Malldelar

Skapa en parts/-mapp för återanvändbara delar. Till exempel 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 -->

Och footer.html:

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

4. Lägga till blockmönster och stilvariationer

Blockmönster är fördesignade layouter. Definiera dem i en patterns/-mapp. Skapa 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">Välkommen</h1>
        <!-- /wp:heading -->
        <!-- wp:paragraph {"align":"center","textColor":"white"} -->
        <p class="has-text-align-center has-white-color">Detta är en anpassad hero-sektion</p>
        <!-- /wp:paragraph -->
    </div>
</div>
<!-- /wp:cover -->

Stilvariationer låter användare växla hela utseenden. Skapa styles/default.json och styles/dark.json som åsidosätter temainställningar.

5. Varningar och bästa praxis

• Prestanda: theme.json cachas. Rensa cachen efter ändringar. Använd hooken wp_register_theme_json om det behövs.
• Bakåtkompatibilitet: Blockteman fungerar bara från WordPress 5.9. Om din webbplats måste stödja äldre versioner, överväg en hybridansats men undvik att blanda mallfiler.
• Barnteman: Blockteman kan användas som föräldrateman för klassiska barnteman, men inte tvärtom. Använd template i style.css för att deklarera ett föräldrablocktema.
• Internationalisering: Använd funktionen __() i PHP-malldelar för översättningsbara strängar. I blockmarkup, ange textdomän via attributet textDomain.

För mer om pluginutvecklings bästa praxis, se Bygg robusta WordPress-plugin: En praktisk guide till bästa praxis.

Slutsats

Att bygga ett anpassat blocktema med theme.json ger dig möjlighet att skapa en helt designbar webbplats utan att röra PHP. Genom att följa den här guiden har du skapat ett minimalt tema, definierat globala stilar, skapat anpassade mallar och lagt till mönster. Kom ihåg att testa noggrant, särskilt för kantfall som arkivsidor eller anpassade inläggstyper. När WordPress utvecklas kommer blockteman att bli standard. Börja använda FSE idag för att effektivisera ditt arbetsflöde och erbjuda kunder oöverträffad flexibilitet.

Om du vill påskynda temas kapning ytterligare, överväg att använda ett verktyg som genererar en komplett webbplats från en beskrivning. Till exempel kan du beskriva din önskade layout och få ett färdigt blocktema på några minuter.

Redo att lansera ditt blocktema? Med en vanlig textbeskrivning kan du generera en fullt fungerande landningssida eller webbplats – ingen kod krävs.