Der Bereich styles in der theme.json-Datei definiert das das tatsächliche Aussehen der Webseite. In diesem Beitrag werfen wir einen detaillierten Blick auf den Bereich styles und wie dieser genutzt wird, um globale und Block-abhängige Designs zu steuern.
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.
styles
In der Eigenschaft styles werden die CSS-Stile festgelegt, die das Erscheinungsbild des Themes bestimmen.
Diese Stile beeinflussen das Aussehen von Blöcken und Layouts und können sowohl global als auch block-spezifisch definiert werden.
"styles": {
// Globale Typografie-Stile
"typography": {},
// Globale Farb- und Hintergrundstile
"color": {},
// Globale Abstände (Padding und Margin)
"spacing": {},
// Globale Rahmenstile (Border-Radius, Breiten und Farben)
"border": {},
// Block-spezifische Stile für Anpassungen an einzelne Blöcke
"blocks": {}
}
}styles: typography
Im Bereich typography können Schriftarten, Schriftgrössen, Zeilenhöhen und andere typografische Eigenschaften festgelegt werden.
"styles": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--montserrat)",
"fontSize": "16px",
"fontWeight": "400",
"lineHeight": "1.5",
"textDecoration":"underline",
"textTransform": "uppercase",
"letterSpacing": "0.1em"
}
}styles: color
Im Bereich color können Farben für das Theme definiert werden, die auf der gesamten Webseite verwendet werden.
"styles": {
"color": {
"background": "#FFFFFF",
"text": "#000000",
"link": "#0073AA"
}
}styles: spacing
Mit spacing lassen sich globale Abstände und Ränder für verschiedene Elemente auf deiner Seite steuern.
"styles": {
"spacing": {
"blockGap": "24px",
"padding": {
"top": "20px",
"bottom": "20px"
},
"margin": {
"top": "10px",
"bottom": "30px"
}
}
}styles: border
Der Bereich border ermöglicht es dir, Rahmenbreiten, Stile und abgerundete Ecken zu definieren.
"styles": {
"border": {
"radius": "10px",
"width": "2px",
"style": "solid",
"color": "#333"
}
}styles: blocks
In diesem Bereich kannst du spezifische Blöcke individuell anpassen. Du kannst hier für einen bestimmten Block bestimmte Stile festlegen, ohne andere Blöcke zu beeinflussen.
"styles": {
"blocks": {
"core/button": {
"typography": {
"fontSize": "18px"
},
"color": {
"background": "#0073AA",
"text": "#FFFFFF"
},
"border": {
"radius": "50px"
}
}
}
}