Basierend auf der Idee, dass einfache Dinge intuitiv sein sollten, während komplexe Dinge möglich sein sollten, ist Twenty Twenty-Five ein flexibles und leicht erweiterbares Standard-WordPress-Theme, das dank seiner vielen Muster und Stile den Menschen hilft, Geschichten zu erzählen.
Twenty Twenty-Five wird mit WordPress 6.7 ausgeliefert. Es wird mit einer Vielzahl inspirierender Bilder von Openverse geliefert, dem kostenlosen Repository mit Bildern, die von und für die WordPress-Community zur Verfügung gestellt werden. Diese Bilder sind in die Blockmuster von Twenty Twenty-Five eingebettet und können verwendet werden, um Geschichten zu erzählen, die „Ideen von Vergänglichkeit, dem Vergehen der Zeit und kontinuierlicher Entwicklung“ hervorrufen.
Die zentrale Rolle der Patterns in Twenty Twenty-Five zeigt, dass sich die Entwicklung von Block-Themes zunehmend auf die Oberfläche des Website-Editors und weniger auf das Schreiben von PHP- und JavaScript-Code konzentriert.
Jetzt können auch Nutzer ohne fortgeschrittene Programmierkenntnisse ein Theme erstellen. Du musst nur wissen, wie theme.json funktioniert und wie man Blockmuster erstellt.
Die Vorlagen und Vorlagenteile, die du in Twenty Twenty-Five siehst, sind Sammlungen von verschachtelten Blöcken, Mustern und Vorlagenteilen, die die Strukturelemente jeder Art von Layout bilden.
Twenty Twenty-Five ist ein hervorragendes Beispiel für die Philosophie der Demokratisierung des Designs, und dieser Artikel wird dir seine Struktur im Detail zeigen.
Twenty Twenty-Five ist ein hervorragendes Beispiel, um alles über WordPress-Block-Themes zu lernen, und wenn du unsere Einführung in theme.json gelesen hast, wirst du in der Lage sein, deine eigenen WordPress-Themes zu erstellen und sie mit dem gesamten Ökosystem zu teilen.
Aber lass uns gleich zur Sache kommen und unsere Reise durch Twenty Twenty-Five, das nächste Standard-WordPress-Theme, beginnen.
Muster und Vorlagenteile
Twenty Twenty-Five bietet eine Reihe von Blockmustern und Vorlagenteilen, mit denen WordPress-Nutzer ihre Beiträge und Seiten in wenigen Minuten erstellen können. Diese Muster und Vorlagenteile wurden für verschiedene Zwecke entwickelt, z. B. für Landing Pages, Produkte und Dienstleistungen, Veranstaltungen, Aufrufe zu Aktionen, Info-Seiten und vieles mehr.
Im Ordner des Themes findest du die entsprechenden Dateien in den Verzeichnissen parts und patterns. Wenn du eine Vorlagenteil-Datei öffnest, siehst du, dass jeder Vorlagenteil nur einen Link zu einem Blockmuster enthält. Hier ist der Code des header.html Vorlagenteils:
<!-- wp:pattern {"slug":"twentytwentyfive/header"} /-->Die Vorlagenteile müssen ebenfalls registriert werden. Du findest sie daher in Twenty Twenty-Five theme.json unter der Eigenschaft templateParts:
{
"templateParts": [
{
"area": "header",
"name": "header",
"title": "Header"
},
{
"area": "footer",
"name": "footer",
"title": "Footer"
},
{
"area": "footer",
"name": "footer-newsletter",
"title": "Footer Newsletter"
},
{
"area": "uncategorized",
"name": "right-aligned-sidebar",
"title": "Right Aligned Sidebar"
},
{
"area": "uncategorized",
"name": "sidebar",
"title": "Sidebar"
}
]
}Die Eigenschaft area bestimmt den Seitenabschnitt, in den ein Vorlagenteil passt, und die entsprechende Kategorie, name ist der Slug des Vorlagenteils und title ist der Textstring, mit dem das Label erstellt wird, das den Vorlagenteil auf dem Bildschirm kennzeichnet.
Der Ordner patterns des Twenty Twenty-Five-Themes enthält eine ganze Reihe von .php Dateien. Du kannst jede dieser Dateien öffnen und den Code überprüfen, um zu erfahren, wie die Blockmuster aufgebaut sind.
Diese Muster bieten hervorragende Beispiele für leistungsstarke WordPress-Funktionen, die kürzlich zum Kern hinzugefügt wurden. Die Datei copyright.php enthält zum Beispiel den folgenden Code:
<!-- wp:paragraph {
"metadata":{
"bindings":{
"content":{
"source":"twentytwentyfive/copyright"
}
}
},
"className":"copyright",
"textColor":"primary",
"fontSize":"small"
} -->
<p class="copyright has-primary-color has-text-color has-small-font-size"></p>
<!-- /wp:paragraph -->Du kannst auf den ersten Blick sehen, dass dieses Muster die mit WordPress 6.5 eingeführte Funktion Block Bindings nutzt, um den Inhalt des Copyright-Textes dynamisch zu erzeugen.
Hier ist das Attribut content des Copyright-Musters mit einer im Twenty Twenty-Five-Theme definierten Quelle verbunden.
Wenn du dich fragst, wo dieser Textstring definiert ist, schau in der functions.php Datei von Twenty Twenty-Five nach und finde den folgenden Code:
/**
* Register block binding sources.
*/
if ( ! function_exists( 'twentytwentyfive_register_block_bindings' ) ) :
/**
* Register the copyright block binding source.
*
* @since Twenty Twenty-Five 1.0
* @return void
*/
function twentytwentyfive_register_block_bindings() {
register_block_bindings_source(
'twentytwentyfive/copyright',
array(
'label' => _x( '© YEAR', 'Label for the copyright placeholder in the editor', 'twentytwentyfive' ),
'get_value_callback' => 'twentytwentyfive_copyright_binding',
)
);
}
endif;
add_action( 'init', 'twentytwentyfive_register_block_bindings' );'© YEAR' erzeugt den auf der Seite angezeigten Textstring, während der twentytwentyfive_copyright_binding Callback den formatierten Textstring liefert:
/**
* Register block binding callback function for the copyright.
*/
if ( ! function_exists( 'twentytwentyfive_copyright_binding' ) ) :
/**
* Callback function for the copyright block binding source.
*
* @since Twenty Twenty-Five 1.0
* @return string Copyright text.
*/
function twentytwentyfive_copyright_binding() {
$copyright_text = sprintf(
/* translators: 1: Copyright symbol or word, 2: Year */
esc_html__( '%1$s %2$s', 'twentytwentyfive' ),
'©',
wp_date( 'Y' ),
);
return $copyright_text;
}
endif;Wenn sich das alles ein bisschen kompliziert anhört, dann überleg mal, wie einfach es für den Nutzer ist, komplexe Layouts zu erstellen, indem er einfach die Elemente verwendet, die von Haus aus vorhanden sind.
Und denk auch daran, wie einfach es für einen Entwickler ist, Vorlagen und Blockmuster zu erstellen, indem er ihren Code direkt im Site-Editor generiert. Und die Integration mit der Block Bindings API öffnet die Tür zu endlosen Möglichkeiten für die Integration mit externen Datenquellen.
Twenty Twenty-Five bietet weitere gute Beispiele für die Verwendung von Blockmustern. So kannst du zum Beispiel fortgeschrittene Layouts erstellen, indem du bestehende Muster mit anderen Mustern kombinierst.
Wenn du die Muster im Site-Editor durchsuchst, siehst du in der Kategorie Seiten-Muster mehrere Landing-Page-Layouts.
Diese Muster sind vorgefertigte Layouts, die du für deine Seiten verwenden kannst. Wenn du eine neue Seite erstellst, zeigt der Editor ein Overlay an, in dem du ein Blockmuster auswählen kannst. Vielleicht möchtest du mit einem Landing Page-Muster beginnen und es an deine Bedürfnisse anpassen.
Du kannst auch die Standard-Seitenvorlage ändern und diejenige verwenden, die am besten zu deinem Projekt passt.
Tauchen wir nun in den Code der Landing Page für das Buchmuster ein. Gehe in den Ordner patterns von Twenty Twenty-Five und öffne page-landing-book.php. Du solltest den folgenden Code sehen:
<?php
/**
* Title: Landing page for Book
* Slug: twentytwentyfive/page-landing-book
* Categories: twentytwentyfive_page, featured
* Keywords: starter
* Block Types: core/post-content
* Post Types: page, wp_template
* Viewport width: 1400
* Description: A landing page for the book with a hero section, pre-order links, locations, FAQs and newsletter signup.
*
* @package WordPress
* @subpackage Twenty_Twenty_Five
* @since Twenty Twenty-Five 1.0
*/
?>
<!-- wp:pattern {"slug":"twentytwentyfive/hero-book"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/cta-book-links"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/banner-about-book"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/cta-book-locations"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/text-faqs"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/newsletter-sign-up"} /-->Es ist einfach eine Sammlung von Blockmustern. Das soll zeigen, wie einfach es ist, komplexe Layouts zu erstellen, sowohl für Entwickler als auch für Nutzer. Entwickler können komplexe Vorlagenteile und Blockmuster erstellen, indem sie vorgefertigte Muster mit wenigen Klicks in anderen Mustern verschachteln. Noch nie war es so einfach, eine Landing Page zu erstellen.
Stile
Twenty Twenty-Five bietet eine Vielzahl von Schriftarten, die mehrere Sprachen unterstützen, und eine große Anzahl von vordefinierten Farbpaletten, die als Stilvariationen zusammengefasst sind.
Schriftarten
Twenty Twenty-Five enthält 9 Schriftarten mit vielen Varianten. Du kannst die Schriftarten, die du auf deiner Website verwenden möchtest, in der Schnittstelle Globale Stile unter Typografie auswählen.
Diese Schriftfamilien sind im Ordner Twenty Twenty-Five assets/fonts gespeichert und unter theme.json registriert.
Im folgenden Fragment sind fünf Varianten der Schriftfamilie Fira Code registriert:
{
"settings": {
"typography": {
"fontFamilies": [
{
"name": "Fira Code",
"slug": "fira-code",
"fontFamily": "\"Fira Code\", monospace",
"fontFace": [
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Light.woff2"
],
"fontWeight": "300",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Regular.woff2"
],
"fontWeight": "400",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Medium.woff2"
],
"fontWeight": "500",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-SemiBold.woff2"
],
"fontWeight": "600",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Bold.woff2"
],
"fontWeight": "700",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
}
]
},
...
}
}
}Das folgende Bild zeigt die Varianten der Schriftart Fira Code im Site-Editor.
Twenty Twenty-Five kommt auch mit 8 Typografiesätzen. Du musst nur eine davon im Abschnitt Typografie der Schnittstelle Globale Stile auswählen und sie wird auf deine gesamte Website angewendet.
Wenn du den Typografiesatz Nummer 7, „Platypi & Literata“, auswählst, werden diese beiden Schriftarten automatisch auf alle Elemente deiner Website angewendet: Literata wird auf die allgemeinen Textelemente angewandt und Platypi auf Seitentitel, Überschriften und Schaltflächenblöcke.
Diese Voreinstellung ist in der Datei typography-preset-6.json unter styles/typography registriert:
{
"version": 3,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"title": "Platypi & Literata",
"slug": "typography-preset-6",
"styles": {
"typography": {
"fontFamily": "var:preset|font-family|literata",
"fontSize": "var:preset|font-size|large",
"fontStyle": "normal",
"fontWeight": "300",
"letterSpacing": "-0.24px",
"lineHeight": "1.3"
},
"blocks": {
"core/site-title": {
"typography": {
"fontFamily": "var:preset|font-family|platypi",
"fontWeight": "800",
"letterSpacing": "-0.6px"
}
},
"core/post-title": {
"typography": {
"fontWeight": "800",
"letterSpacing": "-0.96px"
}
},
"core/query-title": {
"typography": {
"fontWeight": "800"
}
}
},
"elements": {
"heading": {
"typography": {
"fontFamily": "var:preset|font-family|platypi",
"fontWeight": "800"
}
},
"button": {
"typography": {
"fontFamily": "var:preset|font-family|platypi",
"fontWeight": "800"
}
}
}
}
}Farben
Twenty Twenty-Five bietet eine Standardpalette mit 8 Farben. Diese Farben sind in theme.json wie folgt definiert:
{
"settings": {
"color": {
"palette": [
{
"color": "#FFFFFF",
"name": "Base",
"slug": "base"
},
{
"color": "#111111",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#FFEE58",
"name": "Accent 1",
"slug": "accent-1"
},
{
"color": "#F6CFF4",
"name": "Accent 2",
"slug": "accent-2"
},
{
"color": "#503AA8",
"name": "Accent 3",
"slug": "accent-3"
},
{
"color": "#686868",
"name": "Primary",
"slug": "primary"
},
{
"color": "#FBFAF3",
"name": "Secondary",
"slug": "secondary"
},
{
"color": "#11111133",
"name": "Opacity 20%",
"slug": "opacity-20"
}
]
},
...
}
Twenty Twenty-Five bietet außerdem 8 zusätzliche Farbpaletten, die als Stilvariationen definiert sind. Du findest sie im Ordner styles/colors des Themes.
Das Bild unten zeigt die Sunrise-Farbpalette.
Vorlagen
Twenty Twenty-Five bietet dir auch eine große Auswahl an Vorlagen, mit denen du jede Art von Blog erstellen kannst. Du kannst persönliche Blogs mit gleichbleibender Textmenge, Fotoblogs und Portfolios mit verschiedenen Layout-Strukturen und stärker strukturierte Blogs für verschiedene Zwecke erstellen.
Die folgenden Bilder zeigen Vorschaubilder der Twenty Twenty-Five Blogvorlagen von Figma. Hier sind einige der persönlichen Blogvorlagen.
Und hier sind einige der Fotoblog-Vorlagen.
Twenty Twenty-Five-Vorlagen sind minimalistisch und so gestaltet, dass sie eine einfache und klare Oberfläche bieten. Wie die Vorlagen selbst basieren auch die Templates stark auf Blockmustern. Um einen Anhaltspunkt zu haben, öffne eine der .html Dateien, die du im templates Ordner des Twenty Twenty-Five Themes findest, und schau dir den Code an. Unten findest du den Quellcode für die Datei archive.html:
<!-- wp:template-part {"slug":"header","area":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:query-title {"type":"archive"} /-->
<!-- wp:term-description /-->
<!-- wp:pattern {"slug":"twentytwentyfive/posts-personal-blog"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/more-posts"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->Der Inhalt der Archivseite wird durch die Blöcke Abfragetitel und Begriffsbeschreibung sowie die Muster Liste der Beiträge, 1 Spalte (posts-personal-blog) und Weitere Beiträge (more-posts) erzeugt.
Auf der Grundlage dieses Codes kannst du ganz einfach eine eigene Vorlage für deine Website erstellen. Wenn du zum Beispiel die Liste der Beiträge durch ein Foto-Blog-Layout ersetzen möchtest, kannst du das ganz einfach tun, indem du das in dieser Vorlage verwendete Muster änderst.
Navigiere im Website-Editor zum Abschnitt Vorlagen und klicke auf Neue Vorlage hinzufügen. Du wirst aufgefordert, die Art des Inhalts auszuwählen, für den deine Vorlage gelten soll. In diesem Beispiel haben wir die Kategorie Archive ausgewählt.
Als Nächstes musst du entscheiden, ob die Vorlage für alle Kategorien oder für eine bestimmte Kategorie verwendet werden soll. Schließlich werden dir ein oder mehrere Muster angezeigt, mit denen du beginnen und deine Änderungen vornehmen kannst.
Du kannst aber auch alles von Grund auf neu erstellen. In diesem Beispiel nehmen wir eine kleine Änderung am Code der Datei archive.html vor und verwenden das Muster twentytwentyfive/photo-blog-posts anstelle von twentytwentyfive/posts-personal-blog. Auf der WordPress-Kategorienarchivseite wird nun eine Fotogalerie angezeigt.
Zusammenfassung
Twenty Twenty-Five, das nächste Standard-Theme, das mit WordPress 6.7 veröffentlicht wird, wurde mit einer Philosophie der Einfachheit für Nutzer und Flexibilität für Entwickler entwickelt. Dank seiner vielfältigen und vielseitigen Blockmuster und Stile hilft dieses Theme den Nutzern, überzeugende Geschichten zu erzählen. Es enthält viele inspirierende Bilder von Openverse, die nahtlos in die Blockmuster des Themes integriert sind.
Die Struktur des Themes basiert auf Sammlungen von verschachtelten Blöcken, Mustern und Vorlagenteilen, die es einfacher denn je machen, komplexe Layouts ohne fortgeschrittene Programmierkenntnisse zu gestalten.
Twenty Twenty-Five ist ein weiterer Schritt zur Demokratisierung des Designs. Egal, ob du ein erfahrener Entwickler oder ein Anfänger bist, Twenty Twenty-Five bietet eine solide Grundlage, um Block-Themes zu erforschen, und mit dem richtigen Know-how kannst du sogar dein eigenes Theme erstellen und mit der WordPress-Community teilen.
Jetzt bist du dran. Hast du Twenty Twenty-Five bereits in einer Entwicklungsumgebung getestet? Teile uns deine Eindrücke in den Kommentaren unten mit.
Carlo ist ein leidenschaftlicher Liebhaber von Webdesign und Frontend-Entwicklung. Er beschäftigt sich seit über 10 Jahren mit WordPress, auch in Zusammenarbeit mit italienischen und europäischen Universitäten und Bildungseinrichtungen. Er hat Dutzende von Artikeln und Leitfäden über WordPress geschrieben, die sowohl auf italienischen und internationalen Websites als auch in gedruckten Magazinen veröffentlicht wurden. Du kannst Carlo auf X und LinkedIn finden.
Schreibe einen Kommentar