{"id":73644,"date":"2025-07-17T15:05:11","date_gmt":"2025-07-17T14:05:11","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=73644&preview=true&preview_id=73644"},"modified":"2025-07-22T13:23:04","modified_gmt":"2025-07-22T12:23:04","slug":"gestalten-block-in-child-theme","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/gestalten-block-in-child-theme\/","title":{"rendered":"Benutzerdefiniertes Styling f\u00fcr WordPress-Block-Themes unter Verwendung eines Child-Themes"},"content":{"rendered":"

Block-Themes<\/a> und theme.json<\/a><\/code> geben dir eine Menge Flexibilit\u00e4t, was den Anschein erwecken k\u00f6nnte, dass Child-Themes<\/a> \u00fcberfl\u00fcssig sind. Aber sie sind in vielen F\u00e4llen immer noch unverzichtbar.<\/p>\n

Ein Child-Theme ist immer noch die richtige Wahl, wenn du das Design deiner Website wirklich kontrollieren willst, ohne die Kerndateien des Parent-Themes anzufassen.<\/p>\n

In diesem Artikel verwenden wir das Twenty Twenty-Five-Theme<\/a> als Basis und zeigen dir, wie du ein Block-Chip-Theme mit eigenem style.css<\/code> und functions.php<\/a><\/code>. Du lernst, wie du Stile sicher \u00fcberschreibst, eigene Blockstile definierst und sogar deine eigenen Stilvariationen einrichtest. Das ist nicht nur ein Styling-Trick, sondern ein solider Schritt auf dem Weg zu deinem eigenen vollst\u00e4ndigen Block-Theme.<\/p>\n

Auch wenn diese \u00dcbung einfach erscheint, gehen wir auf einige Feinheiten ein, \u00fcber die du stolpern kannst. Beginnen wir mit der Erstellung eines benutzerdefinierten Child-Themes und der Implementierung einer benutzerdefinierten Stilvariation.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Registrierung eines Block Child Themes<\/h2>\n

Die Registrierung eines Block Child Themes ist viel einfacher als die Registrierung eines klassischen Themes<\/a>.<\/p>\n

Technisch gesehen musst du es gar nicht registrieren. Die Registrierung erfolgt automatisch, wenn ein richtig benannter Child-Theme-Ordner sowohl eine theme.json<\/code> Datei als auch eine style.css<\/code> Datei enth\u00e4lt.<\/p>\n

Warum ist also die style.css<\/code> Datei noch notwendig?<\/p>\n

Wie bisher enth\u00e4lt sie einen erforderlichen Header (siehe unten), der Metadaten<\/a> enth\u00e4lt, die WordPress zur Identifizierung des Themes verwendet, einschlie\u00dflich seines Namens und des Parent-Themes, das es erweitert. W\u00e4hrend Stile und Einstellungen jetzt in theme.json<\/code> behandelt werden, spielt style.css<\/code> immer noch eine wichtige Rolle dabei, dass WordPress dein Theme erkennt, auch wenn es kein eigentliches CSS enth\u00e4lt.<\/p>\n

\/*\nTheme Name: Twenty Twenty-Five Child\nDescription: Child theme for the Twenty Twenty-Five theme\nTemplate: twentytwentyfive\n*\/<\/code><\/pre>\n
Eine functions.php<\/code> Datei ist nicht erforderlich, es sei denn, du m\u00f6chtest Skripte einbinden<\/a> oder PHP-basierte Funktionen hinzuf\u00fcgen. Das werden wir sp\u00e4ter tun.<\/p>\n
Wenn du dich mit theme.json<\/code> nicht auskennst oder eine kurze Auffrischung brauchst, schau dir unseren Leitfaden zum Arbeiten mit Eigenschaften und Schl\u00fcssel-Wert-Paaren in theme.json<\/a> an.<\/p>\n
Wir nehmen drei grundlegende \u00c4nderungen an unserem Child-Theme vor.<\/h2>\n
Zun\u00e4chst aktualisieren wir die globalen Hintergrund- und Textfarben und gestalten den Button-Block.<\/p>\n
In der Datei theme.json<\/code> des Child-Themes (die als Standardstil dient) definieren wir Folgendes:<\/p>\n
{\n  \"version\": 3,\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"name\": \"Black\",\n          \"slug\": \"black\",\n          \"color\": \"#000000\"\n        },\n        {\n          \"name\": \"Yellow\",\n          \"slug\": \"yellow\",\n          \"color\": \"#FFFF00\"\n        },\n        {\n          \"name\": \"Purple\",\n          \"slug\": \"purple\",\n          \"color\": \"#800080\"\n        },\n        {\n          \"name\": \"White\",\n          \"slug\": \"white\",\n          \"color\": \"#FFFFFF\"\n        }\n      ]\n    }\n  },\n  \"styles\": {\n    \"color\": {\n      \"background\": \"var(--wp--preset--color--black)\",\n      \"text\": \"var(--wp--preset--color--yellow)\"\n    },\n    \"blocks\": {\n      \"core\/button\": {\n        \"color\": {\n          \"background\": \"var(--wp--preset--color--purple)\",\n          \"text\": \"var(--wp--preset--color--white)\"\n        },\n        \"border\": {\n          \"color\": \"var(--wp--preset--color--yellow)\",\n          \"width\": \"2px\",\n          \"style\": \"solid\"\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n
W\u00e4hrend die Hintergrund- und Textfarben f\u00fcr alle Stilvarianten gelten, gilt das Styling des Button-Blocks nur f\u00fcr die Standardvariante<\/strong>.<\/p>\n
\"Child-Theme
Child-Theme mit der Standard-Stilvariation im Site-Editor<\/figcaption><\/figure>\n
Stilvariationen au\u00dfer Kraft setzen<\/h3>\n
Um das gleiche Button-Styling in verschiedenen Variationen anzuwenden, ist es am besten, eine .json<\/code> Datei zu erstellen, die der Namenskonvention f\u00fcr die Variationen des Elternthemas entspricht.<\/p>\n
Um z. B. die Umrandung der Schaltfl\u00e4chen in der Stilvariation Evening<\/em> zu \u00fcberschreiben, erstellst du eine Datei mit dem Namen 01-evening.json<\/code> im Hauptverzeichnis deines Child-Themes (oder in einem Unterordner von \/styles<\/code>):<\/p>\n
{\n  \"version\": 3,\n  \"title\": \"Evening\",\n  \"styles\": {\n    \"blocks\": {\n      \"core\/button\": {\n        \"border\": {\n          \"color\": \"var(--wp--preset--color--white)\",\n          \"width\": \"3px\",\n          \"style\": \"dashed\"\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n
Hier haben wir einen breiteren, gestrichelten Rahmen verwendet, um die Schaltfl\u00e4che hervorzuheben. Da es sich um spezifischere Stile handelt, setzen sie die allgemeinen Stile von theme.json<\/code> au\u00dfer Kraft.<\/p>\n