Twenty Twenty-Four ist das brandneue Standard-WordPress-Theme, das mit der nächsten WordPress-Version 6.4 ausgeliefert werden wird.
Die Idee hinter Twenty Twenty-Four ist die eines Standard-Themes, das für jede Art von Website geeignet ist, unabhängig vom Thema der Website. Das Theme ist auf drei Anwendungsfälle zugeschnitten: Kleinunternehmer, Fotografen und Künstler sowie Schriftsteller und Blogger.
Twenty Twenty-Four ist mehr als ein Theme, es ist eine Sammlung von Vorlagen und Mustern, mit denen du eine Vielzahl von Websites erstellen kannst. Daher kannst du Twenty Twenty-Four als ein Mehrzweck-Theme betrachten, obwohl es ein absolut minimalistisches Theme ist.
Wie zu erwarten, ist Twenty Twenty-Four ein Block-Theme, das mit allen fantastischen Funktionen von WordPress 6.4 kompatibel ist, einschließlich des Detailblocks und des vertikalen Textes.
Nach dieser kurzen Einführung in das neue WordPress Standard-Theme werden wir in diesem Artikel die vielen Vorlagen, Muster und Stile erkunden, um dir zu zeigen, wie du mit Twenty Twenty-Four eine attraktive, responsive, benutzerfreundliche und barrierefreie Website erstellen kannst.
Starte den Site Editor, drücke Cmd + k und gib Templates ein.
Das Twenty Twenty-Four WordPress Theme
Twenty Twenty-Four ist ein perfektes Beispiel für ein WordPress-Block-Theme. Wenn du den Theme-Ordner in deiner WordPress-Installation aufrufst, findest du eine sehr einfache functions.php-Datei, deren einziger Zweck es ist, eine Handvoll Stylesheets für bestimmte Blöcke einzuladen.
Die Datei functions.php von Twenty Twenty-Four ist ein gutes Beispiel dafür, wie man ein Theme optimieren kann, indem man sicherstellt, dass bestimmte Ressourcen nur dann eingebunden werden, wenn sie benötigt werden. Der folgende Code reiht das Stylesheet button-outline.css nur dann ein, wenn ein Button auf der Seite ist:
if ( ! function_exists( 'twentytwentyfour_block_styles' ) ) :
/**
* Register custom block styles
*
* @return void
* @since Twenty Twenty-Four 1.0
*
*/
function twentytwentyfour_block_styles() {
/**
* The wp_enqueue_block_style() function allows us to enqueue a stylesheet
* for a specific block. These will only get loaded when the block is rendered
* (both in the editor and on the front end), improving performance
* and reducing the amount of data requested by visitors.
*
* See https://make.wordpress.org/core/2021/12/15/using-multiple-stylesheets-per-block/ for more info.
*/
wp_enqueue_block_style(
'core/button',
array(
'handle' => 'twentytwentyfour-button-style-outline',
'src' => get_template_directory_uri() . '/assets/css/button-outline.css',
'ver' => wp_get_theme()->get( 'Version' ),
)
);
}
...
endif;Das Theme stellt deiner WordPress-Website keine Funktionen zur Verfügung, und du bist vollständig auf Plugins angewiesen, um deinen Seiten Verhalten hinzuzufügen. Die Datei functions.php von Twenty Twenty-Four kümmert sich also nur darum, bestimmte Stylesheets für bestimmte Blöcke einzureihen.
Wenn du dich weiter mit dem Ordner des Twenty Twenty-Four-Themas beschäftigst, wirst du feststellen, dass die Datei style.css nur einen Header mit den Details enthält, die für die ordnungsgemäße Funktion des Themes notwendig sind, aber keine CSS-Blöcke:
/*
Theme Name: Twenty Twenty-Four
Theme URI: https://wordpress.org/themes/twentytwentyfour
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile, and applicable to any website. Its collection of templates and patterns is tailored to different needs, such as presenting a business, blogging, and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full-page designs to help speed up the site-building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.2
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
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, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/Außerdem findest du einen Ordner assets, der einen Ordner mit Schriftarten und eine Reihe von Bildern enthält, sowie einen Ordner css, der das Stylesheet button-outline.css enthält.
Der Standardstil von Twenty Twenty-Four verwendet zwei Schriftarten: Cardo für Überschriften und Inter für andere Textelemente.
Die Schriftfamilien Jost und Instrument Sans sind ebenfalls verfügbar und werden in einigen Stilvarianten verwendet.
Im Folgenden findest du vier Ordner, die den eigentlichen Clou des Standard-Themes Twenty Twenty-Four enthalten:
- styles
- patterns
- Teile
- templates
Globale Stile
Twenty Twenty-Four wird mit sechs verschiedenen Kombinationen von Stilvarianten geliefert. Du kannst jeden Stil im Abschnitt Stile des Site-Editors oder im Bedienfeld Stile durchsuchen im Bearbeitungsmodus ausprobieren.
Der Standardstil wird in der theme.json definiert und enthält 11 Farben, 12 Farbverläufe, 5 Duotone-Farbkombinationen und zwei Schriftfamilien: Inter für den Hauptteil und Cardo für die Überschriften.
Jede Variante fügt spezifische Stilkombinationen hinzu.
Zum Zeitpunkt der Erstellung dieses Artikels verfügt Twenty Twenty-Four über die folgenden Stilvariationen:
Ice: Diese Variante ist dem Standardstil sehr ähnlich. Sie verwendet die gleiche Standardfarbpalette mit einer Systemschrift für die Überschriften und Inter für den Textkörper.
Milky: Diese Variante kommt mit denselben Standard-Schriftfamilien, aber mit einer anderen Farbpalette.
Mint: Mint bietet sowohl bei der Farbpalette als auch bei den Schriftfamilien eine Variation. Sie verwendet Instrument Sans für Überschriften und Jost für den Text.
Onyx: Dies ist die dunkle Version des Standardstils. Sie fügt eine benutzerdefinierte Farbpalette, Farbverläufe und Duotone-Kombinationen hinzu.
Rust: Rust verwendet eine ansprechende Farbpalette. Die Typografie basiert auf den Standard-Schriftfamilien, aber mit unterschiedlichen Schriftgrößen.
Sandsturm: Diese Variante ändert mehrere Elemente des Standardstils. Sandstorm definiert eine 11-Farben-Palette, verwendet die Schriftfamilien Instrument Sans und Jost und passt das Aussehen verschiedener Blöcke und HTML-Elemente an.
Vorlagen
Twenty Twenty-Four kommt mit elf eingebauten Vorlagen. Du findest die entsprechenden Dateien im Ordner templates im Verzeichnis des Themes:
- single.html
- single-mit-seitenleiste.html
- suche.html
- seite.html
- Seite-mit-Seitenleiste.html
- seitenweit.html
- seite-ohne-titel.html
- index.html
- home.html
- archiv.html
- 404.html
Du kannst die Liste der Vorlagen für deine Anpassungen im Bereich Vorlagen des Site Editors einsehen.
Auch hier gilt: Wenn du tief in den Code der Twenty-Four-Vorlagen eintauchen willst, musst du nur ein oder zwei Teile des Codes in deinem bevorzugten Code-Editor öffnen. Es ist keine Überraschung, dass jede Vorlage ein oder mehrere Muster enthält. Das beweist wieder einmal, dass Twenty Twenty-Four mehr oder weniger eine Sammlung von Mustern ist.
Nimm zum Beispiel index.html und öffne sie in deinem Editor. Du solltest den folgenden Code sehen:
<!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"}},"layout":{"type":"default"}} -->
<div class="wp-block-group">
<!-- wp:template-part {"slug":"header"} /-->
</div>
<!-- /wp:group -->
<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"constrained"}} -->
<main class="wp-block-group alignfull">
<!-- wp:heading {"level":1,"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50"}}}} -->
<h1 class="wp-block-heading alignwide" style="padding-top:var(--wp--preset--spacing--50)">Posts</h1>
<!-- /wp:heading -->
<!-- wp:pattern {"slug":"twentytwentyfour/posts-three-columns"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->Die Vorlage beginnt mit einem div, das den header Vorlagenteil enthält. Ein main -Element mit einer Überschrift und dem posts-three-columns -Muster bildet den Body, während der footer -Vorlagenteil den unteren Teil der Seite bildet.
Vergleichen wir nun index.html mit archive.html:
<!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"}},"layout":{"type":"default"}} -->
<div class="wp-block-group">
<!-- wp:template-part {"slug":"header"} /-->
</div>
<!-- /wp:group -->
<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"constrained"}} -->
<main class="wp-block-group alignfull">
<!-- wp:query-title {"type":"archive","align":"wide","style":{"typography":{"lineHeight":"1"},"spacing":{"padding":{"top":"var:preset|spacing|50"}}}} /-->
<!-- wp:pattern {"slug":"twentytwentyfour/posts-three-columns"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->Du wirst feststellen, dass die beiden Vorlagen ziemlich ähnlich sind. Der einzige Unterschied ist, dass archive.html ein Archiv-Titelblock anstelle eines H1-Elements verwendet. Beide Vorlagen verwenden ein posts-three-columns Muster, um den Inhalt der Seite zu erzeugen.
Wenn du von deinem HTML-Editor zum WordPress-Site-Editor wechselst, kannst du die Vorlagen des Themes in der Vorschau anzeigen und anpassen. Das Bild unten zeigt die Archiv-Vorlage im Bearbeitungsmodus.
Wenn du mit deinen Änderungen zufrieden bist, klicke auf Speichern in der oberen rechten Ecke. Daraufhin wird ein neues Fenster angezeigt, in dem du deine Änderungen bestätigen oder verwerfen kannst. Klicke erneut auf Speichern, und du bist fertig.
Vorlagenteile und Muster
Du findest die Muster und Vorlagenteile in zwei verschiedenen Ordnern des twentytwentyfour-Verzeichnisses. Der Musterordner enthält +50 Muster, während der Teileordner sechs Vorlagenteile enthält.
Im Website-Editor befinden sich die Vorlagenteile und die Muster alle im gleichen Abschnitt Muster.
Twenty Twenty-Four bietet mehrere Muster, die du zum Aufbau der gesamten Seite verwenden kannst. Das vereinfacht den Bearbeitungsprozess und ermöglicht es dir, deine gesamte Website mit wenigen Anpassungen zu erstellen.
Beispiele dafür sind die Muster für die Startseite, die Über-Seite und die Portfolio-Übersichtsseite, die unter der Kategorie Über-Muster aufgeführt sind.
Nehmen wir zum Beispiel an, du möchtest eine Über-Seite erstellen. Dank des Twenty Twenty-Four About-Musters kannst du eine neue Seite erstellen und einfach das Muster aus dem Blockinserter auswählen.
Das About-Muster stellt das gesamte Seitenlayout bereit und du musst nur noch deine Anpassungen hinzufügen, indem du Blöcke, Bilder und Text nach deinen Bedürfnissen hinzufügst oder austauscht. Und wenn du dich fragst, was mit der Struktur deiner Seite passiert, wenn du das Theme änderst, lautet die Antwort: gar nichts. Sobald das Muster in deine Seite integriert ist, wird es Teil des Inhalts und wird in der Posts-Tabelle der WordPress-Datenbank gespeichert.
Wenn du im Navigationsmenü der Muster nach unten scrollst, findest du den Abschnitt Vorlagenteile, der die Menüpunkte Kopfzeile, Fußzeile und Allgemein enthält. Jeder Menüpunkt ist der Einstieg in die entsprechende Kategorie der Vorlagenteile. Twenty Twenty-Four bietet eine Kopfzeile, drei Fußzeilen und zwei allgemeine Vorlagenteile.
Wenn du die Twenty Twenty-Four-Vorlagenteile in deinem bevorzugten Code-Editor öffnest, wirst du sehen, dass die meisten von ihnen einfach ein Muster enthalten. Nimm zum Beispiel die Vorlage für die Seitenleiste:
<!-- wp:pattern {"slug":"twentytwentyfour/sidebar"} /-->Diese Vorlage enthält einfach das Muster Sidebar. Du wirst dieses Muster nicht im Abschnitt Muster des Site Editors finden, weil es ein verstecktes Muster ist. Wenn du in den Code eintauchen willst, navigiere zum Patterns-Ordner des Themes, suche die Datei hidden-sidebar.php und öffne sie in deinem Code-Editor.
Die Kopfzeile dieser Datei bestätigt, dass es sich um ein verstecktes Muster handelt, das nicht über den Block-Inserter zugänglich ist:
<?php
/**
* Title: sidebar
* Slug: twentytwentyfour/sidebar
* Categories: hidden
* Inserter: no
*/
?>Zusammenfassung
Wenn du auf der Suche nach einem Mehrzweck-Theme voller Funktionen und Spezialeffekte bist, ist Twenty Twenty-Four nicht das richtige Theme für dich.
Das neue Standard-WordPress-Theme ist leicht, flexibel und frei von jeglichem Schnickschnack und lässt sich vollständig über den Website-Editor verwalten.
Mit Twenty Twenty-Four musst du keine einzige Zeile Code anfassen und brauchst keine Konfiguration. Um eine Website mit Twenty Twenty-Four zu erstellen, musst du nur die Vorlagen im Website-Editor anpassen und ein oder mehrere Muster auswählen, die deine Seiten befüllen.
Im Kern ist Twenty Twenty-Four eine Sammlung von Mustern. Sie spiegelt die neue Herangehensweise an die Website-Erstellung wider und ist ein großartiges Beispiel dafür, wie man Blockthemes erstellt.
Jetzt liegt es an dir. Hast du Twenty Twenty-Four in deiner Entwicklungsumgebung installiert? Gefällt dir der neue Ansatz für den Aufbau von WordPress-Sites? Schreib uns deine Meinung in den Kommentaren unten.
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