Twenty Twenty-One ist das neue WordPress Standard Theme, das mit WordPress 5.6 kommt. Wenn du auf ein voll funktionsfähiges WordPress Theme wartest, wirst du vielleicht ein wenig enttäuscht sein.

Twenty Twenty-One ist ein minimalistisches Theme, das wie eine sehr anpassbare leere Leinwand aussieht und wirkt. Wie seine Vorgänger wird es sich beim neuen Standard-Theme hauptsächlich auf den Block-Editor zur Seitenerstellung stützen.

In diesem Beitrag gehen wir die interessantesten Features des Twenty Twenty-One Themes durch und zeigen euch, wie ihr das Aussehen und die Bedienung einer WordPress Webseite mit einem einfachen Twenty Twenty One Child Theme anpassen könnt.

Bereit? Lass uns eintauchen!

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

Ein erster Blick auf Twenty Twenty One WordPress Theme

Wie Twenty Twenty ist auch das neue Standard-Theme, das mit WordPress 5.6 kommt, nicht von Grund auf neu erstellt, aber es basiert auf einem Theme, das von der Community kommt.

Twenty Twenty-One wurde auf der Basis eines neuen Automattic’s Themes entwickelt, dem Seedlet Theme, welches eine saubere und gut geordnete Struktur von verschachtelten CSS Custom Properties bietet. Durch die große Verwendung von CSS-Eigenschaften im Stylesheet des Themes ist das Erstellen von Child Themes auf Twenty Twenty-One schnell und einfach.

Seedlet WordPress Theme
Seedlet WordPress Theme

Twenty Twenty-One ist ein sehr zugängliches, minimalistisches WordPress Theme mit einem einspaltigen Layout, einer Sidebar für die Fußzeile und zwei Menüpunkten: Primärnavigation und Fußnavigation.

Das neue Theme verwendet einen System-Font-Stack. Dies sollte sowohl für Benutzer als auch für Entwickler mehrere Vorteile haben:

  • In erster Linie bringt die Verwendung eines System-Font-Stacks Vorteile für UX und die Leistung, da native Schriften bereits von den meisten Betriebssystemen unterstützt werden und keine zusätzliche Ladezeit benötigen.
  • Zweitens sehen sie neutral aus, so dass sie problemlos in jede Art von Design eingebunden werden können.
  • Drittens ist es für Benutzer und Entwickler einfacher, das Layout einer Webseite mit Twenty Twenty-One anzupassen, da keine zusätzlichen Schriftdateien geladen werden müssen.

Das Twenty Twenty-One Theme verwendet eine minimale Farbpalette, die auf pastellgrünen Hintergrundfarben und zwei Grautönen als Vordergrundfarben basiert. Das Theme bietet mehrere zusätzliche Pastellfarbenpaletten.

Zu diesem Punkt erklärt Mel Choyse-Dwan, Default Theme Design Lead, wie es funktioniert:

Wir werden das Theme mit einigen zusätzlichen Farbpaletten bündeln, darunter sowohl eine weiße als auch eine schwarze Farbpalette. Warum Pastellgrün? Pastelltöne und gedämpfte Farben sind im Moment ziemlich modern.

Twenty Twenty-One Farben
Twenty Twenty-One Farben (Bildquelle: Make WordPress Core)

Wie installiere ich Twenty Twenty-One

Zum Zeitpunkt des Verfassens dieses Artikels befindet sich Twenty Twenty-One in aktiver Entwicklung und steht noch nicht zum Download im WordPress Theme Directory zur Verfügung. Ihr könnt euch aber eine in Arbeit befindliche Version des Themes auf Github herunterladen.

Das Github-Repository wird veraltet sein, sobald das Theme in den Core eingebunden ist, und ihr werdet es im Theme Directory finden. Da Twenty Twenty-One dem Veröffentlichungszeitplan von WordPress 5.6 folgt, solltet ihr die folgenden Daten speichern:

  • Oktober 2020: Beta 1
  • Oktober 2020: Beta 2
  • November 2020: Beta 3
  • November 2020: Beta 4
  • November 2020: RC 1
  • Dezember 2020: RC 2
  • Dezember 2020: Probelauf für die Veröffentlichung von WordPress 5.6
  • Dezember 2020: Zieldatum für die Veröffentlichung von WordPress 5.6

Um das Twenty Twenty-One Theme zum Laufen zu bringen, folge diesen Schritten:

  1. Holt euch das Zip-Paket von GitHub.
  2. Lade dein Paket über das WordPress Dashboard oder per SFTP auf deine Entwicklungsinstallation hoch.
  3. Stöbere zu Appearance → Themes und klicke auf die Schaltfläche Aktivieren auf dem Vorschaubild des Themes.
  4. Gehe zu Appearance → Anpassen, um Twenty Twenty-One zu konfigurieren.

