Twenty Twenty: Eine Einführung in das neue Standard WordPress Theme

Twenty Twenty ist das neue Standard-WordPress-Theme, das mit der neuesten Version von WordPress 5.3 ausgeliefert wird. Wie sein Vorgänger Twenty Nineteen wurde auch Twenty Twenty mit besonderem Augenmerk auf Gutenberg entworfen. Es gibt jedoch einen großen Unterschied zwischen den beiden: Twenty Twenty ist nicht von Grund auf neu aufgebaut, sondern basiert auf einem bestehenden Theme aus der WordPress-Community.

Da wir alles an WordPress lieben, haben wir uns das neue Twenty Twenty Theme genauer angesehen und einen Blick auf die function.php dateien, das Stylesheet und die Vorlagen geworfen.

Auch wenn Twenty Twenty zum Zeitpunkt dieses Schreibens noch lange nicht stabil ist und viele Probleme noch nicht behoben sind, werden wir dir heute unsere allerersten Gedanken über das neue WordPress-Standard-Theme mitteilen.

Tauchen wir ein in das Twenty Twenty WordPress Theme ein!

Kurze Einführung in Twenty Twenty Theme

Twenty Twenty wurde auf Chaplin aufgebaut, einem kostenlosen WordPress-Theme von Anders Norén, der auch Default Theme Design Lead von WordPress 5.3 ist.

Chaplin steht im WordPress.org-Repository zum Download bereit und wurde laut Anders mit Blick auf den Blockeditor entwickelt:

Chaplin ist ein funktionsreiches WordPress-Theme, das dir die volle Kontrolle über die HTML-Schriften und Farben auf deiner Website gibt. Es wurde von Grund auf mit Blick auf den neuen Blockeditor entwickelt und macht es einfach, ansprechende Layouts sowohl für Beiträge als auch für Seiten zu erstellen.

Die gleiche Philosophie steckt hinter Twenty Twenty: Flexibilität, Klarheit und Lesbarkeit sind die Schlüsselwörter für das neue Theme.

Twenty Twenty kommt mit einem einspaltigen Layout und drei Post/Seitenvorlagen, die WordPress-Administratoren und Designern die Freiheit geben sollen, ihre eigenen Layouts direkt im Blockeditor zu erstellen, indem sie die Vorteile von breiten und vollständigen Ausrichtungen für Blockelemente wie Spalten, Bilder und den mit Gutenberg 5.5 eingeführten Gruppenblock nutzen.

Wie Anders erklärt:

Twenty Twenty ist so konzipiert, dass Flexibilität im Mittelpunkt steht. Wenn du es für ein Unternehmen oder ein Geschäft verwenden möchtest, kannst du Spalten, Gruppen und Medien mit breiten und vollständigen Ausrichtungen kombinieren, um dynamische Layouts zu erstellen, um deine Dienstleistungen oder Produkte darzustellen. Wenn du es für einen traditionellen Blog verwenden möchtest, ist die zentrierte Inhaltsspalte auch dafür perfekt geeignet.

Außerdem kommt Twenty Twenty mit einer neuen Schriftart: Inter. Es handelt sich um eine kostenlose und quelloffene Schriftfamilie, die von Rasmus Andersson speziell für die Lesbarkeit von gemischtem und kleinem Text entwickelt wurde, insbesondere bei kleinen Schriftgrößen.

Inter gibt großen Headern eine stärkere Persönlichkeit, aber du wirst das Beste daraus machen, wenn du es mit alternativen Textgrößen verwendest, wie in der Themevorschau aus dem WordPress.org Blogbeitrag gezeigt:

Twenty Twenty ist mehr als ein voll ausgestattetes Theme und markiert einen wichtigen neuen Schritt in Richtung der zukünftigen Entwicklung der WordPress Editieroberfläche. Twenty Twenty verlässt sich im Wesentlichen auf den Blockeditor zur Bearbeitung und zum Layout des Inhalts und auf den Theme Customizer für die Kopf- und Fußzeile und zusätzliche Anpassungen.

Wenn das gesagt ist, ist es an der Zeit für uns, dieses WordPress-Theme zu installieren und auszuführen.

Wie man Twenty Twenty installiert

Das kommende Standard-Theme wird dem WordPress 5.3 Release-Plan folgen. Das bedeutet, dass Twenty Twenty zum Zeitpunkt dieses Schreibens noch nicht im WordPress Themeverzeichnis zum Herunterladen verfügbar ist.

Wie auch immer, du kannst eine In-Progress-Version von Twenty Twenty auf GitHub erhalten und sie in der aktuellen stabilen Version von WordPress sowie in WordPress 5.3 installieren. Das Github-Repository wird veraltet sein, sobald das Theme in den Kern integriert wird. In der Zwischenzeit kannst du die folgenden Daten aus dem WordPress 5.3 Release-Plan speichern:

