{"id":71402,"date":"2024-10-02T15:25:56","date_gmt":"2024-10-02T14:25:56","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=71402&#038;preview=true&#038;preview_id=71402"},"modified":"2024-10-03T09:13:50","modified_gmt":"2024-10-03T08:13:50","slug":"css-benutzerdefinierte-eigenschaften-theme-json","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/","title":{"rendered":"Entwicklung von CSS-Eigenschaften mit theme.json f\u00fcr erweiterte WordPress-Themes"},"content":{"rendered":"<p>WordPress-Theme-Entwickler k\u00f6nnen eine <code>theme.json<\/code> Datei verwenden, um einen Prozess zu rationalisieren, der fr\u00fcher weitgehend auf PHP basierte. Du kannst aber auch weiterhin deine HTML-, JavaScript- und PHP-Kenntnisse nutzen, um deine Themes zu erstellen &#8211; und CSS ist dabei keine Ausnahme. Du verwendest die benutzerdefinierten CSS-Eigenschaften in <code>theme.json<\/code>. Das kann die Designphase verbessern und bietet mehr Flexibilit\u00e4t.<\/p>\n<p>In diesem Leitfaden befassen wir uns mit den benutzerdefinierten CSS-Eigenschaften und untersuchen, wie sie mit WordPress und <code>theme.json<\/code> zusammenarbeiten. Doch bevor wir dazu kommen, fassen wir theme.json und Full Site Editing (FSE) zusammen und erkl\u00e4ren, wie CSS in diesen neuen Designansatz passt.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Wie theme.json mit WordPress funktioniert<\/h2>\n<p>Die Datei <code>theme.json<\/code> wurde erstmals in <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-5-8\/\">WordPress 5.8<\/a> eingef\u00fchrt. Sie ist eine revolution\u00e4re Art, WordPress-Themes zu gestalten, indem sie die JSON-Syntax nutzt, um <a href=\"https:\/\/kinsta.com\/de\/blog\/theme-json\/\">eine Konfigurationsdatei zu erstellen<\/a>. WordPress liest diese und wendet die Ergebnisse an, ohne dass viel <a href=\"https:\/\/kinsta.com\/de\/blog\/tutorials-php\/\">PHP<\/a>, <a href=\"https:\/\/kinsta.com\/de\/blog\/css-best-practices\/\">CSS<\/a> oder <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/\">JavaScript<\/a> n\u00f6tig ist.<\/p>\n<figure id=\"attachment_184933\" aria-describedby=\"caption-attachment-184933\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184933 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/theme-json.png\" alt=\"Ein Code-Editor-Fenster, das den Inhalt einer theme.json-Datei f\u00fcr ein WordPress-Theme anzeigt. Die JSON-Struktur definiert die Einstellungen des Themes, einschlie\u00dflich Schemaversionen, Muster und Farbeinstellungen. Im Hintergrund ist eine malerische Landschaft mit Bergen, W\u00e4ldern und terrassierten Feldern zu sehen.\" width=\"1200\" height=\"705\"><figcaption id=\"caption-attachment-184933\" class=\"wp-caption-text\">Eine <strong>theme.json-Datei<\/strong> in einem Code-Editor<\/figcaption><\/figure>\n<p>Die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-full-site-editing\/\">globalen Einstellungen und Stile<\/a> in FSE steuern verschiedene visuelle Aspekte deines Themes. Dazu k\u00f6nnen typische Farbpaletten und Typografie geh\u00f6ren, aber auch Layout-Optionen und individuelle Block- und Elementstile.<\/p>\n<p>W\u00e4hrend FSE intuitiv, leistungsstark, anpassungsf\u00e4hig und einfach zu bedienen ist, kann <code>theme.json<\/code> dazu beitragen, die L\u00fccke zwischen den Rollen des Endnutzers und des Entwicklers zu schlie\u00dfen. Fast jede Option, die dir <code>theme.json<\/code> bietet, ist auch im Site Editor sichtbar.<\/p>\n<figure id=\"attachment_184932\" aria-describedby=\"caption-attachment-184932\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184932 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/site-editor-interface.png\" alt=\"Die WordPress-Site-Editor-Oberfl\u00e4che, die die Startseite einer Website auf der rechten Seite des Bildschirms anzeigt, w\u00e4hrend die schwarze linke Seitenleiste Optionen f\u00fcr Navigation, Stile, Seiten, Vorlagen und Muster bietet.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184932\" class=\"wp-caption-text\">Die Hauptschnittstelle des Site Editors in WordPress<\/figcaption><\/figure>\n<p>Die Verwendung von <code>theme.json<\/code> bietet viele Vorteile bei der <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/\">Erstellung von WordPress-Themes<\/a>. Daf\u00fcr gibt es ein paar Gr\u00fcnde:<\/p>\n<ul>\n<li>Du hast einen zentralen Ort f\u00fcr die Designkonfiguration deines Themes, was die Verwaltung und Aktualisierung erleichtert.<\/li>\n<li>Es gibt weniger Unklarheiten zwischen dem Frontend, dem Site Editor und der Codebasis des Themes.<\/li>\n<li>Die Verwendung von <code>theme.json<\/code> bietet Kompatibilit\u00e4t mit der Zukunft der WordPress-Entwicklung und des Designs.<\/li>\n<li>Die in WordPress integrierte Funktionalit\u00e4t bedeutet, dass der Nutzer weniger benutzerdefiniertes CSS anwenden muss.<\/li>\n<\/ul>\n<p>Werfen wir einen Blick darauf, wie <code>theme.json<\/code> mit den globalen Einstellungen und Stilen von FSE zusammenh\u00e4ngt.<\/p>\n<h3>Eine Einf\u00fchrung in die globalen Einstellungen und Stile von FSE<\/h3>\n<p>FSE steht f\u00fcr eine neue \u00c4ra der WordPress-Theme-Entwicklung, und die globalen Einstellungen und Stile stehen dabei im Vordergrund. Sie erm\u00f6glichen es den Nutzern, fast jeden Aspekt des Erscheinungsbildes einer Website \u00fcber den Site Editor anzupassen.<\/p>\n<figure id=\"attachment_184929\" aria-describedby=\"caption-attachment-184929\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184929 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/global-settings-styles.png\" alt=\"Der WordPress-Site-Editor zeigt die Eingabefelder des Bedienfelds \u201eStile\u201c in der rechten Seitenleiste an. Hier k\u00f6nnen Anpassungen an den Typografieeinstellungen vorgenommen werden. Auf der linken Seite ist eine Teilansicht einer Webseite mit blauem Thema zu sehen.\" width=\"1200\" height=\"863\"><figcaption id=\"caption-attachment-184929\" class=\"wp-caption-text\">Das Stile-Panel im WordPress-Site-Editor<\/figcaption><\/figure>\n<p>Hier kannst du Aspekte des Layouts deines Themes mit Optionen anpassen, f\u00fcr die fr\u00fcher CSS oder ein Plugin eines Drittanbieters <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-page-builders\/\">f\u00fcr den Seitenaufbau<\/a> erforderlich waren. Das \u00c4ndern von R\u00e4ndern, Auff\u00fcllungen und Umrandungen sind Beispiele, aber es gibt noch viel mehr.<\/p>\n<figure id=\"attachment_184930\" aria-describedby=\"caption-attachment-184930\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184930 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/paddings-margins.png\" alt=\"Der WordPress-Site-Editor mit dem Layout-Anpassungsfeld. Damit lassen sich Inhaltsabmessungen, Abst\u00e4nde und Blockabst\u00e4nde anpassen. Auf der linken Seite des Bildschirms ist eine Teilansicht einer Webseite mit blauem Thema zu sehen.\" width=\"1200\" height=\"842\"><figcaption id=\"caption-attachment-184930\" class=\"wp-caption-text\">Die Arbeit mit typischen CSS-Elementen wie Auff\u00fcllungen und R\u00e4ndern im Seiteneditor<\/figcaption><\/figure>\n<p>Du kannst viele dieser Funktionen sogar auf <code>theme.json<\/code> (oder in der eigenen <code>block.json<\/code> Datei eines Blocks) aktivieren oder deaktivieren. So kannst du nicht nur die Benutzeroberfl\u00e4che, sondern auch das gesamte Design der Website anpassen.<\/p>\n<p>Die Optionen, die dir zur Verf\u00fcgung stehen, sind zwar umfangreich, decken aber m\u00f6glicherweise nicht alle Bed\u00fcrfnisse ab. Das gilt besonders, wenn du ein Theme von Grund auf neu erstellst. Hier k\u00f6nnen benutzerdefinierte CSS-Eigenschaften Abhilfe schaffen.<\/p>\n<h2>Benutzerdefinierte CSS-Eigenschaften verstehen<\/h2>\n<p>In PHP, JavaScript und fast allen anderen Programmiersprachen werden die Werte der verschiedenen Elemente in deinem Code in Variablen gespeichert. Du kannst zum Beispiel Werte wie Namen, Daten und Zahlen speichern und sie in deinem Programm verwenden.<\/p>\n<p>CSS3-Variablen &#8211; oder benutzerdefinierte CSS-Eigenschaften, wie wir sie in diesem Beitrag nennen &#8211; werden <a href=\"https:\/\/caniuse.com\/?search=css%20variables\" target=\"_blank\" rel=\"noopener noreferrer\">von den meisten aktuellen Browsern unterst\u00fctzt<\/a>. Der Internet Explorer unterst\u00fctzt sie nicht, ebenso wenig wie Opera Mini. Die <a href=\"https:\/\/kinsta.com\/de\/blog\/microsoft-edge-gegen-chrome\/\">gro\u00dfen Browser unterst\u00fctzen sie jedoch alle<\/a>.<\/p>\n<figure id=\"attachment_184927\" aria-describedby=\"caption-attachment-184927\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184927 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/can-i-use.png\" alt=\"Eine Kompatibilit\u00e4tstabelle f\u00fcr CSS-Variablen (benutzerdefinierte Eigenschaften) in verschiedenen Webbrowsern. Die Tabelle zeigt eine hohe globale Nutzung von 97,05 Prozent und weist auf eine weit verbreitete Unterst\u00fctzung in den wichtigsten Desktop- und mobilen Browsern hin.\" width=\"1200\" height=\"604\"><figcaption id=\"caption-attachment-184927\" class=\"wp-caption-text\">Die Website Can I Use zeigt die aktuelle Unterst\u00fctzung f\u00fcr benutzerdefinierte CSS-Eigenschaften<\/figcaption><\/figure>\n<p>Mit benutzerdefinierten CSS-Eigenschaften kannst du Werte speichern, die du in deinem Stylesheet wiederverwenden kannst. Auf diese Weise kannst du ein dynamischeres und flexibleres CSS erstellen. Du kannst mehrere Stilregeln aktualisieren, indem du einen einzigen Wert \u00e4nderst.<\/p>\n<p>Das Konzept der CSS-Variablen ist nicht ganz neu. Preprozessoren wie <a href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sass<\/a> nutzen \u00e4hnliche Funktionen. Nimm zum Beispiel die folgende Sass:<\/p>\n<pre><code class=\"language-css\">$font-stack: Helvetica, sans-serif\n$primary-color: #333\n\nbody\n  font: 100% $font-stack\n  color: $primary-color<\/code><\/pre>\n<p>Dies wird zu typischem CSS verarbeitet:<\/p>\n<pre><code class=\"language-css\">body {\n  font: 100% Helvetica, sans-serif;\n  color: #333;\n}<\/code><\/pre>\n<p>Bei den benutzerdefinierten CSS-Eigenschaften wird dies jedoch direkt an den Browser weitergegeben. Das bietet einige Vorteile:<\/p>\n<ul>\n<li><strong>Dynamische Aktualisierungen.<\/strong> Im Gegensatz zu den meisten Pr\u00e4prozessorvariablen kannst du die benutzerdefinierten CSS-Eigenschaften mit JavaScript &#8222;on the fly&#8220; aktualisieren.<\/li>\n<li><strong>Kaskadierender Charakter.<\/strong> Die benutzerdefinierten Eigenschaften folgen der CSS-Kaskade, was dir mehr Flexibilit\u00e4t und eine kontextbewusste Gestaltung erm\u00f6glicht.<\/li>\n<\/ul>\n<p>Benutzerdefinierte Eigenschaften sind auch leistungsf\u00e4higer, da sie weniger Code-Redundanz aufweisen. Kleinere Stylesheets bedeuten schnellere Ladezeiten.<\/p>\n<h3>Die Syntax f\u00fcr benutzerdefinierte CSS-Eigenschaften<\/h3>\n<p>Wie bei typischen Pr\u00e4prozessorvariablen ist die Syntax f\u00fcr benutzerdefinierte CSS-Eigenschaften einfach. Sie verwendet doppelte Bindestriche anstelle von Dollarzeichen, um eine Eigenschaft anzugeben:<\/p>\n<pre><code class=\"language-css\">:root {\n  --primary-color: #007bff;\n}<\/code><\/pre>\n<p>Mit der Funktion <code>var()<\/code> kannst du diese Eigenschaften dann den Elementen zuweisen:<\/p>\n<pre><code class=\"language-css\">.button {\n  background-color: var(--primary-color);\n}<\/code><\/pre>\n<p>Beachte, dass du benutzerdefinierte Eigenschaften auch mit der Eigenschaft <code>@<\/code> zuweisen kannst. Aber wie du gleich sehen wirst, vereinfacht WordPress diesen Prozess.<\/p>\n<h3>Wo du benutzerdefinierte CSS-Eigenschaften verwenden kannst<\/h3>\n<p>Vielseitigkeit ist das Gebot der Stunde, wenn es um benutzerdefinierte CSS-Eigenschaften geht. Mit WordPress und <code>theme.json<\/code> hast du mehrere M\u00f6glichkeiten, sie zu verwenden:<\/p>\n<ul>\n<li><strong>Voreinstellungen:<\/strong> Du kannst Voreinstellungen f\u00fcr Farben, Schriftarten und Abst\u00e4nde festlegen.<\/li>\n<li><strong>Blockstile:<\/strong> <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/\">Einzelne Bl\u00f6cke<\/a> k\u00f6nnen benutzerdefinierte Eigenschaften f\u00fcr ein einheitliches Styling verwenden.<\/li>\n<li><strong>Globale Stile:<\/strong> Benutzerdefinierte Eigenschaften sind von unsch\u00e4tzbarem Wert f\u00fcr die standortweite Gestaltung.<\/li>\n<\/ul>\n<p>Du kannst vollst\u00e4ndig benutzerdefinierte Eigenschaften f\u00fcr jeden gew\u00fcnschten Zweck erstellen. Sehen wir uns ein praktisches Beispiel daf\u00fcr an, wie du benutzerdefinierte Eigenschaften in deiner <code>theme.json<\/code> Datei verwenden kannst:<\/p>\n<pre><code class=\"language-json\">{\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"slug\": \"primary\",\n          \"color\": \"#007bff\",\n          \"name\": \"Primary\"\n        }\n      ]\n    },\n    \"custom\": {\n      \"line-height\": {\n        \"body\": 1.5,\n        \"heading\": 1.2\n      }\n    }\n  },\n  \"styles\": {\n    \"typography\": {\n      \"lineHeight\": \"var(--wp--custom--line-height--body)\"\n    },\n    \"blocks\": {\n      \"core\/heading\": {\n        \"typography\": {\n          \"lineHeight\": \"var(--wp--custom--line-height--heading)\"\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Hier definieren wir eine Farbvorgabe und verwenden die Eigenschaft <code>custom<\/code>, um <code>line-height<\/code> Werte f\u00fcr die Seiten\u00fcberschriften und den Textk\u00f6rper zu definieren. WordPress generiert CSS-Eigenschaften f\u00fcr die Elemente, die du mit <code>custom<\/code> definierst. Weiter unten k\u00f6nnen wir diese benutzerdefinierten Eigenschaften verschiedenen Stilen, Einstellungen, Bl\u00f6cken und mehr zuweisen.<\/p>\n<h2>Die Vorteile der benutzerdefinierten CSS-Eigenschaften<\/h2>\n<p>Vielleicht hast du schon eine Vorstellung davon, wie dir die benutzerdefinierten CSS-Eigenschaften bei der Entwicklung von Themes helfen k\u00f6nnen. Trotzdem gibt es eine ganze Reihe von Vorteilen zu beachten.<\/p>\n<p>Wir haben bereits \u00fcber Modularit\u00e4t und Wiederverwendbarkeit gesprochen. Alle gemeinsamen Werte, die du als benutzerdefinierte Eigenschaften definierst, f\u00f6rdern die Konsistenz und verringern die Redundanz. Diese Redundanz f\u00fchrt zu einer besseren <a href=\"https:\/\/kinsta.com\/de\/blog\/optimieren-css\/\">potenziellen Leistung<\/a> deines Themes.<\/p>\n<p>F\u00fcr den Endnutzer bieten die benutzerdefinierten Eigenschaften mehrere Vorteile:<\/p>\n<ul>\n<li><strong>Vereinfachte Anpassung.<\/strong> Nutzer und Websitebesitzer k\u00f6nnen <a href=\"https:\/\/kinsta.com\/de\/blog\/wie-du-dein-wordpress-theme-anpasst\/\">ein Theme anpassen<\/a>, ohne komplexe CSS-Kenntnisse haben zu m\u00fcssen. Sobald du Variablen \u00fcber <code>theme.json<\/code> freigibst, k\u00f6nnen die Nutzer \u00fcber den Site Editor auf die Einstellungen zugreifen.<\/li>\n<li><strong>Bessere Kompatibilit\u00e4t mit FSE.<\/strong> Die benutzerdefinierten Eigenschaften entsprechen den FSE-Prinzipien, sodass du flexiblere und dynamischere Themes entwerfen kannst.<\/li>\n<li><strong>Einfachere Wartung und Updates.<\/strong> Wenn du gemeinsame Werte in deinem Theme aktualisieren musst, bedeutet eine benutzerdefinierte Eigenschaft, dass du sie nur an einer Stelle \u00e4ndern musst. Das vereinfacht die Wartung und macht Aktualisierungen und Optimierungen \u00fcberschaubarer.<\/li>\n<\/ul>\n<p>Insgesamt k\u00f6nnen benutzerdefinierte Eigenschaften den Workflow bei der Entwicklung deines Themes verbessern. Ihre Festlegung ist au\u00dferdem einfacher als die Verwendung typischer CSS-Variablen.<\/p>\n<h2>So definierst du CSS-Eigenschaften in der theme.json<\/h2>\n<p>Kommen wir nun zu den praktischen Aspekten der Definition und Verwendung von benutzerdefinierten CSS-Eigenschaften in <code>theme.json<\/code>. Der erste Schritt besteht darin zu lernen, wie man sie schreibt.<\/p>\n<h3>Syntax und Benennungskonventionen<\/h3>\n<p>WordPress bietet die Eigenschaft <code>custom<\/code> an, um bei der Definition zu helfen. Sie ist etwas einfacher zu verwenden als die Eigenschaft <code>@<\/code> oder Definitionen innerhalb von Pseudoklassen und verwendet das Standardformat Schl\u00fcssel\/Wert:<\/p>\n<pre><code class=\"language-css\">{\n  \"settings\": {\n    \"custom\": {\n      \"property-name\": \"value\"\n    }\n  }\n}<\/code><\/pre>\n<p>Hinter den Kulissen verarbeitet WordPress diese Definition und erzeugt eine benutzerdefinierte CSS-Eigenschaft mit doppelten Bindestrichen:<\/p>\n<pre><code class=\"language-css\">--wp--custom--&lt;custom-element&gt;<\/code><\/pre>\n<p><code>--wp--custom--<\/code> wird immer Teil deiner CSS-Eigenschaft sein und keine Gro\u00df- und Kleinschreibung verwenden. Wenn du z. B. <code>lineHeight<\/code> als benutzerdefinierte Eigenschaft definierst, macht WordPress daraus &#8222;Gro\u00df- und Kleinschreibung:&#8220;<\/p>\n<pre><code class=\"language-css\">--wp--custom--line-height<\/code><\/pre>\n<p>Wenn es um die Namenskonventionen geht, kannst du die Gro\u00df- und Kleinschreibung verwenden, wenn du m\u00f6chtest. Wir empfehlen jedoch die Gro\u00df- und Kleinschreibung f\u00fcr deine benutzerdefinierten Eigenschaftsnamen. Das entspricht den WordPress-Namenskonventionen, verbessert die Lesbarkeit und verringert die Anzahl der Verarbeitungsfehler.<\/p>\n<p><strong>Hinweis<\/strong>: Bei den benutzerdefinierten CSS-Eigenschaften werden doppelte Bindestriche verwendet, weil <a href=\"https:\/\/www.w3.org\/Style\/CSS\/\" target=\"_blank\" rel=\"noopener noreferrer\">die CSS-Arbeitsgruppe des W3C<\/a> dich ermutigen m\u00f6chte, Sass zu verwenden (das Dollarzeichen zur Definition von Eigenschaften verwendet). Auf diese Weise hast du die M\u00f6glichkeit, deine Designs mit beidem zu verbessern.<\/p>\n<p>WordPress definiert bereits einige benutzerdefinierte Eigenschaften &#8211; oder zumindest haben Themes diese Option, dies zu tun. Das bedeutet, dass du CSS-Variablen in <code>theme.json<\/code> ohne explizite Deklaration sehen wirst:<\/p>\n<pre><code class=\"language-json\">{\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"slug\": \"primary\",\n          \"color\": \"var(--wp--preset--color--primary)\",\n          \"name\": \"Primary\"\n        }\n      ]\n    },\n    \"custom\": {\n      \"spacing\": {\n        \"small\": \"1rem\",\n        \"medium\": \"2rem\",\n        \"large\": \"3rem\"\n      }\n    }\n  },\n  \"styles\": {\n    \"spacing\": {\n      \"blockGap\": \"var(--wp--custom--spacing--medium)\"\n    }\n  }\n}<\/code><\/pre>\n<p>In diesem Beispiel definieren wir eine Prim\u00e4rfarbe, indem wir eine bestehende Farbvoreinstellung verwenden. Dann definieren wir einige benutzerdefinierte Abstandseigenschaften und setzen sie mit <code>var()<\/code>.<\/p>\n<p>Das bedeutet, dass wir die Werte nicht in <code>theme.json<\/code> fest einprogrammieren m\u00fcssen. Au\u00dferdem k\u00f6nnen die Nutzer\/innen diese Werte im Site-Editor aktualisieren und im gesamten Theme \u00fcbernehmen.<\/p>\n<h3>Voreinstellungen vs. benutzerdefinierte Eigenschaften<\/h3>\n<p>Nat\u00fcrlich kannst du auf <code>theme.json<\/code> auch Voreinstellungen f\u00fcr Farben, Schriftgr\u00f6\u00dfen und andere g\u00e4ngige Theme-Elemente definieren. Andererseits kannst du benutzerdefinierte Eigenschaften f\u00fcr jeden Wert verwenden, den du in deinem Theme wiederverwenden m\u00f6chtest.<\/p>\n<p>Der gr\u00f6\u00dfte Unterschied liegt hier in den Namenskonventionen und der Zug\u00e4nglichkeit. Die Nutzer k\u00f6nnen auf die benutzerdefinierten Eigenschaften im Site-Editor nicht zugreifen, ohne dass du etwas daf\u00fcr tun musst. Mit Voreinstellungen generiert WordPress CSS, das \u00e4hnlich aussieht wie die benutzerdefinierten Eigenschaften:<\/p>\n<pre><code class=\"language-css\">{\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"slug\": \"primary\",\n          \"color\": \"#007bff\",\n          \"name\": \"Primary\"\n        }\n      ]\n    },\n    \"custom\": {\n      \"fontFamily\": {\n        \"base\": \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\",\n        \"headings\": \"'Helvetica Neue', Helvetica, Arial, sans-serif\"\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Sobald WordPress dies verarbeitet hat, kannst du die Unterschiede erkennen:<\/p>\n<pre><code class=\"language-css\">--wp--preset--primary: #007bff;\n--wp--custom--font-family--base: \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\";\n--wp--custom--font-family--headings: \"'Helvetica Neue', Helvetica, Arial, sans-serif\";<\/code><\/pre>\n<p>Beachte, dass bei der weiteren Verschachtelung von Eigenschaften doppelte Bindestriche verwendet werden, auch wenn die Gro\u00df- und Kleinschreibung in Kamelschreibweise umgewandelt wurde.<\/p>\n<h3>Globales und blockspezifisches CSS versus benutzerdefinierte CSS-Eigenschaften<\/h3>\n<p>Bei klassischem WordPress w\u00fcrdest du <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-css\/\">zus\u00e4tzliche und benutzerdefinierte CSS<\/a> im Frontend verwenden, um Elemente innerhalb deines Themes zu gestalten. Das ist bei <code>theme.json<\/code> und FSE immer noch der Fall, obwohl der Ansatz anders ist als bei den benutzerdefinierten CSS-Eigenschaften.<\/p>\n<p>Wenn du den Website-Editor aufrufst und den Bildschirm <strong>Stile<\/strong> aufrufst, wirst du den Abschnitt <strong>Zus\u00e4tzliches CSS<\/strong> sehen. Dieser Bereich funktioniert \u00e4hnlich wie das benutzerdefinierte CSS-Panel in klassischen WordPress-Installationen:<\/p>\n<figure id=\"attachment_184926\" aria-describedby=\"caption-attachment-184926\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184926 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/additional-css.png\" alt=\"Teilansicht des WordPress-Site-Editors mit Links zu den Bl\u00f6cken und zus\u00e4tzlichen CSS-Einstellungen. Auf der linken Seite des Bildschirms ist eine Teilansicht eines Geb\u00e4udes vor blauem Himmel zu sehen.\" width=\"1200\" height=\"587\"><figcaption id=\"caption-attachment-184926\" class=\"wp-caption-text\">Der Abschnitt &#8222;Zus\u00e4tzliches CSS&#8220; im WordPress-Site-Editor<\/figcaption><\/figure>\n<p>Hier kannst du globale CSS-Anpassungen zu einem Theme hinzuf\u00fcgen. In Wirklichkeit ist es aber eine M\u00f6glichkeit, den Nutzern die M\u00f6glichkeit zu geben, CSS hinzuzuf\u00fcgen. Du kannst dies auch nutzen, um kleine \u00c4nderungen vorzunehmen, die kein ganzes Stylesheet erfordern.<\/p>\n<p>Innerhalb von <code>theme.json<\/code> verwendest du die Eigenschaft <code>css<\/code>, um zus\u00e4tzliches CSS zu definieren, das du hinzuf\u00fcgen m\u00f6chtest:<\/p>\n<pre><code class=\"language-json\">{\n  \"version\": 3,\n    \"styles\": {\n      \"css\": \"margin: 0\"\n    }\n}<\/code><\/pre>\n<p>Beachte, dass du am Ende von CSS-Anweisungen keine Semikolons verwenden musst. Du kannst auch benutzerdefinierte CSS-Anweisungen f\u00fcr Bl\u00f6cke festlegen:<\/p>\n<pre><code class=\"language-json\">{\n  \"version\": 2,\n  \"styles\": {\n    \"blocks\": {\n      \"core\/post-title\": {\n        \"css\": \"letter-spacing: 1px;\"\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Jedes Mal, wenn du eine solche CSS-Anweisung in <code>theme.json<\/code> einstellst, wird sie in den <strong>zus\u00e4tzlichen CSS-Feldern<\/strong> des Site Editors angezeigt. Bedenke jedoch, dass nichts, was du mit <code>css<\/code> deklarierst, eine benutzerdefinierte CSS-Eigenschaft ist.<\/p>\n<h3>Der Ampersand-Selektor (&#038;) verwenden<\/h3>\n<p>\u00c4hnlich wie Sass unterst\u00fctzt auch WordPress den Ampersand-Selektor, allerdings mit ein paar Unterschieden. In diesem Fall ist es eine gute M\u00f6glichkeit, verschachtelte Elemente und Eigenschaften zu definieren. Das kann wichtig sein, wenn du CSS-Eigenschaften f\u00fcr einzelne Bl\u00f6cke deklarieren willst.<\/p>\n<p>Nimm zum Beispiel das Folgende:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n  \"blocks\": {\n    \"core\/table\": {\n      \"css\": \"color:#333 & th{ background:#f5f5f5; }\"\n    }\n\u2026<\/code><\/pre>\n<p>Hier wird eine Textfarbe und eine Hintergrundfarbe f\u00fcr das Tabellenkopfelement definiert. Wenn WordPress das verarbeitet, erh\u00e4ltst du sauberes, einfaches CSS:<\/p>\n<pre><code class=\"language-css\">.wp-block-table &gt; table {\n  color: #333;\n}\n\n.wp-block-table &gt; table th {\n  background: #f5f5f5;\n}<\/code><\/pre>\n<p>Ampersand-Selektoren eignen sich hervorragend, wenn du das CSS, das du anvisierst, erweitern m\u00f6chtest. Eine verst\u00e4ndliche Art, sich den Selektor vorzustellen, ist, dass er hilft, deine CSS-Elemente zu trennen. Nimm zum Beispiel das Folgende:<\/p>\n<pre><code class=\"language-json\">{\n  \"version\": 3,\n  \"styles\": {\n    \"blocks\": {\n      \"core\/avatar\": {\n        \"css\": \"& img {border-radius: 999px}\"\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Das f\u00fcgt einem Avatar einen Rahmenradius hinzu und gibt das CSS so aus, wie du es dir vorstellst:<\/p>\n<pre><code class=\"language-css\">.wp-block-image img {\n  border-radius: 999px;\n}<\/code><\/pre>\n<p>Ohne den Ampersand-Selektor w\u00fcrde WordPress deine Deklarationen jedoch miteinander verbinden:<\/p>\n<pre><code class=\"language-css\">\u2026\n\u200b\u200b.wp-block-imageimg\n\u2026<\/code><\/pre>\n<p>Die Verwendung des Ampersand-Selektors f\u00fcr deine benutzerdefinierten CSS-Eigenschaften wird etwas sein, das du regelm\u00e4\u00dfig verwenden wirst.<\/p>\n<h2>Die Rolle von Kinsta bei der Unterst\u00fctzung der modernen WordPress-Entwicklung<\/h2>\n<p>Die Wahl deines Hostings ist genauso wichtig wie jede Programmiersprache, jeder Pr\u00e4prozessor oder jedes andere technische Element. Ohne einen guten Hosting-Anbieter an deiner Seite wirst du nicht von der Leistung und den Tools von <code>theme.json<\/code> oder FSE profitieren k\u00f6nnen.<\/p>\n<p>Kinsta kann dank unserer Entwicklungstools ein zentraler Bestandteil deines gesamten Workflows sein. Du kannst mit <a href=\"https:\/\/kinsta.com\/de\/devkinsta\/\">DevKinsta<\/a> beginnen &#8211; unserer lokalen Entwicklungsumgebung, die <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-docker\/\">Docker-Container<\/a> nutzt, um deine WordPress-Installation zu isolieren:<\/p>\n<figure id=\"attachment_184928\" aria-describedby=\"caption-attachment-184928\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184928 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/devkinsta-interface-1.png\" alt=\"Die DevKinsta-Oberfl\u00e4che zeigt die Datenbank und die WordPress-Konfigurationseinstellungen an. Sie zeigt Verbindungsdetails an, einschlie\u00dflich Host, Port, Datenbankname und WordPress-Version. Die Oberfl\u00e4che zeigt auch Optionen zum Aktivieren von Debugging und automatischen Updates f\u00fcr WordPress an.\" width=\"1200\" height=\"596\"><figcaption id=\"caption-attachment-184928\" class=\"wp-caption-text\">Die Hauptschnittstelle von DevKinsta<\/figcaption><\/figure>\n<p>Eine n\u00fctzliche Funktion von DevKinsta ist die M\u00f6glichkeit, Daten zwischen deinem lokalen Rechner und deinen <a href=\"https:\/\/kinsta.com\/de\/blog\/kinstas-staging-umgebungen\/\">Kinsta-Staging-Umgebungen<\/a> zu pushen und zu ziehen:<\/p>\n<figure id=\"attachment_184931\" aria-describedby=\"caption-attachment-184931\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184931 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/push-pull.png\" alt=\"Ein Teil der DevKinsta-Benutzeroberfl\u00e4che mit Website-Informationen und Steuerungsoptionen. Die Benutzeroberfl\u00e4che zeigt Schaltfl\u00e4chen zum \u00d6ffnen der Website, zum Synchronisieren, zum Zugriff auf den Datenbankmanager und auf den WordPress-Administrator. Ein Dropdown-Men\u00fc zeigt Optionen zum Pushen oder Pullen von Kinsta an. Der Website-Typ wird als WordPress aufgef\u00fchrt, mit sichtbaren, aber unvollst\u00e4ndigen Informationen \u00fcber den Host.\" width=\"1200\" height=\"354\"><figcaption id=\"caption-attachment-184931\" class=\"wp-caption-text\">Die Optionen, um innerhalb von DevKinsta zu Kinsta zu pushen oder von Kinsta zu ziehen<\/figcaption><\/figure>\n<p>So kannst du deine Themes in einer produktions\u00e4hnlichen Umgebung testen, bevor du sie verteilst. Wenn du mit benutzerdefinierten CSS-Eigenschaften arbeitest, kannst du sicherstellen, dass sie in verschiedenen Kontexten funktionieren. <span style=\"margin: 0px;padding: 0px\"><a href=\"https:\/\/api-docs.kinsta.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Die API von Kinsta<\/a> kann deine <a href=\"https:\/\/kinsta.com\/de\/blog\/ci-cd-pipeline-github-aktionen-erstellen\/\">CI\/CD-Pipeline<\/a> unterst\u00fctzen, wenn du bereit bist, live zu gehen<\/span>.<\/p>\n<p>Andere Aspekte der Kinsta-Architektur helfen dir bei deiner gesamten Entwicklungsarbeit. Kinsta unterst\u00fctzt zum Beispiel Git, was die Versionskontrolle deiner Themedateien, einschlie\u00dflich <code>theme.json<\/code>, erleichtert. Wenn du benutzerdefinierte Eigenschaften iterierst oder einfach mit verschiedenen Konfigurationen experimentierst, solltest du wissen, dass du eine Rollback-Option hast.<\/p>\n<p>Und wenn du dich entscheidest, dein Theme auf einem Kinsta-Server zu verwenden, erh\u00f6ht unser <a href=\"https:\/\/kinsta.com\/de\/blog\/edge-caching\/\">Edge Caching<\/a> die Leistung von <code>theme.json<\/code> um bis zu <a href=\"https:\/\/kinsta.com\/de\/edge-caching\/\">80 Prozent<\/a>. Eine Website, die unabh\u00e4ngig vom Browser des Nutzers schnell l\u00e4uft, stellt sicher, dass die benutzerdefinierten Erg\u00e4nzungen sofort angezeigt werden.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>So wie <code>theme.json<\/code> eine leistungsstarke Konfigurationsdatei f\u00fcr die Erstellung flexibler und wartbarer WordPress-Themes ist, sind auch die benutzerdefinierten CSS-Eigenschaften entscheidend f\u00fcr den Arbeitsablauf. So erstellst und deklarierst du CSS f\u00fcr Elemente, die der Site Editor nicht erreicht. Sie sind auch wichtig, wenn du deine eigenen Bl\u00f6cke erstellst oder einfach einzigartige WordPress-Themes mit der ultimativen Anpassungstiefe entwickeln willst. Au\u00dferdem hast du die M\u00f6glichkeit, diese CSS \u00fcber den Seiteneditor mit den Nutzern zu teilen.<\/p>\n<p>Werden benutzerdefinierte CSS-Eigenschaften ein Teil deines Arbeitsablaufs bei der Theme-Entwicklung sein? Wenn ja, wie wirst du sie nutzen? Teile deine Erkenntnisse in den Kommentaren unten mit!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress-Theme-Entwickler k\u00f6nnen eine theme.json Datei verwenden, um einen Prozess zu rationalisieren, der fr\u00fcher weitgehend auf PHP basierte. Du kannst aber auch weiterhin deine HTML-, JavaScript- und &#8230;<\/p>\n","protected":false},"author":199,"featured_media":71403,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[999,1012],"class_list":["post-71402","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-wordpress-entwicklung","topic-wordpress-website-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Entwickle benutzerdefinierte CSS-Eigenschaften mit theme.json in WordPress<\/title>\n<meta name=\"description\" content=\"Hier erf\u00e4hrst du, wie du benutzerdefinierte CSS-Eigenschaften in theme.json entwickelst, um WordPress-Themes um erweiterte Funktionen zu erweitern.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Entwicklung von CSS-Eigenschaften mit theme.json f\u00fcr erweiterte WordPress-Themes\" \/>\n<meta property=\"og:description\" content=\"Hier erf\u00e4hrst du, wie du benutzerdefinierte CSS-Eigenschaften in theme.json entwickelst, um WordPress-Themes um erweiterte Funktionen zu erweitern.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-02T14:25:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-03T08:13:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/10\/css-custom-properties-in-theme-json.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Hier erf\u00e4hrst du, wie du benutzerdefinierte CSS-Eigenschaften in theme.json entwickelst, um WordPress-Themes um erweiterte Funktionen zu erweitern.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/10\/css-custom-properties-in-theme-json-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"13\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Entwicklung von CSS-Eigenschaften mit theme.json f\u00fcr erweiterte WordPress-Themes\",\"datePublished\":\"2024-10-02T14:25:56+00:00\",\"dateModified\":\"2024-10-03T08:13:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/\"},\"wordCount\":2330,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/10\/css-custom-properties-in-theme-json.png\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/\",\"name\":\"Entwickle benutzerdefinierte CSS-Eigenschaften mit theme.json in WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/10\/css-custom-properties-in-theme-json.png\",\"datePublished\":\"2024-10-02T14:25:56+00:00\",\"dateModified\":\"2024-10-03T08:13:50+00:00\",\"description\":\"Hier erf\u00e4hrst du, wie du benutzerdefinierte CSS-Eigenschaften in theme.json entwickelst, um WordPress-Themes um erweiterte Funktionen zu erweitern.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/10\/css-custom-properties-in-theme-json.png\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/10\/css-custom-properties-in-theme-json.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Entwicklung\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/wordpress-entwicklung\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Entwicklung von CSS-Eigenschaften mit theme.json f\u00fcr erweiterte WordPress-Themes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Entwickle benutzerdefinierte CSS-Eigenschaften mit theme.json in WordPress","description":"Hier erf\u00e4hrst du, wie du benutzerdefinierte CSS-Eigenschaften in theme.json entwickelst, um WordPress-Themes um erweiterte Funktionen zu erweitern.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/","og_locale":"de_DE","og_type":"article","og_title":"Entwicklung von CSS-Eigenschaften mit theme.json f\u00fcr erweiterte WordPress-Themes","og_description":"Hier erf\u00e4hrst du, wie du benutzerdefinierte CSS-Eigenschaften in theme.json entwickelst, um WordPress-Themes um erweiterte Funktionen zu erweitern.","og_url":"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2024-10-02T14:25:56+00:00","article_modified_time":"2024-10-03T08:13:50+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/10\/css-custom-properties-in-theme-json.png","type":"image\/png"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Hier erf\u00e4hrst du, wie du benutzerdefinierte CSS-Eigenschaften in theme.json entwickelst, um WordPress-Themes um erweiterte Funktionen zu erweitern.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/10\/css-custom-properties-in-theme-json-1024x512.png","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Jeremy Holcombe","Gesch\u00e4tzte Lesezeit":"13\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Entwicklung von CSS-Eigenschaften mit theme.json f\u00fcr erweiterte WordPress-Themes","datePublished":"2024-10-02T14:25:56+00:00","dateModified":"2024-10-03T08:13:50+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/"},"wordCount":2330,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/10\/css-custom-properties-in-theme-json.png","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/","url":"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/","name":"Entwickle benutzerdefinierte CSS-Eigenschaften mit theme.json in WordPress","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/10\/css-custom-properties-in-theme-json.png","datePublished":"2024-10-02T14:25:56+00:00","dateModified":"2024-10-03T08:13:50+00:00","description":"Hier erf\u00e4hrst du, wie du benutzerdefinierte CSS-Eigenschaften in theme.json entwickelst, um WordPress-Themes um erweiterte Funktionen zu erweitern.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/10\/css-custom-properties-in-theme-json.png","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/10\/css-custom-properties-in-theme-json.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/css-benutzerdefinierte-eigenschaften-theme-json\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"WordPress Entwicklung","item":"https:\/\/kinsta.com\/de\/thema\/wordpress-entwicklung\/"},{"@type":"ListItem","position":3,"name":"Entwicklung von CSS-Eigenschaften mit theme.json f\u00fcr erweiterte WordPress-Themes"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/de\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/71402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=71402"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/71402\/revisions"}],"predecessor-version":[{"id":71425,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/71402\/revisions\/71425"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71402\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71402\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71402\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71402\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71402\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71402\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71402\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71402\/translations\/nl"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71402\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/71403"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=71402"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=71402"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=71402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}