Fiedenstaube mit rotem Herz nacht rechts fliegend

Give Peace a Chance

Fiedenstaube mit rotem Herz nach links fliegend

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

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

Diese Website ist mit dem Theme Twenty Twenty-Two und einem dazugehörigen Child-Theme erstellt. Wie ich vorgegangen bin und was ich gelernt habe, teile ich gerne hier mit dir.

Ein Hinweis vorab:

Der Block-Editor ist im beta-Stadium und wird sicher in den nächsten Aktualisierungen von WordPress stabilisiert und verbessert.

Stand dieses Artikels ist der 29.06.2022, 
WordPress 6.0 und
Twenty Twenty-Two 1.2.

Twenty Twenty-Two ist das aktuelle Standard-Theme mit WordPress 5.9

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.

Begrüßung für Twenty Twenty-Two nach der Installation von WP 5.9
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.

Vorstellung des Navigations-Blocks
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.

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.

Der neue Customizer im Theme Twenty Twenty-One.

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.

Auswahlfester Website-Logo im Editor

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

Website-Logo im Blockeditor
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

Darstellung eines Favicon im Browser-Tab

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.

Template-Teile und Templates im Zusammenspiel

Die Templates im Theme TT2

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.


17 Antworten zu “Twenty Twenty-Two – Ein Blick auf das aktuelle Standard-Theme”

  1. 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.?

    • 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

      • 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 … 🙁

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

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

      • 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!

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

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

  5. …“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!

    • 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?

    • „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

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

Schreibe einen Kommentar zu Jonas Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht.