Ein tiefer Einblick in Twenty-Twenty-Two und WordPress-Block-Themes

Obwohl etwas später als ursprünglich geplant, bekommen wir ein neues WordPress-Standarddesign. Sein Name ist Twenty Twenty-Two!

Das neue WordPress-Standarddesign wird mit der kommenden Version von WordPress 5.9 geliefert. Wir waren neugierig, mehr über das neue Theme zu erfahren, also haben wir Twenty Twenty-Two auf einer lokalen Entwicklungsumgebung mit WordPress 5.9 installiert und getestet.

Wir zeigen Ihnen unsere Ergebnisse, bevor wir unsere Gedanken zusammenfassen, um Ihnen einen detaillierten Überblick über die Vor- und Nachteile des neuen WordPress-Themes zu geben.

Twenty Twenty-Two wurde entwickelt, um das flexibelste, leichteste und anpassbarste Standarddesign aller Zeiten zu sein. Es bietet eine großartige Spielwiese zum Testen von Blöcken, Mustern und Vorlagen.

Da es sich um ein Blockthema handelt, hilft es Ihnen, die vollständige Seitenbearbeitung, globale Stile, Navigationsblöcke und die neuen Bildergalerien besser zu erkunden, die die am meisten erwarteten Funktionen von WordPress 5.9 sind.

Wir müssen gleich sagen, dass Twenty Twenty-Two das erste Standard-Blockthema ist !

Eines der ehrgeizigsten Ziele des neuen Themas ist es, Benutzer zu stärken . Mit so vielen sofort verfügbaren Mustern und Vorlagen können Benutzer komplexe Layouts mit nur wenigen Klicks erstellen. Der Rest ist nur Stilanpassung.

Aus technischer Sicht unterscheidet sich das Schreiben über Twenty Twenty-Two nicht wesentlich vom Schreiben über die neuesten und leistungsstärksten Funktionen von WordPress 5.9. Aber Twenty Twenty-Two bietet uns ein Vergrößerungsglas, um die neuen Seitenbearbeitungsfunktionen besser zu verstehen und eine bessere Vorstellung von der Zukunft der Plattform zu bekommen.

Hier stellen wir Ihnen das neue Thema vor.

Zuerst werden wir den neuen Website-Bearbeitungsablauf untersuchen , den Benutzer mit WordPress 5.9 und Twenty Twenty-Two erleben werden.

Danach tauchen wir in die Hauptfunktionen des Blockthemas ein, die in Twenty Twenty-Two implementiert sind. Sie lernen Global Styles , Blockmuster , Vorlagen und Vorlagenteile kennen.

Aber es gibt noch viel mehr über Twenty Twenty-Two und WordPress-Blockthemen zu sagen. Als Bonuskapitel bieten wir Ihnen daher einen kurzen Überblick darüber, wie Sie die Funktionen von Twenty Twenty-Two erweitern können, indem Sie die theme.json -Datei nutzen.

Hier ist ein erster Blick auf das nächste Standard-Theme von WordPress! Ich freue mich darauf, es gemeinsam mit @jffng zu leiten, und wir hoffen beide, dass Sie dazu beitragen und/oder es einfach genießen, es zu benutzen! https://t.co/covjrpgFIO

– kjellr (@kjellr) 6. Oktober 2021

Machen wir uns gleich an die Arbeit und tauchen in das brandneue Standard-Theme Twenty Twenty-Two von WordPress ein.

Twenty Twenty-Two bringt einen neuen Site-Bearbeitungsablauf

Mit WordPress 5.9 kommen mehrere Full Site Editing-Funktionen in den Kern. Websitebesitzer, die die neueste WordPress-Version mit einem Blockdesign wie Twenty Twenty-Two verwenden, werden bald in der Lage sein:

