Wordpress

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 geliefert wird. Wie sein Vorgänger Twenty Nineteen wurde Twenty Twenty mit besonderem Fokus auf Gutenberg entwickelt. Es gibt jedoch einen großen Unterschied zwischen den beiden: Twenty Twenty wird nicht von Grund auf neu gebaut; es basiert stattdessen auf einem bestehenden Thema aus der WordPress-Community.

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

Auch wenn Twenty Twenty alles andere als stabil ist – zum Zeitpunkt dieses Schreibens – und viele Probleme noch nicht behoben sind, werden wir heute unsere allerersten Gedanken zum neuen Standard-WordPress-Theme mit Ihnen teilen.

Tauchen wir in das Twenty Twenty WordPress-Theme ein!

Twenty Twenty Vorschau
Twenty Twenty WordPress-Theme-Vorschau (Bildquelle: Make WordPress Core)

Schnelle Einführung in das Twenty Twenty Theme

Twenty Twenty basiert auf Chaplin, 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 Block-Editor entwickelt:

Chaplin ist ein funktionsreiches WordPress-Theme, das Ihnen die volle Kontrolle über die HTML-Schriftarten und -Farben auf Ihrer Website gibt. Es wurde von Grund auf unter Berücksichtigung des neuen Block-Editors entwickelt und macht es einfach, gut aussehende Layouts für Beiträge und Seiten zu erstellen.

Chaplin WordPress-Theme
Chaplin WordPress-Theme

Die gleiche Philosophie steckt hinter Twenty Twenty: Flexibilität, Klarheit, und Lesbarkeit sind die Fokus-Keywords für das neue Thema.

Twenty Twenty wird mit einem einspaltigen Layout und drei Beitrags-/Seitenvorlagen geliefert, die darauf abzielen, WordPress-Administratoren und -Designern die Freiheit, ihre benutzerdefinierten Layouts direkt im Blockeditor zu erstellen indem Sie breite und vollständige Ausrichtungen für Blockelemente wie Spalten, Bilder und den mit Gutenberg 5.5 eingeführten Gruppenblock nutzen.

Wie Anders erklärt:

Twenty Twenty ist im Kern auf Flexibilität ausgelegt. Wenn Sie es für eine Organisation oder ein Unternehmen verwenden möchten, können Sie Spalten, Gruppen und Medien mit breiten und vollständigen Ausrichtungen kombinieren, um dynamische Layouts zu erstellen, um Ihre Dienstleistungen oder Produkte zu präsentieren. Wenn Sie es für einen traditionellen Blog verwenden möchten, ist die zentrierte Inhaltsspalte auch dafür perfekt.

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

Inter-Schriftart
Die Schriftfamilie Inter

Inter gibt großen Headern eine stärkere Persönlichkeit, aber Sie werden das Beste daraus machen, wenn Sie es mit alternativen Textgrößen verwenden, wie in der Themenvorschau aus dem WordPress.org-Blogbeitrag gezeigt:

zwanzig zwanzig auf dem Desktop
Twenty Twenty Typografie: Wirkung und Lesbarkeit

Twenty Twenty ist mehr als ein voll funktionsfähiges Thema, sondern ein Thema, das einen wichtigen neuen Schritt in Richtung der zukünftigen Entwicklung der Bearbeitungsoberfläche von WordPress markiert. Twenty Twenty verlässt sich im Wesentlichen auf den Block-Editor zum Bearbeiten und Layouten des Inhalts und auf den Theme-Anpasser für Kopf- und Fußzeilen und zusätzliche Anpassungen.

Vor diesem Hintergrund ist es an der Zeit, dass wir dieses WordPress-Theme installieren und ausführen.

So installieren Sie Twenty Twenty

Das kommende Standard-Theme wird dem Veröffentlichungsplan von WordPress 5.3 folgen. Das bedeutet, dass Twenty Twenty zum Zeitpunkt des Schreibens dieses Artikels noch nicht zum Download im WordPress-Themenverzeichnis verfügbar ist.

