Eine eingehende Betrachtung des neuen WorPress Themes

Unter der Lupe: Das WordPress Theme Twenty Twenty
1 Kommentar

Mit WordPress 5.3 kam auch ein neues Standardtheme mit dem Namen Twenty Twenty. Claire Brotherton, freiberufliche Webdesignerin und Entwicklerin, unterzieht dieses Theme einer näheren Betrachtung und zieht ein Fazit.

Mit dem WordPress 5.3 Release ist es an der Zeit für ein neues WordPress.Org Theme – und diesmal ist es eine echte Schönheit.

Ich habe mir das Twenty Twenty Theme näher angesehen, damit ihr euch ein Bild davon machen könnt, ob es das Richtige für eure Webseite ist.

Twenty-Twenty-Setup

Wer eine brandneue WordPress-Installation besitzt, kann sich etwas Starter-Content für Twenty Twenty installieren.

Sollte Twenty Twenty nicht das aktive Theme sein, kann man es über Appearance > Themes auswählen. Dann geht man zu Appearances > Customize und man sollte ein Seitenlayout mit der Überschrift “The New UMoMA Opens its Doors” sehen können.

Wenn Euch gefällt, was ihr seht, dann betätigt den Publish-Button — im Screenshot markiert —, dann wird dieser Content als Eure Homepage hinzugefügt.

Zusätzlich gibt es noch drei weitere Seiten kostenlos dazu:

  1. About
  2. Blog (mit „Hello World“-Beitrag)
  3. Contact

Auf der Twenty-Twenty-Demoseite, kann man sich das genauer ansehen.

Der Starter-Content kann nicht verwendet werden, wenn man von einem anderen Theme zu Twenty Twenty wechelt, allerdings kann man sich das Theme vorher im Customizer ansehen.

Twenty Twenty Design

Der schwedischen Designer und Entwickler Anders Norén hat Twenty Twenty gestaltet, basierend auf seinem Chaplin-ThemeIan Belanger und Carolina Nymark haben die Entwicklung von Twenty Twenty geleitet.

Es gibt eine faszinierende Geschichte zur Twenty-Twenty-Entstehung (auf Schwedisch); Sollte Schwedisch nicht Eure Muttersprache sein, dann kann man einfach einen Übersetzungsdienst benutzen! Ich würde gerne glauben, dass die Idee des Designs aus Schottland stammt, denn dort war Anders im Urlaub, als er den Auftrag für das Theme erhielt.

Wie sein Vorgänger, Twenty Nineteen, ist das Theme für die Verwendung mit dem Block Editor ausgelegt.

Das Theme hat einige schöne stilistische Akzente. Die horizontale Rule ist nicht nur eine einfache gerade Linie, sondern wird von zwei Schrägstrichen in der Mitte unterbrochen.

Typografie

Für Überschriften verwendet Twenty Twenty Inter Typeface, die für Computerbildschrime konzipiert ist. Sie wird als variable Schriftart hinzugefügt.

Die Fallback-Schriftarten sind apple-system, BlinkMacSystemFont, Helvetica Neue und Helvetica.

Der Fließtext verwendet die Serif-Schriftart Hoefler Text; Garamond und Times New Roman sind Fallback-Schriftarten.

Aufgrund eines Bugs in Chrome, bei dem die Hoefler-Text-Schriftart einen falschen Abstand aufweist, verfügt das Theme über einen Schriftartfamilien-Overwrite, NonBreakingSpaceOverride.

Menüs

Twenty Twenty hat fünf mögliche Menüpositionen:

  1. Horizontales Desktop-Menü
  2. Erweitertes Desktop-Menü
  3. Mobile-Menü
  4. Footer-Menü
  5. Social-Menü

Die ersten beiden Positionen sind verschiedenen Optionen für den Desktop.

Das horizontale Desktop-Menü ist eine traditionelle horizontale Navigationsleiste.

Twenty Twentys horizontales Desktop-Menü / Quelle: <a href="https://www.abrightclearweb.com/wordpress-twenty-twenty-theme/" target="_blank" rel="noopener">abrightclearweb.com</a>

Twenty Twenty horizontales Desktop-Menü / Quelle: abrightclearweb.com

Das erweiterte Desktop-Menü hat ein ähnliches Symbol, wie das Mobile-Menü — drei Punkte mit „Menü“ daneben.

Quelle: <a href="https://www.abrightclearweb.com/wordpress-twenty-twenty-theme/" target="_blank" rel="noopener">abrightclearweb.com</a>

