Obwohl etwas später als ursprünglich geplant, bekommen wir ein neues WordPress Standard-Theme. Sein Name ist Twenty Twenty-Two!
Das neue WordPress Standard-Theme kommt mit der WordPress 5.9 Version. Wir waren neugierig, mehr über das neue Theme zu erfahren und haben Twenty Twenty-Two auf einer lokalen Entwicklungsumgebung mit WordPress 5.9 installiert und getestet.
Wir zeigen dir unsere Ergebnisse, bevor wir unsere Gedanken zusammenfassen und dir einen ausführlichen Überblick über die Besonderheiten des neuen WordPress-Themes geben.
TwentyTwenty-Two wurde als das flexibelste, leichteste und anpassungsfähigste Standard-Theme aller Zeiten entwickelt. Es bietet eine großartige Spielwiese, um Blöcke, Muster und Vorlagen zu testen.
Als Block-Theme hilft es dir, Full Site Editing, Globale Stile, Navigationsblöcke und die neuen Bildergalerien besser kennenzulernen – die am meisten erwarteten Funktionen von WordPress 5.9.
Wir müssen gleich sagen, dass Twenty Twenty-Two das erste Standard-Block-Theme ist!
Eines der ehrgeizigsten Ziele des neuen Themes ist es, den Nutzern mehr Möglichkeiten zu geben. Mit den vielen Mustern und Vorlagen, die von Anfang an zur Verfügung stehen, können Nutzer/innen mit nur wenigen Klicks komplexe Layouts erstellen. Der Rest ist reine Stilanpassung.
Aus technischer Sicht unterscheidet sich das Schreiben über Twenty Twenty-Two nicht wesentlich von dem Schreiben über die neuesten und leistungsstärksten Funktionen von WordPress 5.9. Aber Twenty Twenty-Two bietet uns ein Vergrößerungsglas, mit dem wir die neuen Funktionen zur Webseiten-Bearbeitung besser einschätzen und uns ein besseres Bild von der Zukunft der Plattform machen können.
Hier stellen wir dir also das neue Theme vor.
Als Erstes werden wir den neuen Bearbeitungsfluss erkunden, den Nutzer/innen mit WordPress 5.9 und Twenty Twenty-Two erleben werden.
Danach tauchen wir in die wichtigsten Funktionen des Block-Themes ein, die in Twenty Twenty-Two implementiert sind. Du lernst die globalen Stile, Blockmuster, Vorlagen und Vorlagenteile kennen.
Aber es gibt noch viel mehr über Twenty Twenty-Two und WordPress-Blockthemen zu sagen. Als Bonuskapitel geben wir dir einen kurzen Überblick darüber, wie du die Funktionen von Twenty Twenty-Two mit Hilfe der Datei theme.json erweitern kannst.
Here’s a first look at the next WordPress default theme! I’m excited to be co-leading it alongside @jffng, and we both hope you'll contribute to it and/or just enjoy using it! 🐦🦆🐤🦉https://t.co/covjrpgFIO
— kjellr (@kjellr) October 6, 2021
Machen wir uns gleich an die Arbeit und tauchen wir ein in das brandneue Twenty Twenty-Two WordPress Standard-Theme.
Twenty Twenty-Two bringt einen neuen Webseiten-Bearbeitungsfluss mit sich
Mit WordPress 5.9 wurden mehrere Funktionen zur vollständigen Bearbeitung von Webseiten in den Kern von WordPress integriert. Webseiten-Besitzer, die die neueste WordPress-Version mit einem Block-Theme wie Twenty Twenty-Two verwenden, werden bald in der Lage sein:
- Beiträge und Seiten mit mehr Blöcken und Mustern erstellen und bearbeiten
- Anpassen der Einstellungen und Stile, die in der Datei theme.json definiert sind, über die Schnittstelle für globale Stile
- Vorlagen für Seiten und Beiträge erstellen und bearbeiten
- Erstellen und Bearbeiten von Vorlagenteilen für Kopf- und Fußzeilen und andere Vorlagenbereiche
Mit all diesen Funktionen, die in den Core integriert wurden, haben die WordPress-Core-Mitarbeiter über die Weiterentwicklung der Informationsarchitektur diskutiert und den gesamten Site Editing Flow neu gestaltet.
Wenn du Twenty Twenty-Two aktiviert hast, wird dir als erstes auffallen, dass der Einstiegspunkt zum Site-Editor nicht mehr im Hauptmenü deines WordPress-Dashboards zu finden ist, sondern unter dem Menüpunkt “ Erscheinungsbild“.
Die Zusammenführung der Funktionen zur Bearbeitung von Vorlagen und Stilen im gleichen Darstellungs-Menü soll die Bearbeitung vereinfachen. Dadurch wird es einfacher zu verstehen, dass sich die Funktionen, auf die du zugreifst, auf die Darstellung deiner Seiten beziehen.
Der Menüpunkt Editor öffnet die Homepage-Vorlage der Webseite. Je nach deinen Leseeinstellungen kann dies entweder die Seite mit den neuesten Beiträgen oder eine statische Seite sein.
Wenn du jetzt auf das WordPress-Symbol in der oberen linken Ecke klickst, wird ein neues Navigationsmenü im Seiten-Editor angezeigt, das drei Menüpunkte enthält: Seite, Templates und Template Parts.
Schauen wir uns das mal genauer an.
Die Option Seite öffnet die Homepage-Vorlage (neueste Blogartikel oder statische Startseite).
Unter dem Menüpunkt Vorlagen erhältst du eine Liste der verfügbaren Vorlagen. Du kannst auf eine beliebige Vorlage in der Liste klicken, um sie im Editor zu öffnen.
Zum jetzigen Zeitpunkt bietet Twenty Twenty-Two 11 Vorlagen.
Wenn du auf das Ellipsen-Symbol(︙) auf der rechten Seite klickst, kannst du deine Anpassungen löschen.
Im Gegensatz zu Themenvorlagen können benutzerdefinierte Vorlagen nur umbenannt oder entfernt werden (aber du kannst benutzerdefinierte Vorlagen im Beitragseditor bearbeiten ).
Der Menüpunkt Vorlagenteile listet die verfügbaren Vorlagenteile auf, die du im Editor für deine Anpassungen öffnen kannst.
Standardmäßig sind vier Vorlagenteile in Twenty Twenty-Two enthalten. Wenn du den Mauszeiger über eine geänderte Vorlage bewegst, wird ein Tooltip angezeigt, der dich darauf hinweist, dass die Vorlage angepasst wurde.
Du kannst diese Anpassungen löschen, indem du auf das Ellipsen-Symbol(︙) auf der rechten Seite klickst.
Bearbeiten von Vorlagen und Vorlagenteilen
Der Editor bietet eine Schnittstelle, mit der du die Struktur deiner Vorlagen und Vorlagenteile anpassen kannst.
Hier kannst du ganz einfach Blöcke und Muster hinzufügen oder bearbeiten, und deine Änderungen werden automatisch auf jede Seite übertragen, 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 sie uns einen guten Einblick in die Funktionsweise der Benutzeroberfläche.
Hier kannst du Änderungen vornehmen und die Vorlagen so anpassen, dass sie deinen Bedürfnissen am besten entsprechen. Vielleicht möchtest du z. B. ein Muster für ein Grid of Image Posts hinzufügen, um das Engagement deiner Besucher/innen zu erhöhen und sie zum Stöbern in den Inhalten deiner Webseite einzuladen.
Das Dropdown-Menü in der Kopfzeile oben im Vorlagen-Editor zeigt eine Liste der verfügbaren Vorlagenbereiche an. Die gleiche Liste erscheint auf der Registerkarte Vorlage in der Seitenleiste Einstellungen.
Wenn du auf einen Vorlagenbereich klickst (z.B. Header), gelangst du direkt zu dem Vorlagenteil, den du bearbeiten möchtest.
Wenn du auf das Ellipsen-Symbol auf der rechten Seite klickst, gelangst du zum Editor für den isolierten Vorlagenteil.
Der Editor für Vorlagenteile bietet auch ein Paar verschiebbare Griffe, mit denen du prüfen kannst, wie sich die Vorlage bei verschiedenen Bildschirmauflösungen verhält.
Wenn du mit deinen Änderungen zufrieden bist, speicherst du sie und kehrst zum Hauptvorlageneditor zurück, um das Endergebnis zu überprüfen.
Wenn du tiefer in die neue Informationsarchitektur eintauchen willst, solltest du dir die folgenden Artikel ansehen:
- Konzepte der Webseiten-Bearbeitung IA: Wie du neue Funktionen aufdeckst und darauf zugreifst
- Site Editing iA-Konzepte – Teil 2
Twenty Twenty-Two in seinem Kern: Ein kurzer Überblick über theme.json
Um zu verstehen, wie Twenty Twenty-Two und Block-Themes (wie Bricksy) funktionieren, werfen wir einen Blick auf die neue Theme-Konfiguration und den Styling-Mechanismus, der auf der Datei theme.json basiert.
Dieser neue Mechanismus wurde mit WordPress 5.8 eingeführt und ermöglicht es Theme-Entwicklern, den Editor zu konfigurieren und Funktionen von einem zentralen Konfigurationspunkt aus hinzuzufügen.
In Twenty Twenty-Two hat die theme.json-Datei die folgende Struktur:
{
"version": 2,
"settings": {},
"styles": {},
"customTemplates": {},
"templateParts": {}
}Werfen wir einen kurzen Blick auf die einzelnen Abschnitte.
Version
Das Feld version beschreibt die Spezifikationsversion, die derzeit 2 ist.
Einstellungen
Der Abschnitt settings definiert Einstellungen auf globaler oder Blockebene. Einstellungen, die auf der obersten Ebene definiert werden, wirken sich auf alle Blöcke aus, aber Blöcke können die globalen Einstellungen individuell außer Kraft setzen. In Twenty Twenty-Two findest du die folgenden Einstellungen:
{
"settings": {
"appearanceTools": true,
"color": {
"duotone": [...],
"gradients": [...],
"palette": [...]
},
"custom": {...},
"spacing": {...},
"typography": {
"dropCap": false,
"fontFamilies": [...],
"fontSizes": [...]
},
"layout": {...}
}
}Die Voreinstellungen werden Presets genannt und dienen dazu, benutzerdefinierte CSS-Eigenschaften und Klassennamen auf der Grundlage einer bestimmten Namenskonvention zu erzeugen:
- Benutzerdefinierte CSS-Eigenschaft
--wp--preset--{preset-category}--{preset-slug} - CSS-Klassenname
.has-{preset-slug}-{preset-category}
Sobald ein Theme seine Voreinstellungen definiert hat, können die entsprechenden benutzerdefinierten CSS-Eigenschaften verwendet werden, um Blöcke und Elemente im Bereich styles zu gestalten.
Stile
Im Abschnitt styles definieren Themes die Standardstile für Blöcke und Elemente. Siehe zum Beispiel die folgenden Stile von Twenty Twenty-Two für den zentralen 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)"
}
}
}
}
}Du wirst die benutzerdefinierten CSS-Eigenschaften bemerken, die in den Eigenschaftsdeklarationen verwendet werden.
Benutzerdefinierte Vorlagen
Im Abschnitt customTemplates deklariert ein Theme seine benutzerdefinierten Vorlagen. Die Felder name und title sind erforderlich. Themes können auch angeben, welcher Beitragstyp die Vorlage verwenden kann, indem sie die Eigenschaft postTypes setzen.
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"
]
}
]
}Die entsprechenden .html-Dateien findest du im Ordner block-templates.
Vorlagenteile
Der Abschnitt templateParts enthält die Definitionen der Vorlagenteile:
{
"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. Themes können auch einen area Begriff deklarieren, in dem der Vorlagenteil im Editor wiedergegeben wird.
Die .html-Dateien der Vorlagenteile befinden sich im Ordner template-parts.
Da du jetzt mehr über die theme.json von Twenty Twenty-Two weißt, können wir die Funktionen des Themes und die neue Bearbeitungsoberfläche genauer erkunden.
Lass uns in die globalen Stile von Twenty Twenty-Two eintauchen.
Globale Stile in Twenty Twenty-Two
Wenn du dir die style.css von Twenty Twenty-Two ansiehst , wirst du vielleicht überrascht sein, dass sie nur eine minimale Anzahl von CSS-Deklarationen enthält. Der Grund dafür ist, dass die Stile in blockbasierten Themes in der Datei theme.json deklariert werden.
WordPress 5.9 geht noch einen Schritt weiter und führt eine neue Funktion ein, mit der Nutzer/innen von Block-Themes das Aussehen von Webseiten-Elementen über eine Benutzeroberfläche namens Global Styles anpassen können.
Die Schnittstelle für globale Stile kann über das neue Stile-Symbol in der oberen rechten Ecke des Editors aufgerufen werden (siehe auch Die Schnittstelle für globale Stile).
Wenn du auf dieses Symbol klickst, wird eine neue Seitenleiste mit drei separaten Feldern angezeigt:
- Ein Vorschau-Panel, das eine Vorschau deiner Anpassungen zeigt
- Ein Panel “ Globale Stile“, das Zugriff auf bestimmte Gruppen von Steuerelementen für Typografie, Farben und Layout bietet
- Ein Element für Blöcke, das Zugriff auf die Stileinstellungen auf Blockebene bietet
Die Farbpalette von Twenty Twenty-Two
Mit dem Panel Farben kannst du die verfügbaren Paletten bearbeiten und Farben für Hintergrund, Text oder Links zuweisen oder ändern.
Im Paletten-Panel kannst du die Themen- oder Standardpaletten anpassen und sogar deine eigene Palette erstellen.
Hast du schon den Code gefunden, der die Farbeinstellungen erzeugt?
Wenn nicht, öffne die theme.json von Twenty Twenty-Two in deinem bevorzugten Code-Editor. Dort findest du die folgenden Farbpaletten-Deklarationen:
{
"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 von Twenty Twenty-Two übereinstimmt.
Nehmen wir an, du möchtest die Standard-Hintergrundfarbe für einen bestimmten Block ändern. Wenn du eine andere Farbe für den Hintergrund des Blocks wählst, weist du der Eigenschaft background-color des Elements einfach eine andere CSS-Variable zu. Das folgende Bild zeigt ein Beispiel dafür:
Und das ist alles! Du musst keine einzige Zeile benutzerdefinierten CSS-Codes im Customizer hinzufügen oder ein Child-Theme dafür erstellen.
Aber lass uns die Globalen Stile von Twenty Twenty-Two anhand einiger weiterer Beispiele weiter erkunden.
Typografie-Einstellungen
Im Bereich Typografie kannst du die Typografiestile für die Elemente Text und Links deiner Webseite auf globaler Ebene anpassen.
Jedes Element bietet Zugang zu einer Gruppe von Steuerelementen, mit denen du die Schriftart, -größe und -höhe anpassen kannst.
Fragst du dich, welcher Code diese Steuerelemente erzeugt?
Öffne die theme.json von Twenty Twenty-Two und suche den Abschnitt typography. Dort findest du 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"
}
]
},
}Aus dem obigen Code kannst du zwei Schriftfamilien und fünf Schriftgrößen erwarten. Und du hättest richtig vermutet.
Hier siehst du, wie der obige Code in die Typografie-Einstellungen von Global Styles übersetzt wird:
Du darfst raten, welche Einstellung die Zeilenhöhe steuert. In Twenty Twenty-Two findest du keine spezielle Einstellung dafür, denn sie wird durch die Eigenschaft appearanceTools aktiviert, die eine Abkürzung für mehrere Einstellungsdeklarationen ist (siehe nächster Abschnitt).
Werkzeuge für Layout und Erscheinungsbild
Das letzte Element in der Seitenleiste der globalen Stile ist das Layout. Zum Zeitpunkt der Erstellung dieses Artikels enthält es nur ein padding Steuerelement.
In Twenty Twenty-Two wird das Layout-Panel durch die Einstellungseigenschaft appearanceTools aktiviert, ein Boolescher Wert, mit dem mehrere Einstellungen auf einmal aktiviert werden können:
{
"settings": {
"appearanceTools": true
}
}"appearanceTools": true ersetzt einfach den folgenden Block von Deklarationen:
{
'settings': {
'border': {
'color': true,
'radius': true,
'style': true,
'width': true
},
'color': {
'link': true
},
'spacing': {
'blockGap': true,
'margin': true,
'padding': true
},
'typography': {
'lineHeight': true
}
}
}OK – du verstehst jetzt hoffentlich, wie die in der Datei theme.json deklarierten Einstellungen mit den entsprechenden Steuerelementen der Globalen Stile übereinstimmen.
Ein Teil des Puzzles fehlt noch, um ein vollständiges Bild des neuen WordPress-Standardthemas zu erhalten: die Blockmuster.
Twenty Twenty-Two Blockmuster
Man könnte sagen, dass Twenty Twenty-Two vor allem eine Sammlung von Mustern ist – und so ist es auch. In Twenty Twenty-Two findest du jede Menge gebrauchsfertige Blockmuster, aus denen du erstaunliche und unvorhersehbare Strukturen aus verschachtelten Blöcken für deine Webseiten erstellen kannst.
Das Schlüsselwort hier ist “ User Empowerment„. Und das passt, denn mit Blockmustern kannst du alles Mögliche bauen, von einem ansprechenden Portfolio bis hin zu einer einseitigen Werbe-Webseite, auch wenn du keine Kenntnisse in HTML oder CSS hast!
Und WordPress 5.9 bringt mit dem neuen Pattern Explorer, einem Tool, mit dem du Patterns in einem Vollbildmodal durchstöbern kannst, erhebliche Verbesserungen für das Pattern-System.
Mit dem neuen Tool kannst du auch schnell und einfach Blockmuster direkt aus dem Musterverzeichnis importieren. Das eröffnet sowohl WordPress-Nutzern als auch -Entwicklern neue Möglichkeiten, so dass seine Nutzung in Zukunft wahrscheinlich erheblich zunehmen wird.
Twenty Twenty-Two enthält eine Vielzahl von Mustern (über 65) in fünf Kategorien.
Dieses solide Set an Mustern passt perfekt zu den Vorlagen und Vorlagenteilen, die mit dem neuen Standard-Theme geliefert werden, und sorgt für ein wirklich tolles Bearbeitungserlebnis.
Wenn du noch keine Gelegenheit hattest, mit Blockmustern zu experimentieren, zeigen wir dir anhand eines einfachen Beispiels, warum sie als so mächtige Werkzeuge gelten.
Angenommen, du möchtest die Standard-Fußzeile aus den Vorlagen Index und Single Post entfernen und sie durch ein anderes Blockmuster von Twenty Twenty-Two ersetzen.
Starte den Seiteneditor über das Menü “ Erscheinungsbild“ oder die Schaltfläche in der WordPress-Frontend-Symbolleiste, um die Index-Vorlage anzupassen.
Klicke auf die Schaltfläche Index, um das Kopfzeilen-Dropdown mit der Liste der auf der Seite verfügbaren Vorlagenbereiche anzuzeigen. Klicke auf die Ellipsen-Schaltfläche neben Fußzeile und dann auf Fußzeile bearbeiten.
Wie bereits erwähnt, wird hier der Editor für isolierte Vorlagenteile aufgerufen.
Öffne nun den Block-Inserter und klicke auf Muster.
Starte das neue Werkzeug Muster-Explorer, wähle die Kategorie Twenty Twenty-Two Footers und wähle die Fußzeile deiner Wahl.
Füge nun die Blöcke nach deinen Wünschen hinzu und bearbeite sie.
Speichere die Kopfzeile und überprüfe deine Seite erneut, wenn du mit deinen Änderungen zufrieden bist.
Die folgende Abbildung vergleicht drei Vorlagen (Index, Einzelner Beitrag und Einzelner Beitrag ohne Trennzeichen) mit unterschiedlichen Kopf- und Fußzeilenanpassungen:
Twenty Twenty-Two mit einem Child Theme erweitern
Die Erstellung eines Child-Themes für ein Block-Theme unterscheidet sich deutlich von der Erstellung eines Child-Themes für ein klassisches Theme.
Aber wenn du die Struktur eines Block-Themes erst einmal verstanden hast, wird es dir nicht schwerfallen, ein Child-Theme für Twenty Twenty-Two oder ein anderes Block-Theme zu erstellen.
Lass uns also herausfinden, wie du das Aussehen deiner Twenty Twenty-Two-basierten Webseite anpassen kannst.
1. Einrichten eines Child-Themes für Twenty Twenty-Two
Erstelle in deinem Verzeichnis /wp-content/themes einen neuen Ordner und benenne ihn nach deinen Vorstellungen (gemäß den Standards für die Theme-Entwicklung). In diesem Beispiel haben wir den Ordner des Child-Themes twentytwentytwo-child genannt.
Jetzt brauchst du eine style.css-Datei. Öffne deinen bevorzugten Code-Editor und erstelle 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 kannst du die Felder nach deinen Bedürfnissen bearbeiten.
Dein Child-Theme ist jetzt für die Vorschau verfügbar. Du kannst es im Verwaltungsbereich Erscheinungsbild > Themes aktivieren.
2. Globale Einstellungen anpassen
Seit WordPress 5.9 erben Child-Themes mit einer theme.json-Datei die Einstellungen des Parent-Themes. Wenn in der theme.json-Datei des Child-Themes eine Reihe von Stilen definiert ist, gelten diese Stile zusätzlich zu den Stilen des Parent-Themes.
Wir können also eine theme.json-Datei erstellen, die nur einen kleinen Block von Einstellungen und Stildefinitionen enthält, anstatt alle unsere ursprünglichen Auswahlen neu zu definieren.
Wie man eine benutzerdefinierte Farbpalette deklariert
Wenn du ein Child-Theme für Twenty Twenty-Two erstellst, ist die einfachste Aufgabe, die Farbpalette zu ersetzen. Alles, was du tun musst, ist, eine neue Farbpalette in der theme.json deines Childs zu definieren, wie unten gezeigt:
{
"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"
}
]
}
}
}Speichere deine Datei und gehe zurück zum Website-Editor. Die oben definierte Farbpalette sollte nun die Standardfarbpalette von Twenty Twenty-Two ersetzen.
Die Farben werden in der Palette selbst in der richtigen Reihenfolge angezeigt, und ihre Namen sollten den Best Practices und Namenskonventionen entsprechen, die auf Github diskutiert werden.
Mehr über die Farboptionen in theme.json erfährst du in dieser ausführlichen Übersicht von Carolina Nymark.
Benutzerdefinierte Duotone-Filter deklarieren
Du kannst die Standard-Duotone-Farben auch durch deine eigenen Filter ersetzen.
Dazu fügst du einfach den folgenden Code in die theme.json-Einstellungen deines Childs ein, und zwar auf derselben Ebene wie die Eigenschaft palette:
{
"version": 2,
"settings": {
"color": {
"palette": [...],
"duotone": [
{
"colors": [
"#001F29",
"#FFFFFF"
],
"slug": "default-filter",
"name": "Default filter"
}
]
}
}
}Speichere deine Datei und überprüfe das Ergebnis im Block-Editor. Du solltest nur einen einzigen Duotone-Filter sehen.
3. Blockstile anpassen
Wie wir bereits erwähnt haben, kannst du mit WordPress 5.9 die Einstellungen und Stile in der theme.json über die Schnittstelle für globale Stile anpassen.
Blockstile können nur dann über die Schnittstelle für globale Stile angepasst werden , wenn der Block die Unterstützung für bestimmte Funktionen in der entsprechenden block.json-Datei deklariert. Du kannst jedoch die Standardeinstellungen für Blöcke in der theme.json-Datei deines Child-Themes überschreiben.
Angenommen, du möchtest die Blockstile für den Beitragstitel und die Gruppe außer Kraft setzen. Alles, was du tun musst, ist, die Stile zu definieren, die du hinzufügen oder außer Kraft setzen willst, 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 Padding-Werte für core/post-title sowie die oberen und unteren Ränder für core/group geändert.
Das Bild unten zeigt das Ergebnis, wie es auf der öffentlichen Website aussehen würde:
Und das war’s mit dem Check!
Wir werden vorerst nicht weiter auf Child-Themes eingehen, da dies den Rahmen dieses Beitrags sprengen würde. In der Zwischenzeit findest du weitere Beispiele für Twenty Twenty-Two Child-Themes auf Github.
Zusammenfassung
Während wir uns das neue WordPress Standard-Theme Twenty Twenty-Two und seine Funktionen (die es zum flexibelsten Standard-Theme aller Zeiten machen) genauer angesehen haben, haben wir die neue Informationsarchitektur vorgestellt, die mit WordPress 5.9 eingeführt wurde. Wir haben sogar einen Blick auf die neue Schnittstelle für globale Stile geworfen.
Es gibt viele spannende neue Funktionen, und es scheint klar, dass die neue Bearbeitungsumgebung mit der Zeit immer robuster, zuverlässiger und funktionaler wird.
Während viele neue WordPress-Funktionen auf den Weg gebracht werden, verschwinden andere oder verlieren an Bedeutung. Viele Nutzer/innen fragen sich, was mit dem Customizer passieren wird und wie die Abwärtskompatibilität mit bestehenden Themes am besten erhalten werden kann.
Du solltest jedoch nicht erwarten, dass du plötzlich von traditionellen Themes zu Block-Themes springen kannst. Wir haben derzeit vier verschiedene Arten von Themes zur Auswahl:
- Blockthemen: Themes, die für FSE entwickelt wurden
- Universelle Themen: Themes, die sowohl mit dem Customizer als auch mit dem Site Editor funktionieren
- Hybrid-Themen: Klassische Themes, die FSE-Funktionen wie theme.json unterstützen
- Klassische Themes: Themes mit PHP-Vorlagen, functions.php, etc.
Also keine Angst – es gibt immer noch genügend Lösungen, wenn du dich noch nicht bereit fühlst, auf Blockthemen umzusteigen.
Und jetzt liegt es an dir! Bist du bereit, den großen Sprung zu wagen und gleich mit Blockthemen zu arbeiten? Teile uns deine Gedanken in den Kommentaren unten mit.
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.
Schreibe einen Kommentar