Wie auch immer, Sie können eine laufende Version von Twenty Twenty auf GitHub herunterladen und in der aktuellen stabilen Version von WordPress installieren oder mit WordPress 5.3 herunterladen. Das Github-Repository wird veraltet sein, sobald das Thema mit dem Kern zusammengeführt wird. In der Zwischenzeit möchten Sie vielleicht die folgenden Daten aus dem Veröffentlichungsplan von WordPress 5.3 speichern:

  • 23. September 2019: Beta 1
  • 30. September 2019: Beta 2
  • 7. Oktober 2019: Beta 3
  • 15. Oktober 2019: Release-Kandidat 1
  • 22. Oktober 2019: Release-Kandidat 2
  • 29. Oktober 2019: Release-Kandidat 3
  • 5. November 2019: Release Candidate 4 (bei Bedarf)
  • 12. November 2019: Zieltermin für die Veröffentlichung von WordPress 5.3.

Führen Sie die folgenden Schritte aus, um mit Twenty Twenty zu beginnen:

  1. Holen Sie sich das Zip-Paket von GitHub.
  2. Laden Sie die ZIP-Datei in Ihre Entwicklungsinstallation im WordPress-Dashboard oder über SFTP hoch.
  3. Wechseln zu Aussehen → Themen und klicken Sie auf Aktivieren Schaltfläche auf dem Vorschaubild des Themes.
  4. Gehe zu Aussehen → Anpassen um Twenty Twenty zu konfigurieren.

Und das ist es! Sie können jetzt mit der Ausführung Ihrer Tests entweder auf Ihrer Staging-Website oder in Ihrer lokalen Umgebung beginnen.

Wichtig

Twenty Twenty befindet sich derzeit in der Entwicklung und viele Probleme wurden noch nicht behoben. Sie sollten es nicht in der Produktion verwenden.

Twenty Twenty: Vorlage in voller Breite
Ein offenes Problem auf GitHub

Nun, da Sie bereit sind zu gehen, gehen wir weiter und tauchen in die Zwanzig Zwanzig WordPress-Theme.

Testen Sie WordPress-Themes ganz einfach, bevor Sie sie mit unseren Ein-Klick-Staging-Sites in die Produktion bringen. Versuchen Behmaster kostenlos.

“}” data-sheets-userformat='{“2″:6659,”3”:{“1″:0},”4”:{“1″:2,”2″:16777215},”12″:0,”14”:{“1″:2,”2″:0},”15″:”Roboto, RobotoDraft, Helvetica, Arial, sans-serif”}’>

Testen Sie WordPress-Themes ganz einfach, bevor Sie sie mit unseren Ein-Klick-Staging-Sites in die Produktion bringen. Versuchen Behmaster kostenlos.

Die Themenfunktionen von Twenty Twenty

Twenty Twenty ist kein voll funktionsfähiges WordPress-Theme, sondern ein abgespecktes und minimalistisches Theme, das Entwicklern und Site-Administratoren die Freiheit geben soll, benutzerdefinierte Inhaltslayouts für ihre Beiträge und Seiten zu erstellen. Wie Twenty Nineteen wurde Twenty Twenty für Gutenberg gebaut und hängt hauptsächlich von Gutenbergs Lebenszyklus ab (mehr zu diesem Thema in diesem Video von Matt Mullenweg auf der WCEU 2019).

Das Thema unterstützt eine Reihe von Themenfunktionen wie die Inhaltsbreite (580), automatische Feed-Links, Post-Miniaturansichten, Titel-Tag und verschiedene HTML5-Elemente (Suchformular, Kommentarformular, Kommentarliste, Galerie und Bildunterschrift).

Andere Funktionen fügen dem Theme Customizer Optionen hinzu. Dazu gehören benutzerdefinierte Hintergründe und 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' ),
	)
);
Der Theme Customizer in Twenty Twenty
Der Theme Customizer in Twenty Twenty

Twenty Twenty unterstützt auch einige der Besonderheiten von Gutenberg. Erstens unterstützt das Thema breite und volle Breitenausrichtungen:

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

Der 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 );
}
Anpassen von Farben in Twenty Twenty
Anpassen von Farben in Twenty Twenty

Das Twenty Twenty-Theme enthält vier Schriftgrößen des Editors verfügbar im Blockeditor:

// 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',
	),
) );
Schriftgrößen im Editorblock Texteinstellungen
Schriftgrößen im Editorblock Texteinstellungen