• Erstellen und bearbeiten Sie Beiträge und Seiten mit mehr Blöcken und Mustern
• Passen Sie die in der Datei „theme.json “ definierten Einstellungen und Stile über die Schnittstelle „Globale Stile“ an
• Erstellen und bearbeiten Sie Vorlagen für Seiten und Beiträge
• Erstellen und bearbeiten Sie Vorlagenteile für Kopfzeilen, Fußzeilen und andere Vorlagenbereiche

Nachdem all diese Funktionen zum Kern zusammengeführt wurden, haben die WordPress-Kernmitarbeiter die Entwicklung der Informationsarchitektur diskutiert und den gesamten Website-Bearbeitungsablauf neu gestaltet.

Das erste, was Ihnen nach der Aktivierung von Twenty Twenty-Two auffallen wird, ist, dass sich der Einstiegspunkt zum Site-Editor nicht mehr im Hauptmenü Ihres WordPress-Dashboards befindet, sondern in das Menü „ Darstellung “ verschoben wurde.

Die Vorlagen- und Stilbearbeitungsfunktionen in dasselbe Menü „Darstellung“ zu bringen, sollte die Bearbeitungserfahrung optimieren. Es sollte verständlicher machen, dass sich die Funktionen, auf die Sie zugreifen, auf die Darstellung Ihrer Seiten beziehen.

Der Menüpunkt Editor öffnet die Homepage-Vorlage der Site. Abhängig von Ihren Leseeinstellungen kann dies entweder Ihre Seite mit den neuesten Beiträgen oder eine statische Seite sein.

Wenn Sie jetzt auf das WordPress-Symbol in der oberen linken Ecke klicken, wird ein neues Navigationsmenü für den Website-Editor mit drei Menüelementen angezeigt: Website , Vorlagen und Vorlagenteile .

Lasst uns genauer hinschauen.

Die Option Website öffnet die Startseitenvorlage (neueste Blogartikel oder statische Startseite).

Über den Menüpunkt Vorlagen erhalten Sie eine Liste der verfügbaren Vorlagen. Sie können auf eine beliebige Vorlage in der Liste klicken, um sie im Editor zu starten.

Zum jetzigen Zeitpunkt bietet Twenty Twenty-Two 11 Vorlagen.

Durch Klicken auf das Ellipsensymbol ( ︙ ) auf der rechten Seite können Sie Ihre Anpassungen löschen.

Im Gegensatz zu Themenvorlagen können benutzerdefinierte Vorlagen nur umbenannt oder entfernt werden (aber Sie können benutzerdefinierte Vorlagen im Post-Editor bearbeiten).

Das Menüelement Vorlagenteile listet die verfügbaren Vorlagenteile auf, die Sie im Editor für Ihre Anpassungen öffnen können.

Standardmäßig werden Twenty Twenty-Two vier Vorlagenteile hinzugefügt. Wenn Sie den Mauszeiger über eine geänderte Vorlage bewegen, wird ein Tooltip angezeigt, der Sie darüber informiert, dass die Vorlage angepasst wurde.

Sie können diese Anpassungen löschen, indem Sie rechts auf das Auslassungszeichen ( ︙ ) klicken.

Vorlagen und Vorlagenteile bearbeiten

Der Editor bietet die Schnittstelle zum Anpassen der Struktur Ihrer Vorlagen und Vorlagenteile.

Hier können Sie ganz einfach Blöcke und Muster hinzufügen oder bearbeiten, und Ihre Änderungen werden automatisch auf jede Seite angewendet, die diese Vorlage verwendet.

Das Bild unten zeigt die 404-Seitenvorlage im Editor. Es ist eine ziemlich einfache Vorlage, die nur eine Überschrift, einen Absatz und ein Suchfeld enthält. Dennoch gibt es uns ein gutes Verständnis dafür, wie die Benutzeroberfläche funktioniert.

Hier können Sie Änderungen vornehmen und Vorlagen an Ihre Bedürfnisse anpassen. Beispielsweise möchten Sie möglicherweise ein Raster aus Bildbeiträgen hinzufügen, um das Engagement Ihrer Besucher zu erhöhen und sie einzuladen, den Inhalt Ihrer Website zu durchsuchen.