Du kannst deine Tests jetzt entweder auf einer Staging-Webseite oder in deiner lokalen Umgebung durchführen.

Twenty Twenty-One
Twenty Twenty-One Ausgabe #620 auf Github

Nicht bereit, deine Tests durchzuführen?

Keine Sorge, wir haben das Thema seziert und wir zeigen euch, was ihr von Twenty Twenty-One erwarten könnt.

Twenty Twenty-One’s Theme und Block Features

Genau wie Twenty Twenty ist das neue WordPress-Standardtheme kein voll funktionsfähiges Theme, sondern ein minimalistisches Theme, das sich beim Seitenaufbau auf den Blockeditor verlässt. Das Theme zielt auch auf eine gute Zugänglichkeit ab. Mit den Worten von Mel Choyce-Dwan:

Zu guter Letzt würden wir uns freuen, wenn das Theme den relevanten Richtlinien der WCAG 2.1 Stufe AAA entsprechen würde. Wir haben die Idee geliebt, als +make.wordpress.org/accessibility/ es zur Sprache brachte, und würden jede und jeden Ratschlag von den Experten unserer Community a11y zu schätzen wissen, um dies möglich zu machen.

Das Theme unterstützt eine ganze Reihe von Theme– und Block-Features, darunter die folgenden:

Theme-Funktionen:

  • Automatische Feed-Links
  • Titel-Tag
  • Post-Formate
  • Thumbnails posten
  • HTML5-Elemente
  • Eigenes Logo
  • Selektive Auffrischung für Widgets
  • Benutzerdefinierter Hintergrund
  • Zwei Navigationsmenüs
  • Eine Seitenleiste

Block Features:

  • Standard-Blockstile
  • Editor-Stile
  • Dunkle Editorstile (dunkler Hintergrund)
  • Weit ausrichten
  • Schriftgrößen blocken
  • Farbpaletten blocken
  • Farbverlauf-Voreinstellungen blocken
  • Inhalt des Starts
  • Responsive Einbettungen
  • Individuelle Linienhöhe
  • Experimentelle Linkfarbe
  • Experimentelle benutzerdefinierte Abstände
  • Custom-units (entfernt in WordPress 5.6)

Die folgende Liste enthält die Funktionen, die beim Erstellen einer Website, die auf Twenty Twenty-One basiert, möglicherweise relevanter sind.

Navigations-Menüs

Twenty Twenty-One unterstützt zwei Menüpunkte, die Primärnavigation, die sich in der rechten oberen Ecke der Kopfzeile befindet, und die Fußnavigation.

Twenty Twenty-One Menüpunkte
Twenty Twenty-One Menüpunkte

Wenn sie zum Footer-Menü hinzugefügt werden, werden soziale Links automatisch erkannt und in SVG-Icons für die unterstützten sozialen Medien umgewandelt.

Twenty Twenty-One soziales Menü
Twenty Twenty-One soziales Menü

Post-Formate

Twenty Twenty-One unterstützt neun Postformate: Link, Beiseite, Galerie, Bild, Zitat, Status, Video, Audio, Chat. Du kannst dein Beitragsformat in den Einstellungen des Editors unter Status & Sichtbarkeit auswählen.

.

Postformate
Twenty Twenty-One unterstützt neun Postformate

Um einen Blick darauf zu werfen, wie das Twenty Twenty-One Theme mit Postformaten umgeht, navigiere zum Ordner template-parts/excerpt und wähle eine Vorlage aus. Öffne zum Beispiel die Datei excerpt-image.php in deinem bevorzugten Code-Editor. In dieser Datei siehst du den folgenden Code:

/**
 * Show the appropriate content for the Image post format.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since 1.0.0
 */

// If there is no featured-image, print the first image block found.
if (
	! twenty_twenty_one_can_show_post_thumbnail() &&
	has_block( 'core/image', get_the_content() )
) {

	twenty_twenty_one_print_first_instance_of_block( 'core/image', get_the_content() );
}

the_excerpt();

Der Code ist selbsterklärend, aber schauen wir uns das mal genauer an:

  • has_block bestimmt, ob ein Beitrag oder ein String einen bestimmten Blocktyp enthält (in diesem Beispiel den Core Image Block).
  • twenty_twenty_one_print_first_instance_of_block ist eine Twenty Twenty-One Template-Funktion, die die erste Instanz eines Blocks im Inhalt druckt und dann wegbricht.

Wenn ein Webseiten-Betrachter also ein Archiv mit Beiträgen im ‚Bild‘-Format benötigt, wird WordPress für jeden Beitrag im Archiv oben ein Bild anzeigen. Nach der gleichen Logik kannst du in jedes Beitragsformat eintauchen, indem du die entsprechenden Teile der Vorlage überprüfst.

Website-Identität und benutzerdefiniertes Logo