Und das ist es. Das Thema ist auch in der Funktionalität ziemlich minimal, aber es ist leicht mit einem untergeordneten Thema erweiterbar, und wir werden gleich darauf eingehen.

So passen Sie das Erscheinungsbild von Twenty Twenty . an

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

Anpassen des Twenty Twenty Themes

Der Site-Identität behandelt Site-Titel und Slogan, Logo und Symbol. Sie können alle diese Elemente im aktivieren/deaktivieren Site-Identität Abschnitt des Customizers:

Site-Identität in den Einstellungen des Customizers
Site-Identität in den Einstellungen des Customizers

Der Customizer Cover-Vorlage Abschnitt behandelt die Anpassungseinstellungen für die Cover-Vorlage Seitenvorlage. Dort finden Sie:

  • Eine Option zum Aktivieren eines Parallax-Effekts für das Hintergrundbild (Festes Hintergrundbild).
  • Farbwähler zum Festlegen Ihrer benutzerdefinierten Hintergrundfarbe und Textfarbe für das angezeigte Bild-Overlay.
  • Ein Schieberegler zum Steuern der Deckkraft der Überlagerung.
Der Abschnitt Cover-Vorlage im Customizer
Der Abschnitt Cover-Vorlage im Customizer

Der Menüs Abschnitt bietet fünf Menüpositionen. Sie können ein normales horizontales Menü in die Kopfzeile einfügen (Horizontales Desktop-Menü) und/oder ein umschaltbares Navigationsmenü (Erweitertes Desktop-Menü). Die Handy-Menü ist ein spezielles Menü für mobile Geräte, und Footer Menu und Soziales Menü befinden sich in der Fußzeile der Seite.

Speisekarten in Twenty Twenty
Speisekarten in Twenty Twenty

Die Fußzeile behandelt die Positionen des Fußzeilenmenüs und des sozialen Menüs zusammen mit zwei Widget-Bereichen. Die folgende Abbildung zeigt die Fußzeile des Themes mit all ihren Elementen:

Vorlagenfußzeile in Twenty Twenty
Vorlagenfußzeile in Twenty Twenty

Schließlich wird das Zusätzliches CSS Im Abschnitt können Sie Ihre benutzerdefinierten Stile einschließen.

Vorlagen für einzelne Beiträge/Seiten

Bei den Beitrags- und Seitenlayouts können Sie aus drei verschiedenen Vorlagen wählen. Neben der Standardvorlage bietet Twenty Twenty eine Cover-Vorlage und einem Vorlage in voller Breite Sie können damit spielen, um das Erscheinungsbild Ihrer Inhalte anzupassen.

Vorlagen für einzelne Beiträge/Seiten in Twenty Twenty
Vorlagen für einzelne Beiträge/Seiten in Twenty Twenty

Der Blockeditor in Twenty Twenty

Aufgrund seines minimalistischen Ansatzes basiert das Erscheinungsbild von Twenty Twenty hauptsächlich auf dem Blockeditor. Wir führen unsere Tests auf Twenty Twenty mit der Gutenberg-Version 6.4.0 durch. Diese Version bietet eine Reihe neuer Funktionen, Verbesserungen und Fehlerbehebungen, die das Bearbeitungserlebnis erheblich verbessert haben.

Testen Sie WordPress-Themes ganz einfach, bevor Sie sie mit unseren Ein-Klick-Staging-Sites in die Produktion bringen. Versuchen Behmaster kostenlos.

“}” data-sheets-userformat='{“2″:6659,”3”:{“1″:0},”4”:{“1″:2,”2″:16777215},”12″:0,”14”:{“1″:2,”2″:0},”15″:”Roboto, RobotoDraft, Helvetica, Arial, sans-serif”}’>

Testen Sie WordPress-Themes ganz einfach, bevor Sie sie mit unseren Ein-Klick-Staging-Sites in die Produktion bringen. Versuchen Behmaster kostenlos.

Einige Blöcke sind praktisch, insbesondere beim Erstellen von einseitigen Websites. Blöcke wie Medien & Text und Deckel wurden verbessert und sehen jetzt toll aus, wenn es um die Präsentation von Produkten und/oder professionellen Portfolios geht:

