Twenty Twenty-Two – Ein Blick auf das Standard-Theme

Inhaltsverzeichnis

Standard-Theme Twenty Twenty-Two
Twenty Twenty-Two ist das Referenz-Theme für Full-Site-Editing
Twenty Twenty-Two ist für die Anwender gemacht
- Design-Elemente und Vorlagen
- Schriftart bzw. Fonts-Type
Wo ist der Customizer?
Wie füge ich ein Website-Logo ein?
- Das Logo kann nur über den Block-Editor eingefügt werden!
Das Favicon bzw. das Website-Icon in ein Block-Theme einfügen
Header anpassen – unterschiedliche Header in einer Website nutzen
- Template-Teile und Templates im Zusammenspiel
Schriftart bzw. Fonts-Type anpassen

Standard-Theme Twenty Twenty-Two

Mit WordPress 5.9 erschien ein neues Standard-Theme für WP. Es hat gemeinsam mit anderen Block-Themes die “neue Welt” des Block basierten Full-Site-Editing eingeläutet.

Sag Hallo zu Twenty Twenty-Two

Twenty Twenty-Two ist das Referenz-Theme für Full-Site-Editing

Twenty Twenty-Two wird als echtes Full-Site-Editing Theme (besser Block Theme) sicherlich für die meisten Theme-Entwickler:innen das Referenz-Theme werden, da es direkt aus der WordPress Entwicklung stammt und alle neuen Features zum Block basiertem Full-Site-Editing mitbringt.

Eine Seitenvorlage mit einer Seitenleiste ist ohne Programmierkenntnisse leicht zu erstellen. Wie es geht, kannst du in diesem Blog-Artikel nachlesen.

Der neue navigations-Block

Twenty Twenty-Two ist für die Anwender gemacht

Obwohl ich denke, dass das nächste WordPress Default-Theme ein Referenz-Theme wird, ist es aber vor alle für den Endanwender gemacht. Mit tollen Vorlagen und ausgereiften Seiten-Teilen (Template Parts) kannst Du ab sofort die Gestaltung Deiner Website vollumfänglich beeinflussen.

Design-Elemente und Vorlagen

Ausgeliefert werden zahlreiche Seitenvorlagen, verschiedene Header und Footer und andere Vorlagen. Alles – wie immer – zur freien Nutzung und selbstverständlich auf allen Ebenen und Bereichen anpassbar. Daher bin ich sicher, dass Du als Nutzer:in lange Zeit mit diesem Theme Freude haben wirst und Deine Website sehr individuell gestalten kannst.

Wo ist der Customizer?

Alle WordPress Nutzer, die schon vor dem Release 5.9 mit WordPress gearbeitet haben, kennen den Customizer als wichtiges Werkzeug, um der Website „Gestalt“ zu geben. Mindestens das Logo und ein paar weitere Einstellungen kann man hier vornehmen. Je nach Theme ist der Customizer ein sehr mächtiges Werkzeug bis zur individuellen Gestaltung von Header und Footer. Jedes Theme ist hier unterschiedlich ausgestattet.

Bisheriger Ort für den Customizer in WordPress — Bisher: Customizer im Dashboard

Wenn Du mit WP 5.9 auf ein Block-Theme wechselst, und das Theme Twenty Twenty-Two ist ein solches, ist der Customizer nicht mehr in der linken Seitenspalte des Editors bzw. Backends zu sehen. (siehe Bild)

Der Customizer verliert in allen Block Themes an Bedeutung, da alle Design-Anpassungen im Site-Editor erfolgen werden.

Hier ein wunderbarer Beitrag, wie du doch einen Customizer aktivierst. Es funktioniert entweder mit einem kleinen Plugin oder in der functions.php eines Child Themes. Ausführliche Details zur Erstellung eines Child Themes für Twenty Twenty-Two findest du hier.

Customizer im Block-Theme

Wie schon geschrieben: eigentlich brauchst Du den Customizer auch nicht mehr. Aber wir Menschen sind ja Gewohnheits-Tiere…

Wie füge ich ein Website-Logo ein?

Ist dir beim Customizer aufgefallen, dass man dort kein Website-Logo (mehr) einführen kann? Bisher und bei allen anderen „bisherigen“ Themes war es Standard, im Customizer das Logo hochzuladen.