Twenty Twenty-One bietet Unterstützung für ein benutzerdefiniertes 300×100 px-Logo. Die Einstellungen für ein benutzerdefiniertes Logo findest du im Fenster „Site-Identität„.

Website-Identität in Twenty Twenty-One
Website-Identität in Twenty Twenty-One

Dieser Bildschirm beinhaltet:

  • Eigenes Logo
  • Website-Titel
  • Stichwort
  • Seite Icon

Editor Schriftgrößen

Twenty Twenty-One unterstützt die folgenden Schriftgrößen:

  • Extra klein – 16
  • Klein – 18
  • Normal/Mittel – 20
  • Groß – 24
  • Extra groß – 40
  • Riesig – 96
  • Gigantisch – 144

Im Stylesheet des Themes werden die Größen in rem-Einheiten festgelegt.

Im Stylesheet des Themes werden die Größen in rem-Einheiten festgelegt.
Im Stylesheet des Themes werden die Größen in rem-Einheiten festgelegt.

Farb-Einstellungen

Der Themen-Customizer bietet ein Farben & Dunkel-Modus-Panel mit zwei Optionen:

  • Ein einfacher Farbwähler mit 10 vordefinierten Farbpaletten.
  • Ein Kontrollkästchen zum Ein-/Ausschalten des Dunkelmodus.

Das Bild unten zeigt eine hellgelbe Hintergrundfarbe mit einem dunkelgrauen Text.

Farben & Dunkle Modus-Einstellungen in Twenty Twenty-One
Farben & Dunkle Modus-Einstellungen in Twenty Twenty-One

Die Hintergrundfarbe ist standardmäßig pastellgrün ('#d1e4dd'), aber die Seiten-Administratoren können leicht zwischen den folgenden Alternativen für die Hintergrundfarbe wechseln:

  • Schwarz = '#000000';
  • Dunkelgrau = '#28303D';
  • Grau = '#39414D';
  • Grün = '#D1E4DD';
  • Blau = '#D1DFE4';
  • Violett = '#D1D1E4';
  • Rot = '#E4D1D1';
  • Orange = '#E4DAD1';
  • Gelb = '#EEEADD';
  • Weiß = '#FFFFFF';

Die gleichen Farben sind als Blockfarbenpaletten in den Blockeinstellungen des Editors verfügbar.

Zusätzlich unterstützt Twenty Twenty-One mehrere Farbverlaufsvoreinstellungen für Blöcke, die diese Funktion unterstützen. Die Abbildung unten zeigt die Standardfarbverläufe in den Blockeinstellungen für Spalten.

Farbverlaufsvoreinstellungen
Acht Farbverlaufsvoreinstellungen in den Farbeinstellungen eines Blocks

Aus der Sicht der Barrierefreiheit ist die Unterstützung des Dark-Modus ein absolutes Novum für ein Standardthema.

Tauchen wir etwas tiefer ein!

Unterstützung des Dark-Modus im Twenty Twenty-One Theme

Im Anschluss an eine Diskussion im den Kanal #core-themes Slack stellte Mel Choyce-Dwan die Dark Mode-Unterstützung für Twenty Twenty-One vor.

Aktivieren des Dunkelmodus in MacOS
Aktivieren des Dunkelmodus in MacOS

Zuerst war nicht klar, wie diese Funktion in Twenty Twenty-One hätte implementiert werden können, wenn sie als Themefunktion oder als separates Projekt, das in einem Plugin ausgeliefert wird, hinzugefügt worden wäre.

Es gab fünf mögliche Optionen zur Auswahl:

  • Website-Betreiber können die Unterstützung des Dark-Modus deaktivieren und Website-Besucher können den Dark-Modus ein- und ausschalten, während sie die Website betrachten.
  • Den Betreibern der Website ist es nur gestattet, die Unterstützung des Dark-Modus zu deaktivieren (keine Möglichkeit für Besucher der Website, den Dark-Modus ein- oder auszuschalten).
  • Aktivierung des Dark-Modus-Supports als „immer an“, während es den Besuchern der Webseite ermöglicht wird, es während der Betrachtung der Webseite umzuschalten.
  • Aktivierung von Support für den Dark-Modus als „immer an“ und Verhinderung, dass Besucher der Webseite den Dark-Modus ein- oder ausschalten können.
  • Überhaupt kein Support für den Dark-Modus

Nach einer durchdachten Diskussion wurde der Dark-Modus zum Thema hinzugefügt. Jetzt:

  • Support im Dark-Modus ist als Opt-in-Funktion für Betreiber von Webseiten verfügbar.
  • Die Umschalttaste wurde aus der Benutzeroberfläche des Editors entfernt und ist nur im Customizer verfügbar.
  • Die Umschalttaste für den Dark-Modus befindet sich in der unteren rechten Ecke (links bei RTL) und verschwindet, wenn der Webseiten-Betrachter die Seite nach unten scrollt.
  • Wenn der Dark-Modus aktiviert ist, können es Webswiten-Betrachter je nach ihren persönlichen Vorlieben und unabhängig von ihren Betriebssystem-/Browser-Einstellungen ein- oder ausschalten.