Das erweiterte Desktop-Menü, nicht-erweitert / Quelle: abrightclearweb.com

Wenn man möchte, kann man sogar beide Desktop-Menüs aktivieren! Der Demo-Content tut dies tatsächlich.

Das horizontale Desktop-Menü hat ein einziges Item, Contact. Rechts davon befindet sich das erweiterte Desktop-Menü.

Schaltet man das erweiterte Desktop-Menü des Demo-Contents an, so wird das Menü rechts auf der Seite angezeigt:

Menü mit 3 Items: Home, About, Blog und Social Links an der Unterseite / Quelle: <a href="https://www.abrightclearweb.com/wordpress-twenty-twenty-theme/" target="_blank" rel="noopener">abrightclearweb.com</a>

Menü mit drei Items: Home, About, Blog und Social Links an der Unterseite / Quelle: abrightclearweb.com

Das Mobile-Menü wird standardmäßig auf das eingestellt, was man für das horizontale Desktop-Menü oder das erweiterte Desktop-Menü ausgewählt hat.

Wenn man es vorzieht, kann man ein anderes Menü für das Mobile-Menu aus den Desktop-Einstellungen heraus festlegen. Das ist dann das Menü, das Ihre Benutzer auf einem mobilen Gerät sehen werden.

Ich persönlich würde es mir jedoch zweimal überlegen, bevor man ein anderes Mobile-Menü verwendet, denn die Inkonsistenzen zwischen den Geräten können verwirrend sein.

Das Footer-Menü wird unterhalb des Inhalts, aber über den Widgets angezeigt, so dass es möglicherweise nicht dort erscheint, wo man es erwartet, wenn man viele Footer Widgets hat! Befindet man sich auf einem Mobile Device, werden die Menüpunkte vertikal anstatt horizontal angeordnet.

Das Social-Menü wird auf der rechten Seite gegenüber dem Footer-Menü angezeigt, oder auf der linken Seite, wenn man kein Footer-Menü hat.

Fußzeilen- und Social-Menü auf Desktop / Quelle: <a href="https://www.abrightclearweb.com/wordpress-twenty-twenty-theme/" target="_blank" rel="noopener">abrightclearweb.com</a>

Fußzeilen- und Social-Menü auf Desktop / Quelle: abrightclearweb.com

Das Social-Menü ist auf dieselbe Art aufgebaut, wie die anderen letzten „Twenty Twenty“ Themes. Man erstellt ein Menü, fügt Custom Links hinzu, setzt den Darstellungspunkt auf Social-Menü und speichert es dann ab.

So sieht das Social-Menü aus, wenn man den Demo-Content installiert hat:

Social-Menpü: Yelp, Facebook, Twitter, Instagram und Email / Quelle: <a href="https://www.abrightclearweb.com/wordpress-twenty-twenty-theme/" target="_blank" rel="noopener">abrightclearweb.com</a>

Social-Menü: Yelp, Facebook, Twitter, Instagram und Email / Quelle: abrightclearweb.com

Die Icon-Links können ergänzt werden, ungewünschte Links können gelöscht werden.

Customizer-Optionen für das Twenty Twenty Theme

Hier sind ein paar der wichtigsten Customizer-Optionen für Twenty Twenty, von denen einige den Customizer-Einstellungen von Chaplin sehr ähnlich sind.

Website-Identität

Hier kann man ein Logo hinzufügen, den Seitentitel und die Tagline festlegen und ein Seitensymbol (Favicon) hochladen.

Die vorgeschlagenen Bildabmessungen für das Logo betragen 120 x 90 Pixel, was ein kleines Rechteck ist.

Hier ist ein Logo in dieser Größe:

Mit dem Logo besteht die Möglichkeit, eine Retina-Version zu verwenden:

Skaliert das Logo auf die Hälfte der hochgeladenen Größe und macht es damit scharf auf hochauflösenden Bildschirmen.

Hier kann man sehen, wie das Logo auf verschiedenen Geräten aussieht:

Auf dem Desktop ersetzt das Twenty-Twenty-Logo den Seitentitel und erscheint links neben der Tagline.

Logo und die Tagline sind auf dem Tablet zentriert.

Auf der Mobile-Version ist das Twenty-Twenty-Logo zentriert und die Tagline wird nicht angezeigt.

Farben