Medien und Text
Medien- und Textblock (vollständig mit Ausrichtung)

Da Gutenberg jedoch ein in Arbeit befindliches Projekt ist, möchten Sie vielleicht einen Blick auf einige der beliebtesten Plugins werfen, mit denen Sie dem Editor weitere Blöcke hinzufügen können.

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

  • Gutenberg-Blöcke
  • CoBlocks
  • Stapelbar
  • Atomblöcke.
  • Fortgeschrittener Gutenberg

Theme Customizer und Block Editor leisten hervorragende Arbeit, wenn es um die Anpassung des Erscheinungsbilds und des Layouts geht, aber ein untergeordnetes Theme könnte Ihnen mehr Kontrolle über das Erscheinungsbild Ihrer Seiten geben.

So erstellen Sie ein untergeordnetes Thema für das Twenty Twenty-Theme

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

Wenn Sie nicht wissen, wo Sie mit Child-Themes anfangen sollen, lesen Sie unbedingt unseren erweiterten Leitfaden zum Erstellen eines Child-Themes in WordPress.

Lassen Sie uns nun unser erstes Child-Theme für Twenty Twenty erstellen!

Erstellen Sie ein neues Verzeichnis unter wp-content/themes und nenne es so twentytwenty-child oder was auch immer du magst.

Wechseln zu wp-content/themes/twentytwenty-child und erstelle ein neues style.css Datei mit folgender Ü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. Erstellen Sie im selben Verzeichnis Folgendes functions.php Datei:

Now go to Appearance → Themes and activate your Child Theme. You can now start with your customizations.

Activate the child theme
Activate the child theme

You can change almost anything in Twenty Twenty, from adding custom templates to adding your custom styles or changing the theme’s default styles.

Here I will show you how to create a new custom template for single posts and pages.

Adding a Custom Post/Page Template in Twenty Twenty

So far, we have created a child theme for Twenty Twenty and attached the parent styles to the child theme’s stylesheet. In the example below, we’ll get rid of the header and the footer, making room for the page’s body in a post/page template file.

Step 1

Copy and paste the following files from the parent theme to the child theme’s directory:

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

Step 2

Rename template-full-width.php to template-canvas.php (or whatever you like). Open the file, delete the current content, and paste the following:

Template Name sets the name of the template file as you’ll see it in the Block Editor, while Template Post Type defines the post types supporting this template file. The get_template_part function loads the singular.php file from the parent theme (we don’t need a copy of this file in our child theme).

Go to the WordPress dashboard and create a new post. Now you should find an additional page template in the Post attributes section.

A new template is available in Post Attributes
A new template is available in Post Attributes

Step 3

And now comes the fun part. Open header.php in your favorite text editor and wrap the header element inside the following if statement:


	

	

This code checks whether the page template is not templates/template-canvas.php. If the page template is templates/template-canvas.php, then it won’t include the site header and the modal menu.

Similarly, we can remove the footer from a post page when the active page template is our canvas. Just add the same condition in footer.php as shown below:


	
...

You can download the code of this example here.
Now create a new post or page, select the Canvas template in Post/Page attributes and check the page on the front site.

We took a closer look at the new WordPress default theme Twenty Twenty. Check out all the main features you need to know about! 🆕②⓪②⓪Click to Tweet

Summary

Twenty Twenty is a minimalist WordPress theme, with a single column layout. The way we’ll use it mostly depend on the evolution of the Block Editor. As Anders expressively says:

“The promise of the Block Editor is to give users the freedom to design and structure their sites as they see fit”.

Following Twenty Nineteen, the new Twenty Twenty default theme is the second in a new generation of themes aiming to “allow the construction of websites without manual code editing”. WordPress sites powered by the Twenty Twenty theme come in all shapes and sizes. To find out if a theme is using Twenty Twenty, check out our handy WordPress theme detector tool.

If you think that Gutenberg is still not completely reliable for your projects yet, you could add the blocks you’ll need with plugins like the ones listed above. Or, simply, you can embrace a third-party page builder.

Up to you now: install the new default WordPress theme, play around with it, and let us know what your thoughts are here in the comments!

Related Articles

0 Comments
Inline Feedbacks
View all comments
Back to top button