So erstellen Sie ein benutzerdefiniertes WordPress-Block-Theme mit theme.json: Eine Schritt-für-Schritt-Anleitung

Zusammenfassung

Das Erstellen eines benutzerdefinierten WordPress-Block-Themes mit Full Site Editing (FSE) kann entmutigend sein, aber theme.json vereinfacht den Prozess. Diese Anleitung führt Sie durch die Einrichtung eines minimalen Block-Themes, die Definition globaler Stile wie Farben und Typografie in theme.json und die Erstellung benutzerdefinierter Vorlagen mit Block-Markup. Sie lernen, Blockmuster und Stilvarianten hinzuzufügen, was eine vollständig gestaltbare Website ohne PHP-Vorlagendateien ermöglicht. Wir behandeln häufige Fehler, wie das Mischen klassischer und Block-Theme-Funktionen, und zeigen, wie Sie Ihr Theme testen. Am Ende haben Sie ein modernes, erweiterbares Block-Theme, das für die Produktion bereit ist. Dieser Ansatz nutzt die neuesten Fähigkeiten von WordPress für eine schnellere, visuellere Entwicklung.

Einführung

Full Site Editing (FSE) hat die WordPress-Theme-Entwicklung revolutioniert, indem es Ihnen ermöglicht, jeden Teil Ihrer Website visuell zu gestalten. Aber viele Entwickler verlassen sich immer noch auf klassische Themes oder haben Schwierigkeiten, Block-Themes von Grund auf zu erstellen. Der Schlüssel zur Nutzung der FSE-Kraft ist theme.json – eine Konfigurationsdatei, die globale Stile, Einstellungen und Vorlagen steuert. Dieser Artikel bietet eine praktische Schritt-für-Schritt-Anleitung zur Erstellung eines benutzerdefinierten Block-Themes mit theme.json. Sie lernen, die Ordnerstruktur einzurichten, Farbpaletten und Typografie-Voreinstellungen zu definieren, benutzerdefinierte Vorlagen mit Block-Markup zu erstellen und Stilvarianten hinzuzufügen. Am Ende haben Sie ein produktionsreifes Block-Theme, das leicht zu warten und zu erweitern ist. Tauchen wir ein und entmystifizieren wir die FSE-Entwicklung.

Für einen umfassenderen Blick darauf, wie FSE die Zukunft des WordPress-Designs prägt, lesen Sie Gutenberg FSE: Die Zukunft des WordPress-Designs im Jahr 2026.

1. Einrichten eines minimalen Block-Themes

Ein Block-Theme erfordert mindestens zwei Dateien: style.css und index.html. Lassen Sie sie uns erstellen.

Ordnerstruktur

Erstellen Sie einen Ordner namens my-block-theme in Ihrem wp-content/themes/-Verzeichnis. Darin platzieren Sie:

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

style.css

Obwohl Block-Themes weniger auf CSS angewiesen sind, wird style.css dennoch für die Theme-Identifikation benötigt:

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

Die Zeile Requires at least: 5.9 stellt sicher, dass das Theme mit der FSE-Funktion funktioniert.

index.html

Dies ist Ihre Fallback-Vorlage. Sie muss mit Block-Markup beginnen. Erstellen Sie ein einfaches 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"} /-->

Dies verwendet Blocksyntax, um Header- und Footer-Vorlagenteile einzufügen, und zeigt den Beitragstitel und -inhalt an.

Hinweis: Block-Themes dürfen keine PHP-Vorlagendateien wie header.php oder footer.php enthalten. Das Mischen klassischer und Block-Vorlagen führt zu Problemen mit FSE.

Aktivieren des Themes

Laden Sie den Ordner per FTP oder als Zip-Installation hoch und aktivieren Sie ihn. Sie sollten eine leere Website mit Ihrer minimalen Struktur sehen. Als nächstes gestalten wir sie mit theme.json.

2. theme.json meistern: Globale Stile und Einstellungen

theme.json zentralisiert alle Design-Steuerungen. Es befindet sich im Stammverzeichnis Ihres Theme-Ordners. Lassen Sie uns eines mit Farb- und Typografie-Einstellungen erstellen.

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