Das Logo kann nur über den Block-Editor eingefügt werden!

Eine der Neuerungen ist der vollumfängliche Einsatz des Block-Editors für die Gestaltung aller Website Elemente. Auch das Einfügen des Logos erfolgt auf diesem Weg.

Wenn während des Einfügens eines Blockes nach dem „Website-Logo“ gesucht wird, erklärt sich der Rest vermutlich von selbst.

Das Logo wird über den Block-Editor eingefügt

Es ist möglich, das Logo zu beschneiden, die Größe zu verändern und einen Duo-Tone-Filter über das Logo zu legen.

Das Favicon bzw. das Website-Icon in ein Block-Theme einfügen

Tatsächlich findet sich aktuell kein “herkömmlicher” Weg, um ein Website-Icon einzufügen. Und trotzdem kannst du ein Favicon mithilfe eines kleinen Kniffs auch ohne Plugin oder Child-Theme einfügen.

Einfach kurzfristig ein “klassisches” Theme (z.B. Twenty Twenty-One) aktivieren. Im Customizer das Favicon installieren, speichern. Und dann zu Twenty Twenty-Two zurückwechseln. Tara… Es funktioniert.

Header anpassen – unterschiedliche Header in einer Website nutzen

Wenn du auf dieser Website ein wenig herumklickst, siehst du vier (eigentlich drei) verschiedene Header-Varianten. Die “Blog”-Sammelseite, die Homepage, statische Seiten (Kontakt u.ä.) und die Beiträge zeigen mehr oder weniger verschiedene Header.

Das ist eine Stärke der neuen Block-Themes. Endlich kann man ohne Child-Theme und ohne PHP Kenntnisse eigene Design-Ideen für Landingpages, Aktionsseiten etc. prima umsetzen.

Template-Teile und Templates im Zusammenspiel

Was habe ich gemacht, um möglichst am Standard zu bleiben:

Im Standard des Twenty Twenty-Two Themes findest du drei Header. Siehe hier.

Für die Homepage habe ich den vorhandenen Header “Dark Small” modifiziert und mit einem individuellen, neuen Template für die Homepage verknüpft. Zu den Templates später mehr.

Der vorhandene “Header” ist angepasst und für die “statischen” Seiten wie Kontakt und AGB etc. genutzt. Das Template heißt im Standard “Seite”.

Ich habe einen neuen Header für die Beiträge erstellt. Ich nenne ihn “Custom-Header”. Der wird mit dem Template “Einzelbeitrag” genutzt.

Den Header im Template “Startseite” (ein etwas verwirrender Name!) habe ich entfernt und das Template “Startseite” überarbeitet. Die Navigation und der Website-Titel sind Teil in dem Template Startseite geworden.

Eine Seite oder ein Post benötigt nicht dringend ein Template-Teil Header bzw. Footer.

Je nach Theme sind die Möglichkeiten mehr oder weniger groß.
Es gibt Block-Themes, die nur eine sehr eingeschränkte Variabilität besitzen. Beides hat seine Vor- und Nachteile.

Schriftart bzw. Fonts-Type anpassen

Webfonts in Block-Themes, insbesondere wenn du sie lokal speichern willst, sind eine kleine Herausforderung. Wie du sie meistern kannst, habe ich hier beschrieben: Fonts Lokal im TT2 speichern.

Beitrag veröffentlicht am

1. März 2022

Themes

von

Jonas

Kommentare

21 Antworten zu „Twenty Twenty-Two – Ein Blick auf das Standard-Theme“

Karl

14. Mai 2022

Hallo Jonas,

der Customizer, welcher bei FSE-Themes nur ausgeblendet ist, lässt sich übrigens durch Eingabe von

https://deine-domain.de/wp-admin/customize.php

in der Adresszeile wieder aufrufen …

LieGrü, Karl

Antworten
Erwin

31. März 2022

Gute Beschreibung, danke Jonas, konnte einiges davon verwerten.

> Für die Homepage habe ich den vorhandenen Header “Dark Small” modifiziert und mit einem individuellen, neuen Template für die Homepage verknüpft.

