Twenty Twenty-Three ist das brandneue Standard-WordPress-Theme, das mit WordPress 6.1 eingeführt wird.
Es ist ein minimalistisches Theme ohne Bilder oder zusätzliche Funktionen. Es eignet sich am besten als Einstiegs-Theme, um Vorlagen und Style-Variationen zu erstellen und alle Funktionen zu testen, die mit den neuesten WordPress-Versionen eingeführt wurden. Das Theme kann als echte Entwicklungs- und Testumgebung angesehen werden, obwohl der minimalistische Stil, die Responsivität und die Leichtigkeit es zu einer guten Option für die Erstellung von Blogs und Websites machen, die für eine Vielzahl von Zwecken geeignet sind.
In seiner Einführung zum Twenty Twenty-Two-Theme schrieb Kjell Reigstad über die Zukunft der Standard-Themes:
Innovationen wie theme.json, Blockvorlagen und Blockmuster machen die Entwicklung von Themes viel einfacher und bieten den Nutzern neue Möglichkeiten, ihre Websites anzupassen. Es gibt Grund zu der Annahme, dass die Community all dies nutzen kann, um in den kommenden Jahren häufigere und vielfältigere Theme- und Anpassungslösungen für unsere Nutzer zu entwickeln.
Und Channing Ritter hat folgenden Vorschlag gemacht:
Wie wäre es, wenn wir statt des Themes selbst eine Reihe von Stilvariationen hervorheben würden, die von Mitgliedern der Community entworfen wurden? Wir könnten Twenty Twenty-Two als Grundlage für ein neues Theme verwenden, das schlicht und minimalistisch ist – eine leere Leinwand, auf der eine Vielzahl von Stilvarianten zum Vorschein kommen kann.
Und genau das passiert jetzt mit dem neuen Standard-Theme Twenty Twenty-Three. Die Community wurde aufgerufen, sich aktiv an der Gestaltung des Standard-WordPress-Themes zu beteiligen, und das gefällt uns, denn so ist das neue Theme das Ergebnis echter Partizipationsarbeit.
Doch bevor wir die Stilvariationen des neuen WordPress-Standard-Themes aufdecken, wollen wir die grundlegenden Funktionen von Twenty Twenty-Three kennenlernen und herausfinden, wofür es geeignet ist.
Seitenlayouts und Stile
Wie bereits erwähnt, ist Twenty Twenty-Three eine abgespeckte Version von Twenty Twenty-Two. Was an dem neuen Standardthema auffällt, ist seine Einfachheit und Leichtigkeit. Twenty Twenty-Three ist flexibel und eignet sich perfekt für die neuesten Funktionen von Gutenberg, wie z. B. die Bearbeitung von Vorlagen, globale Stilvariationen, flüssige Typografie und Blockmuster.
Es wird dich also nicht überraschen, dass du auf den Screenshots in diesem Artikel minimale Seiten ohne jeglichen Schnickschnack siehst, die sich aber perfekt für Anpassungen und Tests eignen.
Das folgende Bild zeigt zum Beispiel einzelne Beitragsseiten mit und ohne Bilder.
Das folgende Bild vergleicht die Startseite mit einer Archivseite.
Auch wenn das neue Theme eine vereinfachte Version von Twenty Twenty-Two ist, weist Twenty Twenty-Three im Vergleich zum vorherigen Standard-Theme einige wichtige Unterschiede auf.
Erstens wurde die Größe der Überschriften verringert und die Standardschriftart mit Serifen wurde durch eine serifenlose Schriftart ersetzt.
Außerdem wurde eine andere Farbpalette verwendet. Du kannst die neue Twenty Twenty-Three-Palettendefinition im folgenden Code aus der theme.json sehen:
{
"settings": {
"appearanceTools": true,
"color": {
"palette": [
{
"color": "#ffffff",
"name": "Base",
"slug": "base"
},
{
"color": "#000000",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#9DFF20",
"name": "Primary",
"slug": "primary"
},
{
"color": "#345C00",
"name": "Secondary",
"slug": "secondary"
},
{
"color": "#F6F6F6",
"name": "Tertiary",
"slug": "tertiary"
}
]
},
}
}
Das Hauptmerkmal des neuen Standard-Themes ist jedoch die Reihe von Stilvariationen. Twenty Twenty-Three bietet zehn globale Stilvariationen, von denen jede eine andere Kombination aus Farben, Schriftfamilie und Schriftgröße zeigt.
Die entsprechenden JSON-Dateien findest du im Ordner Twenty Twenty-Three Styles.
Vollständige Vorschauen der Seitenvorlagen, Stile und Stilvariationen von Twenty Twenty-Three sind auf Figma verfügbar.
Twenty Twenty-Three Typografie
Bei einem Minimal-Theme wie Twenty-Three spielt die Typografie eine wichtige Rolle, um den Text lesbar und die Seite ansprechend zu gestalten und den Besuchern ein angenehmes Surferlebnis zu bieten, unabhängig von Gerät und Bildschirmgröße.
Zu diesem Zweck verfügt Twenty Twenty-Three über eine Reihe neuer Schriftfamilien und nutzt die mit WordPress 6.1 eingeführte Fluid Typography.
Schriftarten
Twenty Twenty-Three verfügt über einen neuen Satz von Schriftarten, die in Stilvariationen verwendet werden und sich durch Einfachheit und Vielfalt auszeichnen:
- Systemschrift –
var(--wp--preset--font-family--system-font) - IBM Plex Mono –
var(--wp--preset--font-family--ibm-plex-mono) - Inter –
var(--wp--preset--font-family--inter) - Source Serif Pro –
var(--wp--preset--font-family--source-serif-pro) - DM Sans –
var(--wp--preset--font-family--dm-sans)
IBM Plex Mono ist Teil des IBM Plex Schriftsatzes, der neuen IBM Hausschrift, die unter der SIL Open Font License (OFL) veröffentlicht wurde. Auf den Websites von Adobe Fonts und IBM kannst du eine Vorschau der Schrift sehen.
Inter ist eine kostenlose und quelloffene Schriftfamilie, die von Rasmus Andersson für Computerbildschirme entworfen wurde. Du kannst die Schriftfamilie auf Rasmus Anderssons Website oder bei Google Fonts ansehen und herunterladen.
Source Serif Pro ist eine Schrift von Adobe Originals und du kannst sie mit einem Adobe Fonts-Konto kostenlos nutzen (lies mehr über die Lizenzierung von Adobe-Schriften).
DM Sans ist eine weitere Schrift, die unter der SIL Open Font License (OFL) lizenziert ist. Sie wurde von Google bei Colophon Foundry in Auftrag gegeben und von Colophon Foundry, Jonny Pinhorn und Indian Type Foundry entworfen.
Flüssige Typografie und Abstände
Twenty Twenty-Three verwendet die Fluid Typography und Spacing Presets, die mit WordPress 6.1 eingeführt wurden.
Das neue Standard-WordPress-Theme ist ein großartiges Beispiel für die Implementierung von flüssiger Typografie in WordPress-Themes und du kannst es als Vorlage für die Unterstützung dieser Funktion in deinen Themes verwenden.
Der folgende Code zeigt die Definitionen der Eigenschaften settings.typography.fluid und settings.typography.fontSizes[] in der theme.json:
"settings": {
...
"typography": {
"fluid": true,
"fontSizes": [
{
"fluid": {
"min": "0.875rem",
"max": "1rem"
},
"size": "1rem",
"slug": "small"
},
{
"fluid": {
"min": "1rem",
"max": "1.125rem"
},
"size": "1.125rem",
"slug": "medium"
},
{
"size": "1.75rem",
"slug": "large",
"fluid": false
},
{
"size": "2.25rem",
"slug": "x-large",
"fluid": false
},
{
"size": "10rem",
"slug": "xx-large",
"fluid": {
"min": "4rem",
"max": "20rem"
}
}
]
}
}Die Einstellung typography.fluid fügt die Unterstützung für flüssige Typografie hinzu, während typography.fontSizes[].fluid den minimalen und maximalen Wert für die Schriftgröße festlegt.
Zusätzlich zur flüssigen Typografie unterstützt Twenty-Three auch flüssige Abstände.
Vor WordPress 6.1 war es nur möglich, benutzerdefinierte Abstandswerte im Editor festzulegen. Das bedeutet, dass Themenautoren vor WordPress 6.1 keine festen Werte für Padding, Margin und Gap festlegen konnten. Dies führte zu mehreren Einschränkungen. So war es zum Beispiel nicht möglich, die Einstellungen für die Abstände zwischen verschiedenen Themes zu übertragen oder die Werte für die Abstände beizubehalten, wenn Inhalte und Blockmuster zwischen verschiedenen Websites kopiert und eingefügt wurden.
Themes können die Unterstützung von Fluid Spacing über die neuen Einstellungen spacing.spacingScale e spacing.spacingSizes deklarieren (mehr dazu in Theme.json: Spacing-Größenvorgaben hinzufügen). In Twenty Twenty-Three wird dies mit den folgenden Einstellungen gemacht:
"settings": {
"spacing": {
"spacingScale": {
"steps": 0
},
"spacingSizes": [
{
"size": "clamp(1.5rem, 5vw, 2rem)",
"slug": "30",
"name": "30"
},
{
"size": "clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)",
"slug": "40",
"name": "40"
},
{
"size": "clamp(2.5rem, 8vw, 6.5rem)",
"slug": "50",
"name": "50"
},
{
"size": "clamp(3.75rem, 10vw, 7rem)",
"slug": "60",
"name": "60"
},
{
"size": "clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)",
"slug": "70",
"name": "70"
},
{
"size": "clamp(7rem, 14vw, 11rem)",
"slug": "80",
"name": "80"
}
],
"units": [
"%",
"px",
"em",
"rem",
"vh",
"vw"
]
}
}Das folgende Video zeigt Fluid Typography in Twenty Twenty-Three in Aktion.
Du kannst die Voreinstellungen für Typografie und Abstände in der Design-Spezifikation überprüfen.
Volagen und Vorlagenteile
Mit Twenty Twenty-Three kannst du alle Funktionen und Verbesserungen der Website-Bearbeitung, die mit WordPress 6.1 kommen, in Aktion erleben.
Das gilt besonders für Vorlagen und Vorlagenteile.
Wenn du den Site Editor mit Twenty Twenty-Three auf deiner Website startest, siehst du eine Liste mit elf Vorlagen und vier Vorlagenteilen.
Das Bild unten zeigt die Vorlage 404 im Seiteneditor.
Die entsprechenden HTML-Dateien findest du in den Ordnern templates und parts von Twenty Twenty-Three.
Das Bild unten zeigt den Vorlagenteil Kommentare im Bearbeitungsmodus:
Du findest benutzerdefinierte Vorlagen und Vorlagenteile in der theme.json.
Benutzerdefinierte Vorlagen
Zusätzlich zu den Standardvorlagen bietet Twenty Twenty-Three die folgenden benutzerdefinierten Vorlagen:
- Blank
- Blog (Alternative)
- 404
- Mit Featured Image
- Mit Cover-Block
Diese Vorlagen sind in der theme.json wie folgt definiert:
{
"customTemplates": [
{
"name": "blank",
"postTypes": [
"page",
"post"
],
"title": "Blank"
},
{
"name": "blog-alternative",
"postTypes": [
"page"
],
"title": "Blog (Alternative)"
},
{
"name": "404",
"postTypes": [
"page"
],
"title": "404"
},
{
"name": "with-featured-image",
"postTypes": [
"page",
"post"
],
"title": "With Featured Image"
},
{
"name": "with-cover-block",
"postTypes": [
"page",
"post"
],
"title": "With Cover Block"
}
],
}Vorlagenteile
Vorlagenteile werden wie folgt definiert.
{
"templateParts": [
{
"area": "header",
"name": "header",
"title": "Header"
},
{
"area": "footer",
"name": "footer",
"title": "Footer"
},
{
"area": "uncategorized",
"name": "comments",
"title": "Comments"
},
{
"area": "uncategorized",
"name": "post-meta",
"title": "Post Meta"
}
]
}Globale Styles und Style-Variationen
Wie bereits erwähnt, können Theme-Autoren ab WordPress 6.0 mehrere Sets von Styles mit ihren Themes bündeln, so dass Nutzer/innen zwischen Style-Variationen wechseln können, ohne ihr Theme zu ändern.
Diese großartige WordPress-Funktion ist das Hauptmerkmal des neuen Standard-Themes, denn Twenty Twenty-Three bietet zehn vorgefertigte Stilkombinationen zur Auswahl.
Du kannst diese Stile im Global Style Interface deines Site Editors durchstöbern. Hier kannst du:
- Den Global Style über das Bedienfeld Stile durchsuchen.wechseln
- Typografieeinstellungen anpassen – Text, Links, Überschriften und Schaltflächen
- Standardfarben bearbeiten oder die Farbe bestimmter Elemente ändern
- Das Layout des Hauptinhaltsbereichs anpassen
- Das Aussehen bestimmter Elemente anpassen
Es ist erwähnenswert, dass bei der Erstellung so vieler Stilvarianten die Beteiligung der Gemeinschaft entscheidend war. Nach dem Start des Twenty Twenty-Three-Projekts gingen 38 Beiträge von 19 Mitwirkenden aus 8 verschiedenen Ländern ein (du kannst alle Projekte auf GitHub einsehen).
Aus den 38 Einsendungen wurden 10 Stilvarianten ausgewählt:
- Pitch ist eine dunkle Version des Standardstils, die die Schriftfamilie Inter von Rasmus Andersson verwendet.
- Canary verwendet eine einzige Schriftgröße und eine schmale Spaltenbreite. Außerdem wird ein interessanter Rahmen-Radius-Effekt verwendet.
- Electric verwendet eine fette Farbe für die gesamte Typografie auf der Website.
- Pilgrimage ist eine farbige, dunkle Version des Basisthemes.
- Marigold ist eine weiche und angenehme Variante des Basisthemes.
- Block-Out bietet einen Duotoneffekt für Bilder.
- Whisper zeigt einige benutzerdefinierte Elemente, wie z. B. den Rahmen am Rand der Seite, Schaltflächen und einzigartige Link-Unterstreichungen.
- Sherbet hat einen einzigartigen hellen und bunten Look
- Grapes wurde wegen seiner ansprechenden Kombination aus Farbpalette und Schriftart ausgewählt.
- Aubergine ist ein auffälliger Split-Color-Hintergrund, der dunkler ist.
Das Coolste an den Stilvariationen ist, dass du nicht unbedingt ein Front-End-Entwickler sein musst, um deine Stile zu erstellen.
Wenn du dich mit dem Programmieren auskennst, kannst du eine der .json-Dateien aus dem Twenty Twenty-Three-Style-Ordner auswählen und sie als Vorlage für deine Style-Variation verwenden.
Wenn du dich mit dem Programmieren nicht auskennst, kannst du das offizielle Plugin Create Block Theme verwenden, das du kostenlos aus dem WordPress.org-Plugin-Verzeichnis herunterladen kannst.
Installiere und aktiviere zunächst das Plugin und gehe dann zum Style-Editor. Hier kannst du die Farben, die Typografie und das Layout nach deinen Wünschen anpassen und deine Änderungen speichern.
Wenn du mit deinen Änderungen zufrieden bist, findest du im WordPress-Administrationsmenü unter Erscheinungsbild den Punkt Blocktheme erstellen.
Wähle den letzten Punkt unten in der Liste: Erstelle eine Stilvariation. Du wirst aufgefordert, einen Namen für deine Stilvariation zu vergeben. Gib den Namen ein und klicke auf Thema erstellen. Dadurch wird eine neue .json-Datei im Styles-Ordner des Themes erstellt.
Jetzt kannst du deinen Style noch weiter anpassen und ihn sogar in andere WordPress-Installationen exportieren.
Das Plugin Create Block Theme ist ein wertvolles Werkzeug, um die Funktionen zur Erstellung von Themes und Vorlagen in den neuesten WordPress-Versionen voll auszuschöpfen. Wenn du schon dabei bist, solltest du auch einen Blick auf die anderen Optionen werfen:
- Twenty Twenty-Three exportieren
- Child von Twenty Twenty-Three erstellen
- Twenty Twenty-Three klonen
- Twenty Twenty-Three überschreiben
- Blanko-Theme erstellen
- Eine Style-Variante erstellen
Zusammenfassung
Auf den ersten Blick mag das neue Standard-WordPress-Theme wie eine Art funktionslose leere Schachtel aussehen, aber bei näherer Betrachtung ist es viel mehr als das, denn es ermöglicht dir, die neuesten Funktionen zur Bearbeitung von WordPress-Seiten optimal zu nutzen.
In Twenty Twenty-Three findest du viele Vorlagen und Vorlagenteile, die du anpassen kannst, eine Reihe von 10 Stilvariationen, die du als Grundlage für die Erstellung einzigartiger Websites verwenden kannst, und Unterstützung für alle neuen Funktionen von WordPress 6.1, angefangen bei der flüssigen Typografie und dem verbesserten Vorlagensystem.
Bei Twenty Twenty-Three hat man das Gefühl, dass der Unterschied zwischen dem Aussehen und der Funktionalität der Website nicht mehr groß ist. Die einzige Funktion des Themes ist es, das Erscheinungsbild der Seite zu regeln und das Hinzufügen von Funktionen den Plugins zu überlassen. Und unter diesem Gesichtspunkt leistet Twenty Twenty-Three großartige Arbeit, denn es bietet WordPress-Nutzern alle aktuellen Gutenberg-Funktionen zur Website-Bearbeitung. Es war noch nie so einfach, das Aussehen einer Website anzupassen.
Jetzt liegt es an dir. Hast du das neue Theme bereits in einer Testumgebung verwendet? Hast du schon versucht, eigene Stilvarianten zu erstellen? Teile uns deine Meinung 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