Vogel WordPress Twenty Twenty-Two

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

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.

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.


Beitrag veröffentlicht am

in

von

Kommentare

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

  1. Avatar von Karl

    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

  2. Avatar von Erwin
    Erwin

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

    1. Avatar von Jonas
      Jonas

      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

      1. Avatar von Erwin
        Erwin

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

        1. Avatar von Jonas

          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.

          1. Avatar von Erwin
            Erwin

            Herzlichen Dank für die vielen Links, da habe ich in nächster Zeit einiges zu tun … 😉

  3. Avatar von Gabriele Ermold

    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

    1. Avatar von Jonas

      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.

      1. Avatar von Gabriele Ermold
        Gabriele Ermold

        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!

  4. Avatar von matze
    matze

    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.

  5. Avatar von ursinus
    ursinus

    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

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

    1. Avatar von Cora
      Cora

      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!

      1. Avatar von Jonas

        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:
        individuelles Template anlegen
        Dann kannst du das neue, individuelle Template beim Editieren eines Beitrages oder einer Seite dieses neue Template auswählen.
        Frage beantwortet?
        Jonas

        1. Avatar von Cora
          Cora

          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

          1. Avatar von Cora
            Cora

            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

  7. Avatar von franky
    franky

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

    1. Avatar von Jonas-2

      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?

    2. Avatar von the lizard king

      „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

      1. Avatar von Jonas-2

        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.

  8. Avatar von Eva

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

Schreibe einen Kommentar

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