Die Kopfzeilen-Dropdown-Liste oben im Vorlagen-Editor zeigt eine Liste der verfügbaren Vorlagenbereiche an . Dieselbe Liste wird auf der Registerkarte „ Vorlage “ in der Seitenleiste „ Einstellungen “ angezeigt.

Durch Klicken auf einen beliebigen Vorlagenbereich (z. B. Kopfzeile) gelangen Sie direkt zu dem Vorlagenteil, den Sie bearbeiten möchten.

Wenn Sie rechts auf das Ellipsensymbol klicken, greifen Sie auf den Editor für isolierte Vorlagenparts zu .

Der Vorlagenpart-Editor bietet auch ein Paar ziehbarer Griffe, mit denen Sie überprüfen können, wie sich die Vorlage bei verschiedenen Bildschirmauflösungen verhält.

Wenn Sie mit Ihren Änderungen zufrieden sind, speichern Sie Ihre Änderungen und gehen Sie zurück zum Hauptvorlageneditor, um das Endergebnis zu überprüfen.

Wenn Sie tiefer in die neue Informationsarchitektur eintauchen möchten, sollten Sie sich die folgenden Artikel ansehen:

• IA-Konzepte für die Site-Bearbeitung: Neue Funktionen anzeigen und darauf zugreifen
• Website-Bearbeitung iA-Konzepte – Teil 2

Twenty Twenty-Two im Kern: Ein kurzer Überblick über theme.json

Um vollständig zu verstehen, wie Twenty Twenty-Two und Blockdesigns (wie Bricksy) funktionieren, werfen wir einen Blick auf die neue Designkonfiguration und den Stilmechanismus basierend auf der Datei theme.json .

Dieser neue Mechanismus, der mit WordPress 5.8 eingeführt wurde, ermöglicht es Theme-Entwicklern, den Editor zu konfigurieren und Funktionsunterstützung von einem zentralen Konfigurationspunkt aus hinzuzufügen.

In Twenty Twenty-Two hat die Datei theme.json die folgende Struktur:

 { "version": 2, "settings": {}, "styles": {}, "customTemplates": {}, "templateParts": {} }

Werfen wir einen kurzen Blick auf jeden Abschnitt.

Ausführung

Das version beschreibt die Spezifikationsversion, die derzeit 2 ist.

Einstellungen

Der Abschnitt settings definiert Einstellungen auf globaler oder Blockebene. Auf oberster Ebene definierte Einstellungen wirken sich auf alle Blöcke aus, aber Blöcke können globale Einstellungen einzeln überschreiben. In Twenty Twenty-Two finden Sie die folgenden Einstellungen:

 { "settings": { "appearanceTools": true, "color": { "duotone": [...], "gradients": [...], "palette": [...] }, "custom": {...}, "spacing": {...}, "typography": { "dropCap": false, "fontFamilies": [...], "fontSizes": [...] }, "layout": {...} } }

Standardeinstellungen werden als Voreinstellungen bezeichnet und zum Generieren von benutzerdefinierten CSS-Eigenschaften und Klassennamen basierend auf einer bestimmten Namenskonvention verwendet:

• Benutzerdefinierte CSS-Eigenschaft: --wp--preset--{preset-category}--{preset-slug}
• CSS-Klassenname: .has-{preset-slug}-{preset-category}

Sobald ein Design seine Voreinstellungen definiert hat, können die entsprechenden benutzerdefinierten CSS-Eigenschaften verwendet werden, um Blöcke und Elemente im styles zu gestalten.

Stile

Im Abschnitt styles definieren Designs Block- und Element-Standardstile. Siehe zum Beispiel die folgenden Twenty Twenty-Two-Stile für den Kern-Button-Block:

 { "version": 2, "styles": { "blocks": { "core/button": { "border": { "radius": "0" }, "color": { "background": "var(--wp--preset--color--primary)", "text": "var(--wp--preset--color--background)" }, "typography": { "fontSize": "var(--wp--preset--typography--font-size--normal)" } } } } }