• 23. September 2019: Beta 1
• 30. September 2019: Beta 2
• 7. Oktober 2019: Beta 3
• 15. Oktober 2019: Freigabekandidat 1
• 22. Oktober 2019: Freigabekandidat 2
• 29. Oktober 2019: Freigabekandidat 3
• 5. November 2019: Freigabekandidat 4 (falls erforderlich)
• 12. November 2019: Zieldatum für die Veröffentlichung von WordPress 5.3.

Um mit Twenty Twenty zu beginnen, folge den folgenden Schritten:

1. Hol dir das Zip-Paket von GitHub.
2. Lade die Zip-Datei in deine Staging Umgebung im WordPress Dashboard oder per SFTP
3. Gehe zu Appearance → Themes und klicke auf die Schaltfläche Activate auf dem Vorschaubild des Themes.
4. Gehe zu Appearance → Customize, um Twenty Twenty zu konfigurieren.

Und das ist es! Du kannst nun mit der Ausführung deiner Tests entweder auf deiner Staging-Website oder in deiner lokalen Umgebung beginnen.

Jetzt, da du bereit bist, lass uns weitermachen und im Twenty Twenty WordPress Theme tauchen.

Twenty Twenty’s Theme Features

Twenty Twenty ist kein vollwertiges WordPress-Theme, sondern ein reduziertes und minimalistisches Theme, das Entwicklern und Seitenadministratoren die Freiheit gibt, benutzerdefinierte Inhaltslayouts für ihre Beiträge und Seiten zu erstellen. Wie Twenty Nineteen wurde auch Twenty Twenty für Gutenberg gebaut und hängt hauptsächlich vom Lebenszyklus Gutenbergs ab (mehr zu diesem Thema in diesem Video von Matt Mullenweg bei WCEU 2019).

Das Theme unterstützt eine Reihe von Themefunktionen wie Inhaltsbreite (580), automatische Feed-Links, Post-Thumbnails, Titel-Tag und einige HTML5-Elemente (Suchformular, Kommentarformular, Kommentarliste, Galerie und Bildunterschrift).

Andere Funktionen erweitern den Theme Customizer um Optionen. Dazu gehören benutzerdefinierte Hintergründe und ein benutzerdefiniertes Logo. Die folgenden Codeausschnitte zeigen diese Funktionen, die in der Funktionsdatei des Themes aktiviert sind:

// Custom background color
add_theme_support(
	'custom-background',
	array(
		'default-color'	=> 'F5EFE0'
	)
);

// Custom logo
add_theme_support(
	'custom-logo',
	array(
		'height'      => 240,
		'width'       => 320,
		'flex-height' => true,
		'flex-width'  => true,
		'header-text' => array( 'site-title', 'site-description' ),
	)
);

Twenty Twenty unterstützt auch einige der spezifischen Funktionen von Gutenberg. Erstens unterstützt das Theme breite und volle Breite Ausrichtungen:

// Add support for full and wide align images.
add_theme_support( 'align-wide' );

Die Editor-Farbpalette ist aktiviert, wenn der Benutzer im Customizer eine Akzentfarbe festgelegt hat (standardmäßig aktiviert):

// If we have accent colors, add them to the block editor palette
if ( $editor_color_palette ) {
	add_theme_support( 'editor-color-palette', $editor_color_palette );
}

Das Twenty Twenty-Theme verfügt über vier Editor-Schriftgrößen, die im Blockeditor verfügbar sind:

