Kategorien
Themes Tipps & Tricks

Gestatten: Twenty Twenty.

In den letzten Tagen habe ich diese Website auf Twenty Twenty umgestellt. Der Beitrag schildert die Reise dorthin, vom ersten Eindruck über die Anpassungen im Customizer bis zum Einsatz eines Child-Theme.

Twenty Twenty im Überblick

Twenty Twenty basiert auf dem Theme Chaplin von Anders Norén, der bereits viele andere tolle WP-Themes wie Hemingway und Fukasawa veröffentlicht hat.

Es ist das erste Mal, das ein Standardtheme nicht von Grund auf neu erstellt wurde, sondern auf einem Theme aus der Community basiert.

Twenty Twenty ist ein einspaltiges Theme und sieht sich als flexibles Fundament für die Gestaltung der Inhalte mit dem Block-Editor. Die Umsetzung der WordPress-Standardblöcke mit verschiedenen Styles und allem drum und dran ist sehr gelungen, und das Arbeiten damit macht einfach Spaß.


Optionen im Customizer

Die Optionen im Customizer sind überschaubar, enthalten aber durchaus verborgene Schätze.

Website-Informationen

In den Website-Informationen kann man wie immer einen Titel der Website und einen Untertitel eingeben. Die beiden stehen im Header nebeneinander, und auf mobilen Geräten wird der Untertitel ausgeblendet.

Man kann ein eigenes Logo und ein Website-Icon hochladen. Die vorgeschlagenen Bildmaße für das Logo sind 120 auf 90 Pixel, aber andere Größen sind möglich. Mit der Option Retina kann man eine doppelt so große Grafik hochladen, damit das Logo auch auf hochauflösenden Bildschirmen, bei Apple Retina genannt, scharf bleibt.

Das Logo ersetzt den Titel der Website. Der Untertitel erscheint auf Desktop und Tablet weiterhin daneben, mobil sieht man nur das Logo.

Ich habe auf dieser Website kein Logo eingebunden, dafür aber ein Website-Icon, das in Browser-Tabs und zahlreichen anderen Stellen sichtbar wird.

Farben