Dark-Modus im Customizer aktiviert und auf der Vorderseite deaktiviert
Dark-Modus im Customizer aktiviert und auf der Vorderseite deaktiviert

Selbst wenn der Dark-Modus als eine Verbesserung der Zugänglichkeit angesehen wird, ist es nicht offensichtlich, dass deine Webseiten in jedem Kontext besser zugänglich wären.

Die größten Bedenken beziehen sich auf dunkle Logos und transparente Bilder. Der Wechsel von einem standardmäßig hellen Template zu einer dunklen Hintergrundfarbe könnte zu Lesbarkeitsproblemen führen, die die Benutzerfreundlichkeit beeinträchtigen und das Erscheinungsbild deiner Webseiten ruinieren können.

Beispielsweise kann ein dunkles Logo auf hellem Hintergrund vollständig verschwinden, wenn deine Leser den Dark-Modus auf ihrer Seite aktivieren. Ähnliche Bedenken betreffen die Bildhelligkeit und den Kontrast sowie die Opazität von Rändern, Trennlinien und Trennlinien.

Aus diesem Grund solltest du, wenn du planst, Support im Dark-Modus für deine Webseite anzubieten, auch berücksichtigen, wie deine Webseite mit einem dunklen Hintergrund aussehen wird.

Dark-Modus im Customizer aktiviert und auf der Webseite aktiviert
Dark-Modus im Customizer aktiviert und auf der Webseite aktiviert

Die Theme-Beitragenden sind sich dieser Probleme bewusst und die Diskussion geht auf Github weiter. Um einen genaueren Einblick in die Usability-Probleme des Dark-Modus zu bekommen und eine Gelegenheit, sich an der Diskussion zu beteiligen, schaut euch die vollständige Liste der Probleme auf Github an.

Die Einstellungen für den Dark-Modus werden im LocalStorage gespeichert und können in den Entwicklertools des Browsers eingesehen werden.

In Google Chrome starte die Chrome WebTools und klicke auf die Registerkarte Anwendung. Finde den Abschnitt Speichern und erweitere das Menü Lokaler Speicher.

Dark-Modus Benutzereinstellungen im lokalen Speicher von Brave Browser
Dark-Modus Benutzereinstellungen im lokalen Speicher von Brave Browser

Um ehrlich zu sein, der Dark-Modus ist heute im Kontext von Webseiten nicht üblich. Da jedoch ein neues WordPress Standard Theme nun den Dark-Modus unterstützt, könnten wir eine Änderung in diesem speziellen Bereich der Zugänglichkeit erwarten, da WordPress die meistgenutzte CMS-Software ist.

Entwickler, die tiefer in den technischen Bereich eintauchen wollen, sollten sich diese ausführliche Anleitung zum Dark-Modus im Web nicht entgehen lassen.

Stile und CSS benutzerdefinierte Eigenschaften

Davon abgesehen ist es jetzt an der Zeit, die interessantesten Features von Twenty Twenty-One für Theme-Entwickler zu entdecken.

Fangen wir mit den CSS Custom Properties an.

Wie bereits erwähnt, basiert Twenty Twenty-One auf Seedlet, einem zweispaltigen Theme, mit einer Sidebar in der Fußzeile und drei Menüpunkten. Das Styling von Seedlet basiert komplett auf CSS Custom Properties und das macht es für Theme-Entwickler und fortgeschrittene Benutzer einfacher, Child Themes auf Automattic’s Theme zu bauen.

Dasselbe gilt für Twenty Twenty-One. Das neue Standard-Theme kommt mit einem einspaltigen Layout, einer Sidebar für die Fußzeile und zwei Menüpunkten. Das Stylesheet spiegelt das System der verschachtelten benutzerdefinierten Eigenschaften wider, die von Seedlet zur Verfügung gestellt werden, und das macht Twenty Twenty-One zu einer perfekten Grundlage für die Erstellung von Child Themes und stark angepassten Webseiten.

CSS-Eigenschaften (auch bekannt als CSS-Variablen) sind spezielle Entitäten, die bestimmte Werte enthalten, die überall in deinem Stylesheet wiederverwendet werden können.

Wenn du also einen bestimmten Farbakzent in deinem Dokument ändern möchtest, brauchst du keine globale Suche durchzuführen, um herauszufinden, ob diese Farbe im gesamten Stylesheet vorkommt. Du musst nur einen anderen Eigenschaftswert innerhalb des :root–Blocks setzen

CSS benutzerdefinierte Eigenschaften in Twenty Twenty-One
CSS benutzerdefinierte Eigenschaften in Twenty Twenty-One

