WIP
Ciao – ich führe dich nun durch das theme.json file in WordPress.
Du kannst das in classic, hybriden und Block Themes nutzen. Es ist nicht 100% Pflicht. In Block Themes macht es jedoch nicht Sinn, ohne theme.json zu arbeiten.
Der Fokus liegt hier auf Block Themes.
1. Minimales Block Theme erstellen
- Theme-Ordner
- style.css
- templates/index.html
Mehr braucht es nicht. Du kannst nun Templates direkt via Block Editor erstellen.
Wenn du alle Templates und Parts erstellt hast, kannst du innerhalb der Bearbeitung der Website rechts oben bei den Setting das Theme mit aktualisierten Templates und Styles herunterladen und das dann im Theme Ordner einfügen. Fertig.
theme.json Beispiel
{
"$schema": "https://schemas.wp.org/wp/6.9/theme.json",
"version": 3,
"settings": {
"appearanceTools": true,
"border": {
"radius": false,
"color": false,
"style": false,
"width": false
},
"color": {
"custom": false,
"defaultPalette": false,
"gradients": [],
"customGradient": false,
"defaultGradients": false,
"palette": [
{
"color": "#000",
"name": "Schwarz",
"slug": "schwarz"
},
{
"color": "#333333",
"name": "Anthrazit",
"slug": "anthrazit"
},
{
"color": "#ffffff",
"name": "Weiss",
"slug": "weiss"
}
]
},
"layout": {
"contentSize": "840px",
"wideSize": "1280px",
"allowEditing": true,
"allowCustomContentAndWideSize": true
},
"spacing": {
"defaultSpacingSizes": false,
"customSpacingSize": false,
"spacingSizes": [
{
"name": "XXS (8px)",
"size": "8px",
"slug": "xxs"
},
{
"name": "XS (16px)",
"size": "16px",
"slug": "xs"
},
{
"name": "SM",
"size": "24px",
"slug": "sm"
},
{
"name": "MD",
"size": "32px",
"slug": "md"
},
{
"name": "LG",
"size": "48px",
"slug": "lg"
},
{
"name": "XL",
"size": "64px",
"slug": "xl"
},
{
"name": "XXL",
"size": "80px",
"slug": "xxl"
},
{
"name": "3XL",
"size": "104px",
"slug": "3-xl"
},
{
"name": "4XL",
"size": "128px",
"slug": "4-xl"
},
{
"name": "5XL",
"size": "160px",
"slug": "5-xl"
}
],
"units": [
"px"
]
},
"typography": {
"customFontSize": false,
"dropCap": false,
"lineHeight": false,
"letterSpacing": false,
"fontStyle": false,
"fontWeight": false,
"textDecoration": false,
"textTransform": false,
"fontFamilies": [
{
"fontFace": [
{
"fontFamily": "Inter",
"fontStyle": "normal",
"fontWeight": "100 900",
"src": [
"file:./assets/fonts/inter/inter-100-900-normal.woff2"
]
}
],
"fontFamily": "Inter",
"name": "Inter",
"slug": "inter"
}
],
"defaultFontSizes": false,
"fontSizes": [
{
"name": "Small",
"size": "0.875rem",
"slug": "small",
"fluid": {
"min": "0.75rem",
"max": "0.875rem"
}
},
{
"name": "Medium",
"size": "1rem",
"slug": "medium",
"fluid": {
"min": "0.875rem",
"max": "1rem"
}
},
{
"name": "Large",
"size": "1.25rem",
"slug": "large",
"fluid": {
"min": "1rem",
"max": "1.25rem"
}
}
]
},
"blocks": {
"core/heading": {
"color": {
"custom": true
}
}
}
},
"styles": {
"elements": {
"h1": {
"typography": {
"lineHeight": "1.2"
}
},
"h2": {
"typography": {
"lineHeight": "1.2"
}
},
"heading": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontStyle": "normal",
"fontWeight": "700"
}
},
"link": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)"
}
}
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontStyle": "normal",
"fontWeight": "400"
}
}
}Style Variationen
WordPress gruppiert Style Variations automatisch basierend auf Inhalt:
Nur settings.color.palette → Erscheint unter „Colors“
Nur styles.typography → Erscheint unter „Typography“
Beides + mehr → Erscheint als eigenständige Style Variation (top-level)
// → Unter "Colors"
{ "settings": { "color": { "palette": [...] } } }
// → Unter "Typography"
{ "styles": { "typography": {...} } }
// → Eigenständige Variation (wie Agency/Creatur)
{
"settings": { "color": {...} },
"styles": { "typography": {...}, "elements": {...} }
}useRootPaddingAwareAlignments
Setze das auf true – sonst hast du auf der obersten Gruppen-Ebene keine Layout Einstellungen.