Sie werden die benutzerdefinierten CSS-Eigenschaften bemerken, die in den Eigenschaftsdeklarationen verwendet werden.

Benutzerdefinierte Vorlagen

Im Abschnitt customTemplates deklariert ein Design seine benutzerdefinierten Vorlagen. Die Felder name und title sind erforderlich. Designs können auch deklarieren, welcher Beitragstyp die Vorlage verwenden kann, indem sie die Eigenschaft postTypes .

Twenty Twenty-Two bietet vier benutzerdefinierte Vorlagen:

 { "version": 2, "customTemplates": [ { "name": "blank", "title": "Blank", "postTypes": [ "page", "post" ] }, { "name": "page-large-header", "title": "Page (Large Header)", "postTypes": [ "page" ] }, { "name": "single-no-separators", "title": "Single Post (No Separators)", "postTypes": [ "post" ] }, { "name": "page-no-separators", "title": "Page (No Separators)", "postTypes": [ "page" ] } ] }

Sie finden die entsprechenden .html -Dateien im Ordner block-templates .

Vorlagenteile

Der Abschnitt templateParts enthält Vorlagenteildefinitionen:

 { "version": 2, "templateParts": [ { "name": "header", "title": "Header", "area": "header" }, { "name": "header-large-dark", "title": "Header (Dark, large)", "area": "header" }, { "name": "header-small-dark", "title": "Header (Dark, small)", "area": "header" }, { "name": "footer", "title": "Footer", "area": "footer" } ] }

Die Felder name und title sind erforderlich. Themen können auch einen area deklarieren, in dem der Vorlagenteil im Editor gerendert wird.

HTML -Dateien für Vorlagenteile befinden sich im Ordner template-parts .

Nachdem Sie nun mehr über die Datei theme.json von Twenty Twenty-Two wissen, können wir die Funktionen des Designs und die neue Bearbeitungsoberfläche genauer untersuchen.

Lassen Sie uns in die globalen Styles von Twenty Twenty-Two eintauchen.

Globale Stile in Twenty Twenty-Two

Wenn Sie sich Twenty Twenty-Two' style.css ansehen, werden Sie vielleicht überrascht feststellen, dass es eine minimale Anzahl von CSS-Deklarationen enthält. Der Grund dafür ist, dass Stile in der Datei theme.json in blockbasierten Designs deklariert werden .

WordPress 5.9 wird die Dinge noch einen Schritt weiter bringen und eine neue Funktion einführen, die es Benutzern von Blockthemen ermöglicht, das Erscheinungsbild von Website-Elementen über eine Benutzeroberfläche namens Global Styles anzupassen.

Auf die Global Styles-Oberfläche kann über das neue Styles -Symbol in der oberen rechten Ecke des Editors zugegriffen werden (siehe auch Die Global Styles-Oberfläche).

Wenn Sie auf dieses Symbol klicken, wird eine neue Stil -Seitenleiste mit drei separaten Bedienfeldern angezeigt:

• Ein Vorschaufenster , das eine Vorschau Ihrer Anpassungen anzeigt
• Ein Bedienfeld „ Globale Stile “, das Zugriff auf bestimmte Gruppen von Steuerelementen für Typografie , Farben und Layout bietet
• Ein Element „ Blöcke “, das Zugriff auf Stileinstellungen auf Blockebene bietet

Die Farbpalette von Twenty Twenty-Two

Das Bedienfeld „ Farben “ kann Ihnen dabei helfen, die verfügbaren Paletten zu bearbeiten und Farben für Hintergrund , Text oder Links zuzuweisen oder zu ändern.

Im Palettenbedienfeld können Sie die Themen- oder Standardpaletten anpassen und sogar Ihre eigene Palette erstellen.

Haben Sie schon den Code gefunden, der die Farbsteuerelemente generiert?