Ein Beispiel für eine einfache Anpassung: Angenommen, du möchtest eine benutzerdefinierte Hintergrundfarbe einstellen. Dafür brauchst du kein Child Theme zu erstellen. Du musst nur zwei CSS-Deklarationen in den Code-Editor des Additional CSS-Panels einfügen:

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}
Benutzerdefiniertes CSS in Twenty Twenty-One Customizer
Benutzerdefiniertes CSS in Twenty Twenty-One Customizer

CSS benutzerdefinierte Eigenschaften sind sicher zu benutzen, da sie von allen gängigen Browsern unterstützt werden, wie das Bild unten aus Can I Use zeigt:

CSS benutzerdefinierte Eigenschaften werden von den meisten modernen Webbrowsern unterstützt
CSS benutzerdefinierte Eigenschaften werden von den meisten modernen Webbrowsern unterstützt

Wenn du tiefer in die benutzerdefinierten CSS-Eigenschaften eintauchen möchtest, schau dir die MDN-Dokumentation an.

Twenty Twenty-One Block-Muster

Twenty Twenty-One stellt verschiedene Muster für den Block-Editor zur Verfügung. In einem früheren Blog-Beitrag haben wir Blockmuster als vordefinierte Blocklayouts definiert, mit denen die Benutzer schnell komplexe Strukturen verschachtelter Blöcke auf ihren Seiten einfügen können.

WordPress 5.5 führte eine Handvoll Blockmuster ein und weitere sollten mit WordPress 5.6 kommen. Außerdem kommt Twenty Twenty-One mit einem eigenen Satz von Blockmustern.

In Twenty Twenty-One sind die Blockmuster in der Datei inc/block-patterns.php definiert. Twenty Twenty-One Muster variieren von einfachen Mustern wie dem Large Text Muster, das ein einzelnes H2-Element enthält, bis hin zu komplexeren Mustern, wie Overlapping Images und Text and Media und Text Article Title.

Medien- und Textartikel Titelblockmuster in Twenty Twenty-One
Medien- und Textartikel Titelblockmuster in Twenty Twenty-One

Momentan bietet das Theme die folgenden Muster:

  • Großer Text
  • Links-Bereich: Ein riesiger Text, gefolgt von sozialen Netzwerken und Links zu E-Mail-Adressen.
  • Titel des Medien- und Textartikels: Ein Media & Text Block mit einem großen Bild auf der linken Seite und einer Überschrift auf der rechten Seite. Auf die Überschrift folgt ein Trennzeichen und ein Beschreibungsabsatz.
  • Überlappende Bilder: Drei Bilder innerhalb eines Blocks mit überlappenden Spalten.
  • Zwei Bilder Showcase: Ein Medien– und Textblock mit einem großen Bild auf der linken Seite und einem kleineren Bild mit einem umrandeten Rahmen auf der rechten Seite.
  • Überlappende Bilder und Text: Ein überlappender Spaltenblock mit zwei Bildern und einer Textbeschreibung.
  • Portfolio-Liste: Eine Liste von Projekten mit Miniaturbildern.
  • Kontaktinformationen: Ein Block mit 3 Spalten mit Kontaktinformationen und Social Media Links.
Überlappende Bilder Blockmuster in Twenty Twenty-One
Überlappende Bilder Blockmuster in Twenty Twenty-One

The availability of so many block patterns is great for both users and developers. Users will be allowed to quickly and easily add complex blocks of code to their posts and pages, developers can use those patterns as useful templates to build upon when coding their own.

Das Twenty Twenty-One Blocks-Experiment

Twenty Twenty-One Blocks ist eine separate blockbasierte experimentelle Version des Twenty Twenty-One Themes. Sein Zweck ist es, es zu teilen und jeden auf dem Laufenden zu halten, was auf dem Full Site Editing Experiment passiert, um jedem die Chance zu geben, in die neuen FSE Features einzutauchen, bevor sie Teil des WordPress-Core werden.

Es ist unwahrscheinlich, dass wir es sehen werden, dass diese experimentelle Version in den WordPress-Core mit WordPress 5.6 integriert wird. Laut Carolina Nymark,

Das Theme wird Gutenberg und das Full Site Editing Experiment benötigen, um aktiviert zu werden. Es wird nicht Teil vom Core sein, aber sobald es fertig ist, wird es im Theme-Verzeichnis verfügbar sein.

Zum Zeitpunkt der Erstellung dieses Artikels benötigt Twenty Twenty-One Blocks das Gutenberg-Plugin. Sobald sowohl das Theme als auch das Plugin installiert und aktiviert sind, erscheint ein Site Editor Menüpunkt in deinem WordPress Admin Menü (du brauchst das Full Site Editing Experiment nicht mehr zu aktivieren).

Der Menüpunkt Site Editor im Twenty Twenty-One Blocks-Experiment
Der Menüpunkt Site Editor im Twenty Twenty-One Blocks-Experiment

