Kategorien
Themes Tipps & Tricks

Gestatten: Twenty Twenty.

Diese Website basiert auf dem Standard-Theme Twenty Twenty, das leider erst nach der Drucklegung des Buches erschien.

Der Beitrag schildert die Arbeit mit Twenty Twenty, vom ersten Eindruck über die Anpassungen im Customizer und dem Plugin Twentig 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 im Editor für die gewünschte Seite oder den gewünschten Beitrag 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.


Mehr Optionen mit dem Plugin »Twentig«

Update vom 25. Juni 2020

Von Haus aus sind die Optionen im Customizer bei Twenty Twenty recht übersichtlich, sodass man sehr schnell Hand ans CSS legen müsste. Abhilfe schafft Twentig.

Das Plugin erweitert den Customizer von Twenty Twenty und macht das Theme wirklich praxistauglich. Von der Breite des Inhaltsbereiches über die Schriftart bis zur Beitragsseite reichen die Optionen von Twentig im Customizer. Eine ausführliche Beschreibung aller Optionen finden Sie im folgenden Beitrag:

Twentig – der perfekte Partner für Twenty Twenty.

Für diese Website hat Twentig einige CSS-Regeln zur Schriftgestaltung und zur Verbreiterung des Inhaltsbereiches überflüssig gemacht.

Fazit: Wenn Sie Twenty Twenty mögen, werden Sie Twentig lieben. Lohnt sich.


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 mit dem Wort »Menü« darunter dargestellt.
  • Mobile-Menü ist für schmale Viewports, und es sieht genauso aus wie das Erweiterte Desktop-Menü.

Für die meisten Sites ist ein horizontales Desktop-Menü wahrscheinlich völlig ausreichend. Ich habe mit den Menüs etwas experimentiert und momentan folgende Einstellung:

  • Das horizontale Desktop-Menü enthält nur die wichtigsten Links.
  • Die Hauptnavigation ist als erweitertes Desktop-Menü eingebunden.
  • Das Mobile-Menü enthält ebenfalls die Hauptnavigation.

Ein möglicher Nachteil dieser Vorgehensweise ist, dass einige Besucher die Hauptnavigation vielleicht gar nicht aufrufen. Aber das erweiterte Desktop-Menü bietet in dem vertikalen Menü viel Platz für sinnvolle Beschriftungen, und die Umsetzung der Untermenüs ist sehr gut gelungen.

Footer-Menü und Social-Media-Menü

Das Footer-Menü erscheint überraschenderweise nicht ganz unten im Footer, sondern zwischen Inhalt und Widgets. 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 neben dem Footer-Menü und verwandelt die üblichen Verdächtigen anhand der eingegebenen URL zum Profil in das entsprechende Symbol. XING ist wie so oft 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

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

Das zusätzliche CSS gestaltet aber nur das Frontend, nicht die Blöcke im Block-Editor. Dazu benötigen Sie eine Datei namens style-editor.css. 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 und 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 Block-Editor-Optionen wie Weite Breite und Volle Breite sind in Twenty Twenty gut umgesetzt und im Alltag einfach nur praktisch:

  • Eine raumgreifende Tabelle wie die für die Errata bekommt eine weite Breite zugewiesen.
  • Der Gruppe-Block mit Volle Breite macht durchgehende, farbige Abschnitte im Inhaltsbereich zum Kinderspiel.

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 gut.

Twenty Twenty ist nicht perfekt, aber mit einigen Anpassungen (und besonders mit den Optionen von Twentig) wirklich gut.

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

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

Der Videokurs zu »Twenty Twenty«

Im Mai 2020 erschien, Corona-bedingt leicht verzögert, endlich mein Videokurs zu Twenty Twenty:

WordPress 5: das Theme Twenty Twenty

Den Videokurs gibt es bei bei LinkedIn Learning im Einzelverkauf oder als Teil des Abos.

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

20 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

Hallo Peter,

die Idee, die Standardbreite von 580 auf 720 Pixel zu ändern gefällt mir sehr gut, nur leider muss auch noch etwas CSS für Bilder angepasst werden. Ich habe in meinen Artikeln einige Bilder linksbündig angeordnet und die Standardwerte passen nun verständlicherweise nicht mehr.

HTML:

CSS:
.alignleft {margin-left: calc(( 100vw – 58rem – 8rem ) / -2);}

Es wäre klasse, wenn du die passenden CSS-Werte in deinem Artikel noch ergänzen könntest (damit die Änderung auf 720 Pixel nicht zu ungewünschten Nebeneffekten führt).

Danke und Grüße
Lucien

