{"id":70822,"date":"2024-08-05T08:14:09","date_gmt":"2024-08-05T07:14:09","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=70822&#038;preview=true&#038;preview_id=70822"},"modified":"2024-08-09T10:35:21","modified_gmt":"2024-08-09T09:35:21","slug":"theme-json","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/theme-json\/","title":{"rendered":"Entfessle die Kraft von theme.json: Passe dein WordPress-Theme nach Belieben an"},"content":{"rendered":"<p>WordPress-Entwickler haben mehr Kontrolle als je zuvor, da sich das WordPress-\u00d6kosystem st\u00e4ndig weiterentwickelt. <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-full-site-editing\/\">Full Site Editing (FSE)<\/a> ebnet allen Nutzern den Weg, ein Theme von Grund auf zu erstellen, vor allem wenn sie die Datei <code>theme.json<\/code> verwenden.<\/p>\n<p>Entwickler k\u00f6nnen auch die Datei <code>theme.json<\/code> nutzen. Mit dieser Konfigurationsdatei kannst du dein WordPress-Theme detailliert anpassen, ohne dass du dich mit den komplizierten Programmiersprachen auseinandersetzen musst.<\/p>\n<p>In diesem umfassenden Leitfaden erfahren wir, was die <code>theme.json<\/code> Datei zu bieten hat und wie sie mit der vollst\u00e4ndigen Bearbeitung der Website zusammenh\u00e4ngt. Am Ende wirst du wissen, wie du ihre F\u00e4higkeiten nutzen kannst, um moderne, leistungsf\u00e4hige Websites zu erstellen, unabh\u00e4ngig von deinen Entwicklungsf\u00e4higkeiten.<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>Einf\u00fchrung in die Datei theme.json<\/h2>\n<p>Im Kern ist <code>theme.json<\/code> eine Konfigurationsdatei, die die Einstellungen und Stile f\u00fcr dein WordPress-Theme definiert. Sie verwendet die JavaScript Object Notation (JSON), also strukturierte Daten, die die Schl\u00fcssel-Wert-Paare der \u00fcbergeordneten Sprache erben, damit du deinen Code schreiben kannst.<\/p>\n<figure id=\"attachment_183346\" aria-describedby=\"caption-attachment-183346\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183346 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/json-code.png\" alt=\"Ein JSON-Code-Ausschnitt, der eine Glossarstruktur definiert. Er enth\u00e4lt einen Eintrag f\u00fcr SGML (Standard Generalized Markup Language) mit Details wie dem Akronym, der Abk\u00fcrzung, der Definition und verwandten Begriffen.\" width=\"1200\" height=\"482\"><figcaption id=\"caption-attachment-183346\" class=\"wp-caption-text\">Beispiel JSON-Code<\/figcaption><\/figure>\n<p>Die Datei <code>theme.json<\/code> ist der Schl\u00fcssel f\u00fcr die Kontrolle \u00fcber verschiedene Aspekte deines Themes. Dazu geh\u00f6ren Farbpaletten, Typografie-Einstellungen, Layout-Optionen, Stile pro Block, benutzerdefinierte CSS-Eigenschaften und vieles mehr. Wir werden diese Aspekte im Laufe des Artikels genauer erl\u00e4utern.<\/p>\n<p>Das h\u00f6rt sich zwar noch nicht so revolution\u00e4r an, aber <code>theme.json<\/code> ist wichtig f\u00fcr die Zukunft der WordPress-Entwicklung. Der n\u00e4chste Abschnitt erkl\u00e4rt, warum.<\/p>\n<h2>Warum theme.json f\u00fcr die WordPress-Theme-Entwicklung wichtig ist<\/h2>\n<p>Die typische Herangehensweise von WordPress an die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/\">Theme-Entwicklung<\/a> und die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-plugin-verzeichnis-veroeffentlicht\/\">Erstellung von Plugins<\/a> dreht sich oft um die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-beitrags-vorlagen\/\">Bearbeitung von Vorlagendateien<\/a> mit PHP, die Verwendung der Datei <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-functions-php\/\">functions.php<\/a> und andere technische Aufgaben.<\/p>\n<p>Die Datei <code>theme.json<\/code> stellt eine bedeutende Ver\u00e4nderung dar, insbesondere f\u00fcr die Entwicklung von Themes. Hierf\u00fcr gibt es einige Gr\u00fcnde:<\/p>\n<ul>\n<li>Die Datei stellt einen einzigen, organisierten Ort dar, an dem du die Einstellungen und Stile deines Themes definieren kannst. Dadurch werden die verstreuten CSS- und PHP-Dateien \u00fcberfl\u00fcssig.<\/li>\n<li>Dieser zentrale Ansatz der Deklaration von Stilen und Einstellungen in <code>theme.json<\/code> bedeutet, dass WordPress effizienteres CSS generieren kann. Im Vergleich zur Verwendung eines <a href=\"https:\/\/make.wordpress.org\/themes\/2021\/10\/04\/the-performance-impact-of-using-jquery-in-wordpress-themes\/\" target=\"_blank\" rel=\"noopener noreferrer\">Frameworks wie jQuery<\/a> ist eine Leistungssteigerung m\u00f6glich.<\/li>\n<li>Du hast mehr Kontrolle \u00fcber das Styling deiner Website und einzelner Bl\u00f6cke als je zuvor. Dadurch wird die Themeentwicklung f\u00fcr Nutzer\/innen mit weniger technischem Wissen demokratisiert.<\/li>\n<li>Mit der Weiterentwicklung von FSE wird die Datei <code>theme.json<\/code> eine entscheidende Rolle dabei spielen, wie Themes, globale Stile und der Blockeditor zusammenspielen.<\/li>\n<\/ul>\n<p>Die Kombination all dieser Aspekte f\u00fchrt zu einer standardisierten Methode, um Einstellungen und Stile f\u00fcr dein Theme zu definieren. Wer verschiedene Themes verstehen und mit ihnen arbeiten m\u00f6chte, kann mit <code>theme.json<\/code> robustere, flexiblere und benutzerfreundlichere WordPress-Themes erstellen. Noch besser ist, dass diese Kreationen mit der zuk\u00fcnftigen Ausrichtung der Plattform \u00fcbereinstimmen.<\/p>\n<h2>Wo du die Datei theme.json findest<\/h2>\n<p>Zun\u00e4chst einmal wirst du in &#8222;traditionellen&#8220; oder &#8222;klassischen&#8220; Themes keine <code>theme.json<\/code> Datei finden. Um diese Datei zu finden und zu nutzen, brauchst du ein eigenes Block-Theme. Abgesehen davon kannst du die Datei in jedem Theme erstellen, solange du WordPress 5.8 oder h\u00f6her verwendest.<\/p>\n<p>Der typische Speicherort f\u00fcr die Datei <code>theme.json<\/code> befindet sich in <strong>wp-content\/themes\/[dein-theme]<\/strong>. Wenn die Datei dort nicht zu finden ist, solltest du deinen bevorzugten Code-Editor \u00f6ffnen und die Datei wie erforderlich erstellen. Mach dir vorerst keine Gedanken \u00fcber den Inhalt &#8211; dazu kommen wir gleich.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-183342 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/code-editor.png\" alt width=\"1200\" height=\"829\"><\/p>\n<p>Wenn du eine neue Datei von Grund auf erstellen musst, aber auch die Feinheiten des Inhalts sehen willst, bevor du deine eigene anpasst, schau dir das <a href=\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-four-theme\/\">Standard-Theme Twenty Twenty-Four<\/a> an.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-183354 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/twenty-twenty-four-json.png\" alt width=\"1200\" height=\"773\"><\/p>\n<p>Als Block-Theme hat es eine <code>theme.json<\/code> Datei, die du dir ansehen kannst. Es kann n\u00fctzlich sein, sie ge\u00f6ffnet zu haben, wenn wir uns in den n\u00e4chsten Abschnitten die Struktur ansehen.<\/p>\n<h2>Was du brauchst, um mit theme.json zu arbeiten<\/h2>\n<p>Nat\u00fcrlich wird nicht jeder in der Lage sein, die Konfigurationsdatei zu \u00f6ffnen und sich an die Arbeit zu machen. Du brauchst noch einige grundlegende F\u00e4higkeiten und Kenntnisse, um ein Theme zu erstellen und anzupassen:<\/p>\n<ul>\n<li><strong>Grundlegende JSON-Kenntnisse.<\/strong> Wir denken, dass du dir das schnell aneignen kannst, aber dennoch ist es wichtig, mit der JSON-Syntax und -Struktur vertraut zu sein.<\/li>\n<li><strong>Verst\u00e4ndnis von CSS.<\/strong> Du wirst feststellen, dass viele Objekte und Eigenschaften von <code>theme.json<\/code> mit den entsprechenden CSS-Eigenschaften \u00fcbereinstimmen. CSS-Kenntnisse sind hier von Vorteil.<\/li>\n<li><strong>Kenntnisse des WordPress-Block-Editors.<\/strong> Wenn du verstehst, wie Bl\u00f6cke funktionieren und welche Anpassungsm\u00f6glichkeiten sie bieten, wird dir das beim Aufbau helfen.<\/li>\n<\/ul>\n<p>Es ist zwar nicht unbedingt notwendig, aber wir empfehlen dir, zumindest die wichtigsten FSE-Konzepte zu verstehen, damit du die Datei <code>theme.json<\/code> effektiver nutzen kannst. Au\u00dferdem erf\u00e4hrst du vielleicht, wie sich deine \u00c4nderungen auf die Konfigurationen des Endnutzers auswirken werden. Es wird auch F\u00e4lle geben, in denen du weiterhin <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-html\/\">HTML<\/a> und <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> verwenden musst, um deine Vision zu verwirklichen.<\/p>\n<p>Schlie\u00dflich gibt es noch ein paar technische &#8222;Extras&#8220;, die wir empfehlen w\u00fcrden:<\/p>\n<ul>\n<li><strong>Einen Code-Editor.<\/strong> Mit einem <a href=\"https:\/\/kinsta.com\/de\/blog\/php-editor\/\">guten Editor<\/a>, der JSON-Syntaxhervorhebung und -validierung bietet, wird dein Arbeitsablauf noch angenehmer.<\/li>\n<li><strong>Eine lokale Entwicklungsumgebung.<\/strong> Wenn du ein Tool <a href=\"https:\/\/kinsta.com\/de\/devkinsta\/\">wie DevKinsta<\/a> f\u00fcr die Arbeit an deinem Theme verwendest, kannst du schnell experimentieren und deine \u00c4nderungen testen, ohne dass die Live-Site beeintr\u00e4chtigt wird.<\/li>\n<\/ul>\n<p>Mit diesen Tools und Kenntnissen bist du gut ger\u00fcstet, um dein WordPress-Theme mit <code>theme.json<\/code> anzupassen.<\/p>\n<h2>Ein Blick auf die Anatomie, Struktur und Hierarchie der theme.json<\/h2>\n<p>Die Datei <code>theme.json<\/code> hat nat\u00fcrlich eine Struktur, die du verstehen musst. Sie hat auch eine Hierarchie und einige einzigartige Elemente, die n\u00e4her erkl\u00e4rt werden m\u00fcssen.<\/p>\n<p>Das ist wahrscheinlich der komplexeste Teil der Konfigurationsdatei, aber auch dann wirst du die Konzepte leicht verstehen.<\/p>\n<p>Fangen wir mit der Struktur an und gehen dann zu den anderen Elementen von <code>theme.json<\/code> \u00fcber.<\/p>\n<h3>Grundlegende Struktur<\/h3>\n<p>Da die Datei dem JSON-Format folgt, verstehst du vielleicht schon das allgemeine Konzept der Struktur. Zun\u00e4chst einmal ist das gesamte Dateiobjekt in geschweifte Klammern eingeschlossen, ebenso wie einige der verschiedenen anderen Objekte darin. Jedes Objekt besteht aus Schl\u00fcssel-Wert-Paaren, wobei die Schl\u00fcssel in einfachen oder doppelten Anf\u00fchrungszeichen stehen und die Zeile mit einem Komma abgeschlossen wird.<\/p>\n<p>Das absolute Minimum, das eine <code>theme.json<\/code> Datei braucht, sind die Objekte <code>version<\/code>, <code>settings<\/code> und <code>styles<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 2,\n    \"settings\": {\n      \/\/ Global settings go here\n    },\n    \"styles\": {\n      \/\/ Global styles go here\n    }\n}<\/code><\/pre>\n<p>Die Objekte <code>settings<\/code> und <code>styles<\/code> sind einfach, aber <code>version<\/code> erfordert mehr Erkl\u00e4rung. Dieser Wert ist eine ganze Zahl, die der API-Version entspricht, die du zum Lesen deiner Datei verwendest. Die aktuelle API-Version ist <code>3<\/code>, aber auch die Version <code>2<\/code> ist \u00fcblich, und du kannst <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/theme-json-reference\/theme-json-migrations\/\" target=\"_blank\" rel=\"noopener noreferrer\">von \u00e4lteren Versionen migrieren<\/a>.<\/p>\n<p>Die meisten <code>theme.json<\/code> Dateistrukturen <a href=\"https:\/\/schemas.wp.org\/trunk\/theme.json\">enthalten auch ein Schema<\/a>. Kurz gesagt, kannst du damit mit der Autovervollst\u00e4ndigung in Code-Editoren arbeiten und die Datei validieren lassen. Du f\u00fcgst es am Anfang der Datei hinzu:<\/p>\n<pre><code class=\"language-json\">{\n    \"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n    \"version\": 2,\n    \"settings\": {\n    },\n    \"styles\": {\n    }\n}<\/code><\/pre>\n<p>Von hier aus f\u00fcgst du verschiedene Eigenschaften und Objekte zu <strong>Einstellungen<\/strong> und <strong>Stilen<\/strong> hinzu, um deine Datei zu erweitern.<\/p>\n<h3>Hierarchie<\/h3>\n<p>Die Datei <code>theme.json<\/code> folgt einer hierarchischen Struktur und ist nur eine Ebene in der Gesamthierarchie der <strong>Einstellungen<\/strong> und <strong>Stile<\/strong> auf deiner Website. Wenn du \u00fcber <a href=\"https:\/\/kinsta.com\/de\/blog\/fortgeschrittene-css-techniken\/\">CSS-Kenntnisse<\/a> verf\u00fcgst, wird es dir leichter fallen, dies zu verstehen, denn diese Datei ist <a href=\"https:\/\/kinsta.com\/de\/blog\/css-best-practices\/\">\u00e4hnlich komplex wie CSS<\/a>.<\/p>\n<p>Kurz gesagt, die Anpassungen, die du an <code>theme.json<\/code> vornimmst, werden nicht immer im Frontend deiner Website angezeigt. Die Benutzerkonfigurationen haben Vorrang vor allem anderen. Das bedeutet, dass alle \u00c4nderungen, die du im WordPress-Bildschirm <strong>Erscheinungsbild &gt; Editor<\/strong> vornimmst, auch im Frontend angezeigt werden:<\/p>\n<figure id=\"attachment_183351\" aria-describedby=\"caption-attachment-183351\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183351 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/site-editor-screen.png\" alt=\"Die WordPress-Site-Editor-Oberfl\u00e4che. In der linken Seitenleiste werden Optionen zur Designanpassung angezeigt, w\u00e4hrend im Hauptbereich ein Design f\u00fcr die Startseite der Website mit einer \u00dcberschrift zum Thema Innovation und Nachhaltigkeit sowie einem Bild einer modernen architektonischen Struktur angezeigt wird.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183351\" class=\"wp-caption-text\">Die Hauptschnittstelle des Site Editors in WordPress<\/figcaption><\/figure>\n<p>Wenn du ein <a href=\"https:\/\/kinsta.com\/de\/blog\/child-theme-wordpress-erstellen\/\">Child-Theme<\/a> verwendest und eine <code>theme.json<\/code> Datei einf\u00fcgst, \u00fcberschreibt diese alle \u00c4nderungen, die du nicht mit dem Site-Editor vorgenommen hast. Ebenso \u00fcberschreibt alles, was du in der Konfigurationsdatei des Parent-Themes definierst, die Standardeinstellungen und -stile von WordPress. Auf diese Datei konzentrieren wir uns in diesem Beitrag, obwohl WordPress auch eine eigene <code>theme.json<\/code> Datei hat.<\/p>\n<p>Auch wenn es in diesem Beitrag nicht im Mittelpunkt steht, kannst du die Werte auch mit <a href=\"https:\/\/developer.wordpress.org\/news\/2023\/07\/how-to-modify-theme-json-data-using-server-side-filters\/\" target=\"_blank\" rel=\"noopener noreferrer\">Hooks und Filtern<\/a> \u00fcberschreiben. Mit diesen dynamischen Filtern kannst du Plugins und Themes erstellen, die auch die Einstellungen und Stile von Themen und Plattformen \u00e4ndern.<\/p>\n<h3>Block-Grammatik<\/h3>\n<p>Wenn du in den WordPress-Block- oder Site-Editor gehst, einen Beitrag oder eine Seite \u00f6ffnest und den Code-Editor einschaltest, wirst du viele HTML-Kommentare im Inhalt sehen:<\/p>\n<figure id=\"attachment_183341\" aria-describedby=\"caption-attachment-183341\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183341 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/code-block-editor.png\" alt=\"Die WordPress-Code-Editor-Oberfl\u00e4che im Block-Editor. Sie zeigt den HTML-Code f\u00fcr die Datenschutzrichtlinie einer Website an. Der Code enth\u00e4lt \u00dcberschriften und Abs\u00e4tze mit Details zur Website-Adresse, zu den Kommentarrichtlinien und zur Verwendung von Gravatar.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183341\" class=\"wp-caption-text\">Der Code-Bearbeitungsbildschirm im WordPress-Block-Editor<\/figcaption><\/figure>\n<p>Das liegt daran, dass Block-Themes keine PHP-Dateien verwenden, sondern HTML-Dateien zusammen mit Kommentaren und Block-Markup, um deine Seite zu erstellen. Die Kombination dieser Elemente ergibt die &#8222;Block-Grammatik&#8220;, die du brauchst, um deine <code>theme.json<\/code> Datei zu schreiben.<\/p>\n<p>Bei Bl\u00f6cken, die Inhalte enthalten, wie z. B. dem Absatzblock, umschlie\u00dft du diese Inhalte:<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:paragraph --&gt;\n    &lt;p&gt;Content goes here!&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n<\/code><\/pre>\n<p>In anderen F\u00e4llen brauchst du nur einzeilige Kommentare oder solche, die sich selbst schlie\u00dfen. Bei einigen Bl\u00f6cken kombinierst du Typen, um deine Layouts und Designs zu erstellen. Du kannst diese Kommentare auch verschachteln:<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:columns --&gt;\n&lt;div class=\"wp-block-columns\"&gt;\n    &lt;!-- wp:column --&gt;\n        &lt;div class=\"wp-block-column\"&gt;&lt;\/div&gt;\n    &lt;!-- \/wp:column --&gt;\n    \n\n    &lt;!-- wp:column --&gt;\n        &lt;div class=\"wp-block-column\"&gt;&lt;\/div&gt;\n    &lt;!-- \/wp:column --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:columns --&gt;<\/code><\/pre>\n<p>Hier erstellen wir einen Spaltenblock mit einem Wrapper-Kommentar. Darin k\u00f6nnen wir HTML hinzuf\u00fcgen, um die Spalten zu gestalten und einzelne Spaltenumbr\u00fcche einzuf\u00fcgen. Am Frontend ist das ganz einfach, denn du wirst oft Bl\u00f6cke ineinander schachteln.<\/p>\n<p>Um das Markup f\u00fcr einen bestimmten Block zu finden, kannst du im <a href=\"https:\/\/developer.wordpress.org\/block-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">Handbuch des Block-Editors<\/a> herumst\u00f6bern, bis du das findest, was du brauchst. Am einfachsten ist es jedoch, wenn du den Block zu WordPress hinzuf\u00fcgst, den Code-Editor \u00f6ffnest und das Markup von dort kopierst.<\/p>\n<p>Auf die \u00c4nderungen, die du in diesem Markup vornehmen kannst, gehen wir in einem sp\u00e4teren Abschnitt ein.<\/p>\n<h2>Wie theme.json und die WordPress-Site-Bearbeitung zusammenpassen<\/h2>\n<p>Aus der Diskussion \u00fcber die Hierarchie wirst du wissen, dass <code>theme.json<\/code> ein wichtiger Teil von FSE ist. Beide arbeiten zusammen, um dir eine umfassende Theme-L\u00f6sung f\u00fcr WordPress zu bieten. So ist zum Beispiel die Schnittstelle f\u00fcr globale Stile im Wesentlichen die visuelle Darstellung deiner <code>theme.json<\/code> Einstellungen.<\/p>\n<figure id=\"attachment_183345\" aria-describedby=\"caption-attachment-183345\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183345 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/global-styles.png\" alt=\"Der WordPress-Site-Editor, wobei auf der linken Seite ein Teil des Inhalts einer Website mit dunkelrotem Text angezeigt wird. Auf der rechten Seite konzentriert sich das Bedienfeld \"Stile\" auf die Farbeinstellungen. Es enth\u00e4lt eine Farbpalette und Optionen zum Anpassen von Farben f\u00fcr verschiedene Website-Elemente wie Text, Hintergrund, Links und Schaltfl\u00e4chen. Au\u00dferdem ist ein Kontrastpr\u00fcfer sichtbar, der den Hexadezimalcode #A62B0C f\u00fcr das ausgew\u00e4hlte Farbschema anzeigt.\" width=\"1200\" height=\"695\"><figcaption id=\"caption-attachment-183345\" class=\"wp-caption-text\">Die Seitenleiste des Site Editors, die die globalen Stiloptionen eines Themes anzeigt<\/figcaption><\/figure>\n<p>Du kannst die Einstellungen entweder im Panel Globale Stile oder in der Konfigurationsdatei \u00e4ndern und WordPress wird die entsprechenden Werte bei Bedarf aktualisieren. W\u00e4hrend die Einstellungen im Site Editor Vorrang haben, dient <code>theme.json<\/code> als Grundlage f\u00fcr die eigenen Stile deines Themes. Der Endnutzer kann mit den Globalen Stilen die Standardeinstellungen durch seine eigenen Anpassungen ersetzen, ohne dass er Code eingeben oder die Datei <code>theme.json<\/code> bearbeiten muss.<\/p>\n<p>Dar\u00fcber hinaus werden die CSS-Eigenschaften, die du in <code>theme.json<\/code> definierst, in der Global Styles-Oberfl\u00e4che verf\u00fcgbar. So k\u00f6nnen die Nutzer\/innen diese Eigenschaften f\u00fcr ein einheitlicheres Styling auf der gesamten Website nutzen. Au\u00dferdem kannst du auch spezifische Blockstile und -einstellungen definieren, die du \u00fcber das <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-admin\/\">WordPress-Dashboard<\/a> weiter anpassen kannst.<\/p>\n<p>Kurz gesagt: <code>theme.json<\/code> bietet eine detailliertere Kontrolle \u00fcber Einstellungen, Stile und mehr. Es ist ein Tool f\u00fcr Entwickler, das unkomplizierter und \u00fcbersichtlicher ist als klassische Ans\u00e4tze. Im Gegensatz dazu gibt die Oberfl\u00e4che der Globalen Stile jedem die M\u00f6glichkeit, ein Theme nach seinen eigenen Vorstellungen anzupassen. Bei der weiteren Entwicklung von Themes wirst du sehen, wie beide zusammenarbeiten, um Website-Designs und -Layouts zu erstellen.<\/p>\n<h2>Arbeiten mit den Eigenschaften der Datei theme.json<\/h2>\n<p>Wenn du die Grundlagen verstanden hast, kannst du mit den Objekten und Eigenschaften von <code>theme.json<\/code> arbeiten. Wir werden nicht alle Anwendungsf\u00e4lle und M\u00f6glichkeiten abdecken k\u00f6nnen. Am Ende dieses Leitfadens wirst du jedoch in der Lage sein, Themes zu erstellen, die alle Funktionen bieten und im Frontend gut aussehen.<\/p>\n<h3>Settings<\/h3>\n<p>Mit der Eigenschaft <code>settings<\/code> kannst du festlegen, welche Funktionen du im Site-Editor anbietest und wie sie sich verhalten. Es handelt sich um eine Eigenschaft der obersten Ebene, die in der Regel mehrere Verschachtelungsebenen aufweist.<\/p>\n<p>Wenn wir uns die Stile und ihre Variationen ansehen, wirst du sehen, dass es einige \u00dcberschneidungen zwischen diesen Optionen gibt, aber beide Arten spielen bei der Erstellung deines Themes eine Rolle.<\/p>\n<p>Du hast eine bestimmte Anzahl von Eigenschaften zur Verf\u00fcgung:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"settings\": {\n        \"appearanceTools\": false,\n        \"blocks\": {},\n        \"border\": {},\n        \"color\": {},\n        \"custom\": {},\n        \"dimensions\": {},\n        \"layout\": {},\n        \"position\": {},\n        \"shadow\": {},\n        \"spacing\": {},\n        \"typography\": {},\n        \"useRootPaddingAwareAlignments\": false\n    }\n}<\/code><\/pre>\n<p>Das offizielle <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/#settings-documentation\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress-Handbuch f\u00fcr Theme-Entwickler<\/a> enth\u00e4lt eine Referenz f\u00fcr alle diese Einstellungen (und Stile). Hier ist jedoch ein kurzer \u00dcberblick \u00fcber ein paar wichtige Einstellungen, die einer n\u00e4heren Erl\u00e4uterung bed\u00fcrfen:<\/p>\n<ul>\n<li><code>appearanceTools<\/code><strong>.<\/strong> Diese <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/appearance-tools\/\" target=\"_blank\" rel=\"noopener noreferrer\">Eigenschaft<\/a> erm\u00f6glicht eine Reihe anderer Einstellungen und ist als Zeitersparnis gedacht. Mit ihr kannst du Rahmenoptionen, Zeilenh\u00f6hen f\u00fcr die Typografie, Auff\u00fcllungen, R\u00e4nder und vieles mehr einstellen.<\/li>\n<li><code>blocks<\/code><strong>.<\/strong> W\u00e4hrend du dich bei deiner Arbeit haupts\u00e4chlich mit globalen Einstellungen und Stilen befassen wirst, kannst du dies mit der Eigenschaft <code>blocks<\/code> auf Blockbasis tun. Auf dieses Konzept gehen wir hier nicht n\u00e4her ein, aber das <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/blocks\/\" target=\"_blank\" rel=\"noopener noreferrer\">Theme Developer Handbook<\/a> enth\u00e4lt eine hervorragende Dokumentation zu diesem Aspekt von <code>theme.json<\/code>.<\/li>\n<li><code>custom<\/code><strong>.<\/strong> Diese einzigartige Eigenschaft hat keine Funktionalit\u00e4t, da du entscheidest, was sie tut. Du verwendest sie, um <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/custom\/\" target=\"_blank\" rel=\"noopener noreferrer\">benutzerdefinierte CSS-Eigenschaften<\/a> f\u00fcr dein Theme zu erstellen, und der Spielraum, den du dabei hast, ist gro\u00df.<\/li>\n<li><code>useRootPaddingAwareAlignments<\/code><strong>.<\/strong> Auch hier handelt es sich um eine komplexe Eigenschaft, auf die wir nicht n\u00e4her eingehen werden. Sie hilft dir im Wesentlichen dabei, die <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/use-root-padding-aware-alignments\/\" target=\"_blank\" rel=\"noopener noreferrer\">Stile f\u00fcr das horizontale Padding<\/a> deines Themes zu platzieren und bietet dir eine Menge M\u00f6glichkeiten. Du verwendest sie, wenn du Elemente in voller Breite bis zum Rand des Bildschirms ausdehnen willst, w\u00e4hrend du das Root-Element mit einem Padding versiehst.<\/li>\n<\/ul>\n<p>Beachte, dass du keine Eigenschaften zu <code>theme.json<\/code> hinzuf\u00fcgen musst, mit denen du nicht arbeiten m\u00f6chtest. Wenn du zum Beispiel nicht mit <code>appearanceTools<\/code> arbeiten m\u00f6chtest, kannst du es einfach weglassen, anstatt es mit <code>false<\/code> zu definieren.<\/p>\n<h4>Wie du Einstellungen in der theme.json definierst<\/h4>\n<p>Wenn es darum geht, Einstellungen zu definieren, hat jede Eigenschaft eine Reihe von Untereigenschaften aus Schl\u00fcssel-Wert-Paaren. Auf diese Weise kannst du zum Beispiel <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/color\/\" target=\"_blank\" rel=\"noopener noreferrer\">Farbpaletten<\/a> erstellen:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"settings\": {\n        \"color\": {\n          \"palette\": [\n            {\n              \"color\": \"#0073aa\",\n              \"name\": \"Primary\",\n              \"slug\": \"primary\"\n            },\n            {\n              \"color\": \"#23282d\",\n              \"name\": \"Secondary\",\n              \"slug\": \"secondary\"\n            }\n          ],\n\u2026<\/code><\/pre>\n<p>Andere Eigenschaften haben einfache boolesche Werte, mit denen du diese Funktionen im Site Editor ein- oder ausschalten kannst:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"settings\": {\n        \"color\": {\n            \"background\": true,\n            \"defaultPalette\": true,\n            \"link\": true,\n            \"text\": true\n        }\n    }\n}<\/code><\/pre>\n<p>Sobald du deine Einstellungen festgelegt hast, kannst du ein Styling f\u00fcr sie einf\u00fchren. Lass uns das jetzt untersuchen.<\/p>\n<h3>Stile und Stilvariationen<\/h3>\n<p>W\u00e4hrend <code>settings<\/code> den Zugriff auf bestimmte Styling-Optionen definiert, kannst du mit der Eigenschaft <code>styles<\/code> die globalen Stile f\u00fcr dein Theme festlegen. Auch hier handelt es sich um eine Top-Level-Eigenschaft, die auf mehreren Ebenen verschachtelt wird. Du kannst auf bestimmte Elemente oder Bl\u00f6cke abzielen oder sogar benutzerdefinierte CSS-Eigenschaften verwenden.<\/p>\n<p>Es ist wichtig, dass du hier Themenstile definierst, damit du sie im Seiteneditor aufrufen und anpassen kannst. Du kannst mit einer <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/styles\/styles-reference\/\" target=\"_blank\" rel=\"noopener noreferrer\">Reihe von Elementen<\/a> arbeiten:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"styles\": {\n        \"border\": {},\n        \"color\": {},\n        \"dimensions\": {},\n        \"filter\": {},\n        \"shadow\": {},\n        \"spacing\": {},\n        \"typography\": {},\n        \"css\": {}\n    }\n}<\/code><\/pre>\n<p>Viele davon wirst du jedoch nur selten als Eigenschaften der zweiten Ebene verwenden. Stattdessen werden einige haupts\u00e4chlich mit Bl\u00f6cken oder Elementen arbeiten. Zum Beispiel:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n    \"blocks\": {\n        \"core\/group\": {\n            \"color\": {\n                \"text\": \"#000000\",\n                \"background\": \"#ffffff\",\n                \"link\": \"#777777\"\n            }\n\u2026<\/code><\/pre>\n<p>F\u00fcr globale Stile bearbeitest du die Wurzel &#8211; das entspricht dem <code>&lt;body&gt;<\/code> Tag deiner Seite. F\u00fcr bestimmte Elemente kannst du eine \u00e4hnliche Struktur wie bei den Bl\u00f6cken verwenden, diesmal jedoch mit der Eigenschaft <code>elements<\/code>:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n    \"elements\": {\n        \"button\": {\n            \"color\": {\n                \"text\": \"#ffffff\",\n                \"background\": \"#aa3f33\"\n            }\n\u2026<\/code><\/pre>\n<p>Wenn du dir die \u00c4nderungen im Seiteneditor ansiehst, solltest du sehen, dass sie umgesetzt wurden. Das Markup generiert auch CSS f\u00fcr alle Stile, die du erstellst:<\/p>\n<figure id=\"attachment_183344\" aria-describedby=\"caption-attachment-183344\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183344 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/generate-css.png\" alt=\"Eine Startseite mit dem Titel \"Ein Bekenntnis zu Innovation und Nachhaltigkeit\" und einer Schaltfl\u00e4che \"\u00dcber uns\". Die untere H\u00e4lfte zeigt die HTML-Struktur der Website im DevTools-Fenster des Brave-Browsers.\" width=\"1200\" height=\"720\"><figcaption id=\"caption-attachment-183344\" class=\"wp-caption-text\">Das Frontend einer Website zeigt die DevTools des Browsers und hebt das generierte CSS f\u00fcr ein Element hervor<\/figcaption><\/figure>\n<p>Beachte, dass du auch Pseudo-Klassen f\u00fcr Elemente wie Hover- und Fokus-Stile erstellen kannst:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"elements\": {\n    \"button\": {\n        \"color\": {\n            \"text\": \"#ffffff\",\n            \"background\": \"#aa3f33\"\n        },\n        \":hover\": {\n            \"color\": {\n                \"background\": \"#822f27\"\n            }\n\u2026<\/code><\/pre>\n<p>Das <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/styles\/applying-styles\/\" target=\"_blank\" rel=\"noopener noreferrer\">Anwenden von Stilen<\/a> geht noch weiter in die Tiefe, und das ist einer der fantastischen Vorteile der Verwendung von <code>theme.json<\/code>.<\/p>\n<h4>Stilvariationen<\/h4>\n<p>Bevor wir weitermachen, solltest du \u00fcber Stilvariationen Bescheid wissen. Du kannst die verschiedenen Farbpaletten und Typografiestile in der FSE-Oberfl\u00e4che sehen:<\/p>\n<figure id=\"attachment_183352\" aria-describedby=\"caption-attachment-183352\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183352 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/style-variations-fse.png\" alt=\"Die WordPress-Site-Editor-Oberfl\u00e4che zeigt auf der linken Seite die Stilvariationen eines Themes mit verschiedenen Schrift- und Farboptionen an. Im Hauptinhaltsbereich wird eine \u00dcberschrift \"Ein Bekenntnis zu Innovation und Nachhaltigkeit\" mit einer Unter\u00fcberschrift, der Schaltfl\u00e4che \"\u00dcber uns\" und einem Hero-Bild eines modernen Geb\u00e4udes angezeigt.\" width=\"1200\" height=\"571\"><figcaption id=\"caption-attachment-183352\" class=\"wp-caption-text\">Die Stil-Seitenleiste im Site-Editor, die verschiedene Varianten zeigt<\/figcaption><\/figure>\n<p>Diese kannst du jedoch nicht in <code>theme.json<\/code> programmieren. Stattdessen erstellst du alternative Versionen der Datei, gibst ihnen einen eindeutigen Namen und speicherst sie im <strong>Styles-Verzeichnis<\/strong> deines Themes:<\/p>\n<figure id=\"attachment_183355\" aria-describedby=\"caption-attachment-183355\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183355 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/variations-code.png\" alt=\"Die macOS-Benutzeroberfl\u00e4che zeigt zwei Fenster. Das Hintergrundfenster zeigt einen Datei-Explorer mit mehreren JSON-Dateien f\u00fcr verschiedene Farbschemata. Das Vordergrundfenster zeigt einen Code-Editor, der f\u00fcr green.json ge\u00f6ffnet ist und die Einstellungen f\u00fcr die Themefarbe f\u00fcr ein gr\u00fcnes Farbschema enth\u00e4lt.\" width=\"1200\" height=\"822\"><figcaption id=\"caption-attachment-183355\" class=\"wp-caption-text\">Ein Code-Editor, der die JSON-Dateien der Style-Variationen zeigt<\/figcaption><\/figure>\n<p>Beachte, dass der Titel im Markup f\u00fcr jede alternative JSON-Datei einzigartig ist. Er ist jedoch ein optionales Feld &#8211; wir empfehlen dir jedoch, ihn aus Gr\u00fcnden der \u00dcbersichtlichkeit und der besten Erfahrung zu verwenden.<\/p>\n<h3>Benutzerdefinierte Vorlagen und Vorlagenteile<\/h3>\n<p>\u00c4hnlich wie bei Stilvariationen kannst du auf <code>theme.json<\/code> benutzerdefinierte Vorlagen und zugeh\u00f6rige Vorlagenteile registrieren. Die Registrierung des Markups ist ganz einfach:<\/p>\n<pre><code class=\"language-json\">\"customTemplates\": [\n    {\n        \"name\": \"my-template\",\n        \"title\": \"My Template\",\n        \"postTypes\": [\n            \"page\",\n            \"post\"\n        ]\n    }\n]<\/code><\/pre>\n<p>\u00dcber die Eigenschaft <code>customTemplates<\/code> musst du drei Elemente definieren:<\/p>\n<ul>\n<li><code>name<\/code><strong>.<\/strong> Dies entspricht einer Vorlage, die du im <strong>Templates-Verzeichnis<\/strong> deines Themes erstellst, z. B. <strong>\/template\/my-template.html<\/strong>.<\/li>\n<li><code>title<\/code><strong>.<\/strong> Dies ist die lesbare Version des Namens der Vorlage.<\/li>\n<li><code>postTypes<\/code><strong>.<\/strong> Ohne Definition ist dies standardm\u00e4\u00dfig eine Seite, aber du kannst eine Reihe von Beitragstypen angeben, f\u00fcr die die Vorlage geeignet ist.<\/li>\n<\/ul>\n<p>Die Nutzer k\u00f6nnen alle Vorlagen, die du registrierst, im Website- oder Block-Editor ausw\u00e4hlen:<\/p>\n<figure id=\"attachment_183353\" aria-describedby=\"caption-attachment-183353\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183353 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/template-site-editor.png\" alt=\"Der WordPress-Block-Editor zeigt Details zu einer ver\u00f6ffentlichten Seite an, darunter Status, Ver\u00f6ffentlichungsdatum, Link, Autor und Vorlage. Es gibt ein Dropdown-Men\u00fc mit Optionen zum Bearbeiten, Austauschen, Anzeigen oder Erstellen einer neuen Vorlage.\" width=\"1200\" height=\"576\"><figcaption id=\"caption-attachment-183353\" class=\"wp-caption-text\">Im WordPress-Site-Editor kannst du eine Vorlage bearbeiten, austauschen, erstellen oder anzeigen<\/figcaption><\/figure>\n<p>Wenn es um Vorlagenteile geht, musst du sie nicht registrieren, aber wir empfehlen es. Die Struktur ist \u00e4hnlich wie bei der Registrierung von Vorlagen:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"templateParts\": [\n    {\n        \"area\": \"header\",\n        \"name\": \"header\",\n        \"title\": \"Header\"\n    },\n\u2026<\/code><\/pre>\n<p>Hier entsprechen der Name und der Titel denselben Definitionen wie bei vollst\u00e4ndigen Vorlagen. Der Bereich bezieht sich darauf, wo der Teil hingeh\u00f6rt: <code>header<\/code>, <code>footer<\/code> oder <code>uncategorized<\/code> sind die Standardwerte, aber du kannst Vorlagenteile jedem beliebigen Bereich zuweisen.<\/p>\n<p>Wir empfehlen dir, dich auch damit zu besch\u00e4ftigen, wie du <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/template-parts\/#including-a-template-part\" target=\"_blank\" rel=\"noopener noreferrer\">diese Vorlagenteile anzeigen<\/a> kannst, da sie ohne zus\u00e4tzlichen Code nicht angezeigt werden k\u00f6nnen. Trotzdem ist es ganz einfach, sie zu registrieren.<\/p>\n<h3>Patterns<\/h3>\n<p>Zum Schluss kommen wir zu den Blockmustern. Du kannst eine beliebige Anzahl von ihnen in deiner <code>theme.json<\/code> Datei mit einem Top-Level-Array b\u00fcndeln. Du kannst jedes geeignete Muster aus der <a href=\"https:\/\/wordpress.org\/patterns\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress-Musterbibliothek<\/a> in deine Datei aufnehmen:<\/p>\n<figure id=\"attachment_183348\" aria-describedby=\"caption-attachment-183348\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183348 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/pattern-library-wordpress.png\" alt=\"Der Suchbildschirm der WordPress-Musterbibliothek zeigt ein Raster mit Vorlagen f\u00fcr das Design von Websites an. Die Vorlagen enthalten verschiedene Banner- und Kopfzeilenentw\u00fcrfe mit Bildern, Text und Schaltfl\u00e4chen.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183348\" class=\"wp-caption-text\">Die WordPress-Musterbibliothek<\/figcaption><\/figure>\n<p>Die Definition des Arrays ist einfach: Du verwendest die Eigenschaft <code>patterns<\/code> und den Slug des zugeh\u00f6rigen Musters aus der URL der Bibliothek:<\/p>\n<figure id=\"attachment_183349\" aria-describedby=\"caption-attachment-183349\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183349 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/pattern-slug.png\" alt=\"Eine Nahaufnahme einer Browser-Adressleiste, die den Slug aus der URL in der Symbolleiste hervorhebt. Der Rest des Bildschirms zeigt ein orangefarbenes Heldenbildmuster mit einer gro\u00dfen \u00dcberschrift, einer kleinen Beschreibung und einer Schaltfl\u00e4che \"Jetzt kaufen\".\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183349\" class=\"wp-caption-text\">Auswahl des Slugs eines Musters aus der URL in einem Webbrowser<\/figcaption><\/figure>\n<p>Mit diesem Slug kannst du das <code>patterns<\/code> Markup auff\u00fcllen:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"patterns\": [\n        \"fullwidth-vertically-aligned-headline-on-right-with-description-on-left\"\n    ]\n}<\/code><\/pre>\n<p>Du kannst sie aus dem Musterverzeichnis des Blockeditors ausw\u00e4hlen:<\/p>\n<figure id=\"attachment_183347\" aria-describedby=\"caption-attachment-183347\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183347 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/pattern-directory.png\" alt=\"Die WordPress-Block-Editor-Oberfl\u00e4che zeigt links ein Seitenleistenmen\u00fc mit Blockelementen und Mustern und rechts eine Vorschau verschiedener Bannerdesigns. Das Hauptbanner zeigt den fettgedruckten Text \"LET 'EM ROLL BIG JOHN PATTON\" auf orangefarbenem Hintergrund.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183347\" class=\"wp-caption-text\">Das WordPress-Musterverzeichnis im Blockeditor<\/figcaption><\/figure>\n<p>Diese einfache M\u00f6glichkeit, die Assets der Musterbibliothek in deine Themes zu bringen, ist praktisch und wertvoll. Das ist ein weiterer Grund daf\u00fcr, dass die <code>theme.json<\/code> Datei unter WordPress-Theme-Entwicklern immer beliebter wird.<\/p>\n<h2>Der Arbeitsablauf f\u00fcr die Anpassung deiner WordPress-Website mit theme.json<\/h2>\n<p>Wenn du die wichtigsten Komponenten von <code>theme.json<\/code> verstanden hast, ist die Entwicklung deines Arbeitsablaufs f\u00fcr die Verwendung der Datei ein wichtiger Schritt. Sie stellt eine neue Art der Theme-Entwicklung dar und muss daher anders gehandhabt werden als klassische Methoden.<\/p>\n<p>Unser Ansatz w\u00e4re es, die Schema-URL einzurichten, eine API-Version auszuw\u00e4hlen und zuerst deine globalen Einstellungen zu definieren. Dazu geh\u00f6ren z. B. die Farbpalette, die Typografieoptionen und die Layouteinstellungen. In den meisten F\u00e4llen w\u00e4re es auch von Vorteil, die <code>appearanceTools<\/code> zu aktivieren:<\/p>\n<pre><code class=\"language-json\">\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n\"version\": 3,\n   \"settings\": {\n\"appearanceTools\": true,\n     \"color\": {\n       \"palette\": [\n         {\n           \"name\": \"Primary\",\n\"slug\": \"primary\",\n           \"color\": \"#0073aa\"\n         },\n         {\n      \"name\": \"Secondary\",\n        \"slug\": \"secondary\",\n           \"color\": \"#23282d\"\n         }\n       ]\n     },\n     \"typography\": {\n\"fluid\": true,\n       \"fontSizes\": [\n         {\n           \"size\": \"13px\",\n           \"slug\": \"small\",\n           \"name\": \"Small\"\n         },\n         {\n\"size\": \"16px\",\n           \"slug\": \"normal\",\n           \"name\": \"Normal\"\n\u2026<\/code><\/pre>\n<p>Als N\u00e4chstes kannst du mithilfe der von dir definierten Slugs benutzerdefinierte CSS-Eigenschaften erstellen. Vielleicht hast du zum Beispiel eigene Schriftschnitte erstellt:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"custom\": {\n    \"fontWeight\": {\n        \"light\": 300,\n        \"regular\": 400,\n        \"medium\": 500,\n        \"bold\": 700\n    },\n\u2026<\/code><\/pre>\n<p>Wenn du mit deinen Einstellungen fertig bist, ist es an der Zeit, Stile festzulegen.<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n    \"color\": {\n        \"background\": \"var(--wp--preset--color--base)\",\n        \"text\": \"var(--wp--preset--color--main)\"\n    },\n\u2026<\/code><\/pre>\n<p>Die Anpassung der Blockstile ist der n\u00e4chste Schritt, der einen gro\u00dfen Teil deiner <code>theme.json<\/code> Datei ausmachen kann.<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n    \"block\": {\n        \"core\/separator\": {\n            \"color\": {\n            \"text\": \"var(--wp--preset--color--main)\"\n            },\n        \"typography\": {\n            \"fontSize\": \"var(--wp--preset--font-size--large)\"\n            }\n        },\n        \"core\/site-tagline\": {\n            \"spacing\": {\n                \"margin\": {\n                    \"bottom\": \"20px\"\n                }\n            },\n            \"typography\": {\n                \"fontSize\": \"var(--wp--preset--font-size--small)\"\n            }\n        },\n        \"core\/site-title\": {\n            \"typography\": {\n                \"fontSize\": \"var(--wp--preset--font-size--medium)\",\n                \"fontWeight\": \"var(--wp--custom--font-weight--semi-bold)\",\n                \"lineHeight\": \"var(--wp--custom--line-height--none)\"\n        },\n\u2026<\/code><\/pre>\n<p>Schlie\u00dflich musst du alle benutzerdefinierten Vorlagen und Vorlagenteile entwerfen und sie in <code>theme.json<\/code> registrieren. Dies ist auch der Zeitpunkt, um alle Block-Muster zu registrieren, die du verwenden m\u00f6chtest, und sie gegebenenfalls zu erstellen.<\/p>\n<h3>Kinsta als Teil deines Workflows f\u00fcr die Entwicklung und Anpassung deines Themes nutzen<\/h3>\n<p>Bevor du deine \u00c4nderungen live schaltest, solltest du alles testen. Bislang hast du wahrscheinlich mit einem lokalen Entwicklungstool wie <a href=\"https:\/\/kinsta.com\/de\/devkinsta\/\">DevKinsta<\/a> gearbeitet:<\/p>\n<figure id=\"attachment_183343\" aria-describedby=\"caption-attachment-183343\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183343 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/devkinsta.png\" alt=\"Die DevKinsta-Oberfl\u00e4che f\u00fcr eine einzelne Website. Sie zeigt Details wie die WordPress-Version, den Webserver, die PHP-Version und den Datenbanktyp sowie eine Vorschau der Startseite der Website an.\" width=\"1200\" height=\"592\"><figcaption id=\"caption-attachment-183343\" class=\"wp-caption-text\">Die DevKinsta-Oberfl\u00e4che<\/figcaption><\/figure>\n<p>Es ist aber auch wichtig, dass du deine Entwicklung auf einer Live-Site \u00fcberpr\u00fcfst. Mit der <a href=\"https:\/\/kinsta.com\/de\/docs\/devkinsta\/devkinsta-integration\/#push-changes-to-staging\">Kinsta-Integration<\/a> von DevKinsta kannst du eine Website in eine Standard- oder <a href=\"https:\/\/kinsta.com\/de\/wordpress-hosting\/staging\/\">Premium-Staging-Umgebung<\/a> \u00fcbertragen:<\/p>\n<figure id=\"attachment_183350\" aria-describedby=\"caption-attachment-183350\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183350 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/push-to-kinsta.png\" alt=\"Die DevKinsta-Oberfl\u00e4che zeigt Website-Informationen und Steuerelemente an. Das Dropdown-Men\u00fc der Schaltfl\u00e4che \"Synchronisieren\" ist ge\u00f6ffnet und zeigt die Optionen \"Push to Kinsta\" und \"Pull from Kinsta\" an.\" width=\"1200\" height=\"417\"><figcaption id=\"caption-attachment-183350\" class=\"wp-caption-text\">Die Sync-Optionen in DevKinsta<\/figcaption><\/figure>\n<p>Von dort aus kannst du dein Theme in unserer erstklassigen Cloud-Architektur testen und hast die volle Kontrolle \u00fcber die \u00c4nderungen, die du live schaltest.<\/p>\n<p>Au\u00dferdem kannst du unser komplettes Backup-Management nutzen, mit dem du t\u00e4gliche automatische Backups sowohl in der Live- als auch in der Staging-Umgebung wiederherstellen kannst. Au\u00dferdem werden alle unsere Staging-Umgebungen mit DevTools ausgeliefert, mit denen du die Leistung deiner Website \u00fcberwachen kannst, bevor du sie live schaltest.<\/p>\n<h2>theme.json oder Full Site Editing verwenden?<\/h2>\n<p>Angesichts der \u00dcberschneidungen zwischen <code>theme.json<\/code> und dem Full Site Editing fragst du dich vielleicht, warum du das eine dem anderen vorziehen solltest. Tats\u00e4chlich eignen sich beide f\u00fcr unterschiedliche Szenarien und sollten zusammen verwendet werden.<\/p>\n<p><code>theme.json<\/code> ist zum Beispiel in den folgenden Situationen die erste Wahl:<\/p>\n<ul>\n<li>Du entwickelst Themes und erstellst ein neues Theme von Grund auf.<\/li>\n<li>JSON ist eine Sprache, die du verstehst und mit der du gut umgehen kannst.<\/li>\n<li>Du m\u00f6chtest eine programmatische Methode, um Standardstile und -einstellungen f\u00fcr dein Theme zu definieren.<\/li>\n<li>Die Stile und Einstellungen, die du implementieren willst, brauchen mehr Kontrolle als die Standardeinstellungen im Site Editor.<\/li>\n<\/ul>\n<p>Zugegeben, der letzte Punkt ist eine Nische, denn FSE spiegelt die Funktionalit\u00e4t von <code>theme.json<\/code> fast genau wider. In den folgenden Szenarien ist Full Site Editing f\u00fcr die meisten Nutzer sinnvoller:<\/p>\n<ul>\n<li>Du bist ein Website-Betreiber, der <a href=\"https:\/\/kinsta.com\/de\/blog\/wie-du-dein-wordpress-theme-anpasst\/\">ein bestehendes Theme anpassen<\/a> m\u00f6chte.<\/li>\n<li>Mit JSON bist du nicht vertraut.<\/li>\n<li>Visuelle Schnittstellen sind f\u00fcr deinen Anpassungs- und Entwicklungsworkflow sinnvoller.<\/li>\n<li>Du willst schnelle Anpassungen vornehmen, ohne dass du viel programmieren musst.<\/li>\n<\/ul>\n<p>In der Praxis wird das Theme eine Konfigurationsdatei ben\u00f6tigen, um seine Grundlagen zu definieren. Von da an \u00fcbernimmt die Hierarchie, und die Website-Betreiber k\u00f6nnen FSE nutzen, um weitere Anpassungen vorzunehmen.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>Die Konfigurationsdatei <code>theme.json<\/code> ist revolution\u00e4r f\u00fcr die Entwicklung von WordPress-Themes. Sie gibt dir ein zentrales Zuhause f\u00fcr die Einstellungen und Stile deines Themes und erm\u00f6glicht es dir, flexiblere, wartbare und anpassbare Themes zu erstellen.<\/p>\n<p>Du verwendest die Datei zusammen mit dem Site-Editor in WordPress, um das endg\u00fcltige Design einer Website zu erstellen. Die Optionen, die du in <code>theme.json<\/code> einstellst, dienen als Standard, den der Endnutzer weiter anpasst. Die gute Nachricht ist, dass das Kodieren dieser Datei einfacher ist als das \u00c4ndern einer Reihe von PHP- und CSS-Dateien &#8211; und sie ist die Zukunft des WordPress-Designs.<\/p>\n<p>Hast du noch Fragen zur Verwendung der <code>theme.json<\/code> Datei in WordPress? Lass es uns in den Kommentaren unten wissen!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress-Entwickler haben mehr Kontrolle als je zuvor, da sich das WordPress-\u00d6kosystem st\u00e4ndig weiterentwickelt. Full Site Editing (FSE) ebnet allen Nutzern den Weg, ein Theme von Grund &#8230;<\/p>\n","protected":false},"author":199,"featured_media":70823,"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-70822","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>Ultimativer Leitfaden zur Anpassung von WordPress theme.json - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Die Entwicklung von Themes mit WordPress verwendet jetzt die Datei theme.json. In diesem Beitrag erf\u00e4hrst du alles \u00fcber diese wichtige Konfigurationsdatei!\" \/>\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\/theme-json\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Entfessle die Kraft von theme.json: Passe dein WordPress-Theme nach Belieben an\" \/>\n<meta property=\"og:description\" content=\"Die Entwicklung von Themes mit WordPress verwendet jetzt die Datei theme.json. In diesem Beitrag erf\u00e4hrst du alles \u00fcber diese wichtige Konfigurationsdatei!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/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-08-05T07:14:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-09T09:35:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/unleashing-the-power-of-themejson.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1461\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Die Entwicklung von Themes mit WordPress verwendet jetzt die Datei theme.json. In diesem Beitrag erf\u00e4hrst du alles \u00fcber diese wichtige Konfigurationsdatei!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/unleashing-the-power-of-themejson-1024x512.jpg\" \/>\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=\"20\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/theme-json\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/theme-json\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Entfessle die Kraft von theme.json: Passe dein WordPress-Theme nach Belieben an\",\"datePublished\":\"2024-08-05T07:14:09+00:00\",\"dateModified\":\"2024-08-09T09:35:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/theme-json\/\"},\"wordCount\":3625,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/unleashing-the-power-of-themejson.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/theme-json\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/theme-json\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/theme-json\/\",\"name\":\"Ultimativer Leitfaden zur Anpassung von WordPress theme.json - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/theme-json\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/unleashing-the-power-of-themejson.jpg\",\"datePublished\":\"2024-08-05T07:14:09+00:00\",\"dateModified\":\"2024-08-09T09:35:21+00:00\",\"description\":\"Die Entwicklung von Themes mit WordPress verwendet jetzt die Datei theme.json. In diesem Beitrag erf\u00e4hrst du alles \u00fcber diese wichtige Konfigurationsdatei!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/theme-json\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/theme-json\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/theme-json\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/unleashing-the-power-of-themejson.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/unleashing-the-power-of-themejson.jpg\",\"width\":1461,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/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\":\"Entfessle die Kraft von theme.json: Passe dein WordPress-Theme nach Belieben an\"}]},{\"@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":"Ultimativer Leitfaden zur Anpassung von WordPress theme.json - Kinsta\u00ae","description":"Die Entwicklung von Themes mit WordPress verwendet jetzt die Datei theme.json. In diesem Beitrag erf\u00e4hrst du alles \u00fcber diese wichtige Konfigurationsdatei!","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\/theme-json\/","og_locale":"de_DE","og_type":"article","og_title":"Entfessle die Kraft von theme.json: Passe dein WordPress-Theme nach Belieben an","og_description":"Die Entwicklung von Themes mit WordPress verwendet jetzt die Datei theme.json. In diesem Beitrag erf\u00e4hrst du alles \u00fcber diese wichtige Konfigurationsdatei!","og_url":"https:\/\/kinsta.com\/de\/blog\/theme-json\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2024-08-05T07:14:09+00:00","article_modified_time":"2024-08-09T09:35:21+00:00","og_image":[{"width":1461,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/unleashing-the-power-of-themejson.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Die Entwicklung von Themes mit WordPress verwendet jetzt die Datei theme.json. In diesem Beitrag erf\u00e4hrst du alles \u00fcber diese wichtige Konfigurationsdatei!","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/unleashing-the-power-of-themejson-1024x512.jpg","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Jeremy Holcombe","Gesch\u00e4tzte Lesezeit":"20\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/theme-json\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/theme-json\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Entfessle die Kraft von theme.json: Passe dein WordPress-Theme nach Belieben an","datePublished":"2024-08-05T07:14:09+00:00","dateModified":"2024-08-09T09:35:21+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/theme-json\/"},"wordCount":3625,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/unleashing-the-power-of-themejson.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/theme-json\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/theme-json\/","url":"https:\/\/kinsta.com\/de\/blog\/theme-json\/","name":"Ultimativer Leitfaden zur Anpassung von WordPress theme.json - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/theme-json\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/unleashing-the-power-of-themejson.jpg","datePublished":"2024-08-05T07:14:09+00:00","dateModified":"2024-08-09T09:35:21+00:00","description":"Die Entwicklung von Themes mit WordPress verwendet jetzt die Datei theme.json. In diesem Beitrag erf\u00e4hrst du alles \u00fcber diese wichtige Konfigurationsdatei!","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/theme-json\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/theme-json\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/theme-json\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/unleashing-the-power-of-themejson.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/08\/unleashing-the-power-of-themejson.jpg","width":1461,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/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":"Entfessle die Kraft von theme.json: Passe dein WordPress-Theme nach Belieben an"}]},{"@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\/70822","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=70822"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/70822\/revisions"}],"predecessor-version":[{"id":70858,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/70822\/revisions\/70858"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70822\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70822\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70822\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70822\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70822\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70822\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70822\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70822\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70822\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/70823"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=70822"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=70822"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=70822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}