Now, click on the new Site Editor menu item to open the full-site editing interface and start editing any element on the page using the block editor.

Vollständige Bearbeitung der Webseite in Twenty Twenty-One Blocks
Vollständige Bearbeitung der Webseite in Twenty Twenty-One Blocks

Hier werden wir nicht in die technischen Dinge eintauchen. Es genügt zu sagen, dass klassische Themes und blockbasierte Themes strukturell verschieden sind.

Das Bild unten zeigt den Inhalt des Ordners Twenty Twenty-One Blocks:

Ordner Twenty Twenty-One Blocks
Ordner Twenty Twenty-One Blocks

Ihr würdet die experimental-theme.json-Datei und die Ordner block-templates und block-template-parts bemerken.

Der Hauptunterschied zwischen traditionellen WordPress Themes und blockbasierten Themes ist, dass blockbasierte Themes Templates enthalten, die komplett aus Blöcken bestehen.

Öffne zum Beispiel block-template-parts/header.html in deinem Code-Editor. Du solltest den folgenden Code sehen:

<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:site-title /-->

<!-- wp:site-tagline /--></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
<!-- wp:navigation-link {"label":"Home","url":"#"} /-->

<!-- wp:navigation-link {"label":"Blog","url":"#"} /-->

<!-- wp:navigation-link {"label":"Work","url":"#"} /-->

<!-- wp:navigation-link {"label":"Contact","url":"#"} /-->
<!-- /wp:navigation --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

Wie du sehen kannst, wurde die klassische Header.php Template Datei durch eine .html Datei ersetzt, die mehrere Blöcke enthält.

Ihr könnt euch die in Arbeit befindliche Version des Twenty Twenty-One Blocks Themes aus dem Theme-Experiments-Projekt auf Github herunterladen.

Wenn du ein Theme-Entwickler bist, findest du in der offiziellen Dokumentation alles, was du über blockbasierte Themes wissen musst.

Wenn du gerne zum Full Site Editing Experiment beitragen möchtest, schick uns dein Feedback hier.

Wie baue ich ein Child Theme auf Twenty Twenty-One

Standard WordPress Themes sind großartige Startpunkte, um die Grundlagen der Theme-Entwicklung zu lernen und um mit der Erstellung eigener Child Themes zu beginnen.

Default Themes folgen den Richtlinien der offiziellen WordPress Coding Standards und sind konform mit den Webstandards.

Gibt es einen besseren Ort, um coden zu lernen?

Child Themes sind ein großartiges WordPress-Feature, mit dem du das Layout, die Funktionalitäten und die Struktur deiner Seiten anpassen kannst. Mit den folgenden Beispielen werden wir in jeden Aspekt der Theme-Anpassung eintauchen.

Dein Child Theme einrichten

Das Erstellen eines WordPress Child Themes ist ein 3-stufiger Prozess:

1. Erstelle den Child Theme-Ordner

Erstelle einen neuen Ordner in wp-content/themes und benenne es wie du willst. Aber denke daran, dass es ein eindeutiger Name sein sollte. Das Child Themes-Handbuch empfiehlt, den gleichen Namen wie das Parent-Theme zu verwenden, wobei -child am Ende angehängt werden sollte.

So könnte man den neuen Ordner twentytwentyone-child nennen.

2. Erstelle eine style.css Datei

Gehe nun in das Verzeichnis deines Child Themes und erstelle eine neue style.css Datei mit dem folgenden Code:

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

Der Informations-Header ermöglicht es WordPress, mit deinem Child Theme richtig umzugehen.

  • Theme Name: Der eindeutige Name für das Theme.
  • Theme URI: Wo Benutzer den Code oder die Dokumentation für das Theme finden können.
  • Beschreibung: Beschreibender Text, der den Benutzern hilft zu verstehen, was das Theme macht.
  • Der Autor: Dein Name
  • Autor URI: Die Webseite des Autors.
  • Template: Der Ordner, in dem das übergeordnete Theme gespeichert ist. Verwende den Ordnernamen und nicht den Namen des Themes. Ohne diese Zeile wird dein Theme nicht als Child Theme funktionieren.
  • Version: Die Versionsnummer
  • Lizenz: Die Lizenz, die GNU sein muss.
  • Lizenz: Die Lizenz URI: Der Link zu Informationen über die Lizenz.

Unterhalb dieses Textes kannst du deine CSS-Deklarationsblöcke hinzufügen, wie ich dir gleich zeigen werde.

3. Erstelle eine functions.php Datei

Bei Twenty Twenty-One brauchst du auch eine functions.php Datei. Erstelle also deine eigene im Verzeichnis des Child Themes, öffne es in deinem Code-Editor und füge den folgenden Code hinzu:

<?php
/* enqueue scripts and style from parent theme */
   
