Im Bereich customTemplates werden benutzerdefinierte Vorlagen definiert, die in den entsprechenden Post-Typen wie Page oder Post verwendet werden können.
Die theme.json-Datei ermöglicht es, ein WordPress-Theme umfassend und strukturiert anzupassen. Dabei werden nicht nur Stile festgelegt, sondern auch bestimmt, welche Optionen im Editor zur Verfügung stehen.
Die Grundstruktur der theme.json-Datei besteht aus mehreren Hauptbereichen:
{
// Gibt die verwendete API-Version an. Hier Version 2.
"version": 2,
// Definiert, welche Optionen im Editor ausgewählt werden können.
"settings": {},
// Setzt die CSS-Stile für die Webseite.
"styles": {},
// Legt benutzerdefinierte Vorlagen für spezifische Inhalte fest.
"customTemplates": [],
// Definiert Template-Teile, wie z. B. Header oder Footer, für wiederverwendbare Layout-Bereiche.
"templateParts": []
}Die Struktur der theme.json: Optionen und Stile im Überblick
1. Settings
In diesem Abschnitt werden die Optionen definiert, die im Editor zur Verfügung stehen. Dazu gehören Farbpaletten, Typografie, Layouts und Abstände, sowohl global als auch block-spezifisch.
2. Styles
Hier werden die CSS-Stile festgelegt, die das Aussehen der Webseite bestimmen. Die Stile können sowohl global als auch block-spezifisch definiert werden
3. Custom Templates
Ermöglicht das Hinzufügen von benutzerdefinierten Vorlagen für spezielle Inhalte und Seitentypen, um das Design flexibel anpassen zu können
4. Template Parts
Definiert wiederverwendbare Layout-Bereiche wie Header oder Footer, die in verschiedenen Templates genutzt werden können.
customTemplates
"customTemplates": [
{
"name": "custom-template-1",
"title": "Breites Layout",
"postTypes": ["page"],
"area": "primary",
"description": "Ein Template mit einem breiten Layout und voller Breite des Inhalts.",
"styles": {
"color": {
"background": "#ffffff",
"text": "#000000"
}
}
},
{
"name": "custom-template-2",
"title": "Mit Seitenleiste",
"postTypes": ["page", "post"],
"area": "primary",
"description": "Ein Template mit einer Seitenleiste rechts und einem Hauptinhalt links.",
"styles": {
"layout": {
"columns": "2fr 1fr"
},
"color": {
"background": "#f8f9fa",
"text": "#333333"
}
}
}
]name: Der eindeutige Name des Templates, der im Hintergrund verwendet wird.title: Der benutzerfreundliche Name des Templates, der im Editor angezeigt wird.postTypes: Hier definierst du, für welche Post-Typen (z. B. Seiten oder Beiträge) das Template verfügbar ist. In diesem Fall wird eines der Templates nur für Seiten und das andere für Seiten und Beiträge verfügbar gemacht.area: Der Bereich, auf den das Template angewendet wird, in der Regel «primary» für den Hauptinhalt.description: Eine kurze Beschreibung des Templates, die im Editor angezeigt wird.styles: Hier kannst du zusätzliche globale Stile für das Template definieren, z.B. Hintergrundfarbe, Textfarbe oder Layout-Eigenschaften.