Wenn nicht, öffnen Sie theme.json von Twenty Twenty-Two in Ihrem bevorzugten Code-Editor. Sie finden die folgenden Farbpalettendeklarationen:

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#000000", "name": "Foreground" }, { "slug": "background", "color": "#ffffff", "name": "Background" }, { "slug": "primary", "color": "#1a4548", "name": "Primary" }, { "slug": "secondary", "color": "#ffe2c7", "name": "Secondary" }, { "slug": "tertiary", "color": "#F6F6F6", "name": "Tertiary" } ] } } }

Das Bild unten zeigt, wie der obige Code mit der Farbpalette des Twenty Twenty-Two übereinstimmt.

Nehmen wir nun an, Sie möchten die Standardhintergrundfarbe für einen bestimmten Block ändern. Wenn Sie eine andere Farbe für den Hintergrund des Blocks auswählen, wird der Eigenschaft background-color des Elements einfach eine andere CSS-Variable zugewiesen. Das folgende Bild zeigt ein Beispiel dafür:

Und das ist alles! Sie müssen dem Customizer keine einzige Zeile benutzerdefinierten CSS-Codes hinzufügen oder dafür ein untergeordnetes Design erstellen.

Aber lassen Sie uns die globalen Stile von Twenty Twenty-Two mit einigen zusätzlichen Beispielen weiter untersuchen.

Typografie-Einstellungen

Im Typografie -Bedienfeld können Sie Typografie-Stile für die Text- und Link -Elemente Ihrer Website auf globaler Ebene anpassen.

Jedes Element bietet Zugriff auf eine Gruppe von Steuerelementen, mit denen Sie Schriftfamilie, Größe und Zeilenhöhe anpassen können.

Fragen Sie sich, welcher Code diese Steuerelemente generiert?

Öffnen Sie die Datei theme.json von Twenty Twenty-Two und suchen Sie den typography . Sie sehen die folgenden Einstellungen:

 { "version": 1, "settings": { "appearanceTools": true, "typography": { "dropCap": false, "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "name": "System Font", "slug": "system-font" }, { "fontFamily": "\"Source Serif Pro\", serif", "name": "Source Serif Pro", "slug": "source-serif-pro" } ], "fontSizes": [ { "name": "Small", "size": "1rem", "slug": "small" }, { "name": "Normal", "size": "1.125rem", "slug": "normal" }, { "name": "Medium", "size": "1.75rem", "slug": "medium" }, { "name": "Large", "size": "clamp(1.75rem, 3vw, 2.25rem)", "slug": "large" }, { "name": "Huge", "size": "clamp(2.5rem, 4vw, 3rem)", "slug": "huge" } ] }, }

Sie können erwarten, zwei Schriftfamilien und fünf Schriftgrößen aus dem obigen Code zu sehen. Und du hättest richtig geraten.

So wird der obige Code in Typografieeinstellungen für globale Stile übersetzt:

Sie können erraten, welche Einstellung die Linienhöhensteuerung generiert. In Twenty Twenty-Two finden Sie dafür keine spezielle Einstellung, da sie durch die Eigenschaft " appearanceTools " aktiviert wird, die eine Abkürzung für mehrere Einstellungsdeklarationen ist (siehe nächster Abschnitt).

Layout- und Darstellungswerkzeuge

Das letzte Element in der Seitenleiste Globale Stile ist das Layout . Zum Zeitpunkt des Schreibens dieses Artikels enthält es nur eine padding .

In Twenty Twenty-Two wird das Bedienfeld „Layout“ durch die Einstellungseigenschaft „ appearanceTools “ aktiviert, ein boolescher Wert, der verwendet werden kann, um mehrere Einstellungen gleichzeitig zu aktivieren:

 { "settings": { "appearanceTools": true } }

"appearanceTools": true ersetzt einfach den folgenden Deklarationsblock:

 { 'settings': { 'border': { 'color': true, 'radius': true, 'style': true, 'width': true }, 'color': { 'link': true }, 'spacing': { 'blockGap': true, 'margin': true, 'padding': true }, 'typography': { 'lineHeight': true } } }