Die folgenden Farben kann man über die Auswahlmöglichkeiten des Themes verändern.

Hintergrundfarbe: man kann die helle Goldfarbe #f5efe0 wechseln, die auf Beiträgen und Seiteninhalt angezeigt wird.

Header- und Footer-Farbe: man kann die Weiße Farbe wechseln. 

Klug ist es, dass wenn man dunkle Farben auswählt, der Text hell wird! Ich liebe dieses Feature wirklich sehr.

Quelle: <a href="https://www.abrightclearweb.com/wordpress-twenty-twenty-theme/" target="_blank" rel="noopener">abrightclearweb.com</a>

Lila Header mit hellrosa Text. Grauer Body mit weißem Text. / Quelle: abrightclearweb.com

Primärfarbe: Dies ist die Akzentfarbe, die für Links, Buttons und Artikelbilder verwendet wird. Es ist auf die rote Farbe #cd2653 eingestellt.

Wenn man die Grundfarbe ändert, hat man nicht ganz die freie Farbwahl. Ich haben z. B. die Grundfarbe mit dem Schieberegler auf gelb gestellt – die tatsächliche Farbe, die für die Verlinkungen erzeugt wurde, war ein gelbliches Braun.

Derzeit existiert ein Bug, der verhindert, dass man auf die Twenty-Twenty-Standardfarbeinstellungen zugreifen kann, wenn man eine Änderung gespeichert hat. Daher sollte man sich sicher sein, dass man mit dem Farbwechsel zufrieden ist, bevor man veröffentlicht.

Theme-Optionen

Show Search in Header: ist eingeschaltet, aber man kann es auch ausschalten, wenn man möchte.

Ich bevorzuge es, dass Beiträge nicht den vollständigen Post, sondern die Zusammenfassung auf Archivseiten anzeigen. Diese Option fehlte in einigen der früheren „Twenty“ Themes, wie z. B. Twenty Seventeen, daher ist es großartig, dass sie jetzt hier sind.

Cover Template

Das Cover Template ist ein Page Template, das entweder eine solide Farbe oder ein Hintergrundbild mit Overlay verwendet.

Cover-Vorlage mit durchgehendem roten Hintergrund, die den Seitentext darunter anzeigt.

Cover Template mit durchgehendem roten Hintergrund, das den Seitentext darunter anzeigt. / Quelle: abrightclearweb.com

Wenn man ein Beitragsbild auf einem Cover Template festlegt, ist es teilweise als Hintergrund sichtbar.

Fixed Background Image: Wenn man ein Beitragsbild verwendet und dieses Kontrollkästchen aktiviert ist, sieht der Benutzer beim Scrollen einen Parallaxeffekt auf dem Bild.

Overlay Text Color: Zunächst weiß; Man kann zu einer anderen Farbe eigener Wahl wechseln.

Overlay Background Color: Beginnt als Akzentfarbe, aber man kann diese auch ändern.

Overlay Opacity: Verändert die Deckkraft mit einem Schieberegler. Der ursprünglicher Wert ist 0,8, was 80 Prozent Opazität entspricht.

Hier ist ein Beispiel des Cover Template mit einem Hintergrund. Das war das Bild, das ich ursprünglich hochgeladen hatte:

Und hier ist das fertige Cover Template:

Cover-Template mit Hintergrundbild, orangefarbenen Overlay und 60% Transparenz / Quelle: <a href="https://www.abrightclearweb.com/wordpress-twenty-twenty-theme/" target="_blank" rel="noopener">abrightclearweb.com</a>

Cover Template mit Hintergrundbild, orangefarbenen Overlay und 60% Deckkraft / Quelle: abrightclearweb.com

Hintergrundbild

Man kann ein Hintergrundbild für die Seite einstellen und dessen Darstellung verändern.

Hier sind ein paar Beispiele:

Quelle: <a href="https://www.abrightclearweb.com/wordpress-twenty-twenty-theme/" target="_blank" rel="noopener">abrightclearweb.com</a>

Unicorn-Hintergrundbild mit Standardvoreinstellung / Quelle: abrightclearweb.com

Unicorn-Hintergrundbild mit Repeat-Voreinstellung / Quelle: <a href="https://www.abrightclearweb.com/wordpress-twenty-twenty-theme/" target="_blank" rel="noopener">abrightclearweb.com</a>

Unicorn-Hintergrundbild mit Repeat-Voreinstellung / Quelle: abrightclearweb.com