// Gutenberg Font Sizes
add_theme_support( 'editor-font-sizes', array(
	array(
		'name' 		=> _x( 'Small', 'Name of the small font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'S', 'Short name of the small font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 16,
		'slug' 		=> 'small',
	),
	array(
		'name' 		=> _x( 'Regular', 'Name of the regular font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'M', 'Short name of the regular font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 18,
		'slug' 		=> 'regular',
	),
	array(
		'name' 		=> _x( 'Large', 'Name of the large font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'L', 'Short name of the large font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 24,
		'slug' 		=> 'large',
	),
	array(
		'name' 		=> _x( 'Larger', 'Name of the larger font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'XL', 'Short name of the larger font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 32,
		'slug' 		=> 'larger',
	),
) );

Und das ist alles. Das Theme ist auch in der Funktionalität recht minimal, aber es ist leicht mit einem Child-Theme erweiterbar, und wir werden uns in einer Minute damit befassen.

So passt man das Erscheinungsbild von Twenty Twenty an

Twenty Twenty kommt frei von jeglichem Schnickschnack, bietet aber eine große Flexibilität, wenn sie zusammen mit Gutenberg (oder einem guten Page Builder) eingesetzt wird.

Anpassen des Twenty Twenty-Themes

Die Website-Identität verarbeitet Website-Titel und Tagline, Logo und Symbol. Du kannst alle diese Elemente im Abschnitt Site Identity des Customizers aktivieren/deaktivieren: Die Website Identität in den Customizer Einstellungen

Der Abschnitt Cover Template des Customizers übernimmt die Anpassungseinstellungen für die Seitenvorlage der Cover Template. Dort wirst du folgendes finden:

• Eine Option, um einen Parallaxeffekt auf das Hintergrundbild zu aktivieren (Fixed Background Image).
• Farbauswahlen, um deine eigene Hintergrundfarbe und Textfarbe für die vorgestellte Bildüberlagerung festzulegen.
• Ein Slider um die Overlay Deckkraft zu steuern.

Der Abschnitt Menüs enthält fünf Menüpositionen. Du kannst ein normales horizontales Menü in die Kopfzeile einfügen (Desktop Horizontal Menu) und/oder ein umschaltbares Navigationsmenü (Desktop Expanded Menu). Das mobile Menü ist ein spezielles Menü für mobile Geräte, und Fußzeilenmenü und Sozialmenü befinden sich in der Seitenfußzeile.

Die Fußzeile enthält die Positionen Fußzeilenmenü und Sozialmenü sowie zwei Widgetbereiche. Das folgende Bild zeigt die Fußzeile des Themes mit allen Elementen an Ort und Stelle:

Schließlich kannst du im Abschnitt Additional CSS deine eigenen Styles einbinden.

Single Post/Page Templates

Wenn es um Post- und Seitenlayouts geht, kannst du aus drei verschiedenen Vorlagen wählen. Neben der Standardvorlage bietet Twenty Twenty eine Cover-Vorlage und eine Vorlage in voller Breite, mit der du spielen kannst, um das Aussehen und die Handhabung deines Inhalts anzupassen.

Der Blockeditor in Twenty Twenty

Aufgrund seines minimalen Ansatzes basiert das Erscheinungsbild von Twenty Twenty hauptsächlich auf dem Blockeditor. Wir führen unsere Tests auf Twenty Twenty mit Gutenberg Version 6.4.0 durch. Diese Version bietet eine Vielzahl neuer Funktionen, Verbesserungen und Bugfixes, die das Bearbeitungserlebnis deutlich verbessert haben.

Einige Blöcke sind nützlich, besonders beim Erstellen von einseitigen Websites. Blöcke wie Media & Text und Cover wurden verbessert und sehen jetzt gut aus, wenn es darum geht, Produkte und/oder professionelle Portfolios zu präsentieren:

Da Gutenberg ein Projekt in Arbeit ist, solltest du dir vielleicht einige der beliebtesten Plugins ansehen, mit denen du dem Editor weitere Blöcke hinzufügen kannst.

Hier ist eine kurze Liste von Plugins, die einen Versuch wert sein könnten:

Gutenberg Blocks

• CoBlocks
• Stackable
• Atomic Blocks.
• Advanced Gutenberg

Theme Customizer und Block Editor leisten gute Arbeit, wenn es um die Anpassung von Aussehen und Layout geht, aber ein Child Theme könnte dir mehr Kontrolle über das Aussehen und die Handhabung deiner Seiten geben.

Wie man ein Child Theme für das Twenty Twenty Theme erstellt

Das Erstellen von Child-Themes für WordPress könnte Spaß machen und auch eine gute Möglichkeit sein, eine Karriere als WordPress-Themenentwickler zu beginnen, und Twenty Twenty könnte ein großartiges Parent-Theme sein, wenn man Child-Themes in WordPress erstellt. Also, warum probierst du es nicht mal aus? 😉

Wenn du nicht weißt, wo du mit Child-Themes beginnen sollst, schau dir unbedingt unseren erweiterten Leitfaden über die Erstellung eines Child-Themes in WordPress an.

Nun, lasst uns unser erstes Child-Theme für Twenty Twenty erstellen!

Erstelle ein neues Verzeichnis unter wp-content/themes und nenne es so etwas wie twenty-twenty-child oder was immer du willst.

Navigiere zu wp-content/themes/twenty-twenty-child und erstelle eine neue style.css-Datei mit der folgenden Überschrift:

/*
Theme Name: My Twenty Twenty Child Theme
Theme URI: https://example.com
Description: A child theme for Twenty Twenty.
Author: Your Name
Author URI: https://example.com/
Template: twentytwenty
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

Als nächstes müssen wir das Stylesheet des Parent Themes einbinden. Erstelle im gleichen Verzeichnis die folgende Datei functions.php:

<?php
/* enqueue scripts and style from parent theme */        
function twentytwenty_styles() {
	wp_enqueue_style( 'parent', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twentytwenty_styles');

Gehe nun zu Appearance → Themes und aktiviere das Child Theme. Du kannst nun mit deinen Anpassungen beginnen.

Du kannst fast alles in Twenty Twenty ändern, von dem Hinzufügen von benutzerdefinierten Vorlagen über das Hinzufügen von benutzerdefinierten Stilen bis hin zum Ändern der Standardstile des Designs.

Hier zeige ich dir, wie du eine neue benutzerdefinierte Vorlage für einzelne Beiträge und Seiten erstellen kannst.

Hinzufügen einer benutzerdefinierten Post/Seitenvorlage in Twenty Twenty

Bisher haben wir ein Child Theme für Twenty Twenty erstellt und das Parent Theme dem Stylesheet des untergeordneten Designs hinzugefügt. Im folgenden Beispiel werden wir die Kopf- und Fußzeile los, um Platz für den Text der Seite in einer Post/Seitenvorlagendatei zu schaffen.

Schritt 1

Kopiere und füge die folgenden Dateien aus dem Parent Theme in das Verzeichnis des Child Themes ein:

• templates/template-full-width.php
• header.php
• footer.php

Schritt 2

Benenne template-full-width.php in template-canvas.php (oder was immer du willst) um. Öffne die Datei, lösche den aktuellen Inhalt und füge folgendes ein:

<?php
/*
Template Name: Canvas Template
Template Post Type: post, page
*/
get_template_part( 'singular' );

Template Name legt den Namen der Template-Datei fest, wie du ihn im Blockeditor sehen wirst, während Template Post Type die Posttypen definiert, die diese Template-Datei unterstützen. Die Funktion get_template_part lädt die Datei singular.php aus dem Parent Theme (wir benötigen keine Kopie dieser Datei in unserem Child Theme).

Gehe zum WordPress Dashboard und erstelle einen neuen Beitrag. Nun solltest du im Bereich Post Attribute eine zusätzliche Seitenvorlage finden.

Schritt 3

Und jetzt kommt der lustige Teil. Öffne header.php in deinem bevorzugten Texteditor und wickele das header in die folgende if-Anweisung:

<?php
if ( ! is_page_template( array( 'templates/template-canvas.php' ) ) ) {
?>
	<header id="site-header" class="header-footer-group" role="banner">
		...
	</header><!-- #site-header -->

	<?php 
	// Output the menu modal
	get_template_part( 'template-parts/modal-menu' );
}

Dieser Code prüft, ob die Seitenvorlage nicht templates/template-canvas.php ist. Wenn die Seitenvorlage templates/template-canvas.php ist, dann wird sie den Header der Seite und das modale Menü nicht enthalten.

Ebenso können wir die Fußzeile von einer Postseite entfernen, wenn die aktive Seitenvorlage unsere Canvas ist. Füge einfach die gleiche Bedingung in footer.php hinzu, wie unten gezeigt:

<?php
if ( ! is_page_template( array( 'templates/template-canvas.php' ) ) ) {
?>
 <footer id="site-footer" role="contentinfo" class="header-footer-group">
	...
	</footer><!-- #site-footer -->
<?php } ?>
	<?php wp_footer(); ?>

    </body>
</html>

Sie können den Code dieses Beispiels hier herunterladen.

Erstelle nun einen neuen Beitrag oder eine neue Seite, wähle die Canvas-Vorlage unter Post/Page-Attribute und überprüfe die Seite auf der Startseite.

Zusammenfassung

Twenty Twenty ist ein minimalistisches WordPress-Theme mit einem einspaltigen Layout. Die Art und Weise, wie wir es verwenden werden, hängt hauptsächlich von der Entwicklung des Blockeditors ab. Wie Anders ausdrucksstark sagt:

„Das Versprechen des Blockeditors ist es, den Nutzern die Freiheit zu geben, ihre Seiten nach eigenem Ermessen zu gestalten und zu strukturieren“.

Nach Twenty Nineteen ist das neue Twenty Twenty Standard-Theme das zweite in einer neuen Generation von Designs, die darauf abzielen, „den Aufbau von Websites ohne manuelle Codebearbeitung zu ermöglichen“. WordPress-Seiten, die mit dem Twenty Twenty-One Theme betrieben werden, gibt es in allen Formen und Größen. Um herauszufinden, ob ein Theme Twenty Twenty-One verwendet, schau dir unser praktisches WordPress Theme Detector Tool an.

Wenn du denkst, dass Gutenberg für deine Projekte noch nicht ganz zuverlässig ist, kannst du die Blöcke, die du brauchst, mit Plugins wie den oben genannten hinzufügen. Oder du kannst einfach einen Page Builder von Drittanbietern integrieren.

Jetzt liegt es an dir: Installiere das neue Standard-WordPress-Theme, spiele damit herum und lass uns wissen, was deine Gedanken hier in den Kommentaren sind!

Carlo Daniele Kinsta

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.

• Webseite
• Twitter