Die Optionen für Farben sind sinnvoll, aber für meinen Geschmack etwas zu spartanisch:

  • Hintergrundfarbe definiert die Hintergrundfarbe für den Inhaltsbereich und ich habe hier eine etwas hellere Farbe eingestellt (#fbf9f3).
  • Als Hintergrundfarbe für Header und Footer habe ich statt weiß die Standardfarbe vom Inhaltsbereich genommen (#f5efe0).
  • Die Akzentfarbe ist voreingestellt auf einen kräftigen Pinkton, den ich erst einmal so gelassen habe. Knallt ordentlich rein, aber das soll ein Akzent ja wohl auch.

Kleine Besonderheit: Wenn Sie die Hintergrundfarbe ändern, passt sich die Textfarbe automatisch an, wenn der Kontrast zu schwach wird. Probieren Sie mal Schwarz oder einen anderen dunklen Hintergrund, um das in Aktion zu sehen.

Um die Akzentfarbe zu ändern, aktivieren Sie die Option Individuell. Dann erscheint ein Schieberegler und beim Verschieben des Reglers sieht man die Änderungen sofort in der Live-Vorschau.

Schön wäre es hier z. B. noch, wenn man die Hintergrundfarbe für Header und Footer getrennt einstellen und für die Akzentfarbe einen Farbwert eingeben könnte. Auf dem Schieberegler für die Akzentfarbe sind längst nicht alle Farben vertreten.

Theme-Optionen

In den Theme-Optionen gibt es folgende mögliche Einstellungen:

  • Suchfeld im Header anzeigen aktiviert eine Suchfunktion im Header.
  • Autor-Biografie anzeigen zeigt unterhalb von Beiträgen die im Benutzerprofil hinterlegten Infos und falls vorhanden auch ein Foto.

Die dritte Option bezieht sich auf die Darstellung von Beiträgen auf Archivseiten. Dort habe ich die Option Vollständigen Text aktiviert, damit der vor dem Block Mehr eingefügte Teasertext ausgegeben wird.

Cover-Template und Hintergrundbild

Die Option Cover-Template ermöglicht es, ein Beitragsbild bildschirmfüllend darzustellen und zu fixieren, sodass es beim Scrollen stehen bleibt (Parallax-Effekt).

Um diesen Effekt einzubauen, muss man für die Seite oder den Beitrag im Editor zwei Dinge erledigen:

  1. ein geeignetes Beitragsbild einbinden (Mindestbreite 1980 Pixel)
  2. im Bereich Beitrags-Attribute bzw. Seiten-Attribute das Cover Template aktivieren

Im Customizer kann man dann den Parallax-Effekt und die Overlay-Farbe definieren. Eine Seite mit einem Cover-Template könnte zum Beispiel so aussehen wie im folgenden Bild.

Die Startseite dieser Website mit einem bildschirmfüllenden Foto (Cover-Template)
Eine Startseite mit Logo und Cover-Template

Diese Option ist eines der Highlights von Twenty Twenty und ich hatte mich schon drauf gefreut es einzusetzen, habe aber letzlich doch keinen Gebrauch davon gemacht. Auch die nächste Option, Hintergrundbild, habe ich nicht genutzt.


Menüs in Twenty Twenty

In nicht allzu ferner Zukunft wird es möglich sein, Header und Footer eines Themes vom Block-Editor aus zu bearbeiten, aber bis dahin ist man auf die Menüpositionen des Themes angewiesen. Twenty Twenty bietet hier mit insgesamt fünf Menüpositionen reichlich Auswahl.

Die Hauptnavigation im Header

Die ersten drei Menüpositionen sind für die Hauptnavigation im Header:

  • Horizontales Desktop-Menü ist das normale Hauptmenü. Hyperlinks erscheinen ganz rechts oben im Header nebeneinander und bekommen die Akzentfarbe.
  • Erweitertes Desktop-Menü ist optional. Es erscheint rechts neben dem horizontalen Desktop-Menü und wird durch drei horizontale Punkte dargestellt.
  • Mobile-Menü ist für schmale Viewports. Als Symbol dienen wie beim erweiterten Desktop-Menü drei dicke, nebeneinander stehende Punkte.

Für die meisten Sites ist ein horizontales Desktop-Menü völlig ausreichend. Wenn man für das mobile Menü nichts definiert, übernimmt es einfach das Hauptmenü. Easy.

Ich habe mit den Menüs etwas experimentiert und momentan folgende Einstellung:

  • Als horizontales Desktop-Menü habe ich ein Menü, das nur einen Link zur Startseite enthält.
  • Die Hauptnavigation habe ich als erweitertes Desktop-Menü eingebunden.
  • Das Mobile-Menü enthält ebenfalls die Hauptnavigation.

Ein möglicher Nachteil dieser Vorgehensweise ist es, dass die Hauptnavigation mit einem Klick auf die drei Punkte eingeblendet werden muss und einige Besucher sie vielleicht gar nicht entdecken.

Ein Vorteil des erweiterten Desktop-Menüs hingegen ist, dass man in dem vertikalen Menü viel Platz für sinnvolle Linkbeschriftungen hat, und die Umsetzung der Untermenüs sehr gelungen ist.

Footer-Menü und Social-Media-Menü

Footer-Menü und Social-Media-Menü erscheinen unter dem Inhaltsbereich, aber vor dem Widgetbereich. Ganz unten, im eigentlichen Footer, ist keine Menü-Position vorgesehen.

Das Footer-Menü bietet zum Beispiel Platz zur Wiederholung von wichtigen Links aus der Hauptnavigation. In breiten Viewports stehen die Links nebeneinander, mobil untereinander.

Das Social-Media-Menü erscheint rechts daneben und verwandelt die üblichen Verdächtigen anhand der eingegebenen URL zum Profil in ein Symbol. XING ist nicht dabei.


Widgets in Twenty Twenty

Unterhalb von Footer- und Social-Media-Menü gibt es zwei Widgetbereiche, die am Desktop und auf dem Tablet neben- und mobil untereinander stehen.

Die Links der Widgets kommen allesamt recht auffällig daher, fett und in der im Customizer eingestellten Aktzentfarbe.


Anpassungen per CSS

Die Anpassungen per CSS können im Customizer im Bereich Zusätzliches CSS oder in der style.css eines Child-Themes gespeichert werden.

Das Wort »Suche« im Header ausblenden

Eine Lupe ist als Symbol für eine Suchfunktion weit verbreitet und ich fand das Wort »Suche« direkt dadrunter eher überflüssig. Eine CSS-Regel blendet das Wort aus:

/** 
 * Das Wort »Suche« unter der Lupe ausblenden 
 */ 
.toggle-text {
	display: none; 
}

Fließtext ohne Serifen

Die Schriftart »Inter Var« ist wirklich Klasse, auch und besonders für kleineren Fließtext. Da ich den Fließtext meistens sowieso lieber ohne Serifen habe, habe ich mir auf Github die style.css von Twenty Twenty angeschaut, nach »Hoefler Text« durchsucht und alle Selektoren gesammelt.

Die folgende CSS-Regel sorgt dafür, dass Fließtext und Widgets keine Serifen haben.

/** 
 * Fließtext mit sans-serif, nicht Hoefler  
 * Selektoren aus https://github.com/WordPress/twentytwenty/blob/master/style.css 
 */ 
.entry-content p, 
.entry-content ol, 
.entry-content ul, 
.entry-content dl, 
.entry-content dt,
.widget_text p,
.widget_text ol,
.widget_text ul,
.widget_text dl,
.widget_text dt,
.widget-content .rssSummary {
	font-family: inherit;
	letter-spacing: normal;
}

Standardbreite von 580 auf 720 Pixel

Die Standardbreite der Inhaltsspalte ist mit 580px etwas sehr knapp bemessen, und ich habe sie per CSS auf 720px erhöht.

In Twenty Twenty wird Breite mit 58rem definiert. Das entspricht in Twenty Twenty 580px, da das Theme einen Trick benutzt, um 1rem vom Standardwert 16px auf 10px zu reduzieren, damit man damit leichter rechnen kann.

In der folgenden CSS-Regel habe ich alle Selektoren aus der style.css von Twenty Twenty gesammelt, bei denen max-width auf 58rem stand, und den Wert auf 72rem erhöht.

/** 
 * Standardbreite von 580px (58rem) auf 720px 
 * Selektoren aus https://github.com/WordPress/twentytwenty/blob/master/style.css  
 */ 
.section-inner-thin, 
.post-meta-wrapper, 
.author-bio, 
[class*="__inner-container"] .wp-block-group:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright),
[class*="__inner-container"] .wp-block-cover:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright),
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide), 
[class*="__inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide),
.alignfull > figcaption,
.alignfull > .wp-caption-text,
.comment-respond p:not(.comment-notes) {
	max-width: 72rem;
}

CSS-Änderungen auch im Block-Editor

Das CSS aus der style.css gestaltet nur das Frontend, nicht die Blöcke im Block-Editor. Mit einer style-editor.css können Sie aber auch die Blöcke im Editor ändern.

Wie das geht, steht im z. B. folgenden Artikel:

Ist nicht wirklich schwer, aber will alles gemacht werden …


Child-Theme: Pflichtlinks im Footer

Was ich in Twenty Twenty wirklich vermisse ist eine Möglichkeit, die Pflichtlinks zu Impressum und Datenschutz irgendwo dezent unterbringen zu können.

Von Haus aus kann man sie entweder irgendwo in der erweiterten Hauptnavigation verstecken, wo sie dann aber nicht mit einem Klick erreichbar sind, oder im Footer-Menü einbauen, wo sie aber sehr prominent wären.

Mit einem Child-Theme kann man die beiden Links ganz unten in der Fußzeile unterbringen. Wie das geht, habe ich in den folgenden Beiträgen ausführlich beschrieben:

  1. Ein Child-Theme für Twenty Twenty herunterladen
  2. Twenty Twenty und Child-Theme: Pflichtlinks im Footer einfügen

Und wenn Sie ein Child-Theme haben, können Sie das CSS auch dort in der style.css speichern. Das ist auf Dauer meist doch übersichtlicher als im Customizer.

Viel Spaß bei der Umsetzung.


Fazit: Twenty Twenty ist echt gut

Twenty Twenty ist ein gelungenes Standardtheme und es ist das erste Mal, dass ich eine meiner Websites tatsächlich mit einem Standardtheme von WordPress betreibe.

Das Theme hat die Standardblöcke perfekt implementiert, und das Arbeiten damit macht einfach Spaß: Fließtext, Buttons, Zitate, Pullquotes, die Blöcke sehen gut aus. Da steckt unheimlich viel Liebe zum Detail drin. Schauen Sie sich mal die Trennlinien an. Hübsch, oder?

Die diversen Optionen zur Blockbreite sind im Alltag einfach nur praktisch. Eine raumgreifende Tabelle wie die für die Errata bekommt eine weite Breite. Der Gruppe-Block ermöglicht mit voller Breite ganz einfach durchgehende, farbige Abschnitte im Inhaltsbereich.

Und so weiter und so fort. Bei der Arbeit mit Twenty Twenty ahnt man, wohin die Reise mit dem Block-Editor gehen könnte und welche Rolle Themes dabei in Zukunft spielen werden. Und die Sache gefällt mir immer besser.

Twenty Twenty ist nicht perfekt, aber mit einigen Anpassungen wirklich gut.

Vielen Dank an Anders Norén für das die Design und das WordPress-Team für die Umsetzung.

Und wie isses? Was haltet ihr von Twenty Twenty? Setzt ihr es selbst irgendwo ein? Die Kommentare sind geöffnet …

Von Peter Müller

Sie kennen mich vielleicht von meinen Büchern und Videokursen. Meine Spezialität ist es, trockene und komplizierte Sachverhalte auf einfache und unterhaltsame Weise darzustellen. Website: pmueller.de

2 Antworten auf „Gestatten: Twenty Twenty.“

Hallo Peter,

danke für den ausführlichen Beitrag zum Twenty Twenty Theme.

Für mich kommt das Theme leider nicht in Frage. Mag sein, dass viel Wert auf bestimmte Details gelegt wurde, aber für mich als „Nutzer“ bietet mir das Theme zu wenig Optionen. Wenn man schon CSS für die Anpassung der Standardbreite benötigt oder die Pflichtangaben mühsam über Child Themes „reinfrickeln“ muss, dann bin ich als „Nutzer“ raus.

Auch verstehe ich die Entscheidung, Inter als Font einzusetzen und dem User hier keine Wahl zu lassen, nicht so ganz. Gibt es die Probleme im Zusammenhang mit Chrome noch? Wie dem auch sei: auch hier muss man wieder CSS Code schreiben, um beispielsweise auf System Fonts zu wechseln. Aus Performance Gründen mag ich den Inter Font auch nicht…

Ja, mit Anpassungen mag das Theme gut und auch zukunftsfähig sein, aber ich persönlich möchte keine Zeit in die Anpassungen des Themes investieren.

Ich nutze auch ein minimalistisches (Free mit Premium-Upgrade) Theme mit diversen PHP/CSS Anpassungen, aber da bietet schon der Customizer genügend Optionen, diverse „Standard-Sachen“ einzustellen.

Mein persönliches Fazit: Für Entwickler und Anwender, die sich mit CSS (und ggf. PHP) einigermaßen auskennen und den Entwickler-Modus des Webbrowsers nutzen können oder auch Anwender, denen das Theme schon so gefällt, mögen gefallen daran finden.

Andere Nutzer werden wahrscheinlich wieder zu „Premium“ Themes auf diversen Marktplätze greifen.

Daniel

Hallo Daniel,

danke für dein ausführliches Feedback. Ein Standard-Theme wie Twenty Twenty wird sicher keine Premium-Themes ersetzen, aber das ist auch nicht Ziel der Sache.

In erster Linie soll das »default theme« die neuesten Features demonstrieren, gut aussehen und ein solides Fundament für Child-Themes und eigene Anpassungen bilden. Deshalb gibt es ja auch (fast) jedes Jahr ein neues.

Das folgende Zitat aus Why Default Themes Change Each Year vom September 2012 beschreibt die Idee hinter dem jährlich wechselnden Standard-Theme:

The default theme should show off the latest and greatest features, be flexible enough to gracefully support child themes and encourage customization, work well for a blog or a website, and sport a design that is aesthetically pleasing and a bit different from the last design.

Under the hood it should represent the best in coding practices and technical excellence.

That said, the default theme isn’t trying to be an end-all-be-all theme. It won’t please everyone.

Ein Standard-Theme soll also in erster Linie ein Beispiel für aktuelle »Best Practices« sein, und das macht Twenty Twenty zum Beispiel bei der Ausgestaltung der Standardblöcke echt gut.

Aber Twenty Twenty macht dabei eine bessere Figur als die meisten seiner Vorgänger, und es ist das allererste Mal, dass ich ein Standard-Theme für eine reale Website nutze.

Ich habe es einfach mal ausprobiert und war ehrlich gesagt selbst ein bisschen überrascht, dass ich mit dem Ergebnis zufrieden war. Okay, mit Child-Theme und diversen CSS-Anpassungen, aber dazu gibt es diese Möglichkeiten ja.

Und weil es besser geklappt hat als erwartet, habe ich dann den ganzen Vorgang hier dokumentiert, inklusive Anpassungen und Erstellung des Child-Themes.

Für meine anderen Websites werde ich aber – genau wie du – auch weiterhin andere Themes nutzen. Es gibt ja mehr als genug gute Freemium-Themes wie Astra, Neve oder meinem persönlichen Favoriten GeneratePress (Affiliate Link).

Grüße aus Groningen, guten Rutsch und auf das »Twenty Twenty« ein gutes Jahr wird 😉

Peter

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.