Dies definiert eine Farbpalette, Schriftfamilien, Schriftgrößen und globale Stile. Die var()-Funktionen verweisen auf CSS-Benutzerdefinierte Eigenschaften, die automatisch von WordPress generiert werden. Benutzer können diese dann im Site-Editor ändern.

Tipp: Verwenden Sie CSS-Benutzerdefinierte Eigenschaften für Konsistenz. Vermeiden Sie das Hartcodieren von Werten in CSS-Dateien; lassen Sie theme.json die einzige Quelle der Wahrheit sein.

3. Erstellen benutzerdefinierter Vorlagen

Block-Vorlagen sind HTML-Dateien mit Block-Markup. Sie folgen einer Hierarchie ähnlich wie klassische Vorlagendateien. Erstellen Sie zum Beispiel single.html für einzelne Beiträge:

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

Erstellen Sie ähnlich page.html, archive.html usw. Sie können auch benutzerdefinierte Vorlagen erstellen, indem Sie einen wp:post-template-Block innerhalb einer Abfrageschleife hinzufügen.

Für erweiterte Anpassungen sollten Sie benutzerdefinierte Blöcke erstellen. Erfahren Sie, wie in Jenseits der Grundblöcke: Maßgeschneiderte Gutenberg-Blöcke für erweiterte WordPress-Funktionalität.

Vorlagenteile

Erstellen Sie einen parts/-Ordner für wiederverwendbare Teile. Zum Beispiel 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 -->

Und footer.html:

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

4. Hinzufügen von Blockmustern und Stilvarianten

Blockmuster sind vorgefertigte Layouts. Definieren Sie sie in einem patterns/-Ordner. Erstellen Sie 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 -->

Stilvarianten ermöglichen es Benutzern, das gesamte Erscheinungsbild zu wechseln. Erstellen Sie styles/default.json und styles/dark.json, die die Theme-Einstellungen überschreiben.

5. Einschränkungen und bewährte Verfahren

• Leistung: theme.json wird zwischengespeichert. Leeren Sie den Cache nach Änderungen. Verwenden Sie bei Bedarf den wp_register_theme_json-Hook.
• Abwärtskompatibilität: Block-Themes funktionieren nur ab WordPress 5.9. Wenn Ihre Website ältere Versionen unterstützen muss, ziehen Sie einen hybriden Ansatz in Betracht, vermeiden Sie jedoch das Mischen von Vorlagendateien.
• Child-Themes: Block-Themes können als Eltern-Themes für klassische Child-Themes verwendet werden, aber nicht umgekehrt. Verwenden Sie template in style.css, um ein Eltern-Block-Theme zu deklarieren.
• Internationalisierung: Verwenden Sie die __()-Funktion innerhalb von PHP-Vorlagenteilen für übersetzbare Zeichenfolgen. Geben Sie im Block-Markup die Textdomain über das textDomain-Attribut an.

Weitere Informationen zu bewährten Verfahren bei der Plugin-Entwicklung finden Sie unter Robuste WordPress-Plugins erstellen: Ein praktischer Leitfaden für bewährte Verfahren.

Fazit

Das Erstellen eines benutzerdefinierten Block-Themes mit theme.json befähigt Sie, eine vollständig gestaltbare Website zu erstellen, ohne PHP anfassen zu müssen. Indem Sie dieser Anleitung folgen, haben Sie ein minimales Theme eingerichtet, globale Stile definiert, benutzerdefinierte Vorlagen erstellt und Muster hinzugefügt. Denken Sie daran, gründlich zu testen, insbesondere für Randfälle wie Archivseiten oder benutzerdefinierte Beitragstypen. Während sich WordPress weiterentwickelt, werden Block-Themes zum Standard. Nutzen Sie FSE noch heute, um Ihren Workflow zu optimieren und Kunden unvergleichliche Flexibilität zu bieten.

Wenn Sie die Theme-Erstellung noch weiter beschleunigen möchten, ziehen Sie ein Tool in Betracht, das eine vollständige Website aus einer Beschreibung generiert. Sie können beispielsweise Ihr gewünschtes Layout beschreiben und in Minuten ein einsatzbereites Block-Theme erhalten.

Bereit, Ihr Block-Theme live zu schalten? Mit einer Klartextbeschreibung können Sie eine voll funktionsfähige Landing Page oder Website generieren – kein Code erforderlich.