{"id":39455,"date":"2020-11-29T23:29:55","date_gmt":"2020-11-30T07:29:55","guid":{"rendered":"https:\/\/kinsta.com\/?p=83720"},"modified":"2023-08-28T10:07:27","modified_gmt":"2023-08-28T09:07:27","slug":"twenty-twenty-one-theme","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/","title":{"rendered":"Twenty Twenty-One: Ein tiefer Einblick in das neue WordPress-Standardtheme"},"content":{"rendered":"<p>Twenty Twenty-One ist das neue WordPress Standard Theme, das mit WordPress 5.6 kommt. Wenn du auf ein voll funktionsf\u00e4higes <a href=\"https:\/\/kinsta.com\/de\/blog\/schnellsten-wordpress-theme\/\">WordPress Theme<\/a> wartest, wirst du vielleicht ein wenig entt\u00e4uscht sein.<\/p>\n<p>Twenty Twenty-One ist ein minimalistisches Theme, das wie eine sehr anpassbare leere Leinwand aussieht und wirkt. Wie seine Vorg\u00e4nger wird es sich beim neuen Standard-Theme haupts\u00e4chlich auf den <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/\">Block-Editor<\/a> zur Seitenerstellung st\u00fctzen.<\/p>\n<p>In diesem Beitrag gehen wir die interessantesten Features des Twenty Twenty-One Themes durch und zeigen euch, wie ihr das Aussehen und die Bedienung einer WordPress Webseite mit einem einfachen Twenty Twenty One Child Theme anpassen k\u00f6nnt.<\/p>\n<p>Bereit? Lass uns eintauchen!<\/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<figure id=\"attachment_83746\" aria-describedby=\"caption-attachment-83746\" style=\"width: 1580px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83746 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twenty-twenty-one.jpg\" alt=\"Twenty Twenty-One\" width=\"1580\" height=\"2048\"><figcaption id=\"caption-attachment-83746\" class=\"wp-caption-text\">Twenty Twenty-One Theme Vorschau (Bildquelle: <a href=\"https:\/\/make.wordpress.org\/core\/2020\/09\/23\/introducing-twenty-twenty-one\/\">Make WordPress Core<\/a>)<\/figcaption><\/figure>\n<h2>Ein erster Blick auf Twenty Twenty One WordPress Theme<\/h2>\n<p>Wie <a href=\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-theme\/\">Twenty Twenty<\/a> ist auch das neue Standard-Theme, das mit WordPress 5.6 kommt, nicht von Grund auf neu erstellt, aber es basiert auf einem Theme, das von der Community kommt.<\/p>\n<p>Twenty Twenty-One wurde auf der Basis eines neuen Automattic&#8217;s Themes entwickelt, dem <a href=\"https:\/\/wordpress.org\/themes\/seedlet\/\">Seedlet<\/a> Theme, welches eine saubere und gut geordnete Struktur von verschachtelten CSS Custom Properties bietet. Durch die gro\u00dfe Verwendung von <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-css\/#wordpress-and-css\">CSS-Eigenschaften<\/a> im Stylesheet des Themes ist das Erstellen von Child Themes auf Twenty Twenty-One schnell und einfach.<\/p>\n<figure id=\"attachment_83739\" aria-describedby=\"caption-attachment-83739\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83739 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/seedlet.jpg\" alt=\"Seedlet WordPress Theme\" width=\"600\" height=\"769\"><figcaption id=\"caption-attachment-83739\" class=\"wp-caption-text\">Seedlet WordPress Theme<\/figcaption><\/figure>\n<p>Twenty Twenty-One ist ein sehr zug\u00e4ngliches, minimalistisches WordPress Theme mit einem einspaltigen Layout, einer Sidebar f\u00fcr die Fu\u00dfzeile und zwei <a href=\"https:\/\/kinsta.com\/de\/blog\/navigation-auf-webseiten\/\">Men\u00fcpunkten<\/a>: Prim\u00e4rnavigation und Fu\u00dfnavigation.<\/p>\n<p>Das neue Theme verwendet einen <a href=\"https:\/\/kinsta.com\/de\/blog\/websichere-schriften\/\">System-Font-Stack<\/a>. Dies sollte sowohl f\u00fcr Benutzer als auch f\u00fcr <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-entwickler-engagiert\/\">Entwickler<\/a> mehrere Vorteile haben:<\/p>\n<ul>\n<li>In erster Linie bringt die Verwendung eines System-Font-Stacks Vorteile f\u00fcr UX und die <a href=\"https:\/\/kinsta.com\/de\/lernen\/wordpress-beschleunigen\/\">Leistung<\/a>, da native Schriften bereits von den meisten Betriebssystemen unterst\u00fctzt werden und keine zus\u00e4tzliche Ladezeit ben\u00f6tigen.<\/li>\n<li>Zweitens sehen sie neutral aus, so dass sie problemlos in jede Art von Design eingebunden werden k\u00f6nnen.<\/li>\n<li>Drittens ist es f\u00fcr Benutzer und Entwickler einfacher, das Layout einer Webseite mit Twenty Twenty-One anzupassen, da keine zus\u00e4tzlichen Schriftdateien geladen werden m\u00fcssen.<\/li>\n<\/ul>\n<p>Das Twenty Twenty-One Theme verwendet eine <a href=\"https:\/\/kinsta.com\/de\/blog\/webseiten-farbschemata\/\">minimale Farbpalette<\/a>, die auf pastellgr\u00fcnen Hintergrundfarben und zwei Graut\u00f6nen als Vordergrundfarben basiert. Das Theme bietet mehrere zus\u00e4tzliche Pastellfarbenpaletten.<\/p>\n<p>Zu diesem Punkt erkl\u00e4rt Mel Choyse-Dwan, Default Theme Design Lead, wie es funktioniert:<\/p>\n<blockquote><p>Wir werden das Theme mit einigen zus\u00e4tzlichen Farbpaletten b\u00fcndeln, darunter sowohl eine wei\u00dfe als auch eine schwarze Farbpalette. Warum Pastellgr\u00fcn? Pastellt\u00f6ne und ged\u00e4mpfte Farben sind im Moment ziemlich modern.<\/p><\/blockquote>\n<figure id=\"attachment_83743\" aria-describedby=\"caption-attachment-83743\" style=\"width: 1640px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83743 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twenty-twenty-one-colors.jpg\" alt=\"Twenty Twenty-One Farben\" width=\"1640\" height=\"600\"><figcaption id=\"caption-attachment-83743\" class=\"wp-caption-text\">Twenty Twenty-One Farben (Bildquelle: <a href=\"https:\/\/make.wordpress.org\/core\/2020\/09\/23\/introducing-twenty-twenty-one\/\">Make WordPress Core<\/a>)<\/figcaption><\/figure>\n\n<h2>Wie installiere ich Twenty Twenty-One<\/h2>\n<p>Zum Zeitpunkt des Verfassens dieses Artikels befindet sich Twenty Twenty-One in aktiver Entwicklung und steht noch nicht zum Download im WordPress Theme Directory zur Verf\u00fcgung. Ihr k\u00f6nnt euch aber eine in Arbeit befindliche Version des Themes auf <a href=\"https:\/\/github.com\/wordpress\/twentytwentyone\">Github<\/a> herunterladen.<\/p>\n<p>Das Github-Repository wird veraltet sein, sobald das Theme in den <a href=\"https:\/\/kinsta.com\/de\/docs\/support\/umfang-des-supports\/managed-wordpress-support-umfang\/\">Core<\/a> eingebunden ist, und ihr werdet es im Theme Directory finden. Da Twenty Twenty-One dem <a href=\"https:\/\/make.wordpress.org\/core\/5-6\/\">Ver\u00f6ffentlichungszeitplan von WordPress 5.6<\/a> folgt, solltet ihr die folgenden Daten speichern:<\/p>\n<ul>\n<li>Oktober 2020: Beta 1<\/li>\n<li>Oktober 2020: Beta 2<\/li>\n<li>November 2020: Beta 3<\/li>\n<li>November 2020: Beta 4<\/li>\n<li>November 2020: RC 1<\/li>\n<li>Dezember 2020: RC 2<\/li>\n<li>Dezember 2020: Probelauf f\u00fcr die Ver\u00f6ffentlichung von WordPress 5.6<\/li>\n<li>Dezember 2020: Zieldatum f\u00fcr die Ver\u00f6ffentlichung von WordPress 5.6<\/li>\n<\/ul>\n<p>Um das Twenty Twenty-One Theme zum Laufen zu bringen, folge diesen Schritten:<\/p>\n<ol>\n<li>Holt euch das Zip-Paket von <a href=\"https:\/\/github.com\/wordpress\/twentytwentyone\">GitHub<\/a>.<\/li>\n<li>Lade dein Paket \u00fcber das <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-admin\/\">WordPress Dashboard<\/a> oder per <a href=\"https:\/\/kinsta.com\/de\/blog\/verwendest-sftp-verbindung-wordpress-herzustellen\/\">SFTP<\/a> auf deine Entwicklungsinstallation hoch.<\/li>\n<li>St\u00f6bere zu <strong>Appearance \u2192 Themes<\/strong> und klicke auf die Schaltfl\u00e4che <strong>Aktivieren<\/strong> auf dem Vorschaubild des Themes.<\/li>\n<li>Gehe zu <strong>Appearance \u2192 Anpassen<\/strong>, um Twenty Twenty-One zu konfigurieren.<\/li>\n<\/ol>\n<p>Du kannst deine Tests jetzt entweder auf einer <a href=\"https:\/\/kinsta.com\/de\/docs\/wordpress-hosting\/staging-umgebung\/\">Staging-Webseite<\/a> oder in deiner <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-lokal-installieren\/\">lokalen Umgebung<\/a> durchf\u00fchren.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Bitte beachtet, dass sich Twenty Twenty-One noch in der aktiven Entwicklung befindet, <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\">viele Probleme<\/a> noch nicht behoben wurden und sich einige Funktionen in Zukunft \u00e4ndern k\u00f6nnen.<\/p>\n<\/aside>\n\n<figure id=\"attachment_83731\" aria-describedby=\"caption-attachment-83731\" style=\"width: 1480px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83731 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/dark-mode-issue.jpg\" alt=\"Twenty Twenty-One\" width=\"1480\" height=\"2728\"><figcaption id=\"caption-attachment-83731\" class=\"wp-caption-text\">Twenty Twenty-One <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\/620\">Ausgabe #620<\/a> auf Github<\/figcaption><\/figure>\n<p>Nicht bereit, deine Tests durchzuf\u00fchren?<\/p>\n<p>Keine Sorge, wir haben das Thema seziert und wir zeigen euch, was ihr von Twenty Twenty-One erwarten k\u00f6nnt.<\/p>\n<h2>Twenty Twenty-One\u2019s Theme und Block Features<\/h2>\n<p>Genau wie Twenty Twenty ist das neue WordPress-Standardtheme kein voll funktionsf\u00e4higes Theme, sondern ein minimalistisches Theme, das sich beim Seitenaufbau auf den Blockeditor verl\u00e4sst. Das Theme zielt auch auf eine <a href=\"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/#how-to-make-your-website-more-accessible\">gute Zug\u00e4nglichkeit<\/a> ab. Mit den Worten von Mel Choyce-Dwan:<\/p>\n<blockquote><p>Zu guter Letzt w\u00fcrden wir uns freuen, wenn das Theme den relevanten Richtlinien der WCAG 2.1 Stufe AAA entsprechen w\u00fcrde. Wir haben die Idee geliebt, als +make.wordpress.org\/accessibility\/ es zur Sprache brachte, und w\u00fcrden jede und jeden Ratschlag von den Experten unserer Community a11y zu sch\u00e4tzen wissen, um dies m\u00f6glich zu machen.<\/p><\/blockquote>\n<p>Das Theme unterst\u00fctzt eine ganze Reihe von <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_theme_support\/\">Theme<\/a>&#8211; und <a href=\"https:\/\/developer.wordpress.org\/block-editor\/developers\/themes\/theme-support\/\">Block-Features<\/a>, darunter die folgenden:<\/p>\n<p><strong>Theme-Funktionen:<\/strong><\/p>\n<ul>\n<li>Automatische Feed-Links<\/li>\n<li>Titel-Tag<\/li>\n<li>Post-Formate<\/li>\n<li><a href=\"https:\/\/kinsta.com\/de\/blog\/thumbnails-regenerieren\/\">Thumbnails<\/a> posten<\/li>\n<li><a href=\"https:\/\/kinsta.com\/de\/blog\/html-vs-html5\/#what-is-html5\">HTML5-Elemente<\/a><\/li>\n<li>Eigenes Logo<\/li>\n<li>Selektive Auffrischung f\u00fcr Widgets<\/li>\n<li>Benutzerdefinierter Hintergrund<\/li>\n<li>Zwei Navigationsmen\u00fcs<\/li>\n<li>Eine Seitenleiste<\/li>\n<\/ul>\n<p><strong>Block Features:<\/strong><\/p>\n<ul>\n<li>Standard-Blockstile<\/li>\n<li>Editor-Stile<\/li>\n<li>Dunkle Editorstile (dunkler Hintergrund)<\/li>\n<li>Weit ausrichten<\/li>\n<li>Schriftgr\u00f6\u00dfen blocken<\/li>\n<li>Farbpaletten blocken<\/li>\n<li>Farbverlauf-Voreinstellungen blocken<\/li>\n<li>Inhalt des Starts<\/li>\n<li>Responsive Einbettungen<\/li>\n<li>Individuelle Linienh\u00f6he<\/li>\n<li>Experimentelle Linkfarbe<\/li>\n<li>Experimentelle benutzerdefinierte Abst\u00e4nde<\/li>\n<li>Custom-units (entfernt in WordPress 5.6)<\/li>\n<\/ul>\n<p>Die folgende Liste enth\u00e4lt die Funktionen, die beim Erstellen einer Website, die auf Twenty Twenty-One basiert, m\u00f6glicherweise relevanter sind.<\/p>\n<h3>Navigations-Men\u00fcs<\/h3>\n<p>Twenty Twenty-One unterst\u00fctzt zwei Men\u00fcpunkte, die <strong>Prim\u00e4rnavigation<\/strong>, die sich in der rechten oberen Ecke der Kopfzeile befindet, und die <strong>Fu\u00dfnavigation<\/strong>.<\/p>\n<figure id=\"attachment_83737\" aria-describedby=\"caption-attachment-83737\" style=\"width: 1678px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83737 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/menu-locations.jpg\" alt=\"Twenty Twenty-One Men\u00fcpunkte\" width=\"1678\" height=\"954\"><figcaption id=\"caption-attachment-83737\" class=\"wp-caption-text\">Twenty Twenty-One Men\u00fcpunkte<\/figcaption><\/figure>\n<p>Wenn sie zum Footer-Men\u00fc hinzugef\u00fcgt werden, werden <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-social-media-plugins\/\">soziale Links<\/a> automatisch erkannt und in <a href=\"https:\/\/kinsta.com\/de\/blog\/bilddateitypen\/#vector-image-file-formats\">SVG-Icons<\/a> f\u00fcr die unterst\u00fctzten sozialen Medien umgewandelt.<\/p>\n<figure id=\"attachment_83742\" aria-describedby=\"caption-attachment-83742\" style=\"width: 1376px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83742 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/social-icons.jpg\" alt=\"Twenty Twenty-One soziales Men\u00fc\" width=\"1376\" height=\"1294\"><figcaption id=\"caption-attachment-83742\" class=\"wp-caption-text\">Twenty Twenty-One soziales Men\u00fc<\/figcaption><\/figure>\n<h3>Post-Formate<\/h3>\n<p>Twenty Twenty-One unterst\u00fctzt neun Postformate: Link, Beiseite, Galerie, Bild, Zitat, Status, Video, Audio, Chat. Du kannst dein Beitragsformat in den Einstellungen des Editors unter <strong>Status &#038; Sichtbarkeit<\/strong> ausw\u00e4hlen.<\/p>\n<p>.<\/p>\n<figure id=\"attachment_83738\" aria-describedby=\"caption-attachment-83738\" style=\"width: 280px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83738 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/post-formats.jpg\" alt=\"Postformate\" width=\"280\" height=\"329\"><figcaption id=\"caption-attachment-83738\" class=\"wp-caption-text\">Twenty Twenty-One unterst\u00fctzt neun Postformate<\/figcaption><\/figure>\n<p>Um einen Blick darauf zu werfen, wie das Twenty Twenty-One Theme mit Postformaten umgeht, navigiere zum Ordner <em>template-parts\/excerpt<\/em> und w\u00e4hle eine Vorlage aus. \u00d6ffne zum Beispiel die Datei <em>excerpt-image.php<\/em> in deinem bevorzugten <a href=\"https:\/\/kinsta.com\/de\/blog\/kostenlose-html-editoren\/\">Code-Editor<\/a>. In dieser Datei siehst du den folgenden Code:<\/p>\n<pre><code class=\"language-php\">\/**\n * Show the appropriate content for the Image post format.\n *\n * @link https:\/\/developer.wordpress.org\/themes\/basics\/template-hierarchy\/\n *\n * @package WordPress\n * @subpackage Twenty_Twenty_One\n * @since 1.0.0\n *\/\n\n\/\/ If there is no featured-image, print the first image block found.\nif (\n\t! twenty_twenty_one_can_show_post_thumbnail() &&\n\thas_block( 'core\/image', get_the_content() )\n) {\n\n\ttwenty_twenty_one_print_first_instance_of_block( 'core\/image', get_the_content() );\n}\n\nthe_excerpt();<\/code><\/pre>\n<p>Der Code ist selbsterkl\u00e4rend, aber schauen wir uns das mal genauer an:<\/p>\n<ul>\n<li><code>has_block<\/code> <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/has_block\/\">bestimmt<\/a>, ob ein Beitrag oder ein String einen bestimmten Blocktyp enth\u00e4lt (in diesem Beispiel den Core Image Block).<\/li>\n<li><code>twenty_twenty_one_print_first_instance_of_block<\/code> ist eine Twenty Twenty-One Template-Funktion, die die erste Instanz eines Blocks im Inhalt druckt und dann wegbricht.<\/li>\n<\/ul>\n<p>Wenn ein Webseiten-Betrachter also ein Archiv mit Beitr\u00e4gen im &#8218;Bild&#8216;-Format ben\u00f6tigt, wird WordPress f\u00fcr jeden Beitrag im Archiv oben ein Bild anzeigen. Nach der gleichen Logik kannst du in jedes Beitragsformat eintauchen, indem du die entsprechenden Teile der Vorlage \u00fcberpr\u00fcfst.<\/p>\n<h3>Website-Identit\u00e4t und benutzerdefiniertes Logo<\/h3>\n<p>Twenty Twenty-One bietet Unterst\u00fctzung f\u00fcr ein benutzerdefiniertes 300\u00d7100 px-Logo. Die Einstellungen f\u00fcr ein benutzerdefiniertes Logo findest du im Fenster &#8222;<strong>Site-Identit\u00e4t<\/strong>&#8222;.<\/p>\n<figure id=\"attachment_83741\" aria-describedby=\"caption-attachment-83741\" style=\"width: 1894px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83741 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/site-identity.jpg\" alt=\"Website-Identit\u00e4t in Twenty Twenty-One\" width=\"1894\" height=\"1674\"><figcaption id=\"caption-attachment-83741\" class=\"wp-caption-text\">Website-Identit\u00e4t in Twenty Twenty-One<\/figcaption><\/figure>\n<p>Dieser Bildschirm beinhaltet:<\/p>\n<ul>\n<li>Eigenes Logo<\/li>\n<li>Website-Titel<\/li>\n<li>Stichwort<\/li>\n<li>Seite Icon<\/li>\n<\/ul>\n<h3>Editor Schriftgr\u00f6\u00dfen<\/h3>\n<p>Twenty Twenty-One unterst\u00fctzt die folgenden <a href=\"https:\/\/kinsta.com\/de\/blog\/wie-man-fonts-in-wordpress-aendert\/\">Schriftgr\u00f6\u00dfen<\/a>:<\/p>\n<ul>\n<li>Extra klein &#8211; 16<\/li>\n<li>Klein &#8211; 18<\/li>\n<li>Normal\/Mittel &#8211; 20<\/li>\n<li>Gro\u00df &#8211; 24<\/li>\n<li>Extra gro\u00df &#8211; 40<\/li>\n<li>Riesig &#8211; 96<\/li>\n<li>Gigantisch &#8211; 144<\/li>\n<\/ul>\n<p>Im Stylesheet des Themes werden die Gr\u00f6\u00dfen in <code>rem<\/code>-Einheiten festgelegt.<\/p>\n<figure id=\"attachment_83735\" aria-describedby=\"caption-attachment-83735\" style=\"width: 572px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83735 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/font-sizes.png\" alt=\"Im Stylesheet des Themes werden die Gr\u00f6\u00dfen in rem-Einheiten festgelegt.\" width=\"572\" height=\"502\"><figcaption id=\"caption-attachment-83735\" class=\"wp-caption-text\">Im Stylesheet des Themes werden die Gr\u00f6\u00dfen in rem-Einheiten festgelegt.<\/figcaption><\/figure>\n<h3>Farb-Einstellungen<\/h3>\n<p>Der Themen-Customizer bietet ein <strong>Farben &#038; Dunkel-Modus<\/strong>-Panel mit zwei Optionen:<\/p>\n<ul>\n<li>Ein einfacher Farbw\u00e4hler mit 10 vordefinierten Farbpaletten.<\/li>\n<li>Ein Kontrollk\u00e4stchen zum Ein-\/Ausschalten des Dunkelmodus.<\/li>\n<\/ul>\n<p>Das Bild unten zeigt eine hellgelbe Hintergrundfarbe mit einem dunkelgrauen Text.<\/p>\n<figure id=\"attachment_83727\" aria-describedby=\"caption-attachment-83727\" style=\"width: 554px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83727 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/colors.jpg\" alt=\"Farben &#038; Dunkle Modus-Einstellungen in Twenty Twenty-One\" width=\"554\" height=\"658\"><figcaption id=\"caption-attachment-83727\" class=\"wp-caption-text\">Farben &#038; Dunkle Modus-Einstellungen in Twenty Twenty-One<\/figcaption><\/figure>\n<p>Die Hintergrundfarbe ist standardm\u00e4\u00dfig pastellgr\u00fcn (<code>'#d1e4dd'<\/code>), aber die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-benutzerrollen\/\">Seiten-Administratoren<\/a> k\u00f6nnen leicht zwischen den folgenden Alternativen f\u00fcr die Hintergrundfarbe wechseln:<\/p>\n<ul>\n<li>Schwarz = <code>'#000000'<\/code>;<\/li>\n<li>Dunkelgrau = <code>'#28303D'<\/code>;<\/li>\n<li>Grau = <code>'#39414D'<\/code>;<\/li>\n<li>Gr\u00fcn = <code>'#D1E4DD'<\/code>;<\/li>\n<li>Blau = <code>'#D1DFE4'<\/code>;<\/li>\n<li>Violett = <code>'#D1D1E4'<\/code>;<\/li>\n<li>Rot = <code>'#E4D1D1'<\/code>;<\/li>\n<li>Orange = <code>'#E4DAD1'<\/code>;<\/li>\n<li>Gelb = <code>'#EEEADD'<\/code>;<\/li>\n<li>Wei\u00df = <code>'#FFFFFF'<\/code>;<\/li>\n<\/ul>\n<p>Die gleichen Farben sind als <strong>Blockfarbenpaletten <\/strong>in den Blockeinstellungen des Editors verf\u00fcgbar.<\/p>\n<p>Zus\u00e4tzlich unterst\u00fctzt Twenty Twenty-One mehrere <strong>Farbverlaufsvoreinstellungen<\/strong> f\u00fcr Bl\u00f6cke, die diese Funktion unterst\u00fctzen. Die Abbildung unten zeigt die Standardfarbverl\u00e4ufe in den Blockeinstellungen f\u00fcr Spalten.<\/p>\n<figure id=\"attachment_83752\" aria-describedby=\"caption-attachment-83752\" style=\"width: 280px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83752 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/color-gradients.png\" alt=\"Farbverlaufsvoreinstellungen\" width=\"280\" height=\"765\"><figcaption id=\"caption-attachment-83752\" class=\"wp-caption-text\">Acht Farbverlaufsvoreinstellungen in den Farbeinstellungen eines Blocks<\/figcaption><\/figure>\n<p>Aus der Sicht der Barrierefreiheit ist die Unterst\u00fctzung des Dark-Modus ein absolutes Novum f\u00fcr ein Standardthema.<\/p>\n<p>Tauchen wir etwas tiefer ein!<\/p>\n<h2>Unterst\u00fctzung des Dark-Modus im Twenty Twenty-One Theme<\/h2>\n<p>Im Anschluss an eine Diskussion im den Kanal <a href=\"https:\/\/wordpress.slack.com\/archives\/C02RP4VMP\/p1603294484103600\">#core-themes<\/a> Slack stellte <a href=\"https:\/\/make.wordpress.org\/core\/2020\/10\/22\/twenty-twenty-one-dark-mode-discussion\/\">Mel Choyce-Dwan die Dark Mode-Unterst\u00fctzung<\/a> f\u00fcr Twenty Twenty-One vor.<\/p>\n<figure id=\"attachment_83732\" aria-describedby=\"caption-attachment-83732\" style=\"width: 1338px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83732 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/dark-mode-mac.jpg\" alt=\"Aktivieren des Dunkelmodus in MacOS\" width=\"1338\" height=\"510\"><figcaption id=\"caption-attachment-83732\" class=\"wp-caption-text\">Aktivieren des Dunkelmodus in MacOS<\/figcaption><\/figure>\n<p>Zuerst war nicht klar, wie diese Funktion in Twenty Twenty-One h\u00e4tte implementiert werden k\u00f6nnen, wenn sie als Themefunktion oder als separates Projekt, das in einem Plugin ausgeliefert wird, hinzugef\u00fcgt worden w\u00e4re.<\/p>\n<p>Es gab f\u00fcnf m\u00f6gliche Optionen zur Auswahl:<\/p>\n<ul>\n<li>Website-Betreiber k\u00f6nnen die Unterst\u00fctzung des Dark-Modus deaktivieren und Website-Besucher k\u00f6nnen den Dark-Modus ein- und ausschalten, w\u00e4hrend sie die Website betrachten.<\/li>\n<li>Den Betreibern der Website ist es nur gestattet, die Unterst\u00fctzung des Dark-Modus zu deaktivieren (keine M\u00f6glichkeit f\u00fcr Besucher der Website, den Dark-Modus ein- oder auszuschalten).<\/li>\n<li>Aktivierung des Dark-Modus-Supports als &#8222;immer an&#8220;, w\u00e4hrend es den Besuchern der Webseite erm\u00f6glicht wird, es w\u00e4hrend der Betrachtung der Webseite umzuschalten.<\/li>\n<li>Aktivierung von Support f\u00fcr den Dark-Modus als &#8222;immer an&#8220; und Verhinderung, dass Besucher der Webseite den Dark-Modus ein- oder ausschalten k\u00f6nnen.<\/li>\n<li>\u00dcberhaupt kein Support f\u00fcr den Dark-Modus<\/li>\n<\/ul>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2020\/11\/10\/twenty-twenty-one-dark-mode-update\/\">Nach einer durchdachten Diskussion<\/a> wurde der Dark-Modus zum Thema hinzugef\u00fcgt. Jetzt:<\/p>\n<ul>\n<li><strong>Support im Dark-Modus ist als Opt-in-Funktion f\u00fcr Betreiber von Webseiten verf\u00fcgbar.<\/strong><\/li>\n<li>Die <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/pull\/622\">Umschalttaste<\/a> wurde aus der Benutzeroberfl\u00e4che des Editors entfernt und ist nur im Customizer verf\u00fcgbar.<\/li>\n<li>Die Umschalttaste f\u00fcr den Dark-Modus befindet sich in der unteren rechten Ecke (links bei RTL) und verschwindet, wenn der Webseiten-Betrachter die Seite nach unten scrollt.<\/li>\n<li>Wenn der Dark-Modus aktiviert ist, k\u00f6nnen es Webswiten-Betrachter je nach ihren pers\u00f6nlichen Vorlieben und <strong>unabh\u00e4ngig von ihren Betriebssystem-\/Browser-Einstellungen<\/strong> ein- oder ausschalten.<\/li>\n<\/ul>\n<figure id=\"attachment_83733\" aria-describedby=\"caption-attachment-83733\" style=\"width: 2410px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83733 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/dark-mode-off.jpg\" alt=\"Dark-Modus im Customizer aktiviert und auf der Vorderseite deaktiviert\" width=\"2410\" height=\"1194\"><figcaption id=\"caption-attachment-83733\" class=\"wp-caption-text\">Dark-Modus im Customizer aktiviert und auf der Vorderseite deaktiviert<\/figcaption><\/figure>\n<p>Selbst wenn der Dark-Modus als eine Verbesserung der Zug\u00e4nglichkeit angesehen wird, ist es nicht offensichtlich, dass deine Webseiten in jedem Kontext besser zug\u00e4nglich w\u00e4ren.<\/p>\n<p>Die gr\u00f6\u00dften Bedenken beziehen sich auf dunkle Logos und transparente Bilder. Der Wechsel von einem standardm\u00e4\u00dfig hellen Template zu einer dunklen Hintergrundfarbe k\u00f6nnte zu Lesbarkeitsproblemen f\u00fchren, die die Benutzerfreundlichkeit beeintr\u00e4chtigen und das Erscheinungsbild deiner Webseiten ruinieren k\u00f6nnen.<\/p>\n<p>Beispielsweise kann ein dunkles Logo auf hellem Hintergrund vollst\u00e4ndig verschwinden, wenn deine Leser den Dark-Modus auf ihrer Seite aktivieren. \u00c4hnliche Bedenken betreffen die <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\/618\">Bildhelligkeit und den Kontrast<\/a> sowie die <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\/620\">Opazit\u00e4t von R\u00e4ndern, Trennlinien und Trennlinien<\/a>.<\/p>\n<p>Aus diesem Grund solltest du, wenn du planst, Support im Dark-Modus f\u00fcr deine Webseite anzubieten, auch ber\u00fccksichtigen, wie deine Webseite mit einem dunklen Hintergrund aussehen wird.<\/p>\n<figure id=\"attachment_83734\" aria-describedby=\"caption-attachment-83734\" style=\"width: 2409px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83734 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/dark-mode-on.jpg\" alt=\"Dark-Modus im Customizer aktiviert und auf der Webseite aktiviert\" width=\"2409\" height=\"1193\"><figcaption id=\"caption-attachment-83734\" class=\"wp-caption-text\">Dark-Modus im Customizer aktiviert und auf der Webseite aktiviert<\/figcaption><\/figure>\n<p>Die Theme-Beitragenden sind sich dieser Probleme bewusst und die Diskussion geht auf Github weiter. Um einen genaueren Einblick in die Usability-Probleme des Dark-Modus zu bekommen und eine Gelegenheit, sich an der Diskussion zu beteiligen, schaut euch die vollst\u00e4ndige <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\">Liste der Probleme auf Github<\/a> an.<\/p>\n<p>Die Einstellungen f\u00fcr den Dark-Modus werden im LocalStorage gespeichert und k\u00f6nnen in den Entwicklertools des Browsers eingesehen werden.<\/p>\n<p>In <a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/storage\/localstorage\">Google Chrome<\/a> starte die Chrome WebTools und klicke auf die Registerkarte <strong>Anwendung<\/strong>. Finde den Abschnitt <strong>Speichern<\/strong> und erweitere das Men\u00fc Lokaler Speicher.<\/p>\n<figure id=\"attachment_83723\" aria-describedby=\"caption-attachment-83723\" style=\"width: 1740px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83723 size-full\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/brave-browser-local-storage.jpg\" alt=\"Dark-Modus Benutzereinstellungen im lokalen Speicher von Brave Browser\" width=\"1740\" height=\"1086\"><figcaption id=\"caption-attachment-83723\" class=\"wp-caption-text\">Dark-Modus Benutzereinstellungen im lokalen Speicher von Brave Browser<\/figcaption><\/figure>\n<p>Um ehrlich zu sein, der Dark-Modus ist heute im Kontext von Webseiten nicht \u00fcblich. Da jedoch ein neues WordPress Standard Theme nun den Dark-Modus unterst\u00fctzt, k\u00f6nnten wir eine \u00c4nderung in diesem speziellen Bereich der Zug\u00e4nglichkeit erwarten, da WordPress die meistgenutzte <a href=\"https:\/\/kinsta.com\/de\/blog\/cms-software\/\">CMS-Software<\/a> ist.<\/p>\n<p>Entwickler, die tiefer in den technischen Bereich eintauchen wollen, sollten sich diese ausf\u00fchrliche Anleitung zum <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-dark-mode-on-the-web\/\">Dark-Modus im Web<\/a> nicht entgehen lassen.<\/p>\n<h2>Stile und CSS benutzerdefinierte Eigenschaften<\/h2>\n<p>Davon abgesehen ist es jetzt an der Zeit, die interessantesten Features von Twenty Twenty-One f\u00fcr Theme-Entwickler zu entdecken.<\/p>\n<p>Fangen wir mit den CSS Custom Properties an.<\/p>\n<p>Wie bereits erw\u00e4hnt, basiert Twenty Twenty-One auf <a href=\"https:\/\/wordpress.org\/themes\/seedlet\/\">Seedlet<\/a>, einem zweispaltigen Theme, mit einer Sidebar in der Fu\u00dfzeile und drei Men\u00fcpunkten. Das Styling von Seedlet basiert komplett auf CSS Custom Properties und das macht es f\u00fcr Theme-Entwickler und fortgeschrittene Benutzer einfacher, <a href=\"https:\/\/kinsta.com\/de\/blog\/child-theme-wordpress-erstellen\/\">Child Themes<\/a> auf Automattic&#8217;s Theme zu bauen.<\/p>\n<p>Dasselbe gilt f\u00fcr Twenty Twenty-One. Das neue Standard-Theme kommt mit einem einspaltigen Layout, einer Sidebar f\u00fcr die Fu\u00dfzeile und zwei Men\u00fcpunkten. Das Stylesheet spiegelt das System der verschachtelten benutzerdefinierten Eigenschaften wider, die von Seedlet zur Verf\u00fcgung gestellt werden, und das macht Twenty Twenty-One zu einer perfekten Grundlage f\u00fcr die Erstellung von Child Themes und stark angepassten Webseiten.<\/p>\n<p><strong>CSS-Eigenschaften<\/strong> (auch bekannt als <strong>CSS-Variablen<\/strong>) sind spezielle Entit\u00e4ten, die bestimmte Werte enthalten, die \u00fcberall in deinem Stylesheet wiederverwendet werden k\u00f6nnen.<\/p>\n<p>Wenn du also einen bestimmten Farbakzent in deinem Dokument \u00e4ndern m\u00f6chtest, brauchst du keine globale Suche durchzuf\u00fchren, um herauszufinden, ob diese Farbe im gesamten Stylesheet vorkommt. Du musst nur einen anderen Eigenschaftswert innerhalb des <code>:root<\/code>&#8211;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:root\">Blocks<\/a> setzen<\/p>\n<figure id=\"attachment_83728\" aria-describedby=\"caption-attachment-83728\" style=\"width: 1970px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83728 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/css-custom-properties.jpg\" alt=\"CSS benutzerdefinierte Eigenschaften in Twenty Twenty-One\" width=\"1970\" height=\"1108\"><figcaption id=\"caption-attachment-83728\" class=\"wp-caption-text\">CSS benutzerdefinierte Eigenschaften in Twenty Twenty-One<\/figcaption><\/figure>\n<p>Ein Beispiel f\u00fcr eine einfache Anpassung: Angenommen, du m\u00f6chtest eine benutzerdefinierte Hintergrundfarbe einstellen. Daf\u00fcr brauchst du kein Child Theme zu erstellen. Du musst nur zwei CSS-Deklarationen in den Code-Editor des <a href=\"https:\/\/kinsta.com\/de\/blog\/bearbeitest-wordpress-code\/#css\"><strong>Additional<\/strong> CSS-Panels<\/a> einf\u00fcgen:<\/p>\n<pre><code class=\"language-css\">:root {\n\t--global--color-beige: #e6d7c1;\n}\n\nbody {\n\tbackground-color: var(--global--color-beige);\n}<\/code><\/pre>\n<figure id=\"attachment_83722\" aria-describedby=\"caption-attachment-83722\" style=\"width: 1682px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83722 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/additional-css.jpg\" alt=\"Benutzerdefiniertes CSS in Twenty Twenty-One Customizer\" width=\"1682\" height=\"786\"><figcaption id=\"caption-attachment-83722\" class=\"wp-caption-text\">Benutzerdefiniertes CSS in Twenty Twenty-One Customizer<\/figcaption><\/figure>\n<p>CSS benutzerdefinierte Eigenschaften sind sicher zu benutzen, da sie von allen g\u00e4ngigen Browsern unterst\u00fctzt werden, wie das Bild unten aus <a href=\"https:\/\/caniuse.com\/css-variables\">Can I Use<\/a> zeigt:<\/p>\n<figure id=\"attachment_83724\" aria-describedby=\"caption-attachment-83724\" style=\"width: 1326px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83724 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/caniuse-css-custom-properties.jpg\" alt=\"CSS benutzerdefinierte Eigenschaften werden von den meisten modernen Webbrowsern unterst\u00fctzt\" width=\"1326\" height=\"610\"><figcaption id=\"caption-attachment-83724\" class=\"wp-caption-text\">CSS benutzerdefinierte Eigenschaften werden von den meisten modernen Webbrowsern unterst\u00fctzt<\/figcaption><\/figure>\n<p>Wenn du tiefer in die benutzerdefinierten CSS-Eigenschaften eintauchen m\u00f6chtest, schau dir die <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_custom_properties\">MDN-Dokumentation<\/a> an.<\/p>\n<h2>Twenty Twenty-One Block-Muster<\/h2>\n<p>Twenty Twenty-One stellt verschiedene Muster f\u00fcr den Block-Editor zur Verf\u00fcgung. In einem <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-5-5\/#block-patterns\">fr\u00fcheren Blog-Beitrag<\/a> haben wir Blockmuster als <strong>vordefinierte Blocklayouts definiert, mit denen die Benutzer schnell komplexe Strukturen verschachtelter Bl\u00f6cke auf ihren Seiten einf\u00fcgen k\u00f6nnen.<\/strong><\/p>\n<p>WordPress 5.5 f\u00fchrte eine Handvoll Blockmuster ein und weitere sollten mit WordPress 5.6 kommen. Au\u00dferdem kommt Twenty Twenty-One mit einem eigenen Satz von Blockmustern.<\/p>\n<p>In Twenty Twenty-One sind die Blockmuster in der Datei <em>inc\/block-patterns.php<\/em> definiert. <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\/50\">Twenty Twenty-One Muster<\/a> variieren von einfachen Mustern wie dem <em>Large Text<\/em> Muster, das ein einzelnes H2-Element enth\u00e4lt, bis hin zu komplexeren Mustern, wie <em>Overlapping Images und Text and Media und Text Article Title<\/em>.<\/p>\n<figure id=\"attachment_83744\" aria-describedby=\"caption-attachment-83744\" style=\"width: 580px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83744 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twenty-twenty-one-media-and-text-block-pattern.jpg\" alt=\"Medien- und Textartikel Titelblockmuster in Twenty Twenty-One\" width=\"580\" height=\"306\"><figcaption id=\"caption-attachment-83744\" class=\"wp-caption-text\">Medien- und Textartikel Titelblockmuster in Twenty Twenty-One<\/figcaption><\/figure>\n<p>Momentan bietet das Theme die folgenden Muster:<\/p>\n<ul>\n<li><strong>Gro\u00dfer Text<\/strong><\/li>\n<li><strong>Links-Bereich<\/strong>: Ein riesiger Text, gefolgt von sozialen Netzwerken und Links zu E-Mail-Adressen.<\/li>\n<li><strong>Titel des Medien- und Textartikels<\/strong>: Ein Media &#038; Text Block mit einem gro\u00dfen Bild auf der linken Seite und einer \u00dcberschrift auf der rechten Seite. Auf die \u00dcberschrift folgt ein Trennzeichen und ein Beschreibungsabsatz.<\/li>\n<li><strong>\u00dcberlappende Bilder<\/strong>: Drei Bilder innerhalb eines Blocks mit \u00fcberlappenden Spalten.<\/li>\n<li><strong>Zwei Bilder Showcase<\/strong>: Ein <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-medienbibliothek\/\">Medien<\/a>&#8211; und Textblock mit einem gro\u00dfen Bild auf der linken Seite und einem kleineren Bild mit einem umrandeten Rahmen auf der rechten Seite.<\/li>\n<li><strong>\u00dcberlappende Bilder und Text<\/strong>: Ein \u00fcberlappender Spaltenblock mit zwei Bildern und einer Textbeschreibung.<\/li>\n<li><strong>Portfolio-Liste<\/strong>: Eine Liste von Projekten mit Miniaturbildern.<\/li>\n<li><strong>Kontaktinformationen<\/strong>: Ein Block mit 3 Spalten mit Kontaktinformationen und Social Media Links.<\/li>\n<\/ul>\n<figure id=\"attachment_83745\" aria-describedby=\"caption-attachment-83745\" style=\"width: 792px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83745 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twenty-twenty-one-overlapping-images-block-pattern.jpg\" alt=\"\u00dcberlappende Bilder Blockmuster in Twenty Twenty-One\" width=\"792\" height=\"1028\"><figcaption id=\"caption-attachment-83745\" class=\"wp-caption-text\">\u00dcberlappende Bilder Blockmuster in Twenty Twenty-One<\/figcaption><\/figure>\n<p>The availability of so many block patterns is great for both users and developers. Users will be allowed to quickly and easily add complex blocks of code to their posts and pages, developers can use those patterns as useful templates to build upon when coding their own.<\/p>\n<h2>Das Twenty Twenty-One Blocks-Experiment<\/h2>\n<p>Twenty Twenty-One Blocks ist eine separate blockbasierte experimentelle Version des Twenty Twenty-One Themes. Sein Zweck ist es, es zu teilen und jeden auf dem Laufenden zu halten, was auf dem Full Site Editing Experiment passiert, um jedem die Chance zu geben, in die neuen FSE Features einzutauchen, bevor sie Teil des WordPress-Core werden.<\/p>\n<p>Es ist <a href=\"https:\/\/make.wordpress.org\/themes\/2020\/10\/07\/block-based-themes-and-wordpress-5-6\/\">unwahrscheinlich, dass wir es sehen werden<\/a>, dass diese experimentelle Version in den WordPress-Core mit WordPress 5.6 integriert wird. <a href=\"https:\/\/make.wordpress.org\/themes\/2020\/10\/23\/developing-the-full-site-editing-version-of-twenty-twenty-one\/\">Laut Carolina Nymark<\/a>,<\/p>\n<blockquote><p>Das Theme wird Gutenberg und das Full Site Editing Experiment ben\u00f6tigen, um aktiviert zu werden. Es wird nicht Teil vom Core sein, aber sobald es fertig ist, wird es im Theme-Verzeichnis verf\u00fcgbar sein.<\/p><\/blockquote>\n<p>Zum Zeitpunkt der Erstellung dieses Artikels ben\u00f6tigt <strong>Twenty Twenty-One Blocks das Gutenberg-Plugin<\/strong>. Sobald sowohl das Theme als auch das Plugin installiert und aktiviert sind, erscheint ein Site Editor Men\u00fcpunkt in deinem WordPress Admin Men\u00fc (du brauchst das Full Site Editing Experiment nicht mehr zu aktivieren).<\/p>\n<figure id=\"attachment_83740\" aria-describedby=\"caption-attachment-83740\" style=\"width: 519px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83740 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/site-editor-menu-item.jpg\" alt=\"Der Men\u00fcpunkt Site Editor im Twenty Twenty-One Blocks-Experiment\" width=\"519\" height=\"438\"><figcaption id=\"caption-attachment-83740\" class=\"wp-caption-text\">Der Men\u00fcpunkt Site Editor im Twenty Twenty-One Blocks-Experiment<\/figcaption><\/figure>\n<p>Now, click on the new <strong>Site Editor<\/strong> menu item to open the full-site editing interface and start editing any element on the page using the block editor.<\/p>\n<figure id=\"attachment_83736\" aria-describedby=\"caption-attachment-83736\" style=\"width: 2260px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83736 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/full-site-editing.jpg\" alt=\"Vollst\u00e4ndige Bearbeitung der Webseite in Twenty Twenty-One Blocks\" width=\"2260\" height=\"1278\"><figcaption id=\"caption-attachment-83736\" class=\"wp-caption-text\">Vollst\u00e4ndige Bearbeitung der Webseite in Twenty Twenty-One Blocks<\/figcaption><\/figure>\n<p>Hier werden wir nicht in die technischen Dinge eintauchen. Es gen\u00fcgt zu sagen, dass klassische Themes und blockbasierte Themes strukturell verschieden sind.<\/p>\n<p>Das Bild unten zeigt den Inhalt des Ordners Twenty Twenty-One Blocks:<\/p>\n<figure id=\"attachment_83747\" aria-describedby=\"caption-attachment-83747\" style=\"width: 1266px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83747 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twentytwentyone-blocks.jpg\" alt=\"Ordner Twenty Twenty-One Blocks\" width=\"1266\" height=\"700\"><figcaption id=\"caption-attachment-83747\" class=\"wp-caption-text\">Ordner Twenty Twenty-One Blocks<\/figcaption><\/figure>\n<p>Ihr w\u00fcrdet die <em>experimental-theme.json<\/em>-Datei und die Ordner <em>block-templates<\/em> und <em>block-template-parts<\/em> bemerken.<\/p>\n<p>Der Hauptunterschied zwischen traditionellen WordPress Themes und blockbasierten Themes ist, dass blockbasierte Themes Templates enthalten, die komplett aus Bl\u00f6cken bestehen.<\/p>\n<p>\u00d6ffne zum Beispiel <em>block-template-parts\/header.html<\/em> in deinem <a href=\"https:\/\/kinsta.com\/de\/blog\/kostenlose-html-editoren\/\">Code-Editor<\/a>. Du solltest den folgenden Code sehen:<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:spacer {\"height\":70} --&gt;\n&lt;div style=\"height:70px\" aria-hidden=\"true\" class=\"wp-block-spacer\"&gt;&lt;\/div&gt;\n&lt;!-- \/wp:spacer --&gt;\n\n&lt;!-- wp:columns {\"align\":\"wide\"} --&gt;\n&lt;div class=\"wp-block-columns alignwide\"&gt;&lt;!-- wp:column --&gt;\n&lt;div class=\"wp-block-column\"&gt;&lt;!-- wp:site-title \/--&gt;\n\n&lt;!-- wp:site-tagline \/--&gt;&lt;\/div&gt;\n&lt;!-- \/wp:column --&gt;\n\n&lt;!-- wp:column --&gt;\n&lt;div class=\"wp-block-column\"&gt;&lt;!-- wp:navigation {\"orientation\":\"horizontal\",\"itemsJustification\":\"right\"} --&gt;\n&lt;!-- wp:navigation-link {\"label\":\"Home\",\"url\":\"#\"} \/--&gt;\n\n&lt;!-- wp:navigation-link {\"label\":\"Blog\",\"url\":\"#\"} \/--&gt;\n\n&lt;!-- wp:navigation-link {\"label\":\"Work\",\"url\":\"#\"} \/--&gt;\n\n&lt;!-- wp:navigation-link {\"label\":\"Contact\",\"url\":\"#\"} \/--&gt;\n&lt;!-- \/wp:navigation --&gt;&lt;\/div&gt;\n&lt;!-- \/wp:column --&gt;&lt;\/div&gt;\n&lt;!-- \/wp:columns --&gt;\n\n&lt;!-- wp:spacer {\"height\":70} --&gt;\n&lt;div style=\"height:70px\" aria-hidden=\"true\" class=\"wp-block-spacer\"&gt;&lt;\/div&gt;\n&lt;!-- \/wp:spacer --&gt;<\/code><\/pre>\n<p>Wie du sehen kannst, wurde die klassische <a href=\"https:\/\/kinsta.com\/de\/blog\/code-wordpress-header-footer-hinzufugt\/\"><em>Header.php<\/em> Template Datei<\/a> durch eine <em>.html<\/em> Datei ersetzt, die mehrere Bl\u00f6cke enth\u00e4lt.<\/p>\n<p>Ihr k\u00f6nnt euch die in Arbeit befindliche Version des Twenty Twenty-One Blocks Themes aus dem <a href=\"https:\/\/github.com\/WordPress\/theme-experiments\">Theme-Experiments<\/a>-Projekt auf Github herunterladen.<\/p>\n<p>Wenn du ein Theme-Entwickler bist, findest du in der <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/master\/docs\/designers-developers\/developers\/themes\/block-based-themes.md\">offiziellen Dokumentation<\/a> alles, was du \u00fcber blockbasierte Themes wissen musst.<\/p>\n<p>Wenn du gerne zum Full Site Editing Experiment beitragen m\u00f6chtest, schick uns dein Feedback <a href=\"https:\/\/make.wordpress.org\/test\/handbook\/full-site-editing-outreach-experiment\/\">hier<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Twenty Twenty-One Blocks ist ein experimentelles Theme und sollte nicht in der Produktion verwendet werden! Spiel damit in einer <a href=\"https:\/\/kinsta.com\/de\/docs\/wordpress-hosting\/staging-umgebung\/\">Staging-Umgebung<\/a> herum.<\/p>\n<\/aside>\n\n<h2>Wie baue ich ein Child Theme auf Twenty Twenty-One<\/h2>\n<p>Standard WordPress Themes sind gro\u00dfartige Startpunkte, um die Grundlagen der <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-entwicklergehalt\/\">Theme-Entwicklung<\/a> zu lernen und um mit der Erstellung eigener <a href=\"https:\/\/kinsta.com\/de\/blog\/child-theme-wordpress-erstellen\/\">Child Themes<\/a> zu beginnen.<\/p>\n<p>Default Themes folgen den Richtlinien der offiziellen <a href=\"https:\/\/make.wordpress.org\/core\/handbook\/best-practices\/coding-standards\/\">WordPress Coding Standards<\/a> und sind konform mit den <a href=\"https:\/\/en.wikipedia.org\/wiki\/Web_standards\">Webstandards<\/a>.<\/p>\n<p>Gibt es einen besseren Ort, um <a href=\"https:\/\/kinsta.com\/de\/blog\/skriptsprachen\/\">coden zu lernen<\/a>?<\/p>\n<p>Child Themes sind ein gro\u00dfartiges WordPress-Feature, mit dem du das Layout, die Funktionalit\u00e4ten und die Struktur deiner Seiten anpassen kannst. Mit den folgenden Beispielen werden wir in jeden Aspekt der Theme-Anpassung eintauchen.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"-1\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Dein Child Theme einrichten<\/h3>\n<p>Das Erstellen eines WordPress Child Themes ist ein 3-stufiger Prozess:<\/p>\n<h4>1. Erstelle den Child Theme-Ordner<\/h4>\n<p>Erstelle einen neuen Ordner in <em>wp-content\/themes<\/em> und benenne es wie du willst. Aber denke daran, dass es ein eindeutiger Name sein sollte. Das <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/#1-create-a-child-theme-folder\">Child Themes-Handbuch<\/a> empfiehlt, den gleichen Namen wie das Parent-Theme zu verwenden, wobei <strong>-child<\/strong> am Ende angeh\u00e4ngt werden sollte.<\/p>\n<p>So k\u00f6nnte man den neuen Ordner <strong>twentytwentyone-child<\/strong> nennen.<\/p>\n<h4>2. Erstelle eine style.css Datei<\/h4>\n<p>Gehe nun in das Verzeichnis deines Child Themes und erstelle eine neue <em>style.css<\/em> Datei mit dem folgenden Code:<\/p>\n<pre><code class=\"language-php\">\/*\nTheme Name: My Twenty Twenty One Child Theme\nTheme URI: https:\/\/example.com\nDescription: A child theme for Twenty Twenty One.\nAuthor: Your Name\nAuthor URI: https:\/\/example.com\/\nTemplate: twentytwentyone\nVersion: 1.0\nLicense: GNU General Public License v2 or later\nLicense URI: https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/\n<\/code><\/pre>\n<p>Der Informations-Header erm\u00f6glicht es WordPress, mit deinem Child Theme richtig umzugehen.<\/p>\n<ul>\n<li>Theme Name: Der eindeutige Name f\u00fcr das Theme.<\/li>\n<li>Theme URI: Wo Benutzer den Code oder die Dokumentation f\u00fcr das Theme finden k\u00f6nnen.<\/li>\n<li>Beschreibung: Beschreibender Text, der den Benutzern hilft zu verstehen, was das Theme macht.<\/li>\n<li>Der Autor: Dein Name<\/li>\n<li>Autor URI: Die Webseite des Autors.<\/li>\n<li>Template: Der Ordner, in dem das \u00fcbergeordnete Theme gespeichert ist. Verwende den Ordnernamen und nicht den Namen des Themes. Ohne diese Zeile wird dein Theme nicht als Child Theme funktionieren.<\/li>\n<li>Version: Die Versionsnummer<\/li>\n<li>Lizenz: Die Lizenz, die <a href=\"https:\/\/developer.wordpress.org\/themes\/getting-started\/wordpress-licensing-the-gpl\/\">GNU sein muss<\/a>.<\/li>\n<li>Lizenz: Die Lizenz URI: Der Link zu Informationen \u00fcber die Lizenz.<\/li>\n<\/ul>\n<p>Unterhalb dieses Textes kannst du deine CSS-Deklarationsbl\u00f6cke hinzuf\u00fcgen, wie ich dir gleich zeigen werde.<\/p>\n<h4>3. Erstelle eine functions.php Datei<\/h4>\n<p>Bei Twenty Twenty-One brauchst du auch eine <em>functions.php<\/em> Datei. Erstelle also deine eigene im Verzeichnis des Child Themes, \u00f6ffne es in deinem Code-Editor und f\u00fcge den folgenden Code hinzu:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/* enqueue scripts and style from parent theme *\/\n   \nfunction twentytwentyone_styles() {\n\twp_enqueue_style( 'child-style', get_stylesheet_uri(),\n\tarray( 'twenty-twenty-one-style' ), wp_get_theme()-&gt;get('Version') );\n}\nadd_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');<\/code><\/pre>\n<p>Da das Twenty Twenty-One Theme <code>get_template_directory()<\/code> benutzt, um sein Stylesheet zu laden, musst du das Stylesheet des Child Themes mit der Aktion <code>wp_enqueue_scripts<\/code> einreihen.<\/p>\n<p>Danach speicherst du deine Dateien, \u00f6ffnest dein WordPress Dashboard, bl\u00e4tterst zu <strong>Appearance -&gt;<\/strong> <strong>Themes<\/strong> und aktivierst dein Twenty Twenty-One&#8217;s Child Theme.<\/p>\n<p>F\u00fcgen wir nun unsere Anpassungen hinzu.<\/p>\n<h3>Wie man benutzerdefinierte Stile hinzuf\u00fcgt<\/h3>\n<p>Wenn es darum geht, das Layout deiner WordPress Webseite anzupassen, hast du mehrere M\u00f6glichkeiten, deinen eigenen <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-css\/\">CSS-Code hinzuzuf\u00fcgen<\/a>. Das Panel <strong>Zus\u00e4tzliches CSS<\/strong> des Customizers k\u00f6nnte f\u00fcr kleine \u00c4nderungen ausreichen.<\/p>\n<p>Aber ein Child Theme w\u00e4re eine bessere Option, wenn du erweiterte Anpassungen vornehmen oder deinen Code auf verschiedene WordPress-Webseiten exportieren musst.<\/p>\n<p>Versuchen wir es mal mit einer einfachen Anpassung: \u00c4ndern des Standard-Schriftstacks.<\/p>\n<p>Angenommen, du m\u00f6chtest einen anderen Fontstapel laden oder einfach deine <a href=\"https:\/\/kinsta.com\/de\/blog\/moderne-schriften\/\">Lieblingsschrift<\/a> zu den standardm\u00e4\u00dfigen Twenty Twenty-One Schriftfamilien hinzuf\u00fcgen.<\/p>\n<p>Wie machst du es?<\/p>\n<p>Hier zeige ich dir, wie du die Standardschriftart f\u00fcr H1-\u00dcberschriften \u00e4ndern kannst, aber du kannst die <a href=\"https:\/\/kinsta.com\/de\/blog\/besten-programmierschriften\/\">Schriftfamilie<\/a> f\u00fcr jedes Textelement deiner Webseite \u00e4ndern.<\/p>\n<p>Als erstes \u00f6ffnest du die Datei <em>style.css<\/em> von Thenty Twenty-One und findest den folgenden CSS-Block:<\/p>\n<pre><code class=\"language-css\">h1,\n.h1,\nh2,\n.h2,\nh3,\n.h3,\nh4,\n.h4,\nh5,\n.h5,\nh6,\n.h6 {\n\tclear: both;\n\tfont-family: var(--heading--font-family);\n\tfont-weight: var(--heading--font-weight);\n}<\/code><\/pre>\n<p>Wie du sehen kannst, wird die Schriftfamilie f\u00fcr \u00dcberschriften in der <code>--heading--font--family<\/code>-Variablen festgelegt.<\/p>\n<p>Gehe nun zum <code>:root{}<\/code> Block und finde die folgende Deklaration:<\/p>\n<pre><code class=\"language-css\">--heading--font-family: var(--global--font-primary);<\/code><\/pre>\n<p><code>--heading--font-family<\/code> h\u00e4ngt von der <code>--global--font-primary<\/code>-Variablen ab, die ganz oben im <code>:root{}<\/code>-Block definiert ist:<\/p>\n<pre><code class=\"language-css\">:root{\n\t\/* Font Family *\/\n\t--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif);\n\t...\n}<\/code><\/pre>\n<p>Jetzt wissen wir, was wir \u00e4ndern m\u00fcssen!<\/p>\n<p>Kopiere die <code>--global--font-primary<\/code>-Deklaration aus dem Parent-Stylesheet\u00a0 und f\u00fcge es in die <em>style.css<\/em> deines Childs ein. \u00c4ndere dann den Namen und den Wert der Eigenschaft wie unten gezeigt:<\/p>\n<pre><code class=\"language-css\">:root{\n\t\/* Font Family *\/\n\t--global--font-primary-child: var(--font-headings, Ubuntu, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Cantarell, \"Helvetica Neue\", sans-serif);\n\n\t--global--font-family-child: var(--global--font-primary-child);\n}<\/code><\/pre>\n<p>Sobald du deinen benutzerdefinierten Schriftstack deklariert hast, kannst du es in deinem Stylesheet verwenden, wo immer du willst. H1 \u00dcberschriften in unserem Beispiel:<\/p>\n<pre><code class=\"language-css\">h1,\n.h1 {\n\tfont-family: var(--global--font-family-child);\n}<\/code><\/pre>\n<p>Speichere das child-<em>style.css<\/em> und lade die Seite neu. Du solltest Ubuntu als die neue Standardschriftfamilie f\u00fcr die \u00dcberschriften deiner Seite sehen.<\/p>\n<figure id=\"attachment_83729\" aria-describedby=\"caption-attachment-83729\" style=\"width: 2612px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83729 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/custom-font-family.png\" alt=\"Standard-Schriftfamilie vs. benutzerdefinierte Schriftfamilie in Twenty Twenty-One\" width=\"2612\" height=\"1576\"><figcaption id=\"caption-attachment-83729\" class=\"wp-caption-text\">Standard-Schriftfamilie vs. benutzerdefinierte Schriftfamilie in Twenty Twenty-One<\/figcaption><\/figure>\n<p>Jetzt, da ihr wisst, wie man den Stil von Twenty Twenty-One mit einem Child Theme anpassen kann, k\u00f6nnen wir die fortgeschritteneren Funktionen erkunden.<\/p>\n<h3>Wie man neue Blockmuster hinzuf\u00fcgt<\/h3>\n<p>In diesem Beispiel werden wir ein benutzerdefiniertes Blockmuster erstellen, das einen zweispaltigen Block mit einem runden Bild auf der linken Seite, einer H4-\u00dcberschrift und einem Absatz auf der rechten Seite enth\u00e4lt.<\/p>\n<p>Du kannst dein Muster direkt im Blockeditor erstellen oder den <a href=\"https:\/\/kinsta.com\/de\/blog\/bearbeitest-wordpress-code\/\">Code eines bestehenden Blockmusters anpassen<\/a>.<\/p>\n<p>Wenn du dich daf\u00fcr entscheidest, dein Muster im Block-Editor zu erstellen, musst du nur die notwendigen Bl\u00f6cke zu einem Beitrag oder Seitenentwurf hinzuf\u00fcgen, dann zum Code-Editor wechseln und den entsprechenden Code kopieren.<\/p>\n<figure id=\"attachment_83725\" aria-describedby=\"caption-attachment-83725\" style=\"width: 1058px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83725 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/code-editor-2.png\" alt=\"Ein zweispaltiger Block im Code-Editor\" width=\"1058\" height=\"528\"><figcaption id=\"caption-attachment-83725\" class=\"wp-caption-text\">Ein zweispaltiger Block im Code-Editor<\/figcaption><\/figure>\n<p>Wir k\u00f6nnen nun unser Muster in der <em>functions.php<\/em> Datei des Child Themes registrieren:<\/p>\n<pre><code class=\"language-php\">add_action( 'init', function(){\n\n\tregister_block_pattern_category( \n\t\t'custom-patterns', \n\t\tarray( 'label' =&gt; esc_html__( 'Custom patterns', 'twentytwentyone-child' ) ) );\n\n\tregister_block_pattern(\n\t'twentytwentyone-child\/custom-bio-pattern',\n\tarray(\n\t\t'title'\t\t\t=&gt; __( 'Author Bio', 'twentytwentyone-child' ),\n\t\t'description'\t=&gt; _x( 'A block with 2 columns that displays an avatar image, a heading and a paragraph.', 'Block pattern description', 'twentytwentyone-child' ),\n\t\t'content'\t\t=&gt; '&lt;!-- wp:columns {\"verticalAlignment\":null} --&gt; &lt;div class=\"wp-block-columns\"&gt;&lt;!-- wp:column {\"verticalAlignment\":\"center\",\"width\":\"33.33%\"} --&gt; &lt;div class=\"wp-block-column is-vertically-aligned-center\" style=\"flex-basis:33.33%\"&gt;&lt;!-- wp:image {\"id\":29,\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"className\":\"is-style-rounded\"} --&gt; &lt;figure class=\"wp-block-image size-large is-style-rounded\"&gt;&lt;img src=\"' . esc_url( get_stylesheet_directory_uri() ) . '\/assets\/images\/Kinsta-logo.png\" alt=\"Kinsta\" \/&gt;&lt;\/figure&gt; &lt;!-- \/wp:image --&gt;&lt;\/div&gt; &lt;!-- \/wp:column --&gt; &lt;!-- wp:column {\"width\":\"66.66%\"} --&gt; &lt;div class=\"wp-block-column\" style=\"flex-basis:66.66%\"&gt;&lt;!-- wp:heading {\"level\":4} --&gt; &lt;h4&gt;About Kinsta&lt;\/h4&gt; &lt;!-- \/wp:heading --&gt; &lt;!-- wp:paragraph --&gt; &lt;p&gt;Kinsta was founded in 2013 with a desire to change the status quo. We set out to create the best hosting platform in the world, and that\u2019s our promise. We don\u2019t settle and are here to stay.&lt;\/p&gt; &lt;!-- \/wp:paragraph --&gt;&lt;\/div&gt; &lt;!-- \/wp:column --&gt;&lt;\/div&gt; &lt;!-- \/wp:columns --&gt;',\n\t\t'categories'\t=&gt; array( 'custom-patterns' ),\n\t)\n\t);\n});<\/code><\/pre>\n<p>Der obige Code registriert die Kategorie <strong>Benutzerdefinierte<\/strong> <strong>Muster<\/strong> und das <strong>Autoren-Bio<\/strong>-Muster.<\/p>\n<p>Beachte den Code, den wir benutzt haben, um das <code>img<\/code>-Element zu bauen:<\/p>\n<pre><code class=\"language-php\">&lt;img src=\"' . esc_url( get_stylesheet_directory_uri() ) . '\/assets\/images\/Kinsta-logo.png\" alt=\"Kinsta\" \/&gt;<\/code><\/pre>\n<p>Die <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_stylesheet_directory_uri\/\">Funktion<\/a> <code>get_stylesheet_directory_uri()<\/code> liefert die URI des Verzeichnisses des Child Themes (das Bild wurde vorher in den Ordner <em>assets<\/em> des Child Themes hinzugef\u00fcgt).<\/p>\n<p>Speichere deine \u00c4nderungen und erstelle einen neuen Beitrag oder eine neue Seite.<\/p>\n<p>Jetzt solltest du das neue Muster im Block-Inserter finden.<\/p>\n<figure id=\"attachment_83730\" aria-describedby=\"caption-attachment-83730\" style=\"width: 2306px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83730 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/custom-pattern.jpg\" alt=\"Ein benutzerdefiniertes Blockmuster zu Twenty Twenty-One hinzugef\u00fcgt\" width=\"2306\" height=\"908\"><figcaption id=\"caption-attachment-83730\" class=\"wp-caption-text\">Ein benutzerdefiniertes Blockmuster zu Twenty Twenty-One hinzugef\u00fcgt<\/figcaption><\/figure>\n<h3>Eine Template-Datei anpassen<\/h3>\n<p>Wenn du eine neue Template-Datei f\u00fcr ein bestimmtes Archiv oder einen einzelnen Beitrag\/Seite erstellen m\u00f6chtest, musst du eine neue <em>.php<\/em>-Vorlage entsprechend der WordPress <a href=\"https:\/\/kinsta.com\/de\/blog\/child-theme-wordpress-erstellen\/#how-wordpress-chooses-template-files\">Template-Hierarchie<\/a> erstellen.<\/p>\n<p>Wenn du aber nur eine bestehende Vorlage (oder einen Vorlagenteil) bearbeiten willst, brauchst du nur die Originalvorlage aus dem Parent-Theme kopieren und an der entsprechenden Stelle deines Child Themes einf\u00fcgen (lies mehr \u00fcber dieses Thema in unserer <a href=\"https:\/\/kinsta.com\/de\/blog\/child-theme-wordpress-erstellen\/#the-files-in-a-wordpress-child-theme\">erweiterten Anleitung f\u00fcr Child Themes<\/a>).<\/p>\n<p>Angenommen, du m\u00f6chtest den Text &#8220; Proudly powered by WordPress&#8220; anpassen. Du hast mehrere M\u00f6glichkeiten, diese <a href=\"https:\/\/kinsta.com\/de\/blog\/entfernst-powered-by-wordpress\/\">Zeile zu entfernen oder anzupassen<\/a>. F\u00fcr unser Beispiel wollen wir es manuell \u00e4ndern.<\/p>\n<p>Kopiere dazu die Template-Datei <em>footer.php<\/em> aus dem Parent-Ordner und f\u00fcge es in das Wurzelverzeichnis deines Child Themes ein. Wenn du fertig bist, \u00f6ffne die <code>footer.php<\/code> deines Child Themes in deinem Code-Editor und finde den folgenden Code:<\/p>\n<pre><code class=\"language-php\">&lt;div class=\"powered-by\"&gt;\n\t&lt;?php\n\tprintf(\n\t\t\/* translators: %s: WordPress. *\/\n\t\tesc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),\n\t\t'&lt;a href=\"' . esc_attr__( 'https:\/\/wordpress.org\/', 'twentytwentyone' ) . '\"&gt;WordPress&lt;\/a&gt;'\n\t);\n\t?&gt;\n&lt;\/div&gt;&lt;!-- .powered-by --&gt;<\/code><\/pre>\n<p>Jetzt kannst du deine \u00c4nderungen vornehmen. Nehmen wir an, du m\u00f6chtest deinem Webhost Credits geben, dann ersetze einfach das <code>a<\/code>-Element wie unten gezeigt:<\/p>\n<pre><code class=\"language-php\">&lt;div class=\"powered-by\"&gt;\n\t&lt;?php\n\tprintf(\n\t\tesc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),\n\t\t'&lt;a href=\"https:\/\/kinsta.com\/\"&gt;Kinsta&lt;\/a&gt;'\n\t);\n\t?&gt;\n&lt;\/div&gt;&lt;!-- .powered-by --&gt;<\/code><\/pre>\n<p>Um diesen Text zu entfernen, kommentiere ihn einfach aus oder l\u00f6sche das <code>div.powered-by<\/code>-Element:<\/p>\n<pre><code class=\"language-php\">&lt;!-- &lt;div class=\"powered-by\"&gt;\n\t&lt;?php\n\tprintf(\n\t\t\/* translators: %s: WordPress. *\/\n\t\tesc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),\n\t\t'&lt;a href=\"' . esc_attr__( 'https:\/\/wordpress.org\/', 'twentytwentyone' ) . '\"&gt;WordPress&lt;\/a&gt;'\n\t);\n\t?&gt;\n&lt;\/div&gt; --&gt;<\/code><\/pre>\n<p>Und das war&#8217;s. Nun, ausgehend von den einfachen Beispielen oben, kannst du weitere aufregende Anpassungen vornehmen und deine Webseite mit dem Twenty Twenty-One Theme auf die n\u00e4chste Stufe bringen.<\/p>\n\n<h2>Zusammenfassung<\/h2>\n<p>Das Twenty Twenty-One Theme ist der dritte Versuch, Menschen ohne fortgeschrittene technische F\u00e4higkeiten die Erstellung von Webseiten zu erm\u00f6glichen. Es ist ein minimalistisches, gut funktionierendes und zug\u00e4ngliches WordPress Theme, das auch f\u00fcr eine Vielzahl von Anwendungsf\u00e4llen geeignet ist. WordPress-Seiten, die mit dem Twenty Twenty-One Theme betrieben werden, gibt es in allen Formen und Gr\u00f6\u00dfen. Um herauszufinden, ob ein Theme Twenty Twenty-One verwendet, schau dir unser praktisches <a href=\"https:\/\/kinsta.com\/de\/tools\/wordpress-theme-detector\/\">WordPress Theme Detector Tool<\/a> an.<\/p>\n<p>Das neue Standard-Theme wurde mit Blick auf den Block-Editor entworfen und kann sowohl von Benutzern als auch von Entwicklern leicht angepasst werden.<\/p>\n<p>Jetzt bist du an der Reihe: Hast du das Twenty Twenty-One Theme schon installiert? Welche Erfahrungen hast du mit ihm gemacht? Teile deine Gedanken im Kommentarbereich mit!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Twenty Twenty-One ist das neue WordPress Standard Theme, das mit WordPress 5.6 kommt. Wenn du auf ein voll funktionsf\u00e4higes WordPress Theme wartest, wirst du vielleicht ein &#8230;<\/p>\n","protected":false},"author":36,"featured_media":39459,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[29,120],"topic":[1009],"class_list":["post-39455","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-wordpress","tag-wordpresstheme","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>Twenty Twenty-One: Ein tiefer Einblick in das neue WordPress-Standardtheme<\/title>\n<meta name=\"description\" content=\"Das Twenty Twenty-One Theme ist das Standard Theme, das mit WordPress 5.6 eingef\u00fchrt wird. Seht euch in diesem ausf\u00fchrlichen Leitfaden alle seine wichtigsten Funktionen an.\" \/>\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-one-theme\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Twenty Twenty-One: Ein tiefer Einblick in das neue WordPress-Standardtheme\" \/>\n<meta property=\"og:description\" content=\"Das Twenty Twenty-One Theme ist das Standard Theme, das mit WordPress 5.6 eingef\u00fchrt wird. Seht euch in diesem ausf\u00fchrlichen Leitfaden alle seine wichtigsten Funktionen an.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/\" \/>\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=\"2020-11-30T07:29:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-28T09:07:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/11\/twenty-twenty-one-tema.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"768\" \/>\n\t<meta property=\"og:image:height\" content=\"384\" \/>\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=\"Das Twenty Twenty-One Theme ist das Standard Theme, das mit WordPress 5.6 eingef\u00fchrt wird. Seht euch in diesem ausf\u00fchrlichen Leitfaden alle seine wichtigsten Funktionen an.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/11\/twenty-twenty-one-tema.jpg\" \/>\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=\"26\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-one-theme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Twenty Twenty-One: Ein tiefer Einblick in das neue WordPress-Standardtheme\",\"datePublished\":\"2020-11-30T07:29:55+00:00\",\"dateModified\":\"2023-08-28T09:07:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/\"},\"wordCount\":4413,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/11\/twenty-twenty-one-tema.jpg\",\"keywords\":[\"WordPress\",\"wordpresstheme\"],\"articleSection\":[\"Die besten WordPress Tutorials\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/\",\"name\":\"Twenty Twenty-One: Ein tiefer Einblick in das neue WordPress-Standardtheme\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/11\/twenty-twenty-one-tema.jpg\",\"datePublished\":\"2020-11-30T07:29:55+00:00\",\"dateModified\":\"2023-08-28T09:07:27+00:00\",\"description\":\"Das Twenty Twenty-One Theme ist das Standard Theme, das mit WordPress 5.6 eingef\u00fchrt wird. Seht euch in diesem ausf\u00fchrlichen Leitfaden alle seine wichtigsten Funktionen an.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/11\/twenty-twenty-one-tema.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/11\/twenty-twenty-one-tema.jpg\",\"width\":768,\"height\":384,\"caption\":\"twenty twenty-one theme\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/#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\":\"Twenty Twenty-One: Ein tiefer Einblick in das neue WordPress-Standardtheme\"}]},{\"@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":"Twenty Twenty-One: Ein tiefer Einblick in das neue WordPress-Standardtheme","description":"Das Twenty Twenty-One Theme ist das Standard Theme, das mit WordPress 5.6 eingef\u00fchrt wird. Seht euch in diesem ausf\u00fchrlichen Leitfaden alle seine wichtigsten Funktionen an.","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-one-theme\/","og_locale":"de_DE","og_type":"article","og_title":"Twenty Twenty-One: Ein tiefer Einblick in das neue WordPress-Standardtheme","og_description":"Das Twenty Twenty-One Theme ist das Standard Theme, das mit WordPress 5.6 eingef\u00fchrt wird. Seht euch in diesem ausf\u00fchrlichen Leitfaden alle seine wichtigsten Funktionen an.","og_url":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2020-11-30T07:29:55+00:00","article_modified_time":"2023-08-28T09:07:27+00:00","og_image":[{"width":768,"height":384,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/11\/twenty-twenty-one-tema.jpg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Das Twenty Twenty-One Theme ist das Standard Theme, das mit WordPress 5.6 eingef\u00fchrt wird. Seht euch in diesem ausf\u00fchrlichen Leitfaden alle seine wichtigsten Funktionen an.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/11\/twenty-twenty-one-tema.jpg","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Carlo Daniele","Gesch\u00e4tzte Lesezeit":"26\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Twenty Twenty-One: Ein tiefer Einblick in das neue WordPress-Standardtheme","datePublished":"2020-11-30T07:29:55+00:00","dateModified":"2023-08-28T09:07:27+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/"},"wordCount":4413,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/11\/twenty-twenty-one-tema.jpg","keywords":["WordPress","wordpresstheme"],"articleSection":["Die besten WordPress Tutorials"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/","url":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/","name":"Twenty Twenty-One: Ein tiefer Einblick in das neue WordPress-Standardtheme","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/11\/twenty-twenty-one-tema.jpg","datePublished":"2020-11-30T07:29:55+00:00","dateModified":"2023-08-28T09:07:27+00:00","description":"Das Twenty Twenty-One Theme ist das Standard Theme, das mit WordPress 5.6 eingef\u00fchrt wird. Seht euch in diesem ausf\u00fchrlichen Leitfaden alle seine wichtigsten Funktionen an.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/11\/twenty-twenty-one-tema.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/11\/twenty-twenty-one-tema.jpg","width":768,"height":384,"caption":"twenty twenty-one theme"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/#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":"Twenty Twenty-One: Ein tiefer Einblick in das neue WordPress-Standardtheme"}]},{"@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\/39455","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=39455"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/39455\/revisions"}],"predecessor-version":[{"id":59826,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/39455\/revisions\/59826"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/39455\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/39455\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/39455\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/39455\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/39455\/translations\/pt"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/39455\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/39455\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/39455\/translations\/se"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/39455\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/39459"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=39455"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=39455"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=39455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}