OK – Sie verstehen jetzt hoffentlich, wie die in der Datei theme.json deklarierten Einstellungen mit den entsprechenden Steuerelementen für globale Stile übereinstimmen.

Es fehlt noch ein Teil unseres Puzzles, um ein vollständiges Bild des neuen WordPress-Standarddesigns zu erhalten: Blockmuster .

Zwanzig Zweiundzwanzig Blockmuster

Man könnte sagen, dass Twenty Twenty-Two hauptsächlich eine Sammlung von Mustern ist – und das ist es auch ziemlich. In Twenty Twenty-Two finden Sie Tonnen von gebrauchsfertigen Blockmustern, aus denen Sie auswählen können, um erstaunliche und unvorhersehbare Strukturen aus verschachtelten Blöcken für Ihre Webseiten zu erstellen.

Der Schlüsselbegriff hier ist Benutzerermächtigung . Und das passt, denn mit Blockmustern können Sie alle möglichen Dinge erstellen, von einem ansprechenden Portfolio bis hin zu einer einseitigen Werbewebsite, selbst wenn Sie keine Kenntnisse in HTML oder CSS haben!

Und WordPress 5.9 bringt erhebliche Verbesserungen für das Mustersystem mit dem neuen Muster-Explorer, einem Tool, mit dem Sie Muster im Vollbildmodus durchsuchen können.

Das neue Tool ermöglicht Ihnen auch den schnellen und einfachen Import von Blockmustern direkt aus dem Musterverzeichnis. Dies eröffnet sowohl WordPress-Benutzern als auch -Entwicklern neue Möglichkeiten, sodass die Nutzung in Zukunft wahrscheinlich erheblich zunehmen wird.

Twenty Twenty-Two enthält viele Muster (über 65) in fünf Kategorien.

Dieser solide Satz von Mustern passt perfekt zu Vorlagen und Vorlagenteilen, die mit dem neuen Standardthema geliefert werden, und sorgt für ein wirklich erstaunliches Bearbeitungserlebnis.

Wenn Sie noch keine Gelegenheit hatten, mit Blockmustern zu experimentieren, zeigen wir Ihnen anhand eines einfachen Beispiels, warum sie als so leistungsstarke Tools gelten.

Angenommen, Sie möchten die Standard-Fußzeile aus den Index- und Single-Post-Vorlagen entfernen und durch ein anderes Twenty-Twenty-Two-Blockmuster ersetzen.

Starten Sie den Site-Editor über das Menü „ Darstellung “ oder die Symbolleistenschaltfläche des WordPress-Frontends, um die Indexvorlage anzupassen.

Klicken Sie auf die Schaltfläche „ Index “, um das Kopfzeilen-Dropdown mit der Liste der auf der Seite verfügbaren Vorlagenbereiche anzuzeigen. Klicken Sie auf die Ellipsen-Schaltfläche neben Fußzeile und dann auf Fußzeile bearbeiten .

Wie oben erwähnt, wird dadurch der Editor für isolierte Vorlagenteile gestartet.

Öffnen Sie nun den Block-Inserter und klicken Sie auf Patterns .

Starten Sie das neue Muster-Explorer -Tool, wählen Sie die Kategorie Zwanzig Zweiundzwanzig Fußzeilen und wählen Sie die Fußzeile Ihrer Wahl aus.

Fügen Sie nun die Blöcke nach Ihren Bedürfnissen hinzu und bearbeiten Sie sie.

Speichern Sie die Kopfzeile und überprüfen Sie Ihre Website erneut, wenn Sie mit Ihren Änderungen zufrieden sind.

Das folgende Bild vergleicht drei Vorlagen (Index, Single Post und Single Post ohne Trennzeichen) mit unterschiedlichen Kopf- und Fußzeilenanpassungen:

Erweiterung von Twenty Twenty-Two mit einem Child-Theme

Das Erstellen eines untergeordneten Designs für ein Blockdesign unterscheidet sich erheblich vom Erstellen eines untergeordneten Designs für ein klassisches Design.