function twentytwentyone_styles() {
	wp_enqueue_style( 'child-style', get_stylesheet_uri(),
	array( 'twenty-twenty-one-style' ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');

Da das Twenty Twenty-One Theme get_template_directory() benutzt, um sein Stylesheet zu laden, musst du das Stylesheet des Child Themes mit der Aktion wp_enqueue_scripts einreihen.

Danach speicherst du deine Dateien, öffnest dein WordPress Dashboard, blätterst zu Appearance -> Themes und aktivierst dein Twenty Twenty-One’s Child Theme.

Fügen wir nun unsere Anpassungen hinzu.

Wie man benutzerdefinierte Stile hinzufügt

Wenn es darum geht, das Layout deiner WordPress Webseite anzupassen, hast du mehrere Möglichkeiten, deinen eigenen CSS-Code hinzuzufügen. Das Panel Zusätzliches CSS des Customizers könnte für kleine Änderungen ausreichen.

Aber ein Child Theme wäre eine bessere Option, wenn du erweiterte Anpassungen vornehmen oder deinen Code auf verschiedene WordPress-Webseiten exportieren musst.

Versuchen wir es mal mit einer einfachen Anpassung: Ändern des Standard-Schriftstacks.

Angenommen, du möchtest einen anderen Fontstapel laden oder einfach deine Lieblingsschrift zu den standardmäßigen Twenty Twenty-One Schriftfamilien hinzufügen.

Wie machst du es?

Hier zeige ich dir, wie du die Standardschriftart für H1-Überschriften ändern kannst, aber du kannst die Schriftfamilie für jedes Textelement deiner Webseite ändern.

Als erstes öffnest du die Datei style.css von Thenty Twenty-One und findest den folgenden CSS-Block:

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	clear: both;
	font-family: var(--heading--font-family);
	font-weight: var(--heading--font-weight);
}

Wie du sehen kannst, wird die Schriftfamilie für Überschriften in der --heading--font--family-Variablen festgelegt.

Gehe nun zum :root{} Block und finde die folgende Deklaration:

--heading--font-family: var(--global--font-primary);

--heading--font-family hängt von der --global--font-primary-Variablen ab, die ganz oben im :root{}-Block definiert ist:

:root{
	/* Font Family */
	--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
	...
}

Jetzt wissen wir, was wir ändern müssen!

Kopiere die --global--font-primary-Deklaration aus dem Parent-Stylesheet  und füge es in die style.css deines Childs ein. Ändere dann den Namen und den Wert der Eigenschaft wie unten gezeigt:

:root{
	/* Font Family */
	--global--font-primary-child: var(--font-headings, Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, "Helvetica Neue", sans-serif);

	--global--font-family-child: var(--global--font-primary-child);
}

Sobald du deinen benutzerdefinierten Schriftstack deklariert hast, kannst du es in deinem Stylesheet verwenden, wo immer du willst. H1 Überschriften in unserem Beispiel:

h1,
.h1 {
	font-family: var(--global--font-family-child);
}

Speichere das child-style.css und lade die Seite neu. Du solltest Ubuntu als die neue Standardschriftfamilie für die Überschriften deiner Seite sehen.

Standard-Schriftfamilie vs. benutzerdefinierte Schriftfamilie in Twenty Twenty-One
Standard-Schriftfamilie vs. benutzerdefinierte Schriftfamilie in Twenty Twenty-One

Jetzt, da ihr wisst, wie man den Stil von Twenty Twenty-One mit einem Child Theme anpassen kann, können wir die fortgeschritteneren Funktionen erkunden.

Wie man neue Blockmuster hinzufügt

In diesem Beispiel werden wir ein benutzerdefiniertes Blockmuster erstellen, das einen zweispaltigen Block mit einem runden Bild auf der linken Seite, einer H4-Überschrift und einem Absatz auf der rechten Seite enthält.

Du kannst dein Muster direkt im Blockeditor erstellen oder den Code eines bestehenden Blockmusters anpassen.

Wenn du dich dafür entscheidest, dein Muster im Block-Editor zu erstellen, musst du nur die notwendigen Blöcke zu einem Beitrag oder Seitenentwurf hinzufügen, dann zum Code-Editor wechseln und den entsprechenden Code kopieren.

Ein zweispaltiger Block im Code-Editor
Ein zweispaltiger Block im Code-Editor

Wir können nun unser Muster in der functions.php Datei des Child Themes registrieren:

add_action( 'init', function(){

	register_block_pattern_category( 
		'custom-patterns', 
		array( 'label' => esc_html__( 'Custom patterns', 'twentytwentyone-child' ) ) );

	register_block_pattern(
	'twentytwentyone-child/custom-bio-pattern',
	array(
		'title'			=> __( 'Author Bio', 'twentytwentyone-child' ),
		'description'	=> _x( 'A block with 2 columns that displays an avatar image, a heading and a paragraph.', 'Block pattern description', 'twentytwentyone-child' ),
		'content'		=> '<!-- wp:columns {"verticalAlignment":null} --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":"33.33%"} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:image {"id":29,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --> <figure class="wp-block-image size-large is-style-rounded"><img src="' . esc_url( get_stylesheet_directory_uri() ) . '/assets/images/Kinsta-logo.png" alt="Kinsta" /></figure> <!-- /wp:image --></div> <!-- /wp:column --> <!-- wp:column {"width":"66.66%"} --> <div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading {"level":4} --> <h4>About Kinsta</h4> <!-- /wp:heading --> <!-- wp:paragraph --> <p>Kinsta was founded in 2013 with a desire to change the status quo. We set out to create the best hosting platform in the world, and that’s our promise. We don’t settle and are here to stay.</p> <!-- /wp:paragraph --></div> <!-- /wp:column --></div> <!-- /wp:columns -->',
		'categories'	=> array( 'custom-patterns' ),
	)
	);
});

Der obige Code registriert die Kategorie Benutzerdefinierte Muster und das Autoren-Bio-Muster.

Beachte den Code, den wir benutzt haben, um das img-Element zu bauen:

<img src="' . esc_url( get_stylesheet_directory_uri() ) . '/assets/images/Kinsta-logo.png" alt="Kinsta" />

Die Funktion get_stylesheet_directory_uri() liefert die URI des Verzeichnisses des Child Themes (das Bild wurde vorher in den Ordner assets des Child Themes hinzugefügt).

Speichere deine Änderungen und erstelle einen neuen Beitrag oder eine neue Seite.

Jetzt solltest du das neue Muster im Block-Inserter finden.

Ein benutzerdefiniertes Blockmuster zu Twenty Twenty-One hinzugefügt
Ein benutzerdefiniertes Blockmuster zu Twenty Twenty-One hinzugefügt

Eine Template-Datei anpassen

Wenn du eine neue Template-Datei für ein bestimmtes Archiv oder einen einzelnen Beitrag/Seite erstellen möchtest, musst du eine neue .php-Vorlage entsprechend der WordPress Template-Hierarchie erstellen.

Wenn du aber nur eine bestehende Vorlage (oder einen Vorlagenteil) bearbeiten willst, brauchst du nur die Originalvorlage aus dem Parent-Theme kopieren und an der entsprechenden Stelle deines Child Themes einfügen (lies mehr über dieses Thema in unserer erweiterten Anleitung für Child Themes).

Angenommen, du möchtest den Text “ Proudly powered by WordPress“ anpassen. Du hast mehrere Möglichkeiten, diese Zeile zu entfernen oder anzupassen. Für unser Beispiel wollen wir es manuell ändern.

Kopiere dazu die Template-Datei footer.php aus dem Parent-Ordner und füge es in das Wurzelverzeichnis deines Child Themes ein. Wenn du fertig bist, öffne die footer.php deines Child Themes in deinem Code-Editor und finde den folgenden Code:

<div class="powered-by">
	<?php
	printf(
		/* translators: %s: WordPress. */
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="' . esc_attr__( 'https://wordpress.org/', 'twentytwentyone' ) . '">WordPress</a>'
	);
	?>
</div><!-- .powered-by -->

Jetzt kannst du deine Änderungen vornehmen. Nehmen wir an, du möchtest deinem Webhost Credits geben, dann ersetze einfach das a-Element wie unten gezeigt:

<div class="powered-by">
	<?php
	printf(
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="https://kinsta.com/">Kinsta</a>'
	);
	?>
</div><!-- .powered-by -->

Um diesen Text zu entfernen, kommentiere ihn einfach aus oder lösche das div.powered-by-Element:

<!-- <div class="powered-by">
	<?php
	printf(
		/* translators: %s: WordPress. */
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="' . esc_attr__( 'https://wordpress.org/', 'twentytwentyone' ) . '">WordPress</a>'
	);
	?>
</div> -->

Und das war’s. Nun, ausgehend von den einfachen Beispielen oben, kannst du weitere aufregende Anpassungen vornehmen und deine Webseite mit dem Twenty Twenty-One Theme auf die nächste Stufe bringen.

Zusammenfassung

Das Twenty Twenty-One Theme ist der dritte Versuch, Menschen ohne fortgeschrittene technische Fähigkeiten die Erstellung von Webseiten zu ermöglichen. Es ist ein minimalistisches, gut funktionierendes und zugängliches WordPress Theme, das auch für eine Vielzahl von Anwendungsfällen geeignet ist. 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.

Das neue Standard-Theme wurde mit Blick auf den Block-Editor entworfen und kann sowohl von Benutzern als auch von Entwicklern leicht angepasst werden.

Jetzt bist du an der Reihe: Hast du das Twenty Twenty-One Theme schon installiert? Welche Erfahrungen hast du mit ihm gemacht? Teile deine Gedanken im Kommentarbereich mit!

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.