{"id":46527,"date":"2022-01-04T13:09:04","date_gmt":"2022-01-04T12:09:04","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=46527&#038;preview=true&#038;preview_id=46527"},"modified":"2023-07-27T14:16:21","modified_gmt":"2023-07-27T13:16:21","slug":"twenty-twenty-two","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/","title":{"rendered":"Ein tiefer Einblick in Twenty Twenty-Two und WordPress Block Themes"},"content":{"rendered":"<p>Obwohl etwas sp\u00e4ter als urspr\u00fcnglich geplant, bekommen wir ein neues WordPress Standard-Theme. Sein Name ist Twenty Twenty-Two!<\/p>\n<p>Das neue WordPress Standard-Theme kommt mit der <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-5-9\/\">WordPress 5.9 Version<\/a>. Wir waren neugierig, mehr \u00fcber das neue Theme zu erfahren und haben Twenty Twenty-Two auf einer <a href=\"https:\/\/kinsta.com\/de\/devkinsta\/\">lokalen Entwicklungsumgebung<\/a> mit <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-5-9\/\">WordPress 5.9<\/a> installiert und getestet.<\/p>\n<p>Wir zeigen dir unsere Ergebnisse, bevor wir unsere Gedanken zusammenfassen und dir einen ausf\u00fchrlichen \u00dcberblick \u00fcber die Besonderheiten des neuen WordPress-Themes geben.<\/p>\n<figure id=\"attachment_110731\" aria-describedby=\"caption-attachment-110731\" style=\"width: 2560px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110731 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2.jpg\" alt=\"Twenty Twenty-Two Vorchau\" width=\"2560\" height=\"1752\"><figcaption id=\"caption-attachment-110731\" class=\"wp-caption-text\">Eine Vorschau auf Twenty Twenty-Two, das neue WordPress Standard-Theme (Bildquelle: <a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/06\/introducing-twenty-twenty-two\/\">WordPress.org<\/a>)<\/figcaption><\/figure>\n<p>Twenty<a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/06\/introducing-twenty-twenty-two\/\">Twenty-Two<\/a> wurde als das flexibelste, leichteste und anpassungsf\u00e4higste Standard-Theme aller Zeiten entwickelt. Es bietet eine gro\u00dfartige Spielwiese, um Bl\u00f6cke, Muster und Vorlagen zu testen.<\/p>\n<p>Als Block-Theme hilft es dir, Full Site Editing, Globale Stile, Navigationsbl\u00f6cke und die neuen Bildergalerien besser kennenzulernen &#8211; die am meisten erwarteten Funktionen von WordPress 5.9.<\/p>\n<p>Wir m\u00fcssen gleich sagen, dass <strong>Twenty Twenty-Two das erste Standard-Block-Theme ist<\/strong>!<\/p>\n<p>Eines der ehrgeizigsten Ziele des neuen Themes ist es, den <strong>Nutzern mehr M\u00f6glichkeiten zu geben<\/strong>. Mit den vielen Mustern und Vorlagen, die von Anfang an zur Verf\u00fcgung stehen, k\u00f6nnen Nutzer\/innen mit nur wenigen Klicks komplexe Layouts erstellen. Der Rest ist reine Stilanpassung.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Twenty Twenty-Two wird mit WordPress 5.9 ver\u00f6ffentlicht. Das Theme befindet sich zum Zeitpunkt der Erstellung dieses Artikels noch in der Entwicklung und was hier berichtet wird, kann sich bis zur endg\u00fcltigen Ver\u00f6ffentlichung noch erheblich \u00e4ndern.<\/p>\n<\/aside>\n\n<p>Aus technischer Sicht unterscheidet sich das Schreiben \u00fcber Twenty Twenty-Two nicht wesentlich von dem Schreiben \u00fcber die neuesten und leistungsst\u00e4rksten Funktionen von WordPress 5.9. Aber Twenty Twenty-Two bietet uns ein Vergr\u00f6\u00dferungsglas, mit dem wir die neuen Funktionen zur Webseiten-Bearbeitung besser einsch\u00e4tzen und uns ein besseres Bild von der Zukunft der Plattform machen k\u00f6nnen.<\/p>\n<p>Hier stellen wir dir also das neue Theme vor.<\/p>\n<p>Als Erstes werden wir den <strong>neuen Bearbeitungsfluss<\/strong> erkunden, den Nutzer\/innen mit WordPress 5.9 und Twenty Twenty-Two erleben werden.<\/p>\n<p>Danach tauchen wir in die wichtigsten Funktionen des Block-Themes ein, die in Twenty Twenty-Two implementiert sind. Du lernst die <strong>globalen Stile<\/strong>, <strong>Blockmuster<\/strong>, <strong>Vorlagen<\/strong> und <strong>Vorlagenteile<\/strong> kennen.<\/p>\n<p>Aber es gibt noch viel mehr \u00fcber Twenty Twenty-Two und WordPress-Blockthemen zu sagen. Als Bonuskapitel geben wir dir einen kurzen \u00dcberblick dar\u00fcber, wie du die Funktionen von Twenty Twenty-Two mit Hilfe der Datei <strong>theme.json<\/strong> erweitern kannst.<\/p>\n<p>https:\/\/twitter.com\/kjellr\/status\/1445800581189160968<\/p>\n<p>Machen wir uns gleich an die Arbeit und tauchen wir ein in das brandneue Twenty Twenty-Two WordPress Standard-Theme.<\/p>\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>Twenty Twenty-Two bringt einen neuen Webseiten-Bearbeitungsfluss mit sich<\/h2>\n<p>Mit WordPress 5.9 wurden mehrere Funktionen zur vollst\u00e4ndigen Bearbeitung von Webseiten in den Kern von WordPress integriert. Webseiten-Besitzer, die die neueste WordPress-Version mit einem Block-Theme wie Twenty Twenty-Two verwenden, werden bald in der Lage sein:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/\">Beitr\u00e4ge und Seiten<\/a> mit mehr Bl\u00f6cken und Mustern <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/\">erstellen und bearbeiten<\/a><\/li>\n<li>Anpassen der <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-5-8\/#block-settings-and-styles-with-themejson\">Einstellungen und Stile<\/a>, die in der Datei <strong>theme.json<\/strong> definiert sind, \u00fcber die Schnittstelle f\u00fcr globale Stile<\/li>\n<li>Vorlagen f\u00fcr Seiten und Beitr\u00e4ge erstellen und bearbeiten<\/li>\n<li>Erstellen und Bearbeiten von Vorlagenteilen f\u00fcr Kopf- und Fu\u00dfzeilen und andere Vorlagenbereiche<\/li>\n<\/ul>\n<p>Mit all diesen Funktionen, die in den Core integriert wurden, haben die WordPress-Core-Mitarbeiter \u00fcber die <a href=\"https:\/\/make.wordpress.org\/design\/2021\/10\/15\/site-editing-ia-concepts-how-to-surface-and-access-new-features\/\">Weiterentwicklung der Informationsarchitektur<\/a> diskutiert und den gesamten Site Editing <a href=\"https:\/\/make.wordpress.org\/design\/2021\/10\/22\/site-editing-ia-concepts-part-2\/\">Flow<\/a> neu gestaltet.<\/p>\n<p>Wenn du Twenty Twenty-Two aktiviert hast, wird dir als erstes auffallen, dass der Einstiegspunkt zum Site-Editor nicht mehr im Hauptmen\u00fc deines WordPress-Dashboards zu finden ist, sondern unter dem Men\u00fcpunkt &#8220; <strong>Erscheinungsbild&#8220;<\/strong>.<\/p>\n<figure id=\"attachment_110738\" aria-describedby=\"caption-attachment-110738\" style=\"width: 1980px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110738 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/editor-menu-wp-59.jpg\" alt=\"Das neue Darstellungs-Men\u00fc in WordPress 5.9\" width=\"1980\" height=\"952\"><figcaption id=\"caption-attachment-110738\" class=\"wp-caption-text\">Das neue Darstellungs-Men\u00fc in WordPress 5.9<\/figcaption><\/figure>\n<p>Die Zusammenf\u00fchrung der Funktionen zur Bearbeitung von Vorlagen und Stilen im gleichen <strong>Darstellungs-Men\u00fc<\/strong> soll die Bearbeitung vereinfachen. Dadurch wird es einfacher zu verstehen, dass sich die Funktionen, auf die du zugreifst, auf die <em>Darstellung<\/em> deiner Seiten beziehen.<\/p>\n\n<p>Der Men\u00fcpunkt <strong>Editor<\/strong> \u00f6ffnet die Homepage-Vorlage der Webseite. Je nach deinen Leseeinstellungen kann dies entweder die Seite mit den neuesten Beitr\u00e4gen oder eine statische Seite sein.<\/p>\n<figure id=\"attachment_110740\" aria-describedby=\"caption-attachment-110740\" style=\"width: 2130px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110740 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-site-editor.jpg\" alt=\"Der Seiteneditor in WordPress 5.9 mit Twenty Twenty-Two\" width=\"2130\" height=\"1002\"><figcaption id=\"caption-attachment-110740\" class=\"wp-caption-text\">Der Seiteneditor in WordPress 5.9 mit Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Wenn du jetzt auf das WordPress-Symbol in der oberen linken Ecke klickst, wird ein neues <a href=\"https:\/\/make.wordpress.org\/design\/2021\/10\/22\/site-editing-ia-concepts-part-2\/\">Navigationsmen\u00fc im Seiten-Editor<\/a> angezeigt, das drei Men\u00fcpunkte enth\u00e4lt: <strong>Seite<\/strong>, <strong>Templates<\/strong> und <strong>Template Parts<\/strong>.<\/p>\n<p>Schauen wir uns das mal genauer an.<\/p>\n<figure id=\"attachment_110741\" aria-describedby=\"caption-attachment-110741\" style=\"width: 2318px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110741 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/editor-navigation-menu.jpg\" alt=\"Das Editor-Navigationsmen\u00fc\" width=\"2318\" height=\"1046\"><figcaption id=\"caption-attachment-110741\" class=\"wp-caption-text\">Das Editor-Navigationsmen\u00fc<\/figcaption><\/figure>\n<p>Die Option <strong>Seite<\/strong> \u00f6ffnet die Homepage-Vorlage (neueste Blogartikel oder statische Startseite).<\/p>\n<p>Unter dem Men\u00fcpunkt <strong>Vorlagen<\/strong> erh\u00e4ltst du eine Liste der verf\u00fcgbaren Vorlagen. Du kannst auf eine beliebige Vorlage in der Liste klicken, um sie im Editor zu \u00f6ffnen.<\/p>\n<p>Zum jetzigen Zeitpunkt bietet Twenty Twenty-Two 11 Vorlagen.<\/p>\n<figure id=\"attachment_110746\" aria-describedby=\"caption-attachment-110746\" style=\"width: 2132px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110746 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-templates.jpg\" alt=\"Twenty Twenty-Two Vorlagen.\" width=\"2132\" height=\"1218\"><figcaption id=\"caption-attachment-110746\" class=\"wp-caption-text\">Twenty Twenty-Two Vorlagen.<\/figcaption><\/figure>\n<p>Wenn du auf das Ellipsen-Symbol<strong>(\ufe19)<\/strong> auf der rechten Seite klickst, kannst du deine Anpassungen l\u00f6schen.<\/p>\n<figure id=\"attachment_111357\" aria-describedby=\"caption-attachment-111357\" style=\"width: 1378px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111357 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-template-clear-customizations.jpg\" alt=\"Vorlagenanpassungen l\u00f6schen\" width=\"1378\" height=\"686\"><figcaption id=\"caption-attachment-111357\" class=\"wp-caption-text\">Vorlagenanpassungen l\u00f6schen<\/figcaption><\/figure>\n<p>Im Gegensatz zu Themenvorlagen k\u00f6nnen benutzerdefinierte Vorlagen nur umbenannt oder entfernt werden (aber du kannst <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-5-8\/#template-editing-mode\">benutzerdefinierte Vorlagen<\/a> im Beitragseditor <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-5-8\/#template-editing-mode\">bearbeiten<\/a> ).<\/p>\n<figure id=\"attachment_111356\" aria-describedby=\"caption-attachment-111356\" style=\"width: 1368px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111356 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/wp-59-delete-rename-custom-template.jpg\" alt=\"Benutzerdefinierte Vorlagen umbenennen\/l\u00f6schen\" width=\"1368\" height=\"382\"><figcaption id=\"caption-attachment-111356\" class=\"wp-caption-text\">Benutzerdefinierte Vorlagen umbenennen\/l\u00f6schen<\/figcaption><\/figure>\n<p>Der Men\u00fcpunkt <strong>Vorlagenteile<\/strong> listet die verf\u00fcgbaren Vorlagenteile auf, die du im Editor f\u00fcr deine Anpassungen \u00f6ffnen kannst.<\/p>\n<p>Standardm\u00e4\u00dfig sind vier Vorlagenteile in Twenty Twenty-Two enthalten. Wenn du den Mauszeiger \u00fcber eine ge\u00e4nderte Vorlage bewegst, wird ein Tooltip angezeigt, der dich darauf hinweist, dass die Vorlage angepasst wurde.<\/p>\n<figure id=\"attachment_110747\" aria-describedby=\"caption-attachment-110747\" style=\"width: 2128px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110747 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-template-parts.jpg\" alt=\"Twenty Twenty-Two-Vorlagenteile.\" width=\"2128\" height=\"1120\"><figcaption id=\"caption-attachment-110747\" class=\"wp-caption-text\">Twenty Twenty-Two-Vorlagenteile.<\/figcaption><\/figure>\n<p>Du kannst diese Anpassungen l\u00f6schen, indem du auf das Ellipsen-Symbol<strong>(\ufe19)<\/strong> auf der rechten Seite klickst.<\/p>\n<figure id=\"attachment_111354\" aria-describedby=\"caption-attachment-111354\" style=\"width: 2214px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111354 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-template-parts-clear-customizations.jpg\" alt=\"Anpassungen f\u00fcr Vorlagenteile l\u00f6schen\" width=\"2214\" height=\"1118\"><figcaption id=\"caption-attachment-111354\" class=\"wp-caption-text\">Anpassungen f\u00fcr Vorlagenteile l\u00f6schen<\/figcaption><\/figure>\n<h3>Bearbeiten von Vorlagen und Vorlagenteilen<\/h3>\n<p>Der <strong>Editor<\/strong> bietet eine Schnittstelle, mit der du die Struktur deiner <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/create-block-theme\/#required-files-and-file-structure\">Vorlagen und Vorlagenteile<\/a> anpassen kannst.<\/p>\n<p>Hier kannst du ganz einfach Bl\u00f6cke und Muster hinzuf\u00fcgen oder bearbeiten, und deine \u00c4nderungen werden automatisch auf jede Seite \u00fcbertragen, die diese Vorlage verwendet.<\/p>\n<figure id=\"attachment_110836\" aria-describedby=\"caption-attachment-110836\" style=\"width: 2534px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110836 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/editing-single-post-template.jpg\" alt=\"Bearbeiten der Single Post-Vorlage\" width=\"2534\" height=\"1294\"><figcaption id=\"caption-attachment-110836\" class=\"wp-caption-text\">Bearbeiten der Single Post-Vorlage<\/figcaption><\/figure>\n<p>Das Bild unten zeigt die 404-Seitenvorlage im Editor. Es ist eine ziemlich einfache Vorlage, die nur eine \u00dcberschrift, einen Absatz und ein Suchfeld enth\u00e4lt. Dennoch gibt sie uns einen guten Einblick in die Funktionsweise der Benutzeroberfl\u00e4che.<\/p>\n<figure id=\"attachment_110826\" aria-describedby=\"caption-attachment-110826\" style=\"width: 1796px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110826 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/404-page-template.jpg\" alt=\"Die 404-Blockvorlage von Twenty Twenty-Two im Vorlageneditor\" width=\"1796\" height=\"1350\"><figcaption id=\"caption-attachment-110826\" class=\"wp-caption-text\">Die 404-Blockvorlage von Twenty Twenty-Two im Vorlageneditor<\/figcaption><\/figure>\n<p>Hier kannst du \u00c4nderungen vornehmen und die Vorlagen so anpassen, dass sie deinen Bed\u00fcrfnissen am besten entsprechen. Vielleicht m\u00f6chtest du z. B. ein Muster f\u00fcr ein <strong>Grid of Image Posts<\/strong> hinzuf\u00fcgen, um das Engagement deiner Besucher\/innen zu erh\u00f6hen und sie zum St\u00f6bern in den Inhalten deiner Webseite einzuladen.<\/p>\n<figure id=\"attachment_111351\" aria-describedby=\"caption-attachment-111351\" style=\"width: 2872px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111351 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/grid-of-image-post-pattern.jpg\" alt=\"Anpassen der 404-Blockvorlage von Twenty Twenty-Two.\" width=\"2872\" height=\"1314\"><figcaption id=\"caption-attachment-111351\" class=\"wp-caption-text\">Anpassen der 404-Blockvorlage von Twenty Twenty-Two.<\/figcaption><\/figure>\n<p>Das Dropdown-Men\u00fc in der Kopfzeile oben im Vorlagen-Editor zeigt eine Liste der verf\u00fcgbaren <strong>Vorlagenbereiche<\/strong> an. Die gleiche Liste erscheint auf der Registerkarte <strong>Vorlage<\/strong> in der Seitenleiste <strong>Einstellungen<\/strong>.<\/p>\n<figure id=\"attachment_110761\" aria-describedby=\"caption-attachment-110761\" style=\"width: 2242px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110761 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/template-areas.jpg\" alt=\"Vorlagenbereiche in Twenty Twenty-Two.\" width=\"2242\" height=\"1036\"><figcaption id=\"caption-attachment-110761\" class=\"wp-caption-text\">Vorlagenbereiche in Twenty Twenty-Two.<\/figcaption><\/figure>\n<p>Wenn du auf einen Vorlagenbereich klickst (z.B. Header), gelangst du direkt zu dem Vorlagenteil, den du bearbeiten m\u00f6chtest.<\/p>\n<p>Wenn du auf das Ellipsen-Symbol auf der rechten Seite klickst, gelangst du zum <strong>Editor f\u00fcr den isolierten Vorlagenteil<\/strong>.<\/p>\n<figure id=\"attachment_110748\" aria-describedby=\"caption-attachment-110748\" style=\"width: 2292px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110748 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/editing-template-parts.jpg\" alt=\"Das Ellipsen-Symbol \u00f6ffnet den Editor f\u00fcr isolierte Vorlagenteile\" width=\"2292\" height=\"1316\"><figcaption id=\"caption-attachment-110748\" class=\"wp-caption-text\">Das Ellipsen-Symbol \u00f6ffnet den Editor f\u00fcr isolierte Vorlagenteile<\/figcaption><\/figure>\n<p>Der Editor f\u00fcr Vorlagenteile bietet auch ein Paar verschiebbare Griffe, mit denen du pr\u00fcfen kannst, wie sich die Vorlage bei verschiedenen Bildschirmaufl\u00f6sungen verh\u00e4lt.<\/p>\n<figure id=\"attachment_110762\" aria-describedby=\"caption-attachment-110762\" style=\"width: 2130px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110762 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/adjusting-preview-dimension-1.jpg\" alt=\"Anpassen der Vorschaugr\u00f6\u00dfe des Vorlagenteils\" width=\"2130\" height=\"1196\"><figcaption id=\"caption-attachment-110762\" class=\"wp-caption-text\">Anpassen der Vorschaugr\u00f6\u00dfe des Vorlagenteils<\/figcaption><\/figure>\n<p>Wenn du mit deinen \u00c4nderungen zufrieden bist, speicherst du sie und kehrst zum Hauptvorlageneditor zur\u00fcck, um das Endergebnis zu \u00fcberpr\u00fcfen.<\/p>\n<p>Wenn du tiefer in die neue Informationsarchitektur eintauchen willst, solltest du dir die folgenden Artikel ansehen:<\/p>\n<ul>\n<li><a href=\"https:\/\/make.wordpress.org\/design\/2021\/10\/15\/site-editing-ia-concepts-how-to-surface-and-access-new-features\/\">Konzepte der Webseiten-Bearbeitung IA: Wie du neue Funktionen aufdeckst und darauf zugreifst<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/design\/2021\/10\/22\/site-editing-ia-concepts-part-2\/\">Site Editing iA-Konzepte &#8211; Teil 2<\/a><\/li>\n<\/ul>\n<h2>Twenty Twenty-Two in seinem Kern: Ein kurzer \u00dcberblick \u00fcber <strong>theme.json<\/strong><\/h2>\n<p>Um zu verstehen, wie Twenty Twenty-Two und Block-Themes (wie <a href=\"https:\/\/www.anarieldesign.com\/themes\/block-based-wordpress-theme\/\">Bricksy<\/a>) funktionieren, werfen wir einen Blick auf die neue Theme-Konfiguration und den Styling-Mechanismus, der auf der Datei <strong>theme.json<\/strong> basiert.<\/p>\n<p>Dieser neue Mechanismus wurde mit <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-5-8\/#block-settings-and-styles-with-themejson\">WordPress 5.8<\/a> eingef\u00fchrt und erm\u00f6glicht es Theme-Entwicklern, den Editor zu konfigurieren und Funktionen von einem <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">zentralen Konfigurationspunkt<\/a> aus hinzuzuf\u00fcgen.<\/p>\n<p>In Twenty Twenty-Two hat die <strong>theme.json<\/strong>-Datei die folgende Struktur:<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 2,\n\t\"settings\": {},\n\t\"styles\": {},\n\t\"customTemplates\": {},\n\t\"templateParts\": {}\n}<\/code><\/pre>\n<p>Werfen wir einen kurzen Blick auf die einzelnen Abschnitte.<\/p>\n<h3>Version<\/h3>\n<p>Das Feld <code>version<\/code> beschreibt die Spezifikationsversion, die derzeit <code>2<\/code> ist.<\/p>\n<h3>Einstellungen<\/h3>\n<p>Der Abschnitt <code>settings<\/code> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#settings\">definiert Einstellungen<\/a> auf globaler oder Blockebene. Einstellungen, die auf der obersten Ebene definiert werden, wirken sich auf alle Bl\u00f6cke aus, aber Bl\u00f6cke k\u00f6nnen die globalen Einstellungen individuell au\u00dfer Kraft setzen. In Twenty Twenty-Two findest du die folgenden Einstellungen:<\/p>\n<pre><code class=\"language-json\">{\n\t\"settings\": {\n\t\t\"appearanceTools\": true,\n\t\t\"color\": {\n\t\t\t\"duotone\": [...],\n\t\t\t\"gradients\": [...],\n\t\t\t\"palette\": [...]\n\t\t},\n\t\t\"custom\": {...},\n\t\t\"spacing\": {...},\n\t\t\"typography\": {\n\t\t\t\"dropCap\": false,\n\t\t\t\"fontFamilies\": [...],\n\t\t\t\"fontSizes\": [...]\n\t\t},\n\t\t\"layout\": {...}\n\t}\n}<\/code><\/pre>\n<p>Die <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#css-custom-properties-presets-custom\">Voreinstellungen<\/a> werden <strong>Presets<\/strong> genannt und dienen dazu, <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#the-naming-schema-of-css-custom-properties\">benutzerdefinierte CSS-Eigenschaften<\/a> und Klassennamen auf der Grundlage einer bestimmten <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#the-naming-schema-of-css-custom-properties\">Namenskonvention<\/a> zu <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#the-naming-schema-of-css-custom-properties\">erzeugen<\/a>:<\/p>\n<ul>\n<li>Benutzerdefinierte CSS-Eigenschaft <code>--wp--preset--{preset-category}--{preset-slug}<\/code><\/li>\n<li>CSS-Klassenname <code>.has-{preset-slug}-{preset-category}<\/code><\/li>\n<\/ul>\n<p>Sobald ein Theme seine Voreinstellungen definiert hat, k\u00f6nnen die entsprechenden benutzerdefinierten CSS-Eigenschaften verwendet werden, um Bl\u00f6cke und Elemente im Bereich <code>styles<\/code> zu gestalten.<\/p>\n<h3>Stile<\/h3>\n<p>Im Abschnitt <code>styles<\/code> definieren Themes die <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#styles\">Standardstile<\/a> f\u00fcr Bl\u00f6cke und Elemente. Siehe zum Beispiel die folgenden Stile von Twenty Twenty-Two f\u00fcr den zentralen Button-Block:<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 2,\n\t\"styles\": {\n\t\t\"blocks\": {\n\t\t\t\"core\/button\": {\n\t\t\t\t\"border\": {\n\t\t\t\t\t\"radius\": \"0\"\n\t\t\t\t},\n\t\t\t\t\"color\": {\n\t\t\t\t\t\"background\": \"var(--wp--preset--color--primary)\",\n\t\t\t\t\t\"text\": \"var(--wp--preset--color--background)\"\n\t\t\t\t},\n\t\t\t\t\"typography\": {\n\t\t\t\t\t\"fontSize\": \"var(--wp--preset--typography--font-size--normal)\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Du wirst die benutzerdefinierten CSS-Eigenschaften bemerken, die in den Eigenschaftsdeklarationen verwendet werden.<\/p>\n<h3>Benutzerdefinierte Vorlagen<\/h3>\n<p>Im Abschnitt <code>customTemplates<\/code> deklariert ein Theme seine <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#customtemplates\">benutzerdefinierten Vorlagen<\/a>. Die Felder <code>name<\/code> und <code>title<\/code> sind erforderlich. Themes k\u00f6nnen auch angeben, welcher Beitragstyp die Vorlage verwenden kann, indem sie die Eigenschaft <code>postTypes<\/code> setzen.<\/p>\n<p>Twenty Twenty-Two bietet vier benutzerdefinierte Vorlagen:<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 2,\n\t\"customTemplates\": [\n\t\t{\n\t\t\t\"name\": \"blank\",\n\t\t\t\"title\": \"Blank\",\n\t\t\t\"postTypes\": [\n\t\t\t\t\"page\",\n\t\t\t\t\"post\"\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\t\"name\": \"page-large-header\",\n\t\t\t\"title\": \"Page (Large Header)\",\n\t\t\t\"postTypes\": [\n\t\t\t\t\"page\"\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\t\"name\": \"single-no-separators\",\n\t\t\t\"title\": \"Single Post (No Separators)\",\n\t\t\t\"postTypes\": [\n\t\t\t\t\"post\"\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\t\"name\": \"page-no-separators\",\n\t\t\t\"title\": \"Page (No Separators)\",\n\t\t\t\"postTypes\": [\n\t\t\t\t\"page\"\n\t\t\t]\n\t\t}\n\t]\n}<\/code><\/pre>\n<p>Die entsprechenden <strong>.html<\/strong>-Dateien findest du im Ordner <strong>block-templates<\/strong>.<\/p>\n<figure id=\"attachment_111516\" aria-describedby=\"caption-attachment-111516\" style=\"width: 1224px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111516 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-block-templates-folder.jpg\" alt=\"Der Ordner &lt;strong&gt;block-templates&lt;\/strong&gt; des Twenty Twenty-Two Themes\" width=\"1224\" height=\"587\"><figcaption id=\"caption-attachment-111516\" class=\"wp-caption-text\">Der Ordner <strong>block-templates<\/strong> des Twenty Twenty-Two Themes<\/figcaption><\/figure>\n<h3>Vorlagenteile<\/h3>\n<p>Der Abschnitt <code>templateParts<\/code> enth\u00e4lt die <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#templateparts\">Definitionen der Vorlagenteile<\/a>:<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 2,\n\t\"templateParts\": [\n\t\t{\n\t\t\t\"name\": \"header\",\n\t\t\t\"title\": \"Header\",\n\t\t\t\"area\": \"header\"\n\t\t},\n\t\t{\n\t\t\t\"name\": \"header-large-dark\",\n\t\t\t\"title\": \"Header (Dark, large)\",\n\t\t\t\"area\": \"header\"\n\t\t},\n\t\t{\n\t\t\t\"name\": \"header-small-dark\",\n\t\t\t\"title\": \"Header (Dark, small)\",\n\t\t\t\"area\": \"header\"\n\t\t},\n\t\t{\n\t\t\t\"name\": \"footer\",\n\t\t\t\"title\": \"Footer\",\n\t\t\t\"area\": \"footer\"\n\t\t}\n\t]\n}<\/code><\/pre>\n<p>Die Felder <code>name<\/code> und <code>title<\/code> sind erforderlich. Themes k\u00f6nnen auch einen <code>area<\/code> Begriff deklarieren, in dem der Vorlagenteil im Editor wiedergegeben wird.<\/p>\n<figure id=\"attachment_111360\" aria-describedby=\"caption-attachment-111360\" style=\"width: 1616px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111360 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-template-parts-1.jpg\" alt=\"Twenty Twenty-Two-Vorlagenteile\" width=\"1616\" height=\"1128\"><figcaption id=\"caption-attachment-111360\" class=\"wp-caption-text\">Twenty Twenty-Two-Vorlagenteile<\/figcaption><\/figure>\n<p>Die <strong>.html<\/strong>-Dateien der Vorlagenteile befinden sich im Ordner <strong>template-parts<\/strong>.<\/p>\n<p>Da du jetzt mehr \u00fcber die <strong>theme.json<\/strong> von Twenty Twenty-Two wei\u00dft, k\u00f6nnen wir die Funktionen des Themes und die neue Bearbeitungsoberfl\u00e4che genauer erkunden.<\/p>\n<p>Lass uns in die <strong>globalen Stile von Twenty Twenty-Two<\/strong> eintauchen.<\/p>\n<h2>Globale Stile in Twenty Twenty-Two<\/h2>\n<p>Wenn du dir die <strong>style.css<\/strong> von Twenty Twenty-Two ansiehst <strong>, wirst du vielleicht \u00fcberrascht sein, dass sie nur eine minimale Anzahl von CSS-Deklarationen enth\u00e4lt. Der Grund daf\u00fcr ist, dass<\/strong> <strong>die<\/strong> <strong> <strong>Stile<\/strong> in blockbasierten Themes <strong>in der<\/strong> Datei <strong> <em>theme.json<\/em><\/strong><\/strong> deklariert werden.<\/p>\n<p>WordPress 5.9 geht noch einen Schritt weiter und f\u00fchrt eine neue Funktion ein, mit der Nutzer\/innen von Block-Themes das Aussehen von Webseiten-Elementen \u00fcber eine Benutzeroberfl\u00e4che namens <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-5-8\/#block-settings-and-styles-with-themejson\">Global Styles<\/a> anpassen k\u00f6nnen.<\/p>\n<p>Die Schnittstelle f\u00fcr globale Stile kann \u00fcber das neue <strong>Stile-Symbol<\/strong> in der oberen rechten Ecke des Editors aufgerufen werden (siehe auch <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/34574\">Die Schnittstelle f\u00fcr globale Stile<\/a>).<\/p>\n<p>Wenn du auf dieses Symbol klickst, wird eine neue <strong>Seitenleiste<\/strong> mit drei separaten Feldern angezeigt:<\/p>\n<ul>\n<li>Ein <strong>Vorschau-Panel<\/strong>, das eine Vorschau deiner Anpassungen zeigt<\/li>\n<li>Ein Panel &#8220; <strong>Globale Stile&#8220;<\/strong>, das Zugriff auf bestimmte Gruppen von Steuerelementen f\u00fcr <strong>Typografie<\/strong>, <strong>Farben<\/strong> und <strong>Layout <\/strong>bietet<\/li>\n<li>Ein Element f\u00fcr <strong>Bl\u00f6cke<\/strong>, das Zugriff auf die Stileinstellungen auf Blockebene bietet<\/li>\n<\/ul>\n<figure id=\"attachment_110852\" aria-describedby=\"caption-attachment-110852\" style=\"width: 1606px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110852 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/styles-sidebar.jpg\" alt=\"Die Stile-Seitenleiste in Twenty Twenty-Two\" width=\"1606\" height=\"1336\"><figcaption id=\"caption-attachment-110852\" class=\"wp-caption-text\">Die Stile-Seitenleiste in Twenty Twenty-Two<\/figcaption><\/figure>\n<h3>Die Farbpalette von Twenty Twenty-Two<\/h3>\n<p>Mit dem Panel <strong>Farben<\/strong> kannst du die verf\u00fcgbaren Paletten bearbeiten und Farben f\u00fcr <strong>Hintergrund<\/strong>, <strong>Text<\/strong> oder <strong>Links<\/strong> zuweisen oder \u00e4ndern.<\/p>\n<p>Im <strong>Paletten-Panel<\/strong> kannst du die <strong>Themen-<\/strong> oder <strong>Standardpaletten<\/strong> anpassen und sogar deine eigene Palette erstellen.<\/p>\n<figure id=\"attachment_110941\" aria-describedby=\"caption-attachment-110941\" style=\"width: 1790px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110941 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-color-settings.jpg\" alt=\"Farbeinstellungen in Twenty Twenty-Two\" width=\"1790\" height=\"1146\"><figcaption id=\"caption-attachment-110941\" class=\"wp-caption-text\">Farbeinstellungen in Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Hast du schon den Code gefunden, der die Farbeinstellungen erzeugt?<\/p>\n<p>Wenn nicht, \u00f6ffne die <strong>theme.json<\/strong> von Twenty Twenty-Two in deinem bevorzugten <a href=\"https:\/\/kinsta.com\/de\/blog\/besten-texteditoren\/\">Code-Editor<\/a>. Dort findest du die folgenden Farbpaletten-Deklarationen:<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 2,\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"palette\": [\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"foreground\",\n\t\t\t\t\t\"color\": \"#000000\",\n\t\t\t\t\t\"name\": \"Foreground\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"background\",\n\t\t\t\t\t\"color\": \"#ffffff\",\n\t\t\t\t\t\"name\": \"Background\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"primary\",\n\t\t\t\t\t\"color\": \"#1a4548\",\n\t\t\t\t\t\"name\": \"Primary\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"secondary\",\n\t\t\t\t\t\"color\": \"#ffe2c7\",\n\t\t\t\t\t\"name\": \"Secondary\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"tertiary\",\n\t\t\t\t\t\"color\": \"#F6F6F6\",\n\t\t\t\t\t\"name\": \"Tertiary\"\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Das Bild unten zeigt, wie der obige Code mit der Farbpalette von Twenty Twenty-Two \u00fcbereinstimmt.<\/p>\n<figure id=\"attachment_111011\" aria-describedby=\"caption-attachment-111011\" style=\"width: 1314px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111011 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-color-palette.jpg\" alt=\"Die Farbpalette von Twenty Twenty-Two\" width=\"1314\" height=\"972\"><figcaption id=\"caption-attachment-111011\" class=\"wp-caption-text\">Die Farbpalette von Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Nehmen wir an, du m\u00f6chtest die Standard-Hintergrundfarbe f\u00fcr einen bestimmten Block \u00e4ndern. Wenn du eine andere Farbe f\u00fcr den Hintergrund des Blocks w\u00e4hlst, weist du der Eigenschaft <code>background-color<\/code> des Elements einfach eine andere <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/--*\">CSS-Variable<\/a> zu. Das folgende Bild zeigt ein Beispiel daf\u00fcr:<\/p>\n<figure id=\"attachment_111012\" aria-describedby=\"caption-attachment-111012\" style=\"width: 2036px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111012 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-custom-property.jpg\" alt=\"Die Grundfarbe von Twenty Twenty-Two wird als Hintergrundfarbe verwendet\" width=\"2036\" height=\"860\"><figcaption id=\"caption-attachment-111012\" class=\"wp-caption-text\">Die Grundfarbe von Twenty Twenty-Two wird als Hintergrundfarbe verwendet<\/figcaption><\/figure>\n<p>Und das ist alles! Du musst keine einzige Zeile benutzerdefinierten CSS-Codes im Customizer hinzuf\u00fcgen oder ein Child-Theme daf\u00fcr erstellen.<\/p>\n<p>Aber lass uns die Globalen Stile von Twenty Twenty-Two anhand einiger weiterer Beispiele weiter erkunden.<\/p>\n<h3>Typografie-Einstellungen<\/h3>\n<p>Im Bereich <strong>Typografie<\/strong> kannst du die Typografiestile f\u00fcr die Elemente <strong>Text<\/strong> und <strong>Links<\/strong> deiner Webseite auf globaler Ebene anpassen.<\/p>\n<p>Jedes Element bietet Zugang zu einer Gruppe von Steuerelementen, mit denen du die Schriftart, -gr\u00f6\u00dfe und -h\u00f6he anpassen kannst.<\/p>\n<figure id=\"attachment_110847\" aria-describedby=\"caption-attachment-110847\" style=\"width: 1790px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110847 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-typography-settings.jpg\" alt=\"Typografie-Einstellungen in Twenty Twenty-Two\" width=\"1790\" height=\"1146\"><figcaption id=\"caption-attachment-110847\" class=\"wp-caption-text\">Typografie-Einstellungen in Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Fragst du dich, welcher Code diese Steuerelemente erzeugt?<\/p>\n<p>\u00d6ffne die <strong>theme.json<\/strong> von Twenty Twenty-Two und suche den Abschnitt <code>typography<\/code>. Dort findest du die folgenden Einstellungen:<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 1,\n\t\"settings\": {\n\t\t\"appearanceTools\": true,\n\t\t\"typography\": {\n\t\t\t\"dropCap\": false,\n\t\t\t\"fontFamilies\": [\n\t\t\t\t{\n\t\t\t\t\t\"fontFamily\": \"-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif\",\n\t\t\t\t\t\"name\": \"System Font\",\n\t\t\t\t\t\"slug\": \"system-font\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"fontFamily\": \"\"Source Serif Pro\", serif\",\n\t\t\t\t\t\"name\": \"Source Serif Pro\",\n\t\t\t\t\t\"slug\": \"source-serif-pro\"\n\t\t\t\t}\n\t\t\t],\n\t\t\t\"fontSizes\": [\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Small\",\n\t\t\t\t\t\"size\": \"1rem\",\n\t\t\t\t\t\"slug\": \"small\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Normal\",\n\t\t\t\t\t\"size\": \"1.125rem\",\n\t\t\t\t\t\"slug\": \"normal\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Medium\",\n\t\t\t\t\t\"size\": \"1.75rem\",\n\t\t\t\t\t\"slug\": \"medium\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Large\",\n\t\t\t\t\t\"size\": \"clamp(1.75rem, 3vw, 2.25rem)\",\n\t\t\t\t\t\"slug\": \"large\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Huge\",\n\t\t\t\t\t\"size\": \"clamp(2.5rem, 4vw, 3rem)\",\n\t\t\t\t\t\"slug\": \"huge\"\n\t\t\t\t}\n\t\t\t]\n\t\t},\n}<\/code><\/pre>\n<p>Aus dem obigen Code kannst du zwei Schriftfamilien und f\u00fcnf Schriftgr\u00f6\u00dfen erwarten. Und du h\u00e4ttest richtig vermutet.<\/p>\n<p>Hier siehst du, wie der obige Code in die <strong>Typografie-Einstellungen<\/strong> von Global Styles \u00fcbersetzt wird:<\/p>\n<figure id=\"attachment_110848\" aria-describedby=\"caption-attachment-110848\" style=\"width: 1300px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110848 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/font-family-font-size.jpg\" alt=\"Typografiestile in Twenty Twenty-Two\" width=\"1300\" height=\"1196\"><figcaption id=\"caption-attachment-110848\" class=\"wp-caption-text\">Typografiestile in Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Du darfst raten, welche Einstellung die <strong>Zeilenh\u00f6he<\/strong> steuert. In Twenty Twenty-Two findest du keine spezielle Einstellung daf\u00fcr, denn sie wird durch die Eigenschaft <code>appearanceTools<\/code> aktiviert, die eine Abk\u00fcrzung f\u00fcr mehrere Einstellungsdeklarationen ist (siehe n\u00e4chster Abschnitt).<\/p>\n<h3>Werkzeuge f\u00fcr Layout und Erscheinungsbild<\/h3>\n<p>Das letzte Element in der Seitenleiste der globalen Stile ist das <strong>Layout<\/strong>. Zum Zeitpunkt der Erstellung dieses Artikels enth\u00e4lt es nur ein <code>padding<\/code> Steuerelement.<\/p>\n<figure id=\"attachment_111192\" aria-describedby=\"caption-attachment-111192\" style=\"width: 1790px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111192 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/layout.jpg\" alt=\"Layout-Einstellungen in Twenty Twenty-Two\" width=\"1790\" height=\"1212\"><figcaption id=\"caption-attachment-111192\" class=\"wp-caption-text\">Layout-Einstellungen in Twenty Twenty-Two<\/figcaption><\/figure>\n<p>In Twenty Twenty-Two wird das Layout-Panel durch die <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/36646\">Einstellungseigenschaft<\/a> <code>appearanceTools<\/code> aktiviert, ein Boolescher Wert, mit dem <a href=\"https:\/\/github.com\/WordPress\/twentytwentytwo\/issues\/261\">mehrere Einstellungen auf einmal aktiviert werden<\/a> k\u00f6nnen:<\/p>\n<pre><code class=\"language-json\">{\n\t\"settings\": {\n\t\t\"appearanceTools\": true\n\t}\n}<\/code><\/pre>\n<p><code>\"appearanceTools\": true<\/code> ersetzt einfach den <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/36646\">folgenden Block von Deklarationen<\/a>:<\/p>\n<pre><code class=\"language-json\">{\n\t'settings': {\n\t\t'border': {\n\t\t\t'color': true,\n\t\t\t'radius': true,\n\t\t\t'style': true,\n\t\t\t'width': true\n\t\t},\n\t\t'color': {\n\t\t\t'link': true\n\t\t},\n\t\t'spacing': {\n\t\t\t'blockGap': true,\n\t\t\t'margin': true,\n\t\t\t'padding': true\n\t\t},\n\t\t'typography': {\n\t\t\t'lineHeight': true\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>OK &#8211; du verstehst jetzt hoffentlich, wie die in der Datei <strong>theme.json<\/strong> deklarierten Einstellungen mit den entsprechenden Steuerelementen der Globalen Stile \u00fcbereinstimmen.<\/p>\n<p>Ein Teil des Puzzles fehlt noch, um ein vollst\u00e4ndiges Bild des neuen WordPress-Standardthemas zu erhalten: die <strong>Blockmuster<\/strong>.<\/p>\n<h2>Twenty Twenty-Two Blockmuster<\/h2>\n<p>Man k\u00f6nnte sagen, dass Twenty Twenty-Two vor allem eine <a href=\"https:\/\/wordpress.org\/news\/2021\/11\/episode-21-all-things-block-themes\/\">Sammlung von Mustern<\/a> ist &#8211; und so ist es auch. In Twenty Twenty-Two findest du jede Menge gebrauchsfertige <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-5-5\/#block-patterns\">Blockmuster<\/a>, aus denen du erstaunliche und unvorhersehbare Strukturen aus verschachtelten Bl\u00f6cken f\u00fcr deine Webseiten erstellen kannst.<\/p>\n<p>Das Schl\u00fcsselwort hier ist &#8220; <strong>User Empowerment<\/strong>&#8222;. Und das passt, denn mit Blockmustern kannst du alles M\u00f6gliche bauen, von einem ansprechenden Portfolio bis hin zu einer einseitigen Werbe-Webseite, auch wenn du keine Kenntnisse in HTML oder CSS hast!<\/p>\n<p>Und WordPress 5.9 bringt mit dem neuen Pattern <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/35773\">Explorer<\/a>, einem Tool, mit dem du Patterns in einem Vollbildmodal durchst\u00f6bern kannst, erhebliche Verbesserungen f\u00fcr das Pattern-System.<\/p>\n<figure id=\"attachment_111407\" aria-describedby=\"caption-attachment-111407\" style=\"width: 2442px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111407 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/pattern-explorer.jpg\" alt=\"Der Muster Explorer in Twenty Twenty-Two\" width=\"2442\" height=\"1378\"><figcaption id=\"caption-attachment-111407\" class=\"wp-caption-text\">Der Muster Explorer in Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Mit dem neuen Tool kannst du auch schnell und einfach Blockmuster direkt aus dem <a href=\"https:\/\/wordpress.org\/patterns\/\">Musterverzeichnis<\/a> importieren. Das er\u00f6ffnet sowohl WordPress-Nutzern als auch <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/\">-Entwicklern<\/a> neue M\u00f6glichkeiten, so dass seine Nutzung in Zukunft wahrscheinlich erheblich zunehmen wird.<\/p>\n<figure id=\"attachment_111408\" aria-describedby=\"caption-attachment-111408\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111408 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/wordpress-patterns-directory.jpg\" alt=\"WordPress Muster Verzeichnis\" width=\"2880\" height=\"2959\"><figcaption id=\"caption-attachment-111408\" class=\"wp-caption-text\">WordPress Muster Verzeichnis<\/figcaption><\/figure>\n<p>Twenty Twenty-Two enth\u00e4lt <a href=\"https:\/\/github.com\/WordPress\/twentytwentytwo\/pull\/204\">eine Vielzahl von Mustern<\/a> (\u00fcber 65) in f\u00fcnf Kategorien.<\/p>\n<figure id=\"attachment_111409\" aria-describedby=\"caption-attachment-111409\" style=\"width: 1522px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111409 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/pattern-categories-dropdown.jpg\" alt=\"Twenty Twenty-Two Musterkategorien\" width=\"1522\" height=\"1250\"><figcaption id=\"caption-attachment-111409\" class=\"wp-caption-text\">Twenty Twenty-Two Musterkategorien<\/figcaption><\/figure>\n<p>Dieses solide Set an Mustern passt perfekt zu den Vorlagen und Vorlagenteilen, die mit dem neuen Standard-Theme geliefert werden, und sorgt f\u00fcr ein wirklich tolles Bearbeitungserlebnis.<\/p>\n<figure id=\"attachment_111410\" aria-describedby=\"caption-attachment-111410\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111410 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/layered-images-with-duotone-pattern.jpg\" alt=\"\u00dcberlagerte Bilder mit Duotone\" width=\"2880\" height=\"1332\"><figcaption id=\"caption-attachment-111410\" class=\"wp-caption-text\">\u00dcberlagerte Bilder mit Duotone<\/figcaption><\/figure>\n<figure id=\"attachment_111411\" aria-describedby=\"caption-attachment-111411\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111411 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/video-with-header-and-details.jpg\" alt=\"Video mit Header und Details\" width=\"2880\" height=\"2544\"><figcaption id=\"caption-attachment-111411\" class=\"wp-caption-text\">Video mit Header und Details<\/figcaption><\/figure>\n<figure id=\"attachment_111412\" aria-describedby=\"caption-attachment-111412\" style=\"width: 2002px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111412 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/two-images-with-text.jpg\" alt=\"Zwei Bilder mit Text\" width=\"2002\" height=\"2160\"><figcaption id=\"caption-attachment-111412\" class=\"wp-caption-text\">Zwei Bilder mit Text<\/figcaption><\/figure>\n<p>Wenn du noch keine Gelegenheit hattest, mit Blockmustern zu experimentieren, zeigen wir dir anhand eines einfachen Beispiels, warum sie als so m\u00e4chtige Werkzeuge gelten.<\/p>\n<p>Angenommen, du m\u00f6chtest die Standard-Fu\u00dfzeile aus den Vorlagen Index und Single Post entfernen und sie durch ein anderes Blockmuster von Twenty Twenty-Two ersetzen.<\/p>\n<p>Starte den Seiteneditor \u00fcber das Men\u00fc &#8220; <strong>Erscheinungsbild&#8220;<\/strong> oder die Schaltfl\u00e4che in der WordPress-Frontend-Symbolleiste, um die Index-Vorlage anzupassen.<\/p>\n<p>Klicke auf die Schaltfl\u00e4che <strong>Index<\/strong>, um das Kopfzeilen-Dropdown mit der Liste der auf der Seite verf\u00fcgbaren Vorlagenbereiche anzuzeigen. Klicke auf die Ellipsen-Schaltfl\u00e4che neben <strong>Fu\u00dfzeile<\/strong> und dann auf <strong>Fu\u00dfzeile bearbeiten<\/strong>.<\/p>\n<figure id=\"attachment_111413\" aria-describedby=\"caption-attachment-111413\" style=\"width: 1534px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111413 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/template-inspector.jpg\" alt=\"Der Vorlageninspektor\" width=\"1534\" height=\"812\"><figcaption id=\"caption-attachment-111413\" class=\"wp-caption-text\">Der Vorlageninspektor<\/figcaption><\/figure>\n<p>Wie bereits erw\u00e4hnt, wird hier der Editor f\u00fcr isolierte Vorlagenteile aufgerufen.<\/p>\n<figure id=\"attachment_111414\" aria-describedby=\"caption-attachment-111414\" style=\"width: 2358px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111414 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/isolated-template-part-editor.jpg\" alt=\"Die Standard-Fu\u00dfzeile von Twenty Twenty-Two im Editor f\u00fcr isolierte Vorlagenteile\" width=\"2358\" height=\"848\"><figcaption id=\"caption-attachment-111414\" class=\"wp-caption-text\">Die Standard-Fu\u00dfzeile von Twenty Twenty-Two im Editor f\u00fcr isolierte Vorlagenteile<\/figcaption><\/figure>\n<p>\u00d6ffne nun den Block-Inserter und klicke auf <strong>Muster<\/strong>.<\/p>\n<p>Starte das neue Werkzeug <strong>Muster-Explorer<\/strong>, w\u00e4hle die Kategorie Twenty <strong>Twenty-Two Footers<\/strong> und w\u00e4hle die Fu\u00dfzeile deiner Wahl.<\/p>\n<figure id=\"attachment_111415\" aria-describedby=\"caption-attachment-111415\" style=\"width: 2360px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111415 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-pattern-explorer.jpg\" alt=\"Der Muster-Explorer in Twenty Twenty-Two.\" width=\"2360\" height=\"1338\"><figcaption id=\"caption-attachment-111415\" class=\"wp-caption-text\">Der Muster-Explorer in Twenty Twenty-Two.<\/figcaption><\/figure>\n<p>F\u00fcge nun die Bl\u00f6cke nach deinen W\u00fcnschen hinzu und bearbeite sie.<\/p>\n<figure id=\"attachment_111416\" aria-describedby=\"caption-attachment-111416\" style=\"width: 2360px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111416 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/new-footer-in-isolated-template-editor.jpg\" alt=\"Bearbeitung der Fu\u00dfzeile im Editor f\u00fcr isolierte Vorlagenteile\" width=\"2360\" height=\"996\"><figcaption id=\"caption-attachment-111416\" class=\"wp-caption-text\">Bearbeitung der Fu\u00dfzeile im Editor f\u00fcr isolierte Vorlagenteile<\/figcaption><\/figure>\n<p>Speichere die Kopfzeile und \u00fcberpr\u00fcfe deine Seite erneut, wenn du mit deinen \u00c4nderungen zufrieden bist.<\/p>\n<p>Die folgende Abbildung vergleicht drei Vorlagen (Index, Einzelner Beitrag und Einzelner Beitrag ohne Trennzeichen) mit unterschiedlichen Kopf- und Fu\u00dfzeilenanpassungen:<\/p>\n<figure id=\"attachment_111417\" aria-describedby=\"caption-attachment-111417\" style=\"width: 2400px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111417 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/template-comparison.jpg\" alt=\"Kopf- und Fu\u00dfzeilenanpassungen in verschiedenen Twenty Twenty-Two Vorlagen im Vergleich\" width=\"2400\" height=\"2223\"><figcaption id=\"caption-attachment-111417\" class=\"wp-caption-text\">Kopf- und Fu\u00dfzeilenanpassungen in verschiedenen Twenty Twenty-Two Vorlagen im Vergleich<\/figcaption><\/figure>\n<h2>Twenty Twenty-Two mit einem Child Theme erweitern<\/h2>\n<p>Die Erstellung eines <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/\">Child-Themes f\u00fcr ein Block-Theme<\/a> unterscheidet sich deutlich von der Erstellung eines <a href=\"https:\/\/kinsta.com\/de\/blog\/child-theme-wordpress-erstellen\/\">Child-Themes f\u00fcr ein klassisches Theme<\/a>.<\/p>\n<p>Aber wenn du die <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/block-theme-overview\/#what-is-the-structure-of-a-block-theme\">Struktur eines Block-Themes<\/a> erst einmal verstanden hast, wird es dir nicht schwerfallen, ein Child-Theme f\u00fcr Twenty Twenty-Two oder ein anderes Block-Theme zu erstellen.<\/p>\n<p>Lass uns also herausfinden, wie du das Aussehen deiner Twenty Twenty-Two-basierten Webseite anpassen kannst.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>1. Einrichten eines Child-Themes f\u00fcr Twenty Twenty-Two<\/h3>\n<p><a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/#1-create-a-child-theme-folder\">Erstelle<\/a> in deinem Verzeichnis <strong>\/wp-content\/themes<\/strong> <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/#1-create-a-child-theme-folder\">einen neuen Ordner<\/a> und benenne ihn nach deinen Vorstellungen (gem\u00e4\u00df den <a href=\"https:\/\/codex.wordpress.org\/Theme_Development#Theme_Development_Standards\">Standards f\u00fcr die Theme-Entwicklung<\/a>). In diesem Beispiel haben wir den Ordner des Child-Themes <em>twentytwentytwo-child<\/em> genannt.<\/p>\n<p><a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/#2-create-a-stylesheet-style-css\">Jetzt brauchst du<\/a> eine <strong>style.css-Datei<\/strong>. \u00d6ffne deinen bevorzugten Code-Editor und erstelle das folgende Stylesheet:<\/p>\n<pre><code class=\"language-css\">\/*\nTheme Name: Twenty Twenty-Two Child\nTheme URI: https:\/\/example.com\/\nAuthor: Your name\nAuthor URI: https:\/\/example.com\/\nDescription: A child theme for TT2.\nRequires at least: 5.8\nTested up to: 5.9\nRequires PHP: 5.6\nVersion: 0.2\nLicense: GNU General Public License v2 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\nText Domain: twentytwentytwo-child\nTemplate: twentytwentytwo\nTags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments\n\nTwenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org\nTwenty Twenty-Two Child is distributed under the terms of the GNU GPL.\n*\/<\/code><\/pre>\n<p>Wie immer kannst du die Felder nach deinen Bed\u00fcrfnissen bearbeiten.<\/p>\n<p>Dein Child-Theme ist jetzt f\u00fcr die Vorschau verf\u00fcgbar. Du kannst es im Verwaltungsbereich <strong>Erscheinungsbild &gt; Themes<\/strong> aktivieren.<\/p>\n<h3>2. Globale Einstellungen anpassen<\/h3>\n<p>Seit WordPress 5.9 erben Child-Themes mit einer <strong>theme.json-Datei<\/strong> die Einstellungen des Parent-Themes. Wenn in der <strong>theme.json-Datei<\/strong> des Child-Themes eine Reihe von Stilen definiert ist, gelten diese Stile zus\u00e4tzlich zu den Stilen des Parent-Themes.<\/p>\n<p>Wir k\u00f6nnen also eine <strong>theme.json-Datei<\/strong> erstellen, die nur einen kleinen Block von Einstellungen und Stildefinitionen enth\u00e4lt, anstatt alle unsere urspr\u00fcnglichen Auswahlen neu zu definieren.<\/p>\n<h4>Wie man eine benutzerdefinierte Farbpalette deklariert<\/h4>\n<p>Wenn du ein Child-Theme f\u00fcr Twenty Twenty-Two erstellst, ist die einfachste Aufgabe, die Farbpalette zu ersetzen. Alles, was du tun musst, ist, eine neue Farbpalette in der <strong>theme.json<\/strong> deines Childs zu definieren, wie unten gezeigt:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 2,\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"palette\": [\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"foreground\",\n\t\t\t\t\t\"color\": \"#FFFFFF\",\n\t\t\t\t\t\"name\": \"Foreground\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"background\",\n\t\t\t\t\t\"color\": \"#001F29\",\n\t\t\t\t\t\"name\": \"Background\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"primary\",\n\t\t\t\t\t\"color\": \"#D6FDFF\",\n\t\t\t\t\t\"name\": \"Primary\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"secondary\",\n\t\t\t\t\t\"color\": \"#FDFCDC\",\n\t\t\t\t\t\"name\": \"Secondary\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"tertiary\",\n\t\t\t\t\t\"color\": \"#FED9B7\",\n\t\t\t\t\t\"name\": \"Tertiary\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"accent\",\n\t\t\t\t\t\"color\": \"#E94435\",\n\t\t\t\t\t\"name\": \"Accent\"\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Speichere deine Datei und gehe zur\u00fcck zum Website-Editor. Die oben definierte Farbpalette sollte nun die Standardfarbpalette von Twenty Twenty-Two ersetzen.<\/p>\n<figure id=\"attachment_111460\" aria-describedby=\"caption-attachment-111460\" style=\"width: 2264px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111460 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/child-theme-color-palette.jpg\" alt=\"Eine Farbpalette f\u00fcr ein Child-Theme\" width=\"2264\" height=\"1076\"><figcaption id=\"caption-attachment-111460\" class=\"wp-caption-text\">Eine Farbpalette f\u00fcr ein Child-Theme<\/figcaption><\/figure>\n<p>Die Farben werden <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-support\/#block-color-palettes\">in der Palette selbst in der richtigen Reihenfolge angezeigt<\/a>, und ihre Namen sollten den <a href=\"https:\/\/fullsiteediting.com\/lessons\/theme-json-color-options\/#h-frequently-asked-questions\">Best Practices<\/a> und <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/29568\">Namenskonventionen entsprechen, die auf Github diskutiert<\/a> werden.<\/p>\n<p>Mehr \u00fcber die Farboptionen in <strong>theme.json<\/strong> erf\u00e4hrst du in dieser <a href=\"https:\/\/fullsiteediting.com\/lessons\/theme-json-color-options\/\">ausf\u00fchrlichen \u00dcbersicht von Carolina Nymark<\/a>.<\/p>\n<h4>Benutzerdefinierte Duotone-Filter deklarieren<\/h4>\n<p>Du kannst die Standard-Duotone-Farben auch durch deine eigenen Filter ersetzen.<\/p>\n<p>Dazu f\u00fcgst du einfach den folgenden Code in die <strong>theme.json-Einstellungen<\/strong> deines Childs ein, und zwar auf derselben Ebene wie die Eigenschaft <code>palette<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 2,\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"palette\": [...],\n\t\t\t\"duotone\": [\n\t\t\t\t{\n\t\t\t\t\t\"colors\": [\n\t\t\t\t\t\t\"#001F29\",\n\t\t\t\t\t\t\"#FFFFFF\"\n\t\t\t\t\t],\n\t\t\t\t\t\"slug\": \"default-filter\",\n\t\t\t\t\t\"name\": \"Default filter\"\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Speichere deine Datei und \u00fcberpr\u00fcfe das Ergebnis im Block-Editor. Du solltest nur einen einzigen Duotone-Filter sehen.<\/p>\n<figure id=\"attachment_111461\" aria-describedby=\"caption-attachment-111461\" style=\"width: 1564px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111461 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/child-theme-duotone-filter.jpg\" alt=\"Ein Duotone-Filter f\u00fcr ein Child-Theme.\" width=\"1564\" height=\"1122\"><figcaption id=\"caption-attachment-111461\" class=\"wp-caption-text\">Ein Duotone-Filter f\u00fcr ein Child-Theme.<\/figcaption><\/figure>\n<h3>3. Blockstile anpassen<\/h3>\n<p>Wie wir bereits erw\u00e4hnt haben, kannst du mit WordPress 5.9 die Einstellungen und Stile in der <strong>theme.json<\/strong> \u00fcber die Schnittstelle f\u00fcr globale Stile anpassen.<\/p>\n<p>Blockstile k\u00f6nnen <strong>nur dann<\/strong> \u00fcber die Schnittstelle f\u00fcr globale Stile angepasst werden <strong>, wenn der Block die Unterst\u00fctzung f\u00fcr bestimmte Funktionen<\/strong> in der entsprechenden <strong>block.json-Datei<\/strong> <strong>deklariert<\/strong>. Du kannst jedoch die Standardeinstellungen f\u00fcr Bl\u00f6cke in der <strong>theme.json-Datei<\/strong> deines Child-Themes \u00fcberschreiben.<\/p>\n<p>Angenommen, du m\u00f6chtest die Blockstile f\u00fcr den Beitragstitel und die Gruppe au\u00dfer Kraft setzen. Alles, was du tun musst, ist, die Stile zu definieren, die du hinzuf\u00fcgen oder au\u00dfer Kraft setzen willst, wie unten gezeigt:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 2,\n\t\"settings\": {...},\n\t\"styles\": {\n\t\t\"blocks\": {\n\t\t\t\"core\/post-title\": {\n\t\t\t\t\"typography\": {\n\t\t\t\t\t\"fontFamily\": \"Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif\"\n\t\t\t\t},\n\t\t\t\t\"color\": {\n\t\t\t\t\t\"background\": \"var(--wp--preset--color--tertiary)\"\n\t\t\t\t},\n\t\t\t\t\"spacing\": {\n\t\t\t\t\t\"padding\": \"var(--wp--custom--spacing--small)\"\n\t\t\t\t}\n\t\t\t},\n\t\t\t\"core\/group\": {\n\t\t\t\t\"spacing\": {\n\t\t\t\t\t\"margin\": {\n\t\t\t\t\t\t\"top\": \"0\",\n\t\t\t\t\t\t\"bottom\": \"0\"\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Im obigen Beispiel haben wir die Schriftfamilie, die Hintergrundfarbe und die Padding-Werte f\u00fcr <code>core\/post-title<\/code> sowie die oberen und unteren R\u00e4nder f\u00fcr <code>core\/group<\/code> ge\u00e4ndert.<\/p>\n<p>Das Bild unten zeigt das Ergebnis, wie es auf der \u00f6ffentlichen Website aussehen w\u00fcrde:<\/p>\n<figure id=\"attachment_111462\" aria-describedby=\"caption-attachment-111462\" style=\"width: 2264px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111462 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/child-theme-styles-post-title.jpg\" alt=\"Ein angepasster Beitragstitelblock.\" width=\"2264\" height=\"832\"><figcaption id=\"caption-attachment-111462\" class=\"wp-caption-text\">Ein angepasster Beitragstitelblock.<\/figcaption><\/figure>\n<p>Und das war&#8217;s mit dem Check!<\/p>\n<p>Wir werden vorerst nicht weiter auf Child-Themes eingehen, da dies den Rahmen dieses Beitrags sprengen w\u00fcrde. In der Zwischenzeit findest du weitere Beispiele f\u00fcr <a href=\"https:\/\/github.com\/WordPress\/theme-experiments\/tree\/add\/tt2-child-themes\">Twenty Twenty-Two Child-Themes<\/a> auf Github.<\/p>\n\n<h2>Zusammenfassung<\/h2>\n<p>W\u00e4hrend wir uns das neue WordPress Standard-Theme Twenty Twenty-Two und seine Funktionen (die es zum flexibelsten Standard-Theme aller Zeiten machen) genauer angesehen haben, haben wir die neue Informationsarchitektur vorgestellt, die mit WordPress 5.9 eingef\u00fchrt wurde. Wir haben sogar einen Blick auf die neue Schnittstelle f\u00fcr globale Stile geworfen.<\/p>\n<p>Es gibt viele spannende neue Funktionen, und es scheint klar, dass die neue Bearbeitungsumgebung mit der Zeit immer robuster, zuverl\u00e4ssiger und funktionaler wird.<\/p>\n<p>W\u00e4hrend viele neue WordPress-Funktionen auf den Weg gebracht werden, verschwinden andere oder verlieren an Bedeutung. Viele Nutzer\/innen fragen sich, was mit dem <a href=\"https:\/\/kinsta.com\/de\/blog\/wie-du-dein-wordpress-theme-anpasst\/#customizing-your-theme-via-the-customizer\">Customizer<\/a> passieren wird und wie die Abw\u00e4rtskompatibilit\u00e4t mit bestehenden Themes am besten erhalten werden kann.<\/p>\n<p>Du solltest jedoch nicht erwarten, dass du pl\u00f6tzlich von traditionellen Themes zu Block-Themes springen kannst. Wir haben derzeit vier verschiedene Arten von Themes zur Auswahl:<\/p>\n<ul>\n<li><strong>Blockthemen<\/strong>: Themes, die f\u00fcr FSE entwickelt wurden<\/li>\n<li><strong>Universelle Themen<\/strong>: Themes, die sowohl mit dem Customizer als auch mit dem Site Editor funktionieren<\/li>\n<li><strong>Hybrid-Themen<\/strong>: Klassische Themes, die FSE-Funktionen wie <strong>theme.json <\/strong>unterst\u00fctzen<\/li>\n<li><strong>Klassische Themes<\/strong>: Themes mit PHP-Vorlagen, functions.php, etc.<\/li>\n<\/ul>\n<p>Also keine Angst &#8211; es gibt immer noch gen\u00fcgend L\u00f6sungen, wenn du dich noch nicht bereit f\u00fchlst, auf Blockthemen umzusteigen.<\/p>\n<p><em>Und jetzt liegt es an dir! Bist du bereit, den gro\u00dfen Sprung zu wagen und gleich mit Blockthemen zu arbeiten? Teile uns deine Gedanken in den Kommentaren unten mit.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Obwohl etwas sp\u00e4ter als urspr\u00fcnglich geplant, bekommen wir ein neues WordPress Standard-Theme. Sein Name ist Twenty Twenty-Two! Das neue WordPress Standard-Theme kommt mit der WordPress 5.9 &#8230;<\/p>\n","protected":false},"author":36,"featured_media":46528,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[808,174],"topic":[1009],"class_list":["post-46527","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-twenty-twenty-two","tag-wordpress-themes","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>Ein tiefer Einblick in Twenty Twenty-Two und WordPress Block Themes<\/title>\n<meta name=\"description\" content=\"Twenty Twenty-Two ist das Standard-Block-Theme, das mit WordPress 5.9 eingef\u00fchrt wird. In diesem Leitfaden erf\u00e4hrst du alles \u00fcber die wichtigsten Funktionen.\" \/>\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\/twenty-twenty-two\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ein tiefer Einblick in Twenty Twenty-Two und WordPress Block Themes\" \/>\n<meta property=\"og:description\" content=\"Twenty Twenty-Two ist das Standard-Block-Theme, das mit WordPress 5.9 eingef\u00fchrt wird. In diesem Leitfaden erf\u00e4hrst du alles \u00fcber die wichtigsten Funktionen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/\" \/>\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=\"2022-01-04T12:09:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-27T13:16:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Twenty Twenty-Two ist das Standard-Block-Theme, das mit WordPress 5.9 eingef\u00fchrt wird. In diesem Leitfaden erf\u00e4hrst du alles \u00fcber die wichtigsten Funktionen.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"25\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Ein tiefer Einblick in Twenty Twenty-Two und WordPress Block Themes\",\"datePublished\":\"2022-01-04T12:09:04+00:00\",\"dateModified\":\"2023-07-27T13:16:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/\"},\"wordCount\":3756,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg\",\"keywords\":[\"Twenty Twenty-Two\",\"wordpress themes\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/\",\"name\":\"Ein tiefer Einblick in Twenty Twenty-Two und WordPress Block Themes\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg\",\"datePublished\":\"2022-01-04T12:09:04+00:00\",\"dateModified\":\"2023-07-27T13:16:21+00:00\",\"description\":\"Twenty Twenty-Two ist das Standard-Block-Theme, das mit WordPress 5.9 eingef\u00fchrt wird. In diesem Leitfaden erf\u00e4hrst du alles \u00fcber die wichtigsten Funktionen.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress-Themes\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/wordpress-themes\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Ein tiefer Einblick in Twenty Twenty-Two und WordPress Block Themes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ein tiefer Einblick in Twenty Twenty-Two und WordPress Block Themes","description":"Twenty Twenty-Two ist das Standard-Block-Theme, das mit WordPress 5.9 eingef\u00fchrt wird. In diesem Leitfaden erf\u00e4hrst du alles \u00fcber die wichtigsten Funktionen.","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\/twenty-twenty-two\/","og_locale":"de_DE","og_type":"article","og_title":"Ein tiefer Einblick in Twenty Twenty-Two und WordPress Block Themes","og_description":"Twenty Twenty-Two ist das Standard-Block-Theme, das mit WordPress 5.9 eingef\u00fchrt wird. In diesem Leitfaden erf\u00e4hrst du alles \u00fcber die wichtigsten Funktionen.","og_url":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2022-01-04T12:09:04+00:00","article_modified_time":"2023-07-27T13:16:21+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Twenty Twenty-Two ist das Standard-Block-Theme, das mit WordPress 5.9 eingef\u00fchrt wird. In diesem Leitfaden erf\u00e4hrst du alles \u00fcber die wichtigsten Funktionen.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Carlo Daniele","Gesch\u00e4tzte Lesezeit":"25\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Ein tiefer Einblick in Twenty Twenty-Two und WordPress Block Themes","datePublished":"2022-01-04T12:09:04+00:00","dateModified":"2023-07-27T13:16:21+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/"},"wordCount":3756,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg","keywords":["Twenty Twenty-Two","wordpress themes"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/","url":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/","name":"Ein tiefer Einblick in Twenty Twenty-Two und WordPress Block Themes","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg","datePublished":"2022-01-04T12:09:04+00:00","dateModified":"2023-07-27T13:16:21+00:00","description":"Twenty Twenty-Two ist das Standard-Block-Theme, das mit WordPress 5.9 eingef\u00fchrt wird. In diesem Leitfaden erf\u00e4hrst du alles \u00fcber die wichtigsten Funktionen.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-two\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"WordPress-Themes","item":"https:\/\/kinsta.com\/de\/thema\/wordpress-themes\/"},{"@type":"ListItem","position":3,"name":"Ein tiefer Einblick in Twenty Twenty-Two und WordPress Block Themes"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/de\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/46527","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\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=46527"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/46527\/revisions"}],"predecessor-version":[{"id":53855,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/46527\/revisions\/53855"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/46527\/translations\/en"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/46527\/translations\/de"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/46527\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/46527\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/46527\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/46527\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/46527\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/46527\/translations\/jp"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/46527\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/46527\/translations\/dk"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/46527\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/46528"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=46527"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=46527"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=46527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}