Es ist offensichtlich, dass sich das Bild, das ich ausgesucht habe, mit seinem dunklen Hintergrund nicht gut dafür eignet, um den dunklen Text lesen zu können.

Im Gegensatz zur Cover Template, gibt es für das Hintergrundbild keine Opazitätssteuerung, die es leichter machen würde. Wählt also mit Bedacht!

Homepage-Einstellungen

Hier kann man die Homepage als seine Blogseite festlegen oder eine statische Startseite haben. Dies ist identisch zu der Option in Settings > Reading.

Theme Layouts und Widgets

Das Twenty Twenty Theme funktioniert am besten mit dem Block Editor, der Full-Width-Inhalte unterstützt. Deswegen hat es keine Sidebar.

Stattdessen gibt es zwei Widget-Bereiche — Footer #1 und Footer #2.

Auf dem Desktop erscheinen die Widgets für den Footer #1 auf der linken Seite und für den Footer #2 auf der rechten Seite in Spalten. Auf der Mobile-Version stapeln sie sich in einer Spalte.

Der Demo-Content verfügt über zwei Text-Widgets.

Twenty Twenty hat 3 Seitenvorlagen.

Das Default Template hat eine maximale Breite von 58 rem = 580 px.

Der Content des Cover Templates hat die gleiche Breite wie das Default Template.

Das Full width Template hat eine maximale Breite von 120 rem = 1200px.

Artikelbilder für die Darstellung von Beiträgen, mit einer maximalen Breite von 120 rem = 1200 px. Es gibt keine maximale Höhe; das hängt von der Höhe des Bildes ab.

Teil eines Beitrags mit einem Bild der Golden Gate Bridge.

Teil eines Beitrags mit einem Beitragsbild der Golden Gate Bridge. / Quelle:  abrightclearweb.com

Tatsächlich besagt die Dokumentation von Twenty Twenty, dass die empfohlene Bildgröße 1980px breit und 1485px hoch ist.

Wenn man es vorzieht, ein Bild in voller Breite anzuzeigen, sollte man vielleicht eine der folgenden Maßnahmen ergreifen:

  • Hinzufügen eines Bildblocks und auf volle Breite einstellen (Beiträge oder Seiten)
  • Das Cover Template (nur Seiten) benutzen

Zugänglichkeit

Wie schon seine Vorgänger ist auch Twenty Twenty ein barrierefreies Theme.

Welche Zugänglichkeits-Features besitzt es?

  • Das HTML des Themes ist gut konstruiert.
  • Ein „Skip to content„-Link, um das Menü zu umgehen,  ist für alle, die auf die Tastatur angewiesen sind, vorhanden
  • Alle Menü-Items sind über die Tastatur zugänglich.
  • Das Theme verwendet SVG Icons. Beispiele sind die Such-, die Bearbeitungs- und die Social-Media-Symbole. Gegebenenfalls werden sie vor Screenreadern versteckt.
  • Am Ende der Seite befindet sich ein Link „To the Top„, um schnell wieder nach oben zu gelangen.
  • Der Farbkontrast zwischen dem standardmäßigen roten Text und dem weißen Hintergrund beträgt 5,25: 1, was die Kontrastanforderung WCAG 2.1 auf AA-Niveau erfüllt. Der Kontrast zwischen dem hellgoldenen Hintergrund und dem roten Linktext beträgt 4,57: 1, was ebenfalls ausreichend ist.
Rot auf Weiß Kontrast: 5.25:1

Rot auf Weiß Kontrast: 5.25:1 / Quelle:  abrightclearweb.com

Rot auf Gold Kontrast 4.57:1

Rot auf Gold Kontrast 4.57:1 / Quelle:  abrightclearweb.com

  • Links sind unterstrichen.
  • Das Theme enthält ARIA, um das Erlebnis für Screenreader-Anwender zu verbessern, ist aber nur dort vorhanden, wo es nötig ist.
  • Im Allgemeinen wird der Tastaturfokus gut verwaltet. Wenn das erweiterte Menü geöffnet ist, durchläuft der Fokus die Menüpunkte, bis einer ausgewählt oder das Menü geschlossen wird. Auf einer Taste mit Fokus wird der Text unterstrichen und hat eine gepunktete Kontur.
Taste mit Fokus (links) versus Taste ohne Fokus (rechts) / Quelle: <a href="https://www.abrightclearweb.com/wordpress-twenty-twenty-theme/" target="_blank" rel="noopener">abrightclearweb.com</a>