Wie verknüpft man einen anderen Header als „Dark Small“? Ich komme da irgendwie nicht dahinter.

Und wie bekommt man wieder – wie bei Blogs gewohnt – rechts die Abschnitte „Neueste Beiträge“, „Kategorien“, „Neueste Kommentare“ usw.?

Antworten
1. Jonas
  
  31. März 2022
  
  Danke für deinen Beitrag.
  Ich hoffe, dass ich deine Fragen anschaulich beantworten kann.
  
  1. Den Header (und auch den Footer) kannst du für jedes Template individuell tauschen, anlegen. Dafür gehst du in den Site-Editor zu den Templates. –> Hier klicken
  
  Wenn du ein Template in Bearbeitung genommen hast, ist die oberste Gruppe der Header. Den Header-Block anklicken und dann mithilfe des Menüs ersetzen. –> Hier klicken
  
  2. „wie bisher“ bedeutet vermutlich, dass du ein Theme mit Seitenleiste benutzt, in dem die Beiträge etc. angezeigt werden. Im Theme Twenty Twenty-Two kannst du das Template „Einzelbeitrag“ um eine Seitenleiste erweitern. In dieser Seitenleiste speicherst du die gewünschten Blöcke. Dann hast du das, was du bisher auch kennst. Die Erstellung einer Seitenleiste habe ich hier beschrieben. Klick Klick
  
  Antworten
  1. Erwin
    
    1. April 2022
    
    Vielen herzlichen Dank, Jonas, Punkt 2) ist ja ganz fies ;-), diese Möglichkeit habe ich total übersehen :-). Mittlerweilen habe ich heute (sitze jetzt 3 Tage an TT2) eigene Tmpl-Teile gemacht und erfolgreich eingebaut. Langsam verstehe ich die Struktur dahinter.
    
    Ich habe aus TT2 auch ein Child-Theme gemacht (auch nach Deiner Anleitung), und eben dort alles geändert.
    
    Die Templates und die Teile stehen offenbar bedauerlicherweise in der Dtaenbank und nicht im /parts/-Ordner; dieser ist bei mir nämlich leer. Schade, sonst hätte man auch für andere Websites einmal erfolgreich erstellte Tmpl-Teile kopieren können.
    
    Insgesamt muss ich sagen, dass TT2 der Beginn einer Absichtserklärung ist, es fehlt an derart Vielem, vor allem was Abstände aller Art betrifft (margins, paddings), Schriftarten und und und …
    Mutiger Schritt, damit schon herauszukommen (die Mutigen unter uns als Betatester? ;-)), aber ich kann erkennen wohin die Reise geht. Meine Child-style.css ist schon beachtlich lange … und leider kann ich nicht alle Elemente eruieren, die ich gerne geändert hätte, bspw. bei einer 3-spaltigen Seite mit allen Posts das Bild mittig in der Spalte. Alles, das mir in dieser Richtung bekannt ist, wird von den Firefox-Entwicklertools als nicht machbar moniert … 🙁
    
    Antworten
    1. Jonas
      
      2. April 2022
      
      Danke für deine Hinweise und Gedanken.
      
      Ich werde sofort meinen Beitrag zum Child-Theme vom Netz nehmen und in den nächsten Tagen überarbeiten. Schau bitte mal hier: https://www.wp-tipps.de/font-type-im-fse/#child-theme.
      In dem Beitrag findest du vielleicht noch ein paar brauchbare Hinweise zu Fonts.
      
      Zu allen anderen Themen (Margin und Padding) geht es mir teilweise auch wie dir. Es liegt auch daran, dass die Blöcke noch etwas stur sind. Mit WP 6.0 kommt einiges an Funktionalitäten und Einstellmöglichkeiten dazu. Eventuell musst du auch in der theme.json die Einstellungen des Theme-Authors überschreiben. https://fullsiteediting.com/lessons/global-styles/#h-enable-or-disable-features
      
      Zu den Templates: Hast du mal dieses Plugin probiert? https://de.wordpress.org/plugins/template-editor/ Vielleicht kommst du damit weiter.
      
      Wenn du ganz tief einsteigen willst, generiere dein eigenes Theme mithilfe eines Generators: https://fullsiteediting.com/block-theme-generator/. Mir hat es sehr geholfen.
      
      Antworten
      1. Erwin
        
        2. April 2022
        
        Herzlichen Dank für die vielen Links, da habe ich in nächster Zeit einiges zu tun … 😉
