In diesem Beitrag werfen wir einen Blick auf den Bereich settings der theme.json-Datei. Wir zeigen dir, wie er verwendet wird, um Farben, Schriften, Layouts und mehr zu definieren.
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.
settings
In der Eigenschaft settings wird festgelegt, welche Design-Optionen im Editor verfügbar sind.
Hier können spezifische Einstellungen für Farben, Typografie, Layout und Abstände vorgenommen werden, sowohl global als auch block-spezifisch.
"settings": {
// Farbpaletten und Verläufe global und Block-spezifisch
"color": {},
// Schriftarten, Schriftgrößen, Zeilenhöhen und verwandte typografische Optionen
"typography": {},
// Optionen zur Inhaltsbreite und Layout-Settings wie contentSize und wideSize
"layout": {},
// Definiert verfügbare Abstände und Maßeinheiten (Padding, Margin)
"spacing": {},
// Rahmenoptionen wie Breite, Stil und Rundungen (Border-Radius)
"border": {},
// Block-spezifische Einstellungen für Farben, Abstände und mehr
"blocks": {},
// Benutzerdefinierte Einstellungen, falls weitere Anpassungen notwendig sind
"custom": {},
// Aktiviert Optionen für die Verlinkung von Elementen
"link": {},
// Legt fest, welche Maßeinheiten für Abstände im Editor verfügbar sind (z.B. px, em, rem)
"spacing": {},
// Aktiviert oder deaktiviert globale Werkzeuge für Farben, Typografie und Layout
"appearanceTools": {},
// Definiert benutzerdefinierte Templates, die über den Editor verwendet werden können
"customTemplates": {},
// Aktiviert die Option zur benutzerdefinierten Zeilenhöhe
"customLineHeight": {},
// Ermöglicht die Anpassung der Schriftgröße im Editor
"customFontSize": {},
// Steuerung, ob benutzerdefinierte Farben im Editor zur Auswahl stehen
"customColorPalette": {},
// Definiert, ob benutzerdefinierte Verläufe für Blöcke verwendet werden können
"customGradientPresets": {},
// Gibt an, ob eine benutzerdefinierte Skala für Abstände verwendet wird
"customSpacingScale": {},
// Ermöglicht die Anpassung des Radius für abgerundete Ecken
"customBorderRadius": {},
// Steuert, ob benutzerdefinierte CSS-Klassen im Editor angewendet werden können
"customCSS": {}
}
settings: color
Im Bereich color können globale Farbpaletten und Farbverläufe definiert werden, die im Editor verfügbar sind.
Diese Einstellungen ermöglichen es, benutzerdefinierte Farben und Verläufe global oder block-spezifisch festzulegen.
"settings": {
// Farbpaletten und Verläufe global und Block-spezifisch
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#0073AA"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#005075"
}
],
"gradients": [
{
"name": "Sunset",
"slug": "sunset",
"gradient": "linear-gradient(90deg, #FF5F6D, #FFC371)"
}
],
"custom": {
"wp-block-button": {
"background": "#0073AA",
"color": "#FFFFFF"
}
}
}
}settings: typography
Es können sowohl statische als auch variable Fonts durch die Angabe der src-Eigenschaft hinzugefügt werden.
Zusätzlich können Optionen wie dropCap genutzt werden, um initiale Grossbuchstaben zu steuern. Schriftgrössen lassen sich über fontSizes definieren, und Block-spezifische Stile, wie fontSize, fontWeight und lineHeight, ermöglichen individuelle Anpassungen.
"typography": {
// Definiert, ob initiale Großbuchstaben aktiviert sind
"dropCap": false,
// Definiert die verfügbaren Schriftarten im Editor
"fontFamilies": [
{
"fontFamily": "\"Roboto\", sans-serif",
"name": "Roboto",
"slug": "roboto",
"fontFace": [
{
"fontFamily": "Roboto",
"fontWeight": "400",
"fontStyle": "normal",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/Roboto-Regular.woff2" ]
},
{
"fontFamily": "Roboto",
"fontWeight": "400",
"fontStyle": "italic",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/Roboto-Italic.woff2" ]
}
]
},
{
"fontFamily": "\"Quicksand UD\", sans-serif",
"name": "Quicksand UD",
"slug": "quicksand",
"fontFace": [
{
"fontFamily": "Quicksand UD",
"fontWeight": "400",
"fontStyle": "normal",
"fontStretch": "normal",
"src": ["file:./assets/fonts/Quicksand-VariableFont_wght.woff2"]
},
{
"fontFamily": "Quicksand UD",
"fontWeight": "700",
"fontStyle": "normal",
"fontStretch": "normal",
"src": ["file:./assets/fonts/Quicksand-VariableFont_wght.woff2"]
}
]
}
],
// Definiert die verfügbaren Schriftgrößen
"fontSizes": [
{
"name": "Klein",
"slug": "small",
"size": "12px"
},
{
"name": "Mittel",
"slug": "medium",
"size": "16px"
},
{
"name": "Groß",
"slug": "large",
"size": "32px"
}
],
// Beispiel für Block-spezifische Stile
"custom": {
"wp-block-heading": {
"fontSize": "2rem",
"fontWeight": "700",
"lineHeight": "1.2"
},
"wp-block-paragraph": {
"fontSize": "1rem",
"fontWeight": "400",
"lineHeight": "1.5"
}
}
}settings: layout
Im Bereich layout können Breiten für Inhaltsbereiche über Optionen wie contentSize und wideSize definiert werden.
Diese Einstellungen bestimmen, wie weit sich Inhalte auf der Seite erstrecken, und helfen, ein konsistentes Layout über das gesamte Theme hinweg zu gewährleisten.
"settings": {
// Layout-Optionen, wie Breitenangaben und Ausrichtung
"layout": {
"contentSize": "800px",
"wideSize": "1200px"
}
}settings: spacing
Im Bereich spacing können Abstände und Masseinheiten festgelegt werden.
Mit Optionen wie blockGap wird der Abstand zwischen Blöcken definiert, und es können verschiedene Einheiten wie px, em, rem oder % zur Verfügung gestellt werden.
"settings": {
// Definiert die verfügbaren Abstände und Maßeinheiten
"spacing": {
"units": [ "px", "em", "rem", "%" ],
"blockGap": "1.5rem"
}
}settings: border
Im Bereich border können Rahmenstile definiert werden.
Mit Optionen wie radius für abgerundete Ecken, width für die Rahmenstärke und color für die Rahmenfarbe lassen sich die Rahmen von Elementen individuell anpassen.
"settings": {
// Optionen für Rahmenstärken, Stile und Rundungen
"border": {
"radius": "10px",
"width": "2px",
"color": "#333"
}
}settings: blocks
Im Bereich blocks können sowohl block-spezifische Einstellungen als auch Block-Styles definiert werden.
Dies ermöglicht es, globale Design-Optionen, wie Farben, Abstände oder Typografie, für bestimmte Blöcke festzulegen.
Zusätzlich können Block-Styles definiert werden, die alternative Gestaltungsmöglichkeiten für einen Block bieten, wie z. B. runde Buttons oder spezielle Layouts.
"settings": {
"blocks": {
"core/button": {
"settings": {
"color": {
"background": "#0073AA",
"text": "#FFFFFF"
},
"border": {
"radius": "50px"
}
},
"styles": {
"rounded-button": {
"borderRadius": "50px",
"backgroundColor": "#0073AA",
"color": "#FFFFFF",
"padding": "10px 20px"
},
"square-button": {
"borderRadius": "0px",
"backgroundColor": "#000000",
"color": "#FFFFFF",
"padding": "10px 20px"
}
},
// Festlegung des Standard-Block-Stils
"defaultStyle": "rounded-button"
}
}
}