Taste mit Fokus (links) versus Taste ohne Fokus (rechts) / Quelle: abrightclearweb.com

Der Linkfokus ist leichter zu erkennen. / Quelle: <a href="https://www.abrightclearweb.com/wordpress-twenty-twenty-theme/" target="_blank" rel="noopener">abrightclearweb.com</a>

Der Linkfokus ist leichter zu erkennen. / Quelle: abrightclearweb.com

Einige Features, bei deren Verwendung man vorsichtig sein sollte, wenn man eine barrierefreie Website wünscht, sind diese hier:

  1. Die Farbänderungsoption. Man muss darauf achten, dass die gewählte Farbgebung einen ausreichenden Kontrast aufweist.
  2. Das Parallax Scrolling des Cover Templates. Das Parallaxen-Scrollen kann dazu führen, dass sich einige Menschen schlecht wird.
  3. Das Cover Template überlagert die Deckkraft. Hier gibt es eine nette kleine Erinnerung: „Stellt sicher, dass der Kontrast hoch genug ist, damit der Text lesbar ist.“

Twenty Twenty und der Block Editor

Um Twenty Twenty optimal einzusetzen, muss man den Block Editor verwenden. (Sorry, Classic-Editor-Fans.)

Für ein besseres WYSIWYG-Erlebnis verwendet der Block Editor die gleiche Schriftart und Farbe wie im Design:

Wenn man die Hintergrundfarbe ändert, ändert sich diese auch im Editor!

Twenty Twenty kann die verschiedenen Bildausrichtungen, die der Block Editor unterstützt, gut nutzen.

Man kann auch den Circle-Mask-Stil ausprobieren, der neu im Image Block in WordPress 5.3 ist. Dies ist nicht nur bei Twenty Twenty möglich – es ist für jedes Theme verfügbar, in dem man den Block Editor verwendet.

Ein Delphinfoto in einem Beitrag im Stil der Kreismaske.

Ein Delphinfoto in einem Beitrag im Stil der Kreismaske. / Quelle: abrightclearweb.com

Eine weitere Möglichkeit, mehr über Layouts für Twenty Twenty zu erfahren, besteht darin, die Demo-Homepage im Block Editor zu studieren.

Man kann insbesondere Group Blocks in Aktion sehen. Unterhalb des Bildes sind die Überschriften- und Button-Blöcke in diesen Spaltenblöcken alle Teil derselben Gruppe.

Durch diese Gruppierung von Blocks ist es leicht, die Gruppe zur Wiederverwendung zu duplizieren.

Hier ist ein Seitenlayout, das ich im Twenty Twenty Theme mit dem Template Full width erstellt habe:

Quelle: <a href="https://www.abrightclearweb.com/wordpress-twenty-twenty-theme/" target="_blank" rel="noopener">abrightclearweb.com</a>

Full-width-Layout mit Pullquote, Media & Text und Titelbild (mit Button) Blocks / Quelle: abrightclearweb.com

Fazit

Ich denke, dass das Twenty Twenty Theme das bisher schönste Standard-Theme ist. Man kann es für eine Vielzahl von Websites benutzen, wie z. B. persönliche Portfolios, Blogs und Unternehmenswebseiten.

Mein größter Vorbehalt bei der Übernahme von Twenty Twenty ist derzeit der, dass es, weil es so neu ist, noch einige Fehler enthält, die behoben werden müssen.

Abgesehen davon, möchte ich dem Team zu der Arbeit gratulieren, die sie mit diesem Theme geleistet haben. Gut gemacht!

Was haltet Ihr von dem WordPress Twenty Twenty Theme? Lasst es mich im Kommentarbereich unten wissen.

Dieser Artikel erschien zuerst im Englischen, geschrieben von Claire Brotherton auf abrightclearweb.com.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Abonnieren
Benachrichtige mich bei
guest
1 Kommentar
Inline Feedbacks
View all comments
Ines

Ich teste das Theme gerade auf einem Blog und da fällt mir auf, das das Beitragsbild immer zusätzlich als erstes Bild im Beitrag erscheint. Bei meinem alten Theme war das nur als Thumbnail in den Socials zu sehen. Gibt es eine Stelle, an der ich Anklicken kann, dass das Beitragsbild nicht im Beitrag an sich erscheinen soll? Ein Tipp wäre… Weiterlesen »

X
- Gib Deinen Standort ein -
- or -