Gabriele Ermold

19. Februar 2022

Hallo lieber Jonas, vielen Dank für die Mühe und die anschauliche Erklärung. Das Theme an sich finde ich auch sehr ansprechend, obwohl ich mich mit dem Block basiertem Full-Site-Editing in einigen Dingen noch schwer tue. Zum Beispiel verstehe ich nicht, an welcher Stelle ich die Meta-Description für die Startseite eingeben muss. Ich nutze die kostenlose Version des Yoast-Plugins und bei den Blog-Artikeln und den weiteren Seiten ist das auch eine prima Sache. Aber die Vorlage „Startseite“ erscheint ja im Dashboard nicht unter Seiten. Folglich greift das Yoast-Plugin auch nicht. Oder habe ich da etwas grundsätzliches nicht verstanden? Auch komme ich über den Theme-Editor doch „nur“ auf die Seite mit den Vorlagen und den Template-Parts und gar nicht an die php, so dass ich die Description für die HEAD dort eingeben könnte. Habe ich da etwas wesentliches übersehen und bin ich gedanklich falsch abgebogen? Es wäre total klasse von dir, wenn du mir einen kleinen Schubs geben könntest, so dass ich mit der Nase auf die entsprechende Stelle stoße. Über eine kurze Rückmeldung, würde ich mich sehr freuen. Liebe Grüße aus hannover

Antworten
1. Jonas
  
  20. Februar 2022
  
  Ich selbst benutze Rank-Math, daher habe ich vielleicht keine befriedigende Antwort für dich.
  Schau mal hier:
  https://yoast.com/help/optimizing-the-seo-title-and-meta-description-of-your-homepage/
  und hier:
  https://iblog-marketing.de/seo-titel-wordpress-seitentitel-und-seitenbeschreibung/
  
  Ich hoffe, dass das der richtige Schubs ist.
  Liebe Grüße nach Hannover
  
  Anmerkung: Es gibt keine template.php (mehr). Einzige Ausnahme ist die index.php.
  
  Antworten
  1. Gabriele Ermold
    
    22. Februar 2022
    
    Hi, hab‘ Dank für deine Antwort. Mir scheint, dass ich mich unklar ausgedrückt habe – dein sympathischer Schubs ist nicht so zielführend, wie ich hoffte – dennoch freue ich mich über die Rückmeldung!
    
    Ich wollte ein Meta-Tag im Abschnitt >head< über die php auf meiner Seite platzieren, doch bei dem Block-Theme kommt man da nicht so ohne weiteres ran.
    
    Von Haus aus bietet das Theme nicht die Möglichkeit über den Head-Abschnitt eine Meta-Description hinzuzufügen (zumindest habe ich den "Zugang" dafür nicht gefunden – daher meine Anfrage)
    
    Da ich mich noch nicht sehr lange mit wordpress beschäftige, fehlen mir noch viele fachlich korrekte Ausdrücke, so dass ich nicht klar herausstellen kann, was ich meine. Sorry dafür.
    
    Eine Lösung für mein Problem habe ich über ein Plugin gefunden – nun kann ich meine Meta-Description bearbeiten. Sonnige Grüße!
    
    Antworten
matze

13. Februar 2022

Vielen Dank für die tollen Infos und super Erläuterungen. Diese Seite bietet eine Tonne an nützlichem Wissen und Tipps zum neuen Standard-Theme.

Sehr sehr hilfeich – ich bin hier schon mehrfach gelandet, als ich nach Infos zum Thema suchte. Kompliment.

Antworten
ursinus

10. Februar 2022

Danke für die vielen guten Tipps – TT2 ist superspannend und ich glaube dass Gutenberg immer besser wird. Auch freu ich mich an den Patterns.

Nun bin ich gespannt wie es weitergeht. Freue mich über weitere
gute Artikel – wie diesen.
VG Urs

Antworten
Twenty Twenty-Two und WordPress 5.9: Customizer

1. Februar 2022