Vielen Dank für den Hinweis mit den Bildern.

Ich werde mir das CSS von Twenty Twenty beizeiten wohl nochmal genauer anschauen müssen. Bei einem alignleft ist ja z. B. alignright meist nicht so ganz weit weg…

Hattest du in deinem Kommentar noch etwas HTML geschrieben? Falls ja, das ist verschluckt worden.

Ja alignright betrifft das dann auch. Leider tue ich mich selbst mit dieser margin-left: calc Berechnung etwas schwer.

Das HTML wurde rausgefiltert, diente jedoch auch nur der Anschauung.

Hi. Danke für die tollen Tipps. Mit dem Update auf die Theme Version (April 2020) klappt die CSS Regel für „Fließtext ohne Serifen“ leider nicht mehr. Es werden wieder die Serifen angezeigt.

Hallo Mark,
wie das geht, wird oben im Beitrag beschrieben:

»Cover-Template und Hintergrundbild«

Das große Bild ist ein Beitragsbild. Das erstreckt sich aber nicht über die „gesamte Fläche inkl. Footer & Header“, sondern über den Viewport und gilt jeweils nur für einzelne Seiten bzw. Beiträge. Eine CSS-Anpassung ist dazu nicht nötig.

Danke Dir für die sehr schnelle Antwort Peter.
Ja, das mit der Unterscheidung Content-Template & Hintergrundbild hat mich zugegebenermaßen etwas verwirrt.
Auch das bei Dir auf dem Screenshot das Bild in den Header bzw. das Menü & Dein Logo übergeht.
Beste Grüße
Mark

Das »Cover-Template« heißt so, weil es so ähnlich ist wie ein »Cover-Block« (Text über Bild), nur halt für das ganze Browserfenster. Das Template legt das Bild automatisch hinter den Header.

Die Seite für den Screenshot zu erstellen war also ganz einfach:

  1. Startseite im Editor öffnen
  2. Beitragsbild einbinden
  3. Cover-Template aktivieren
  4. Speichern

Die Einstellungen für Overlay-Farbe und Deckkraft im Customizer sind für *alle* Cover-Templates. Das kann man nicht einzeln regeln.

Viel Erfolg 🍀

Hallo Peter,
wie bekommt man bekommt den „doofen“, nach unten zeigenden Pfeil noch weg?

(Siehe das oben angegebene Cover-Bild „… Einstieg … 5“.)

Der Pfeil soll wohl jedem zeigen: Achtung, hier unter mir steht was.

Danke
Esther

Hallo Esther,

der „Pfeil nach unten“ erscheint nur auf Seiten, auf Beiträge stehen an der Stelle die Post-Meta-Daten. Auf Seiten hat der Pfeil durchaus eine Funktion, damit Leute sehen, dass es unter dem großen Bild im nicht sichtbaren Bereich der Seite noch etwas kommt.

Ich habe auf groningen-info.de auf der Startseite (mit einem anderen Theme) auch ein großes Foto und einen Pfeil darunter eingebaut, weil viele Leute den Inhalt darunter nicht gefunden haben.

Der Pfeil steht in einem div mit der Klasse to-the-content-wrapper. Wenn du den Pfeil also tatsächlich weghaben willst, kannst du ihn per CSS ausblenden: div.to-the-content-wrapper { display: none; }.

UPDATE: Das Plugin Twentig enthält eine Option zum Entfernen des Pfeils und zur Ausrichtung des Inhalts.

Hallo Peter – das sieht sehr sehr komplett aus was du hier schreibst. Du deckst sehr viele Punkte ab und beschreibst das Theme 2020 in der Tiefe. Beim kurzen Überfliegen hab ich allerdings nichts zu dem Bereich – class: wp_block_group – wp_block_group__inner_container gelesen.

mich würde interessieren wie ich an diese Bereich beim Abstimmen &/ Editieren komme!? Bin noch ganz neu im Theme 2020 und deshalb hier die Anfängerfrage. Freue mich auf einen Tipp.

Hallo Martin,
der Bereich wp_block_group und sein Kompagnion wp-block-group__inner-container stammen von einem im Block-Editor eingefügten Gruppe-Block. Das hat mit dem Theme nichts zu tun.

Ich hab deine Anleitung befolgt. Theme läuft ! Mit vielen Plugins sogar mit Animationen ! Genau richtig ! Ich habe nun meinen eigenen Text da drin rein gemacht.. und sogar noch eine Verlinkung hier auf deine Seite in meine Startseite eingebaut. Vielen lieben Dank ! Das war leichter als ich dachte ! Gruß Karl

Schreibe einen Kommentar

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