Aber sobald Sie die Struktur eines Blockthemas gut verstanden haben, wird es Ihnen nicht schwer fallen, ein untergeordnetes Thema für Twenty Twenty-Two oder ein anderes Blockthema zu erstellen.

Lassen Sie uns also herausfinden, wie Sie das Erscheinungsbild Ihrer Twenty Twenty-Two-basierten Website anpassen können.

1. Einrichten eines Child-Themes für Twenty Twenty-Two

Erstelle in deinem /wp-content/themes- Verzeichnis einen neuen Ordner und benenne ihn nach Belieben (entsprechend den Themenentwicklungsstandards). In diesem Beispiel haben wir den Ordner des untergeordneten Themas „ twentytwo-child “ genannt.

Jetzt benötigen Sie eine style.css -Datei. Öffnen Sie Ihren bevorzugten Code-Editor und erstellen Sie das folgende Stylesheet:

 /* Theme Name: Twenty Twenty-Two Child Theme URI: https://example.com/ Author: Your name Author URI: https://example.com/ Description: A child theme for TT2. Requires at least: 5.8 Tested up to: 5.9 Requires PHP: 5.6 Version: 0.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentytwo-child Template: twentytwentytwo Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org Twenty Twenty-Two Child is distributed under the terms of the GNU GPL. */

Wie immer können Sie Felder nach Ihren Bedürfnissen bearbeiten.

Ihr untergeordnetes Design ist jetzt für die Vorschau verfügbar. Sie können es im Verwaltungsbildschirm Darstellung > Themen aktivieren.

2. Anpassen der globalen Einstellungen

Seit WordPress 5.9 erben untergeordnete Themes mit einer theme.json -Datei die Einstellungen des übergeordneten Themes. Wenn die theme.json des untergeordneten Elements eine Reihe von Stilen definiert, gelten diese Stile zusätzlich zu den Stilen des übergeordneten Elements.

So können wir eine theme.json -Datei erstellen, die nur einen kleinen benutzerdefinierten Block mit Einstellungs- und Stildefinitionen enthält, anstatt alle unsere ursprünglichen Entscheidungen neu zu definieren.

So deklarieren Sie eine benutzerdefinierte Farbpalette

Beim Erstellen eines untergeordneten Themas für Twenty Twenty-Two besteht die einfachste Aufgabe darin, die Farbpalette zu ersetzen. Alles, was Sie tun müssen, ist, wie unten gezeigt, eine neue Farbpalette in der Datei theme.json Ihres Kindes zu definieren:

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#FFFFFF", "name": "Foreground" }, { "slug": "background", "color": "#001F29", "name": "Background" }, { "slug": "primary", "color": "#D6FDFF", "name": "Primary" }, { "slug": "secondary", "color": "#FDFCDC", "name": "Secondary" }, { "slug": "tertiary", "color": "#FED9B7", "name": "Tertiary" }, { "slug": "accent", "color": "#E94435", "name": "Accent" } ] } } }

Speichern Sie Ihre Datei und gehen Sie zurück zum Site-Editor. Die oben definierte Farbpalette sollte die Standardfarbpalette von Twenty Twenty-Two ersetzen.

Die Farben werden der Reihe nach auf der Palette selbst angezeigt, und ihre Namen sollten den auf Github besprochenen Best Practices und Namenskonventionen folgen.

In dieser ausführlichen Übersicht von Carolina Nymark können Sie viel mehr über die Farboptionen von theme.json lesen.

So deklarieren Sie benutzerdefinierte Duotone-Filter

Sie können auch die Standard-Duotone-Farben durch Ihren benutzerdefinierten Filtersatz ersetzen.

Fügen Sie dazu einfach den folgenden Code zu den theme.json -Einstellungen Ihres Kindes auf derselben Ebene wie die Eigenschaft palette hinzu:

 { "version": 2, "settings": { "color": { "palette": [...], "duotone": [ { "colors": [ "#001F29", "#FFFFFF" ], "slug": "default-filter", "name": "Default filter" } ] } } }

