{"id":71862,"date":"2024-11-18T10:00:02","date_gmt":"2024-11-18T09:00:02","guid":{"rendered":"https:\/\/kinqsta.com\/de\/?p=71862&#038;preview=true&#038;preview_id=71862"},"modified":"2024-11-21T11:47:13","modified_gmt":"2024-11-21T10:47:13","slug":"theme-json-eigenschaften-schluessel-werte-paare","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/","title":{"rendered":"Arbeiten mit Eigenschaften und Schl\u00fcssel-Wert-Paaren in theme.json"},"content":{"rendered":"<p>Das Verst\u00e4ndnis f\u00fcr die Struktur und die Eigenschaften der <code><a href=\"https:\/\/kinqsta.com\/de\/blog\/theme-json-blocks-eigenschaft\/\">theme.json<\/a><\/code> Datei zu verstehen, ist grundlegend f\u00fcr die <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-theme-kernkonzepte\/\">Entwicklung von Blockthemes<\/a>. Diese Datei dient als zentraler Konfigurationspunkt f\u00fcr alle blockbasierten Themes.<\/p>\n<p>Ganz gleich, ob du ein Theme von Grund auf neu erstellst, ein bestehendes Theme anpasst, eine Style-Variation entwickelst oder an einem Child-Theme arbeitest, es ist wichtig zu wissen, wie man mit <code>theme.json<\/code> arbeitet.<\/p>\n<p>Gl\u00fccklicherweise ist JSON (JavaScript Object Notation) ein f\u00fcr Menschen lesbares Format mit einer hierarchischen Struktur, die Informationen von allgemeinen zu spezifischen Eigenschaften ordnet. Im Zusammenhang mit <code>theme.json<\/code> ist die Vertrautheit mit Cascading Style Sheets (<a href=\"https:\/\/kinqsta.com\/de\/blog\/css-best-practices\/\">CSS<\/a>) wichtiger als tiefgreifende Kenntnisse in <a href=\"https:\/\/kinqsta.com\/de\/blog\/was-ist-javascript\/\">JavaScript<\/a>.<\/p>\n<p>In diesem Artikel sollen die prim\u00e4ren und sekund\u00e4ren (verschachtelten) Eigenschaften einer <code>theme.json<\/code> Datei aufgeschl\u00fcsselt werden, wobei der Schwerpunkt auf den wichtigsten Einstellungen und Stileigenschaften liegt. Dies sind die Kernelemente der Datei, f\u00fcr die wir ausf\u00fchrliche Erkl\u00e4rungen und Codebeispiele liefern.<\/p>\n<p>Wir bauen auf dem Fundament auf, das wir in unserem vorherigen Artikel gelegt haben, <em><a href=\"https:\/\/kinqsta.com\/de\/blog\/theme-json\/\">Entfessle die Macht der theme.json: Dein WordPress-Theme wie ein Profi anpassen<\/a><\/em>, insbesondere in dem Abschnitt <em><a href=\"https:\/\/kinqsta.com\/de\/blog\/theme-json\/#working-with-the-themejson-file-properties\">Arbeiten mit den Eigenschaften der theme.json-Datei<\/a><\/em>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>F\u00fcr die lokale Theme-Entwicklung kannst du das Kinsta-Entwicklungstool <a href=\"https:\/\/kinqsta.com\/de\/devkinsta\/\">DevKinsta<\/a> verwenden, mit dem du schnell <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-lokal-installieren\/\">eine lokale WordPress-Umgebung einrichten<\/a> und sie einfach in deinem <a href=\"https:\/\/kinqsta.com\/de\/mykinsta\/\">Kinsta-Konto<\/a> bereitstellen kannst.<\/p>\n<p>Kinsta bietet auch Zugang zu <a href=\"https:\/\/kinqsta.com\/de\/docs\/wordpress-hosting\/staging-umgebung\/\">Staging-Umgebungen<\/a>, die eine nahtlose Verwaltung und Verbesserung deiner Webprojekte erm\u00f6glichen. Dies kann besonders hilfreich sein, wenn du \u00c4nderungen an deinem Theme testest, z. B. Aktualisierungen der Datei <code>theme.json<\/code>.<\/p>\n<\/aside>\n\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Wie Stile in einem Block-Theme gerendert werden<\/h2>\n<p>WordPress verwendet einen eingebauten kaskadierenden Prozess, um Stile f\u00fcr eine Website darzustellen. Wenn mehrere Quellen dieselbe Einstellung oder denselben Stil definieren, muss WordPress entscheiden, welche davon Vorrang hat. Im Folgenden ist die Rangfolge aufgef\u00fchrt, nach der WordPress entscheidet, welche Stile angewendet werden:<\/p>\n<ol start=\"1\">\n<li><strong>WordPress-Kern<\/strong> &#8211; Die Fallback-Datei <code>theme.json<\/code> befindet sich im Verzeichnis wp-includes. Diese Datei wird bei gr\u00f6\u00dferen WordPress-Versionen aktualisiert und sollte nicht bearbeitet werden.<\/li>\n<li><strong>Theme<\/strong> &#8211; Die prim\u00e4re <code>theme.json<\/code> Datei, die von Theme-Entwicklern verwendet wird, um die Einstellungen, Styles und andere Eigenschaften des Themes zu definieren.<\/li>\n<li><strong>Style-Variationen<\/strong> &#8211; Wenn ein Theme Style-Variationen enth\u00e4lt, hat jede ihre eigene <code>theme.json<\/code> Datei, die im Unterverzeichnis styles des Themes gespeichert ist.<\/li>\n<li><strong>Child-Theme<\/strong> &#8211; Wie bei klassischen Themes kann ein Child-Theme ein Parent-Theme modifizieren, ohne dessen Dateien zu ver\u00e4ndern (optional).<\/li>\n<li><strong>Stilvariationen des Child-Themes<\/strong> &#8211; \u00c4hnlich wie bei den regul\u00e4ren Stilvariationen kann ein Child-Theme seine eigene <code>theme.json<\/code> Datei in seinem styles-Unterverzeichnis haben (optional).<\/li>\n<li><strong>Benutzerdefinierte Stile<\/strong> &#8211; Dies sind benutzerdefinierte Stile, die mit WordPress-Editoren (f\u00fcr Seiten, Beitr\u00e4ge oder die gesamte Website) hinzugef\u00fcgt und in der Datenbank gespeichert werden.<\/li>\n<\/ol>\n<p>Die kaskadierende Reihenfolge stellt sicher, dass Stile aus Quellen mit h\u00f6herer Priorit\u00e4t Vorrang vor denen aus Quellen mit niedrigerer Priorit\u00e4t haben. So haben z. B. die Einstellungen in der Datei des Themes <code>theme.json<\/code> Vorrang vor den Einstellungen des WordPress-Kerns <code>theme.json<\/code>. Ebenso hat die Style-Variation eines Child-Themes Vorrang vor der Style-Variation des Parent-Themes.<\/p>\n<p>Vom Benutzer erstellte Stile (6) haben die h\u00f6chste Priorit\u00e4t und setzen alle anderen Stile in der Kaskade au\u00dfer Kraft.<\/p>\n<p>In diesem Artikel konzentrieren wir uns auf die Datei <code>theme.json<\/code>, die sich im Stammverzeichnis eines jeden WordPress-Block-Themes befindet.<\/p>\n<h2>Eine Referenz f\u00fcr prim\u00e4re Eigenschaften und ihre Schl\u00fcsselwerte<\/h2>\n<p>Schauen wir uns die sieben Top-Level-Objekte in <code>theme.json<\/code> an, die wir in drei Abschnitte unterteilt haben, um die Informationen leichter zu verstehen.<\/p>\n<h3>Ein paar Definitionen, bevor wir eintauchen<\/h3>\n<p>Wenn du mit <code>theme.json<\/code> arbeitest, wirst du wahrscheinlich verschiedene Definitionen f\u00fcr wichtige Komponenten finden. Der Klarheit halber definieren wir sie in diesem Artikel folgenderma\u00dfen:<\/p>\n<ol start=\"1\">\n<li><strong>Abschnitte<\/strong> &#8211; Gruppierungen von Top-Level-Optionen (in einigen Artikeln auch als &#8222;Top-Level-Objekte&#8220; bezeichnet).<\/li>\n<li><strong>Objekte <\/strong>&#8211; Die Hauptelemente in der Datei <code>theme.json<\/code>, z. B. <code>settings<\/code> und <code>styles<\/code>.<\/li>\n<li><strong>Eigenschaften<\/strong> &#8211; Die Komponenten innerhalb der Objekte. Das Objekt <code>settings<\/code> enth\u00e4lt zum Beispiel 12 verschiedene Eigenschaften.<\/li>\n<li><strong>Schl\u00fcssel-Werte-Paare<\/strong> &#8211; Eigenschaften bestehen aus Schl\u00fcssel-Werte-Paaren. Ein &#8222;Schl\u00fcssel&#8220; steht f\u00fcr ein Eigenschaftsattribut und wird in Anf\u00fchrungszeichen gesetzt. Ein &#8222;Wert&#8220; kann ein Boolescher Wert, ein String oder ein Array sein.<\/li>\n<\/ol>\n<p>Wenn wir von &#8222;standardm\u00e4\u00dfig&#8220; sprechen, beziehen wir uns auf die Standardkonfigurationen in der Kerndatei <code>theme.json<\/code>, die sich unter <code>wp-includes\/theme.json<\/code> befindet.<\/p>\n<p>Mit &#8222;Benutzer&#8220; sind alle Personen gemeint, die den <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-admin\/\">WordPress-Admin<\/a> benutzen und die Einstellungen in den Website-, Seiten- oder Beitragseditoren \u00e4ndern k\u00f6nnen.<\/p>\n<h3>\u00dcberblick \u00fcber die Syntax<\/h3>\n<ol start=\"1\">\n<li><strong>Boolesche Werte<\/strong> werden nicht in Anf\u00fchrungszeichen gesetzt.<\/li>\n<li><strong>Zeichenketten<\/strong> werden in Anf\u00fchrungszeichen eingeschlossen.<\/li>\n<li><strong>Arrays<\/strong> werden in eckige Klammern <code>[]<\/code> eingeschlossen.<\/li>\n<li><strong>Objekte<\/strong> werden in geschweifte Klammern <code>{}<\/code> eingeschlossen, die mehrere Eigenschaften oder verschachtelte Objekte enthalten.<\/li>\n<li><strong>Kommas<\/strong> werden verwendet, um mehrere Schl\u00fcssel-Wert-Paare innerhalb eines Objekts zu trennen.<\/li>\n<\/ol>\n<p>Hier ist ein Beispiel f\u00fcr eine typische Syntax:<\/p>\n<pre><code class=\"language-json\">{\n    \"house\": {\n        \"rooms\": \"kitchen\"\n    }\n}<\/code><\/pre>\n<h3>Gruppierung der Eigenschaften<\/h3>\n<p>Wir haben die Eigenschaften in drei Abschnitte unterteilt, um die Navigation zu erleichtern:<\/p>\n<ol start=\"1\">\n<li>Grundlegende Eigenschaften<\/li>\n<li>Einstellungen und Stileigenschaften<\/li>\n<li>Eigenschaften von Vorlagen und Mustern<\/li>\n<\/ol>\n<p>Um die Beispiele zu vereinfachen, haben wir manchmal die \u00e4u\u00dferen Objektumh\u00fcllungen weggelassen. Anstatt die gesamte Struktur zu zeigen:<\/p>\n<pre><code class=\"language-json\">{\n    \"settings\": {\n        \"appearanceTools\": false,\n        \"background\": {\n            \"backgroundImage\": true\n        }\n    }\n}<\/code><\/pre>\n<p>Wir k\u00f6nnten sie abk\u00fcrzen zu:<\/p>\n<pre><code class=\"language-json\">\"appearanceTools\": false,\n\"background\": {\n    \"backgroundImage\": true\n}<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Einige Beispiele dienen der Veranschaulichung von Konzepten und entsprechen nicht unbedingt der praktischen Anwendung in der Themeentwicklung.<\/p>\n<\/aside>\n\n<h3>Grundlegende Eigenschaften<\/h3>\n<p>Am Anfang einer <code>theme.json<\/code> Datei findest du normalerweise zwei Schl\u00fcsseleigenschaften: <code>$schema<\/code> und <code>version<\/code>. Diese Eigenschaften stehen normalerweise am Anfang der Datei. Die aktuelle Schema-Version ist 3 und wurde mit <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-6-6\/\">WordPress 6.6<\/a> eingef\u00fchrt.<\/p>\n<pre><code class=\"language-json\">\"$schema\": \"https:\/\/schemas.wp.org\/wp\/6.6\/<code>theme.json<\/code>\", \"version\": 3<\/code><\/pre>\n<h3>Einstellungen und Stileigenschaften<\/h3>\n<p>Wenn du mit klassischen Themes vertraut bist, kannst du dir vorstellen, dass es sich bei den Einstellungseigenschaften um Eigenschaften und Funktionen handelt, die normalerweise in der <code><a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-functions-php\/\">functions.php<\/a><\/code> Datei festgelegt werden und im <strong>Abschnitt<\/strong> <strong>Erscheinungsbild<\/strong> &gt; <strong>Benutzerdefiniert<\/strong> im WordPress-Admin zu finden sind.<\/p>\n<p>Styles hingegen \u00e4hneln den CSS-Eigenschaften, die fr\u00fcher in der Datei <code>styles.css<\/code> zu finden waren und das Layout und Design des Themes steuern.<\/p>\n<h4>Einstellungen<\/h4>\n<p>Mit Ausnahme der Eigenschaften <code>block<\/code> und <code>elements<\/code> sind alle anderen Einstellungen global. Da es sich bei vielen dieser Einstellungen um Boolesche Werte handelt, fungieren sie als Umschalter, um eine Funktion der Benutzeroberfl\u00e4che zu aktivieren oder zu deaktivieren.<\/p>\n<p>Es ist wichtig zu wissen, dass nicht alle Tasten in jedem Kontext anwendbar sind. Es ist zum Beispiel nicht m\u00f6glich, eine Mindesth\u00f6he f\u00fcr einen Absatzblock festzulegen.<\/p>\n<h5>Werkzeuge f\u00fcr das Erscheinungsbild<\/h5>\n<p>Diese Einstellungen k\u00f6nnen gemeinsam oder einzeln \u00fcber <code>\"appearanceTools\": true<\/code> aktiviert werden.<\/p>\n<p>Wenn du diese Funktion aktivierst, werden verschiedene UI-Optionen im <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-full-site-editing\/\">WordPress-Editor<\/a> sichtbar, was Entwicklern Zeit spart. In der Standardeinstellung sind diese Werkzeuge deaktiviert (<code>\"appearanceTools\": false<\/code>).<\/p>\n<p>Zu den Funktionen von <code>appearanceTools<\/code> geh\u00f6ren:<\/p>\n<ul>\n<li><code>background<\/code>\n<ul>\n<li><code>backgroundImage<\/code> &#8211; Erm\u00f6glicht es dem Nutzer, Bl\u00f6cken ein Hintergrundbild hinzuzuf\u00fcgen.<\/li>\n<li><code>backgroundSize<\/code> &#8211; Legt fest, wie das Hintergrundbild skaliert wird (abdecken, einschlie\u00dfen, etc.).<\/li>\n<\/ul>\n<\/li>\n<li><code>border<\/code>\n<ul>\n<li><code>color<\/code> &#8211; Erm\u00f6glicht die Farbauswahl f\u00fcr R\u00e4nder.<\/li>\n<li><code>style<\/code> &#8211; Erm\u00f6glicht die Auswahl des Rahmenstils (durchgezogen, gestrichelt, gepunktet usw.).<\/li>\n<li><code>width<\/code> &#8211; Steuert die Dicke des Rahmens.<\/li>\n<li><code>radius<\/code> &#8211; Erm\u00f6glicht es den Nutzern, abgerundete Ecken einzustellen, indem sie den Radius des Rahmens anpassen.<\/li>\n<\/ul>\n<\/li>\n<li><code>color<\/code>\n<ul>\n<li><code>link<\/code> &#8211; Erm\u00f6glicht das Festlegen einer Farbe f\u00fcr Links innerhalb des Inhalts.<\/li>\n<li><code>heading<\/code> &#8211; Erm\u00f6glicht die Festlegung von Farben f\u00fcr \u00dcberschriften (<code>&lt;h1&gt;<\/code>, <code>&lt;h2&gt;<\/code>, etc.).<\/li>\n<li><code>button<\/code> &#8211; Steuert die Farbe der Schaltfl\u00e4chen im Theme.<\/li>\n<li><code>caption<\/code> &#8211; Erm\u00f6glicht das Festlegen einer eigenen Farbe f\u00fcr \u00dcberschriften.<\/li>\n<\/ul>\n<\/li>\n<li><code>dimensions<\/code>\n<ul>\n<li><code>aspectRatio<\/code> &#8211; Erm\u00f6glicht die Einstellung des Verh\u00e4ltnisses von Breite zu H\u00f6he der Bl\u00f6cke.<\/li>\n<li><code>minHeight<\/code> &#8211; Erm\u00f6glicht das Festlegen einer Mindesth\u00f6he f\u00fcr Bl\u00f6cke.<\/li>\n<\/ul>\n<\/li>\n<li><code>position<\/code>\n<ul>\n<li><code>sticky<\/code> &#8211; Erm\u00f6glicht es dem Nutzer, einen Block &#8222;klebrig&#8220; zu machen, d.h. er bleibt beim Scrollen an seinem Platz.<\/li>\n<\/ul>\n<\/li>\n<li><code>spacing<\/code>\n<ul>\n<li><code>blockGap<\/code> &#8211; Steuert den Abstand zwischen den Bl\u00f6cken.<\/li>\n<li><code>margin<\/code> &#8211; Erm\u00f6glicht es den Nutzern, die R\u00e4nder um einen Block anzupassen.<\/li>\n<li><code>padding<\/code> &#8211; Steuert die Auff\u00fcllung innerhalb eines Blocks, d. h. den Abstand zwischen dem Inhalt und dem Rand.<\/li>\n<\/ul>\n<\/li>\n<li><code>typography<\/code>\n<ul>\n<li><code>lineHeight<\/code> &#8211; Erm\u00f6glicht es den Nutzern, die Zeilenh\u00f6he (Abstand zwischen den Textzeilen) f\u00fcr eine bessere Lesbarkeit anzupassen.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>Beispiel:<\/strong> Wenn du m\u00f6chtest, dass Benutzer ein Hintergrundbild hinzuf\u00fcgen, w\u00e4hrend andere Werkzeuge f\u00fcr das Erscheinungsbild deaktiviert bleiben, verwende diese Option:<\/p>\n<pre><code class=\"language-json\">\"appearanceTools\": false,\n\"background\": {\n    \"backgroundImage\": true\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/background-img-block.png\" alt=\"Die resultierende Benutzeroberfl\u00e4che, die es den Nutzern erm\u00f6glicht, ein Hintergrundbild zu einem Gruppenblock hinzuzuf\u00fcgen\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Die resultierende Benutzeroberfl\u00e4che, die es den Nutzern erm\u00f6glicht, ein Hintergrundbild zu einem Gruppenblock hinzuzuf\u00fcgen<\/figcaption><\/figure>\n<h5>Bl\u00f6cke<\/h5>\n<p>Mit der Eigenschaft <code>blocks<\/code> k\u00f6nnen die Nutzer\/innen Einstellungen pro Block aktivieren, die die globalen Einstellungen au\u00dfer Kraft setzen k\u00f6nnen.<\/p>\n<p><strong>Beispiel:<\/strong> Wenn <code>appearanceTools<\/code> auf <code>false<\/code> gesetzt ist, du aber trotzdem Rahmensteuerungen f\u00fcr einen Block freigeben m\u00f6chtest, verwende:<\/p>\n<pre><code class=\"language-json\">\"border\": {\n    \"color\": true,\n    \"style\": true,\n    \"width\": true,\n    \"radius\": true\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/border-shadow-block.png\" alt=\"Zeigt die resultierende Benutzeroberfl\u00e4che, die das Hinzuf\u00fcgen von Rahmen erm\u00f6glicht\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Zeigt die resultierende Benutzeroberfl\u00e4che, die das Hinzuf\u00fcgen von Rahmen erm\u00f6glicht<\/figcaption><\/figure>\n<h5>Farbe<\/h5>\n<p>Mit dieser Eigenschaft kannst du Farboptionen wie Hintergrundfarbe, Textfarbe oder Farbverl\u00e4ufe festlegen.<\/p>\n<p>Schl\u00fcssel innerhalb der Eigenschaft <code>color<\/code>:<\/p>\n<ul>\n<li><strong><code>background<\/code><\/strong> &#8211; Steuert die Hintergrundfarbe von Bl\u00f6cken oder Elementen.<\/li>\n<li><strong><code>custom<\/code><\/strong> &#8211; Aktiviert oder deaktiviert die M\u00f6glichkeit, benutzerdefinierte Farben auszuw\u00e4hlen.<\/li>\n<li><strong><code>customDuotone<\/code><\/strong> &#8211; Erm\u00f6glicht es den Nutzern, benutzerdefinierte Duotone-Filter auf Bilder anzuwenden.<\/li>\n<li><strong><code>customGradient<\/code><\/strong> &#8211; Erm\u00f6glicht benutzerdefinierte Optionen f\u00fcr Farbverl\u00e4ufe.<\/li>\n<li><strong><code>defaultDuotone<\/code><\/strong> &#8211; Bietet Standardoptionen f\u00fcr Duotone-Bildfilter.<\/li>\n<li><strong><code>defaultGradient<\/code><\/strong> &#8211; Legt die Standardoptionen f\u00fcr Farbverl\u00e4ufe fest, die den Nutzern zur Verf\u00fcgung stehen.<\/li>\n<li><strong><code>defaultPalette<\/code><\/strong> &#8211; Steuert die Standardfarbpalette f\u00fcr das Theme.<\/li>\n<li><strong><code>duotone<\/code><\/strong> &#8211; Erlaubt Duoton-Filter f\u00fcr Bilder.<\/li>\n<li><strong><code>gradient<\/code><\/strong> &#8211; Aktiviert Farbverlaufsoptionen f\u00fcr Hintergr\u00fcnde oder andere Elemente.<\/li>\n<li><strong><code>link<\/code><\/strong> &#8211; Legt die Farbe f\u00fcr Links im Theme fest.<\/li>\n<li><strong><code>text<\/code><\/strong> &#8211; Steuert die Optionen f\u00fcr Textfarben.<\/li>\n<li><strong><code>heading<\/code><\/strong> &#8211; Legt die Farben f\u00fcr \u00dcberschriften fest (z.B. h1, h2, etc.).<\/li>\n<li><strong><code>button<\/code><\/strong> &#8211; Steuert die Farboptionen f\u00fcr Schaltfl\u00e4chen.<\/li>\n<li><strong><code>caption<\/code><\/strong> &#8211; Legt die Farbe der Beschriftung f\u00fcr Medienelemente fest.<\/li>\n<\/ul>\n<p>Schauen wir uns einige Beispiele an:<\/p>\n<p><strong>Beispiel 1:<\/strong> Wenn du die Farbauswahl f\u00fcr Benutzer deaktivieren m\u00f6chtest, kannst du Folgendes verwenden:<\/p>\n<pre><code class=\"language-json\">\"color\": {\n    \"custom\": false\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/disable-color-picker.png\" alt=\"Deaktivieren der Farbauswahl UI\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Deaktivieren der Farbauswahl UI<\/figcaption><\/figure>\n<p><strong>Beispiel 2:<\/strong> Um benutzerdefinierte prim\u00e4re und sekund\u00e4re Themefarben festzulegen, kannst du diese Konfiguration verwenden:<\/p>\n<pre><code class=\"language-json\">\"color\": {\n   \"palette\": [\n       { \"slug\": \"primary\", \"color\": \"#0000ff\", \"name\": \"Primary\" },\n       { \"slug\": \"secondary\", \"color\": \"#ff0000\", \"name\": \"Secondary\" }\n   ]\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/theme-color-setting.png\" alt=\"Die resultierende UI zum Einstellen der prim\u00e4ren und sekund\u00e4ren Themefarben\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Die resultierende UI zum Einstellen der prim\u00e4ren und sekund\u00e4ren Themefarben<\/figcaption><\/figure>\n<h5>Abmessungen<\/h5>\n<p>Diese Eigenschaft bietet Optionen zur Steuerung der Blockabmessungen, wie Breite, H\u00f6he und Seitenverh\u00e4ltnis.<\/p>\n<p>Schl\u00fcssel innerhalb der Eigenschaft <code>dimensions<\/code>:<\/p>\n<ul>\n<li><strong><code>aspectRatio<\/code><\/strong> &#8211; Erm\u00f6glicht es den Nutzern, das Seitenverh\u00e4ltnis eines Blocks festzulegen oder zu sperren (z. B. 16:9, 4:3).<\/li>\n<li><strong><code>defaultAspectRatios<\/code><\/strong> &#8211; Legt Standard-Seitenverh\u00e4ltnisse f\u00fcr Bl\u00f6cke fest.<\/li>\n<li><strong><code>minHeight<\/code><\/strong> &#8211; Erm\u00f6glicht es, eine Mindesth\u00f6he f\u00fcr Bl\u00f6cke festzulegen.<\/li>\n<\/ul>\n<p>Wenn du z. B. eine Mindesth\u00f6he f\u00fcr unterst\u00fctzte Bl\u00f6cke festlegen m\u00f6chtest, verwende Folgendes:<\/p>\n<pre><code class=\"language-json\">\"dimensions\": {\n    \"minHeight\": true\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/min-height-setting.png\" alt=\"Mindesth\u00f6he in der Benutzeroberfl\u00e4che festlegen\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Mindesth\u00f6he in der Benutzeroberfl\u00e4che festlegen<\/figcaption><\/figure>\n<h5>Layout<\/h5>\n<p>Mit der Eigenschaft <code>layout<\/code> k\u00f6nnen die Nutzer\/innen layoutbezogene Optionen festlegen, wie z. B. die Breite des Inhalts und ob sie das Layout anpassen k\u00f6nnen. Mit diesen Schl\u00fcsseln k\u00f6nnen die Nutzer\/innen Layout-Optionen festlegen:<\/p>\n<ul>\n<li><strong><code>contentSize<\/code> <\/strong>&#8211; Legt die Standardbreite der Bl\u00f6cke fest .<\/li>\n<li><strong><code>wideSize<\/code> <\/strong>&#8211; Legt die Breite der Bl\u00f6cke fest , wenn die Option &#8222;Breite Ausrichtung&#8220; ausgew\u00e4hlt ist.<\/li>\n<li><strong><code>allowEditing<\/code> <\/strong>&#8211; Legt fest, ob die Benutzer Layout-Optionen bearbeiten k\u00f6nnen.<\/li>\n<li><strong><code>allowCustomContentAndWideSize<\/code> <\/strong>&#8211; Erm\u00f6glicht die Anpassung von <code>contentSize<\/code> und <code>wideSize<\/code>.<\/li>\n<\/ul>\n<p><strong>Beispiel<\/strong>: Konfiguriere die Layout-Einstellungen mit Standard- und breiten Blockbreiten:<\/p>\n<pre><code class=\"language-json\">\"layout\": {\n    \"contentSize\": \"620px\",\n    \"wideSize\": \"1000px\"\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/width-setting.png\" alt=\"Resultierende Standard- und Breitenblockeinstellungen\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Resultierende Standard- und Breitenblockeinstellungen<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Diese Werte sind Ausgangspunkte, die von den Nutzern ge\u00e4ndert werden k\u00f6nnen.<\/p>\n<\/aside>\n\n<h5>Lightbox<\/h5>\n<p>Mit der Eigenschaft <code>lightbox<\/code> kannst du die Funktion &#8222;Beim Anklicken erweitern&#8220; f\u00fcr Bilder aktivieren, sodass sie sich beim Anklicken in einer gr\u00f6\u00dferen Ansicht \u00f6ffnen.<\/p>\n<p>Schl\u00fcssel innerhalb der Eigenschaft <code>lightbox<\/code>:<\/p>\n<ul>\n<li><strong><code>enabled<\/code><\/strong> &#8211; Aktiviert oder deaktiviert die Funktion <strong>Lightbox<\/strong>.<\/li>\n<li><strong><code>allowEditing<\/code><\/strong> &#8211; Erm\u00f6glicht es den Nutzern, die Lightbox-Einstellung umzuschalten.<\/li>\n<\/ul>\n<p><strong>Beispiel: <\/strong>Mit dieser Konfiguration kannst du die Lightbox-Funktion f\u00fcr Bilder ein- und ausschalten:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n    \"core\/image\": {\n        \"lightbox\": {\n            \"allowEditing\": true\n        }\n    }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/lightbox-effect-toggle.png\" alt=\"Umschalten f\u00fcr Lightbox-Effekt ausgesetzt\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Umschalten f\u00fcr Lightbox-Effekt ausgesetzt<\/figcaption><\/figure>\n<h5>Position<\/h5>\n<p>Mit der Eigenschaft <code>position<\/code> kannst du die Position von Bl\u00f6cken steuern, z. B. um einen Block auf der Seite zu fixieren.<\/p>\n<p><strong>Beispiel<\/strong>: Einen Block &#8222;sticky&#8220; machen:<\/p>\n<pre><code class=\"language-json\">\"position\": {\n    \"sticky\": true\n}<\/code><\/pre>\n<h5>Schatten<\/h5>\n<p>Mit dieser Eigenschaft kannst du Schatteneffekte auf Bl\u00f6cke anwenden, entweder mit vordefinierten Voreinstellungen oder mit benutzerdefinierten Schatten.<\/p>\n<p>Schl\u00fcssel innerhalb der Eigenschaft <code>shadow<\/code>:<\/p>\n<ul>\n<li><strong><code>defaultPresets<\/code> <\/strong>&#8211; Aktiviert oder deaktiviert die Standard-Schattenvorgaben.<\/li>\n<li><strong><code>presets<\/code> <\/strong>&#8211; Erm\u00f6glicht es den Nutzern, eigene Schattenvorgaben zu definieren.<\/li>\n<\/ul>\n<p>Hier ein Beispiel, bei dem die Standardschatten deaktiviert sind und ein benutzerdefinierter Schatten mit dem Namen &#8222;Nat\u00fcrlich&#8220; definiert ist:<\/p>\n<pre><code class=\"language-json\">\"shadow\": {\n    \"defaultPresets\": false,\n    \"presets\": [\n        { \"name\": \"Natural\", \"slug\": \"natural\", \"shadow\": \"6px 6px 9px rgba(0, 0, 0, 0.2)\" }\n    ]\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/shadow-setting.png\" alt=\"Einstellung der Schattenoptionen in der Benutzeroberfl\u00e4che\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Einstellung der Schattenoptionen in der Benutzeroberfl\u00e4che<\/figcaption><\/figure>\n<p>Die Zahlen zeigen die Klickschritte im Seiteneditor, um die Benutzeroberfl\u00e4che zu demonstrieren. Der letzte Schritt zeigt den &#8222;nat\u00fcrlichen&#8220; Schatten.<\/p>\n<h5>Abst\u00e4nde<\/h5>\n<p>Diese Eigenschaft legt fest, wie die Abst\u00e4nde (Padding, Margin, Gap) im Editor gesteuert werden.<\/p>\n<p>Tasten innerhalb der Eigenschaft <code>spacing<\/code>:<\/p>\n<ul>\n<li><strong><code>blockGap<\/code><\/strong> &#8211; Steuert den Abstand zwischen Bl\u00f6cken.<\/li>\n<li><strong><code>margin<\/code><\/strong> &#8211; Erm\u00f6glicht das Festlegen von R\u00e4ndern um Bl\u00f6cke.<\/li>\n<li><strong><code>padding<\/code> <\/strong>&#8211; Bietet Optionen zum Festlegen von Abst\u00e4nden innerhalb von Bl\u00f6cken.<\/li>\n<li><strong><code>units<\/code> <\/strong>&#8211; Legt die verf\u00fcgbaren Einheiten f\u00fcr Abst\u00e4nde fest (z. B. px, rem).<\/li>\n<li><strong><code>customSpacingSize<\/code> <\/strong>&#8211; Erm\u00f6glicht es den Nutzern, benutzerdefinierte Abst\u00e4nde festzulegen.<\/li>\n<li><strong><code>spacingSizes<\/code> <\/strong>&#8211; Legt eine Reihe von voreingestellten Abstandsgr\u00f6\u00dfen fest .<\/li>\n<li><strong><code>spacingScale<\/code> <\/strong>&#8211; Erm\u00f6glicht die Skalierung der Abstandseinheiten.<\/li>\n<\/ul>\n<p><strong>Beispiel:<\/strong> Um die Benutzer\/innen auf zwei Ma\u00dfeinheiten (Pixel und rem) f\u00fcr Auff\u00fcllungen, R\u00e4nder, Breiten und H\u00f6hen zu beschr\u00e4nken und die Abstandskontrollen im Site-Editor freizugeben, setze <code>appearanceTools<\/code> auf <code>true<\/code> und konfiguriere wie folgt:<\/p>\n<pre><code class=\"language-json\">\"spacing\": {\n    \"units\": [\"px\", \"rem\"]\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/measurement-limit.png\" alt=\"Festlegen von Schattenoptionen in der Benutzeroberfl\u00e4che\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Begrenzung der Verwendung von 2 Ma\u00dfeinheiten<\/figcaption><\/figure>\n<h5>Typografie<\/h5>\n<p>Diese Eigenschaft steuert die textbezogenen Einstellungen deines Themas, z. B. Schriftgr\u00f6\u00dfe, -st\u00e4rke und Zeilenh\u00f6he.<\/p>\n<p>Schl\u00fcssel innerhalb der Eigenschaft <code>typography<\/code>:<\/p>\n<ul>\n<li><strong><code>defaultFontSizes<\/code> <\/strong>&#8211; Legt die Standardschriftgr\u00f6\u00dfen fest , die den Nutzern zur Verf\u00fcgung stehen.<\/li>\n<li><strong><code>customFontSize<\/code> <\/strong>&#8211; Aktiviert oder deaktiviert die M\u00f6glichkeit, eigene Schriftgr\u00f6\u00dfen festzulegen.<\/li>\n<li><strong><code>fontStyle<\/code> <\/strong>&#8211; Steuert den Stil der Schrift (z. B. normal, kursiv).<\/li>\n<li><strong><code>fontWeight<\/code> <\/strong>&#8211; Erm\u00f6glicht es den Nutzern, die St\u00e4rke der Schrift einzustellen (z. B. fett, leicht).<\/li>\n<li><strong><code>fluid<\/code> <\/strong>&#8211; Erm\u00f6glicht eine flie\u00dfende Typografie, die die Schriftgr\u00f6\u00dfe dynamisch an die Bildschirmgr\u00f6\u00dfe anpasst.<\/li>\n<li><strong><code>letterSpacing<\/code> <\/strong>&#8211; Steuert den Abstand zwischen den Buchstaben.<\/li>\n<li><strong><code>lineHeight<\/code> <\/strong>&#8211; Legt die H\u00f6he der einzelnen Textzeilen fest .<\/li>\n<li><strong><code>textAlign<\/code> <\/strong>&#8211; Erm\u00f6glicht die Steuerung der Textausrichtung (z. B. links, mittig, rechts).<\/li>\n<li><strong><code>textDecoration<\/code> <\/strong>&#8211; Bietet Optionen f\u00fcr die Textdekoration (z. B. Unterstreichen).<\/li>\n<li><strong><code>writingMode<\/code> <\/strong>&#8211; Legt den Schreibmodus f\u00fcr den Text fest (z. B. horizontal oder vertikal).<\/li>\n<\/ul>\n<p><strong>Beispiel<\/strong>: Um sowohl die benutzerdefinierten Schriftgr\u00f6\u00dfen als auch die ropCap-Optionen zu deaktivieren, verwende Folgendes:<\/p>\n<pre><code class=\"language-json\">\"typography\": {\n    \"customFontSize\": false,\n    \"dropCap\": false\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/font-size-drop-cap-options.png\" alt=\"Entfernen von benutzerdefinierten Schriftgr\u00f6\u00dfenoptionen und DropCap\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Entfernen von benutzerdefinierten Schriftgr\u00f6\u00dfenoptionen und DropCap<\/figcaption><\/figure>\n<p>In diesem Fall werden die beiden hervorgehobenen Tasten im Editor <strong>nicht<\/strong> angezeigt.<\/p>\n<h5>Roots-Padding bewusste Ausrichtungen<\/h5>\n<p>Wenn diese Eigenschaft auf <code>true<\/code> gesetzt ist, stellt sie sicher, dass die Ausrichtung von breiten oder breiten Bl\u00f6cken die Auff\u00fcllung des Roots-Elements der Seite (z. B. <code>&lt;html&gt;<\/code> oder <code>&lt;body&gt;<\/code>) ber\u00fccksichtigt, um eine korrekte Ausrichtung zu gew\u00e4hrleisten, auch wenn die Auff\u00fcllung angewendet wird.<\/p>\n<p><strong>Beispiel:<\/strong><\/p>\n<pre><code class=\"language-json\">\"useRootPaddingAwareAlignments\": true<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Standardm\u00e4\u00dfig ist diese Eigenschaft auf <code>false<\/code> gesetzt, was zu einem b\u00fcndigen Design f\u00fchrt.<\/p>\n<\/aside>\n\n<p>Wenn sie auf <code>true<\/code> gesetzt ist, musst du auch die Werte f\u00fcr die obere, rechte, untere und linke Auff\u00fcllung des Roots als Stil definieren. (Mehr \u00fcber Stileigenschaften weiter unten).<\/p>\n<pre><code class=\"language-json\">\"spacing\": {\n    \"padding\": {\n        \"top\": \"0\",\n        \"right\": \"100px\",\n        \"bottom\": \"0\",\n        \"left\": \"100px\"\n    }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/use-root-padding-aware-alignments-default.png\" alt=\"Die Voreinstellung useRotPaddingAwareAignments\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Die Voreinstellung useRotPaddingAwareAignments<\/figcaption><\/figure>\n<p>Wenn du die Einstellung <code>useRootPaddingAwareAlignements<\/code> zusammen mit dem rechten und linken Padding auf den Body anwendest (wie im obigen Code), ergibt sich folgendes Bild.<\/p>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/alignment-padding.png\" alt=\"Apply left and right padding when useRootPaddingAwareAlignments is set to true\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Linkes und rechtes Padding anwenden, wenn useRootPaddingAwareAlignments auf true gesetzt ist.<\/figcaption><\/figure>\n<h4>Formatvorlagen<\/h4>\n<p>Mit der Eigenschaft <code>styles<\/code> kannst du CSS-Stile auf den Stamm (Standard), bestimmte Elemente oder einzelne Bl\u00f6cke in deinem Theme anwenden.<\/p>\n<h5>Hintergrundstile<\/h5>\n<p>Du kannst die Eigenschaften des Hintergrunds steuern, z. B. Bilder, Positionierung und Anh\u00e4nge.<\/p>\n<p>Allgemeine Schl\u00fcssel f\u00fcr den Hintergrund:<\/p>\n<ul>\n<li><strong><code>backgroundImage<\/code> <\/strong>&#8211; Legt das Hintergrundbild f\u00fcr den Block oder das Element fest .<\/li>\n<li><strong><code>backgroundPosition<\/code> <\/strong>&#8211; Legt die Position des Hintergrundbildes fest (z. B. Mitte, oben rechts).<\/li>\n<li><strong><code>backgroundRepeat<\/code> <\/strong>&#8211; Legt fest<strong>, <\/strong>ob das Hintergrundbild wiederholt wird (z. B. wiederholen, nicht wiederholen).<\/li>\n<li><strong><code>backgroundSize<\/code> <\/strong>&#8211; Legt die Gr\u00f6\u00dfe des Hintergrundbildes fest (z. B. cover, contain).<\/li>\n<li><strong><code>backgroundAttachment<\/code> <\/strong>&#8211; Legt fest , ob das Hintergrundbild fixiert ist oder mit der Seite scrollt.<\/li>\n<\/ul>\n<p>Du kannst zum Beispiel ein Hintergrundbild f\u00fcr dein Theme festlegen:<\/p>\n<pre><code class=\"language-json\">\"background\": {\n   \"backgroundImage\": {\n       \"url\": \"https:\/\/joyofwp.com\/wp-content\/uploads\/2024\/09\/dots.png\"\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/bg-style-page.png\" alt=\"F\u00fcgt allen Seiten einen Hintergrundbildstil hinzu\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">F\u00fcgt allen Seiten einen Hintergrundbildstil hinzu<\/figcaption><\/figure>\n<h5>Spezifische Stile blockieren<\/h5>\n<p>Du kannst bestimmte Stile, wie Schatten, Typografie und Rahmen, auf einzelne Bl\u00f6cke anwenden.<\/p>\n<p>Tasten f\u00fcr Rahmen:<\/p>\n<ul>\n<li><strong><code>color<\/code> <\/strong>&#8211; Legt die Farbe des Rahmens fest .<\/li>\n<li><strong><code>radius<\/code> <\/strong>&#8211; Legt den Rahmenradius f\u00fcr abgerundete Ecken fest .<\/li>\n<li><strong><code>style<\/code> <\/strong>&#8211; Legt den Stil des Rahmens fest (z. B. durchgezogen, gepunktet).<\/li>\n<li><strong><code>width<\/code> <\/strong>&#8211; Legt die Breite des Rahmens fest .<\/li>\n<li><strong><code>top<\/code><\/strong>, <strong><code>right<\/code><\/strong>,\u00a0<strong><code> bottom<\/code><\/strong>,<strong> <code>left<\/code> &#8211; <\/strong>Erm\u00f6glicht es dir, f\u00fcr jede Seite einen eigenen Rahmenstil festzulegen.<\/li>\n<\/ul>\n<p>Im Folgenden wird zum Beispiel ein durchgehender roter Rahmen von 20 Pixel um die gesamte Seite herum festgelegt:<\/p>\n<pre><code class=\"language-json\">\"border\": {\n   \"color\": \"#ff0000\",\n   \"width\": \"20px\",\n   \"style\": \"solid\"\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/add-border-styles.png\" alt=\"Hinzuf\u00fcgen eines Rahmenstils f\u00fcr alle Seiten\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Hinzuf\u00fcgen eines Rahmenstils f\u00fcr alle Seiten<\/figcaption><\/figure>\n<p>Du kannst auch benutzerdefinierte CSS f\u00fcr einen bestimmten Block, ein Element oder den Stamm zuweisen.<br \/>\nDer folgende Code wendet zum Beispiel eine rote Textfarbe auf einen Tabellenblock an:<\/p>\n<pre><code class=\"language-json\">\"border\": {\n   \"color\": \"#ff0000\",\n   \"width\": \"20px\",\n   \"style\": \"solid\"\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/add-text-color-tables.png\" alt=\"Hinzuf\u00fcgen eines Textfarbstils zu allen Tabellen\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Hinzuf\u00fcgen eines Textfarbstils zu allen Tabellen<\/figcaption><\/figure>\n<h5>Farbstile<\/h5>\n<p>Mit der Eigenschaft Farbe kannst du die Einstellungen f\u00fcr Hintergrund-, Farbverlaufs- und Textfarben festlegen.<br \/>\nSchl\u00fcssel f\u00fcr <code>color<\/code>:<\/p>\n<ul>\n<li><code>background<\/code> &#8211; Legt die Hintergrundfarbe des Blocks oder Elements fest.<\/li>\n<li><code>gradient<\/code> &#8211; Legt einen Hintergrundfarbverlauf f\u00fcr den Block fest.<\/li>\n<li><code>text<\/code> &#8211; Steuert die Farbe des Textes.<\/li>\n<\/ul>\n<p>Im folgenden Beispiel wird f\u00fcr jedes Element auf jeder Seite ein schwarzer Hintergrund mit wei\u00dfem Text festgelegt:<\/p>\n<pre><code class=\"language-json\">\"color\": {\n   \"background\": \"#000000\",\n   \"text\": \"#ffffff\"\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/text-bg-styling.png\" alt=\"Einstellen der Text- und Hintergrundfarbe f\u00fcr alle Seiten\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Einstellen der Text- und Hintergrundfarbe f\u00fcr alle Seiten<\/figcaption><\/figure>\n<h5>CSS<\/h5>\n<p>Mit der Eigenschaft <code>css<\/code> kannst du benutzerdefinierte Stile an bestimmte Klassen anh\u00e4ngen und so eine genauere Kontrolle \u00fcber die Stile des Themes erhalten.<\/p>\n<p><strong>Beispiel<\/strong>: Wende benutzerdefinierte Stile auf <code>wp-block-template-parts<\/code> und <code>wp-block-button<\/code> an und f\u00fcge einen Hover-Effekt f\u00fcr die Schaltfl\u00e4che hinzu:<\/p>\n<pre><code class=\"language-json\">\"css\": \".wp-block-template-part { background-color: #777777; padding: 20px; } .wp-block-button__link:hover { background-color: #ffffff; color: #000000; }\"<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/btn-hover-style.png\" alt=\"Alle Schaltfl\u00e4chen in der Kopfzeile haben einen Schwebezustand f\u00fcr Text und Hintergrundstile\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Alle Schaltfl\u00e4chen in der Kopfzeile haben einen Schwebezustand f\u00fcr Text und Hintergrundstile<\/figcaption><\/figure>\n<p>Wie du siehst, haben die Kopf- und Fu\u00dfzeilenvorlagen die Stile <code>background-color<\/code> und <code>padding<\/code>, w\u00e4hrend der Hover-Status f\u00fcr die Schaltfl\u00e4che einen wei\u00dfen Hintergrund mit schwarzem Text hat.<\/p>\n<h5>Abmessungen<\/h5>\n<p>Mit der Eigenschaft <code>dimensions<\/code> kannst du die Breite, H\u00f6he und das <a href=\"https:\/\/developer.wordpress.org\/news\/2024\/08\/05\/registering-custom-aspect-ratios-in-wordpress-6-6\/\" target=\"_blank\" rel=\"noopener noreferrer\">Seitenverh\u00e4ltnis<\/a> von Bl\u00f6cken festlegen.<\/p>\n<p>Schl\u00fcssel f\u00fcr die Abmessungen:<\/p>\n<ul>\n<li><strong><code>aspectRatios<\/code> <\/strong>&#8211; Legt benutzerdefinierte Seitenverh\u00e4ltnisse f\u00fcr Elemente fest.<\/li>\n<li><strong><code>minHeight<\/code> <\/strong>&#8211; Legt die Mindesth\u00f6he f\u00fcr Bl\u00f6cke fest.<\/li>\n<\/ul>\n<p><strong>Beispiel<\/strong>: Erstelle ein benutzerdefiniertes Seitenverh\u00e4ltnis von 3:7 f\u00fcr einen Bildblock:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/image\": {\n       \"dimensions\": {\n           \"aspectRatio\": \"custom\"\n       }\n   }\n}<\/code><\/pre>\n<p>Das allein reicht jedoch nicht aus. Du musst den &#8222;benutzerdefinierten&#8220; Stil in den Einstellungen registrieren.<\/p>\n<pre><code class=\"language-json\">\"dimensions\": {\n   \"defaultAspectRatios\": true,\n   \"aspectRatios\": [\n       {\n           \"name\": \"Custom Ratio 3:7\",\n           \"slug\": \"custom\",\n           \"ratio\": \"3\/7\"\n       }\n   ]\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/image-custom-ratio.png\" alt=\"Hinzuf\u00fcgen einer benutzerdefinierten Ratio-Styling-Option f\u00fcr alle Bilder\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Hinzuf\u00fcgen einer benutzerdefinierten Ratio-Styling-Option f\u00fcr alle Bilder<\/figcaption><\/figure>\n<p>Hier kannst du sehen, dass die Option &#8222;Benutzerdefiniertes Verh\u00e4ltnis&#8220; hinzugef\u00fcgt worden ist. Wenn du die sieben voreingestellten Seitenverh\u00e4ltnisse entfernen m\u00f6chtest, entferne <code>\"defaultAspectRatios\":true<\/code> aus dem Einstellungsbereich.<\/p>\n<h5>Elementspezifische Stile<\/h5>\n<p>Mit der Eigenschaft <code>elements<\/code> kannst du Stile auf bestimmte HTML-Elemente wie Links, Schaltfl\u00e4chen oder \u00dcberschriften anwenden.<\/p>\n<p>Der folgende Code schaltet zum Beispiel die Textverzierung (Unterstreichung) f\u00fcr alle Links aus:<\/p>\n<pre><code class=\"language-json\">\"elements\": {\n   \"link\": {\n       \"typography\": {\n           \"textDecoration\": \"none\"\n       }\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/disable-text-decoration.png\" alt=\"Deaktivieren der Textdekoration f\u00fcr Links\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Deaktivieren der Textdekoration f\u00fcr Links<\/figcaption><\/figure>\n<h5>Filter<\/h5>\n<p>Mit der Eigenschaft <code>filter<\/code> kannst du CSS-\u00e4hnliche Filtereffekte (z. B. Unsch\u00e4rfe, Helligkeit) auf bestimmte Bl\u00f6cke wie Bilder anwenden.<\/p>\n<p><strong>Beispiel:<\/strong> Einen Weichzeichner- und Helligkeitsfilter auf einen Bildblock anwenden:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/image\": {\n       \"filter\": {\n           \"duotone\": \"blur(5px) brightness(0.8)\"\n       }\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/blur-image.png\" alt=\"Hinzuf\u00fcgen eines Unsch\u00e4rfestils zu allen Bildern\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Hinzuf\u00fcgen eines Unsch\u00e4rfestils zu allen Bildern<\/figcaption><\/figure>\n<p>Hier wurden Unsch\u00e4rfe- und Helligkeitseffekte auf den Bildblock angewendet. Andere verf\u00fcgbare Filterwerte sind:<\/p>\n<ul>\n<li><strong><code>contrast<\/code> <\/strong>&#8211; Passt den Kontrast des Elements an.<\/li>\n<li><strong><code>grayscale<\/code> <\/strong>&#8211; Wandelt das Element in Graustufen um.<\/li>\n<li><strong><code>invert<\/code> <\/strong>&#8211; Invertiert die Farben des Elements.<\/li>\n<li><strong><code>opacity<\/code> <\/strong>&#8211; Steuert die Transparenz des Elements.<\/li>\n<li><strong><code>saturate<\/code> <\/strong>&#8211; Erh\u00f6ht oder verringert die S\u00e4ttigung der Farben.<\/li>\n<li><strong><code>sepia<\/code> <\/strong>&#8211; Wendet einen Sepiaton auf das Element an.<\/li>\n<\/ul>\n<h5>Umriss<\/h5>\n<p>Die Eigenschaft <code>outline<\/code> legt Stile f\u00fcr Umrisse fest, die au\u00dferhalb des Elementrahmens gezeichnet werden, ohne den Layoutbereich zu beeinflussen.<\/p>\n<p>Schl\u00fcssel f\u00fcr Umrisse:<\/p>\n<ul>\n<li><strong><code>color<\/code> <\/strong>&#8211; Legt die Farbe des Umrisses fest .<\/li>\n<li><strong><code>offset<\/code> <\/strong>&#8211; Bestimmt den Abstand zwischen dem Rahmen und dem Umriss.<\/li>\n<li><strong><code>style<\/code> <\/strong>&#8211; Legt den Stil des Umrisses fest (z. B. gepunktet, durchgezogen).<\/li>\n<li><strong><code>width<\/code> <\/strong>&#8211; Legt die Breite des Umrisses fest .<\/li>\n<\/ul>\n<p><strong>Beispiel<\/strong>: Einen roten gepunkteten Umriss auf eine Schaltfl\u00e4che anwenden:<\/p>\n<pre><code class=\"language-json\">\"elements\": {\n   \"button\": {\n       \"outline\": {\n           \"color\": \"#ff0000\",\n           \"style\": \"dotted\",\n           \"width\": \"4px\"\n       }\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/button-outline-style.png\" alt=\"Hinzuf\u00fcgen eines Umrissstils zu allen Schaltfl\u00e4chen\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Hinzuf\u00fcgen eines Umrissstils zu allen Schaltfl\u00e4chen<\/figcaption><\/figure>\n<h5>Schattenstile<\/h5>\n<p>Mit der Eigenschaft <code>shadow<\/code> kannst du Bl\u00f6cken einen Kastenschatten zuweisen, der den Elementen Tiefe und Betonung verleiht.<\/p>\n<p><strong>Beispiel<\/strong>: Einen Schatten auf alle Bilder anwenden:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/image\": {\n       \"shadow\": \"0 10px 20px 0 rgb(0 0 225 \/ 0.50)\"\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/shadow-image.png\" alt=\"F\u00fcgt allen Bildern einen Schatten hinzu\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">F\u00fcgt allen Bildern einen Schatten hinzu<\/figcaption><\/figure>\n<h5>Abstandsstile<\/h5>\n<p>Die Eigenschaft <code>spacing<\/code> verwaltet die Stile f\u00fcr Auff\u00fcllungen, R\u00e4nder und Blockabst\u00e4nde f\u00fcr dein Theme.<\/p>\n<p>Tasten f\u00fcr Abst\u00e4nde:<\/p>\n<ul>\n<li><strong><code>blockGap<\/code> <\/strong>&#8211; Steuert den Abstand zwischen Bl\u00f6cken.<\/li>\n<li><strong><code>margin<\/code> <\/strong>&#8211; Legt die R\u00e4nder um die Bl\u00f6cke fest .<\/li>\n<li><strong><code>padding<\/code> <\/strong>&#8211; Steuert die Auff\u00fcllung innerhalb der Bl\u00f6cke.<\/li>\n<\/ul>\n<p>In diesem Beispiel unten wird der Abstand zwischen den Bl\u00f6cken auf der linken und rechten Seite festgelegt:<\/p>\n<pre><code class=\"language-json\">\"spacing\": {\n   \"padding\": {\n       \"left\": \"min(6.5rem, 8vw)\",\n       \"right\": \"min(6.5rem, 8vw)\"\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/left-right-padding.png\" alt=\"F\u00fcgt linke und rechte Padding hinzu\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">F\u00fcgt linke und rechte Padding hinzu<\/figcaption><\/figure>\n<h5>Typografische Stile<\/h5>\n<p>Die Eigenschaft <code>typography<\/code> verwaltet Schriftstile, -gr\u00f6\u00dfen und andere textbezogene Einstellungen.<\/p>\n<p>\u00dcbliche Schl\u00fcssel f\u00fcr Typografie:<\/p>\n<ul>\n<li><strong><code>fontFamily<\/code> <\/strong>&#8211; Legt die Schriftfamilie f\u00fcr den Text fest .<\/li>\n<li><strong><code>fontSize<\/code> <\/strong>&#8211; Legt die Schriftgr\u00f6\u00dfe fest .<\/li>\n<li><strong><code>fontStyle<\/code> <\/strong>&#8211; Legt den Schriftstil fest (z. B. kursiv, normal).<\/li>\n<li><strong><code>fontWeight<\/code> <\/strong>&#8211; Legt die St\u00e4rke (Dicke) der Schrift fest .<\/li>\n<li><strong><code>letterSpacing<\/code> <\/strong>&#8211; Passt die Abst\u00e4nde zwischen den Buchstaben an.<\/li>\n<li><strong><code>lineHeight<\/code> <\/strong>&#8211; Legt die Zeilenh\u00f6he (Abstand zwischen den Textzeilen) fest .<\/li>\n<li><strong><code>textAlign<\/code> <\/strong>&#8211; Legt die Textausrichtung fest (z. B. links, mittig, rechts).<\/li>\n<li><strong><code>textColumns<\/code> <\/strong>&#8211; Legt die Anzahl der Textspalten fest .<\/li>\n<li><strong><code>textDecoration<\/code> <\/strong>&#8211; Legt die Textverzierung fest (z. B. Unterstreichen).<\/li>\n<li><strong><code>writingMode<\/code> <\/strong>&#8211; Legt den Schreibmodus fest (z. B. horizontal, vertikal).<\/li>\n<li><strong><code>textTransform<\/code> <\/strong>&#8211; Steuert die Umwandlung von Text (z. B. Gro\u00dfbuchstaben, Kleinbuchstaben).<\/li>\n<\/ul>\n<p>Du kannst zum Beispiel f\u00fcr alle \u00dcberschriften eine Schriftst\u00e4rke von 300 und einen kursiven Stil festlegen:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/heading\": {\n       \"typography\": {\n           \"fontWeight\": \"300\",\n           \"fontStyle\": \"italic\"\n       }\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/heading-style.png\" alt=\"Alle \u00dcberschriften enthalten die Stileigenschaften kursiv und Gewicht\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Alle \u00dcberschriften enthalten die Stileigenschaften kursiv und Gewicht<\/figcaption><\/figure>\n<h3>Eigenschaften von Vorlagen und Mustern<\/h3>\n<p>Diese drei Eigenschaften auf oberster Ebene werden verwendet, um benutzerdefinierte Elemente in deinem Theme zu registrieren.<\/p>\n<h4>1. Benutzerdefinierte Vorlagen<\/h4>\n<p>Die Eigenschaft <code>templates<\/code> wird verwendet, um benutzerdefinierte Vorlagen f\u00fcr verschiedene Beitragstypen zu registrieren.<\/p>\n<ul>\n<li><strong><code>name<\/code><\/strong> &#8211; Der Name der Datei <code>.html<\/code> oder <code>.php<\/code>, die sich im Unterverzeichnis <code>templates<\/code> befindet.<\/li>\n<li><strong><code>title<\/code><\/strong> &#8211; Der Titel, der der Vorlage zur leichteren Identifizierung zugewiesen wird.<\/li>\n<li><strong><code>postTypes<\/code><\/strong> &#8211; Gibt die Art des Inhalts (z. B. Beitr\u00e4ge, Seiten) an, f\u00fcr den die Vorlage verwendet wird.<\/li>\n<\/ul>\n<h4>2. Vorlagenteile<\/h4>\n<p>Die Eigenschaft <code>templateParts<\/code> wird verwendet, um wiederverwendbare Teile von Vorlagen zu definieren (z. B. Kopf- und Fu\u00dfzeilen).<\/p>\n<ul>\n<li><strong><code>name<\/code> <\/strong>&#8211; Der Name der Datei <code>.html<\/code> oder <code>.php<\/code>, die sich im Unterverzeichnis <code>parts<\/code> befindet.<\/li>\n<li><strong><code>title<\/code> <\/strong>&#8211; Der Titel, der dem Vorlagenteil zur leichteren Identifizierung gegeben wird.<\/li>\n<li><strong><code>area<\/code> <\/strong>&#8211; Gibt an<strong>, <\/strong>f\u00fcr welchen Teil der Seite der Vorlagenteil gilt (z. B. <code>header<\/code>, <code>footer<\/code>, <code>sidebar<\/code>).<\/li>\n<\/ul>\n<h4>3. Muster<\/h4>\n<p>Mit der Eigenschaft <code>patterns<\/code> kannst du eine Reihe von Patterns aus dem WordPress Patterns Directory registrieren und sie im Theme verf\u00fcgbar machen.<\/p>\n<p>Hier erf\u00e4hrst du, wie du ein Muster registrieren kannst:<\/p>\n<pre><code class=\"language-json\">\"patterns\": [\n    \"my-custom-pattern-slug\"\n]<\/code><\/pre>\n<h2>Drei praktische Beispiele f\u00fcr die Arbeit mit theme.json<\/h2>\n<p>Hier sind ein paar Dinge, die du vielleicht f\u00fcr ein Theme, das du entwickelst, tun m\u00f6chtest.<\/p>\n<h3>1. Ein Muster hinzuf\u00fcgen<\/h3>\n<p>Hier siehst du, wie du zwei Muster aus dem WordPress Patterns Directory einf\u00fcgst. Hier ist das Muster &#8222;Fullscreen Cover Image Gallery&#8220; zu sehen:<\/p>\n<pre><code class=\"language-json\">\"patterns\": [\n   \"fullscreen-cover-image-gallery\",\n   \"hero-banner-with-overlap-images\"\n]<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/pattern-wordpress.png\" alt=\"Zeigt das Einf\u00fcgen eines Musters von wordpress.org\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Zeigt das Einf\u00fcgen eines Musters von wordpress.org<\/figcaption><\/figure>\n<p><strong>Anmerkungen:<\/strong><\/p>\n<ul>\n<li>Muster, die aus dem Verzeichnis <strong>Patterns<\/strong> stammen, werden nicht im Bereich <strong>Patterns<\/strong> des Website-Editors angezeigt. Diese Muster sind nur \u00fcber den <strong>Inserter<\/strong> verf\u00fcgbar.<\/li>\n<li>In diesem Beispiel f\u00fcgen wir die Top-Level-Eigenschaft <code>patterns<\/code> ein (im Gegensatz zu <code>settings<\/code> und <code>styles<\/code>, die wir in fr\u00fcheren Beispielen der K\u00fcrze halber weggelassen haben).<\/li>\n<\/ul>\n<h3>2. Hinzuf\u00fcgen einer benutzerdefinierten Schriftart<\/h3>\n<p>Wir haben zwei Schriftartendateien (<code>Roboto-Regular.ttf<\/code> und <code>Roboto-Bold.ttf<\/code>) aus der <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Fonts-Bibliothek<\/a> heruntergeladen und in das Unterverzeichnis <code>assets\/fonts\/<\/code> unseres Themas hochgeladen.<\/p>\n<p>Der folgende Code registriert die beiden Schriftarten und macht sie f\u00fcr die gesamte Website verf\u00fcgbar:<\/p>\n<pre><code class=\"language-json\">\"settings\": {\n   \"typography\": {\n       \"fontFamilies\": [\n           {\n               \"fontFamily\": \"Roboto\",\n               \"name\": \"Roboto\",\n               \"slug\": \"roboto\",\n               \"fontFace\": [\n                   {\n                       \"fontFamily\": \"Roboto Regular\",\n                       \"fontWeight\": \"400\",\n                       \"fontStyle\": \"normal\",\n                       \"src\": [\n                           \"file.\/assets\/fonts\/Roboto-Regular.ttf\"\n                       ]\n                   },\n                   {\n                       \"fontFamily\": \"Roboto Bold\",\n                       \"fontWeight\": \"700\",\n                       \"fontStyle\": \"bold\",\n                       \"src\": [\n                           \"file.\/assets\/fonts\/Roboto-Bold.ttf\"\n                       ]      \n                   }  \n               ]\n           }\n       ]\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/google-font.png\" alt=\"Zeigt die Einbindung einer Google-Schriftart\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Zeigt die Einbindung einer Google-Schriftart<\/figcaption><\/figure>\n<h3>3. Einstellen deiner Farbpalette<\/h3>\n<p>Wenn du deine Nutzer\/innen auf eine bestimmte Farbpalette beschr\u00e4nken willst, kannst du sie so konfigurieren. (Auch Farbverl\u00e4ufe und Duotones k\u00f6nnen nach deinen Vorgaben konfiguriert werden.)<\/p>\n<p><strong>Beispiel:<\/strong><\/p>\n<pre><code class=\"language-json\">\"settings\": {\n   \"color\": {\n       \"custom\": false,\n       \"defaultPalette\": false,\n       \"palette\": [\n           {\n               \"slug\": \"primary\",\n               \"color\": \"#1e8cbe\",\n               \"name\": \"Primary\"\n           },\n           {\n               \"slug\": \"secondary\",\n               \"color\": \"#21759b\",\n               \"name\": \"Secondary\"\n           },\n           {\n               \"slug\": \"tertiary\",\n               \"color\": \"#\",\n               \"name\": \"Tertiary\"\n           },\n           {\n               \"slug\": \"accent\",\n               \"color\": \"#464646\",\n               \"name\": \"Accent\"\n           }\n       ]\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/custom-theme-colors.png\" alt=\"Demonstrierte benutzerdefinierte Theme-Farben\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Demonstrierte benutzerdefinierte Theme-Farben<\/figcaption><\/figure>\n<p>Erkennst du diese vier Farben? Sie sind Teil der Farbgeschichte von WordPress.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>Dieser Artikel beleuchtet die zentrale Rolle von <code>theme.json<\/code> in der modernen WordPress-Theme-Entwicklung. Wenn du <code>theme.json<\/code> beherrschst, kannst du das visuelle Design und die Benutzeroberfl\u00e4che deines Themes vollst\u00e4ndig anpassen, ohne komplexe <a href=\"https:\/\/kinqsta.com\/de\/blog\/was-ist-php\/\">PHP-<\/a> oder CSS-\u00c4nderungen vornehmen zu m\u00fcssen.<\/p>\n<p>Wenn du verstehst, wie du Eigenschaften wie <code>appearanceTools<\/code> effektiv nutzen kannst, hast du mehr Kontrolle und Effizienz bei der Erstellung oder Verfeinerung von WordPress-Themes, was diese Datei zu einem unverzichtbaren Werkzeug f\u00fcr Entwickler macht, die flexible, benutzerfreundliche Themes erstellen wollen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Das Verst\u00e4ndnis f\u00fcr die Struktur und die Eigenschaften der theme.json Datei zu verstehen, ist grundlegend f\u00fcr die Entwicklung von Blockthemes. Diese Datei dient als zentraler Konfigurationspunkt &#8230;<\/p>\n","protected":false},"author":313,"featured_media":71863,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[999,1009],"class_list":["post-71862","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-wordpress-entwicklung","topic-wordpress-themes"],"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>Eigenschaften und Schl\u00fcssel-Wert-Paaren in theme.json<\/title>\n<meta name=\"description\" content=\"Lerne, mit Eigenschaften und Schl\u00fcssel-Wert-Paaren in theme.json zu arbeiten, um Einstellungen und Stile f\u00fcr WordPress-Block-Themes anzupassen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Arbeiten mit Eigenschaften und Schl\u00fcssel-Wert-Paaren in theme.json\" \/>\n<meta property=\"og:description\" content=\"Lerne, mit Eigenschaften und Schl\u00fcssel-Wert-Paaren in theme.json zu arbeiten, um Einstellungen und Stile f\u00fcr WordPress-Block-Themes anzupassen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/\" \/>\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-11-18T09:00:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-21T10:47:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Bud Kraus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Lerne, mit Eigenschaften und Schl\u00fcssel-Wert-Paaren in theme.json zu arbeiten, um Einstellungen und Stile f\u00fcr WordPress-Block-Themes anzupassen.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/11\/working-with-properties-and-key-value-pairs-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=\"Bud Kraus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"22\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/\"},\"author\":{\"name\":\"Bud Kraus\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed\"},\"headline\":\"Arbeiten mit Eigenschaften und Schl\u00fcssel-Wert-Paaren in theme.json\",\"datePublished\":\"2024-11-18T09:00:02+00:00\",\"dateModified\":\"2024-11-21T10:47:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/\"},\"wordCount\":3975,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/\",\"url\":\"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/\",\"name\":\"Eigenschaften und Schl\u00fcssel-Wert-Paaren in theme.json\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"datePublished\":\"2024-11-18T09:00:02+00:00\",\"dateModified\":\"2024-11-21T10:47:13+00:00\",\"description\":\"Lerne, mit Eigenschaften und Schl\u00fcssel-Wert-Paaren in theme.json zu arbeiten, um Einstellungen und Stile f\u00fcr WordPress-Block-Themes anzupassen.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"contentUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Entwicklung\",\"item\":\"https:\/\/kinqsta.com\/de\/thema\/wordpress-entwicklung\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Arbeiten mit Eigenschaften und Schl\u00fcssel-Wert-Paaren in theme.json\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/de\/#website\",\"url\":\"https:\/\/kinqsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.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:\/\/kinqsta.com\/de\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed\",\"name\":\"Bud Kraus\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g\",\"caption\":\"Bud Kraus\"},\"description\":\"Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.\",\"url\":\"https:\/\/kinqsta.com\/de\/blog\/author\/budkraus\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Eigenschaften und Schl\u00fcssel-Wert-Paaren in theme.json","description":"Lerne, mit Eigenschaften und Schl\u00fcssel-Wert-Paaren in theme.json zu arbeiten, um Einstellungen und Stile f\u00fcr WordPress-Block-Themes anzupassen.","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:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/","og_locale":"de_DE","og_type":"article","og_title":"Arbeiten mit Eigenschaften und Schl\u00fcssel-Wert-Paaren in theme.json","og_description":"Lerne, mit Eigenschaften und Schl\u00fcssel-Wert-Paaren in theme.json zu arbeiten, um Einstellungen und Stile f\u00fcr WordPress-Block-Themes anzupassen.","og_url":"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2024-11-18T09:00:02+00:00","article_modified_time":"2024-11-21T10:47:13+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","type":"image\/png"}],"author":"Bud Kraus","twitter_card":"summary_large_image","twitter_description":"Lerne, mit Eigenschaften und Schl\u00fcssel-Wert-Paaren in theme.json zu arbeiten, um Einstellungen und Stile f\u00fcr WordPress-Block-Themes anzupassen.","twitter_image":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json-1024x512.png","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Bud Kraus","Gesch\u00e4tzte Lesezeit":"22\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/"},"author":{"name":"Bud Kraus","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed"},"headline":"Arbeiten mit Eigenschaften und Schl\u00fcssel-Wert-Paaren in theme.json","datePublished":"2024-11-18T09:00:02+00:00","dateModified":"2024-11-21T10:47:13+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/"},"wordCount":3975,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/","url":"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/","name":"Eigenschaften und Schl\u00fcssel-Wert-Paaren in theme.json","isPartOf":{"@id":"https:\/\/kinqsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","datePublished":"2024-11-18T09:00:02+00:00","dateModified":"2024-11-21T10:47:13+00:00","description":"Lerne, mit Eigenschaften und Schl\u00fcssel-Wert-Paaren in theme.json zu arbeiten, um Einstellungen und Stile f\u00fcr WordPress-Block-Themes anzupassen.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/#primaryimage","url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","contentUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/de\/blog\/theme-json-eigenschaften-schluessel-werte-paare\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"WordPress Entwicklung","item":"https:\/\/kinqsta.com\/de\/thema\/wordpress-entwicklung\/"},{"@type":"ListItem","position":3,"name":"Arbeiten mit Eigenschaften und Schl\u00fcssel-Wert-Paaren in theme.json"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/de\/#website","url":"https:\/\/kinqsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinqsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.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:\/\/kinqsta.com\/de\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed","name":"Bud Kraus","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g","caption":"Bud Kraus"},"description":"Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.","url":"https:\/\/kinqsta.com\/de\/blog\/author\/budkraus\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/71862","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/users\/313"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/comments?post=71862"}],"version-history":[{"count":9,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/71862\/revisions"}],"predecessor-version":[{"id":71923,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/71862\/revisions\/71923"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71862\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71862\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71862\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71862\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71862\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71862\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71862\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71862\/translations\/es"},{"href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/71862\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/media\/71863"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/media?parent=71862"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/tags?post=71862"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/topic?post=71862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}