[…] Informationen zu dem neuen Standardtheme Twenty Twenty-Two lesen möchten, kann ich Ihnen diesen sehr informativen Beitrag […]

Antworten
1. Cora
  
  2. November 2022
  
  Hallo,
  
  zunächst vielen Dank für die ausführliche Beschreibung, die an einigen Stellen über das hinaus geht, was sonst zu finden ist.
  Womit ich allerdings immer noch kämpfe bzw. auf dem Schlauch stehe: Wie kann ich einer Seite ein anderes Template außer den 4 standardmäßig angezeigten zuweisen? Beispielsweise gibt es ja ein 404-Template, das ich gerne einer 404-Seite zuweisen möchte. Im Template-Dropdown beim Seite editieren taucht diese Möglichkeit aber nicht auf. Wo liegt mein Denkfehler?
  Im Voraus vielen Dank und viele Grüße aus dem Schwarzwald!
  
  Antworten
  1. Jonas
    
    2. November 2022
    
    Hallo,
    Dankeschön für das Lob.
    Wenn ich deine Frage richtig verstehe, lautet die Antwort:
    Über Templates -> Hinzufügen -> individuelles Template sollte es gehen.
    Schau mal hier:
    
    Dann kannst du das neue, individuelle Template beim Editieren eines Beitrages oder einer Seite dieses neue Template auswählen.
    Frage beantwortet?
    Jonas
    
    Antworten
    1. Cora
      
      2. November 2022
      
      Hallo Jonas,
      
      leider nein. Unter Templates werden bereits 11 aufgelistet, u. a. das 404-Template. Aber bei Editieren einer Seite erscheinen im Dropdown nur 4 davon.
      
      Cora
      
      Antworten
      1. Cora
        
        3. November 2022
        
        Hallo Jonas,
        
        dank meiner Erfahrungen mit TYPO3 habe ich jetzt herausgefunden, dass das Problem durch eine unvollständige Liste in theme.json verursacht wird. Bin noch am Überlegen, wie ich das aktualisierungssicher beheben kann – wahrscheinlich nur mit Hilfe eines Child Themes.
        
        Cora
franky

30. Januar 2022

…“Ein Austausch der Schriften ist problemlos möglich“

Ihr schreibt vollmundig, aber keine Informationen. Es bleibt leider nur mit viel Erfahrung möglich in diesen vielen Menüs die richtigen Stellen anzupassen.
=> Fazit: Diese Website macht Werbung aber keine Hilfe!

Antworten
1. Jonas-2
  
  30. Januar 2022
  
  Hallo franky,
  Danke für deinen kritischen Kommentar. Ich denke, dass du recht hast. Und ich habe mich etwas schnell vom „Acker“ gemacht.
  Am besten wählst du andere Schriften mit einem Plugin. Z.B. mit olympus-google-fonts/. Das habe ich getestet. Und es läuft.
  
  Ich werde mich demnächst mal ran machen und Fonts lokal speichern und ausliefern. Da Twenty Twenty-Two zumindest einen Font lokal mitbringt, sollte es auch mit anderen Schrifttypen gelingen. Wenn ich erfolgreich bin, werde ich es hier beschreiben.
  
  OK?
  
  Antworten
2. the lizard king
  
  4. Februar 2022
  
  „mit viel erfahrung“
  wenn das tauschen einer schrift im backend dich schon überfordert, wäre vlt. ein wechsel zu instagram zu empfehlen, da kann man wunderbare miniblogs machen ohne irgendwas wissen zu müssen
  
  Antworten
  1. Jonas-2
    
    17. Februar 2022
    
    Danke für diese Antwort.
    Ich tippe, dass wir aneinander vorbeigeschrieben haben. Mir ging es um die Installation einer neuen Schrift-Familie im Backend, die vom eigenen Server ausgeliefert wird. Also den Datenschutzanforderungen entspricht.
    Inzwischen sehe ich, dass diese Anforderung im Block-Theme mit WP 5.9 noch nicht umgesetzt werden kann. Wenn Du da aber schon jetzt eine gute Antwort hast, wäre ich Dir sehr dankbar, wenn Du die teilst.
    
    Antworten
Eva

9. Januar 2022

Danke für die Informationen, bin schon ganz gespannt auf Twenty Twenty-Two.

Antworten