Speichern Sie Ihre Datei und überprüfen Sie das Ergebnis im Blockeditor. Sie sollten nur einen einzigen Duotone-Filter sehen.

3. Anpassen von Blockstilen

Wie bereits erwähnt, können Sie mit WordPress 5.9 jetzt die Einstellungen und Stile von theme.json über die Oberfläche „Globale Stile“ anpassen.

Blockstile können nur dann über die Schnittstelle „Globale Stile“ angepasst werden, wenn der Block Unterstützung für bestimmte Funktionen in der entsprechenden Datei „block.json “ deklariert. Sie können jedoch die Standardblockeinstellungen in der Datei theme.json Ihres untergeordneten Designs überschreiben.

Angenommen, Sie möchten die Blockstile für Beitragstitel und Gruppen überschreiben. Sie müssen lediglich die Stile definieren, die Sie hinzufügen oder überschreiben möchten, wie unten gezeigt:

 { "version": 2, "settings": {...}, "styles": { "blocks": { "core/post-title": { "typography": { "fontFamily": "Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif" }, "color": { "background": "var(--wp--preset--color--tertiary)" }, "spacing": { "padding": "var(--wp--custom--spacing--small)" } }, "core/group": { "spacing": { "margin": { "top": "0", "bottom": "0" } } } } } }

Im obigen Beispiel haben wir die Schriftfamilie, die Hintergrundfarbe und die Auffüllwerte für core/post-title sowie die oberen und unteren Ränder für core/group geändert.

Das folgende Bild zeigt das Ergebnis, wie es auf der öffentlichen Website aussehen würde:

Und das war's für die Bewertung!

Wir werden vorerst nicht weiter auf Child-Themes eingehen, da dies den Rahmen dieses Beitrags sprengen würde. In der Zwischenzeit finden Sie auf Github weitere Beispiele für untergeordnete Themen von Twenty Twenty-Two.

Zusammenfassung

Während wir uns das neue WordPress-Standardthema Twenty Twenty-Two und seine Funktionen (die es zum flexibelsten Standardthema machen, das jemals veröffentlicht wurde) genauer ansehen, haben wir die neue Informationsarchitektur vorgestellt, die mit WordPress 5.9 eingeführt wurde. Wir haben sogar einen kurzen Blick auf die neue Benutzeroberfläche von Global Styles geworfen.

Es sind viele aufregende neue Funktionen auf dem Weg, und es scheint klar zu sein, dass die neue Bearbeitungsumgebung mit der Zeit robuster, zuverlässiger und funktionaler wird.

Während viele neue WordPress-Funktionen auf dem Weg sind, verschwinden andere oder verlieren an Bedeutung. Viele Benutzer fragen sich, was mit dem Customizer passieren wird und wie die Abwärtskompatibilität mit bestehenden Themes am besten aufrechterhalten werden kann.

Sie sollten jedoch nicht erwarten, plötzlich von traditionellen Themen zu blockierenden Themen in einem einzigen Sprung zu springen. Wir haben derzeit vier verschiedene Arten von Themen zur Auswahl:

• Themen blockieren : Themen, die für FSE entwickelt wurden
• Universelle Themen : Themen, die sowohl mit dem Customizer als auch mit dem Site-Editor funktionieren
• Hybriddesigns : Klassische Designs, die FSE-Funktionen wie theme.json unterstützen
• Klassische Themen : Themen mit PHP-Vorlagen, functions.php usw.

Also, keine Angst vorerst – es gibt noch viele Lösungen zur Auswahl, wenn Sie sich noch nicht bereit fühlen, auf Blockthemen umzusteigen.

Und jetzt liegt es an Ihnen! Bist du bereit, den großen Sprung zu machen und sofort mit der Verwendung von Blockthemen zu beginnen? Teilen Sie uns Ihre Gedanken in den Kommentaren unten mit.