Twenty Twenty-Two und WordPress 5.9: Customizer

WordPress 5.9: Customizer bei blockbasierten Themes wie Twenty Twenty-Two

Ein zentrales Thema bei der WordPress Version 5.9 wird das Full Site Editing (FSE) sein. Wenn man blockbasierte Themes wie beispielsweise das neue Standard-Theme Twenty Twenty-Two einsetzt oder testet, dann kann es schon mal sein, dass man doch einige Dinge per CSS ändern möchte. Viele Änderungen kann man natürlich auch direkt über die Eigenschaften der Blöcke regeln. Über den Customizer kann man CSS-Regeln unter „Zusätzliches CSS“ definieren. Wie man den Customizer in das Dashboard-Menü bei einem Block Theme einbindet, zeige ich in diesem Beitrag.

Ende Januar 2022 soll nun die neue WordPress Version 5.9 veröffentlicht werden. Ein zentraler Aspekt ist das Full Site Editing (FSE). Dabei spielen entsprechende Block Themes eine große Rolle. Im Zusammenhang mit WordPress 5.9 soll dann auch das blockbasierte Theme Twenty Twenty-Two veröffentlicht werden. Block Themes wie Twenty Twenty-Two bieten zunächst keine Möglichkeit mehr, CSS-Regeln im Rahmen von Design > Customizer > Zusätzliches CSS zu berücksichtigen.

Twenty Twenty-Two

Mit dem Aufkommen von Full Site Editing (FSE) und Global Styles verändern sich Themes strukturell und funktional und bieten wesentlich mehr Möglichkeiten zur Anpassung.

Das Theme Twenty Twenty-Two ist so aufgebaut, dass es die in WordPress 5.9 eingeführten Full Site Editing-Funktionen nutzt. Farben, Typografie und das Layout jeder einzelnen Seite einer Webseite kann nach Ihren Vorstellungen angepasst werden. Außerdem enthält Twenty Twenty-Two jede Menge sehr schöner Block Patterns, die mit nur wenigen Klicks benutzt werden können.

Das Theme Twenty Twenty-Two in WordPress 5.9
Das neue Standardtheme Twenty Twenty-Two

Innovationen wie theme.json, Block Templates und Block Patterns sollen die Designentwicklung erheblich vereinfachen und Benutzern neue Möglichkeiten zur Anpassung ihrer Webseiten bieten. Das Ziel bei der Entwicklung ist, so wenig CSS wie möglich zu verwenden. Das soll erreicht werden, indem der Theme-Stil über theme.json konfiguriert und über Global Styles bearbeitet werden kann.

Wenn Sie noch mehr Informationen zu dem neuen Standardtheme Twenty Twenty-Two lesen möchten, kann ich Ihnen diesen sehr informativen Beitrag empfehlen

Alles konfigurierbar? – Der Customizer fehlt mir trotzdem

Ich gebe zu, dass ich mich trotz vieler Tests bisher noch nicht ganz mit allen Features anfreunden konnte und ich sicher zukünftig noch einige Aha-Erlebnisse haben werden.

Zumindest beim Testen habe ich einige Dinge nicht direkt über die „eingebauten“ Optionen anpassen können. Ich bin mir zwar nicht sicher, ob es nicht entsprechende Möglichkeiten gibt, aber zunächst habe ich trotzdem noch den gewohnten Customizer zur Anpassung mittels CSS vermisst.

Auch wenn ich wahrscheinlich in Zukunft an dieser Stelle aufgrund der vielen Einstellungsmöglichkeiten nicht mehr so viele CSS-Regeln definieren muss, möchte ich daher je nach Bedarf Anpassungen über den Customizer zumindest in Bezug auf CSS weiterhin vornehmen.

Child Theme und/oder Customizer?

Natürlich kann man weitere CSS-Regeln auch weiterhin über die style.css in einem Child Theme zu Twenty Twenty-Two oder jedem anderen Block Theme definieren. Aber ich finde es schon sehr praktisch, wenn man die Möglichkeit hat, während der Entwicklungsphase entsprechende CSS-Regeln über den Customizer zu definieren. Man kann diese CSS-Regeln ja durchaus später in die style.css in das Child Theme übernehmen. Wie man auch bei blockbasierten Themes wie z. B. Twenty Twenty-Two Child Themes erstellen kann, wird in dem folgenden Beitrag auf englisch sehr umfassend erläutert. In einem weiteren Beitrag bezogen auf Child Themes bei Block Themes in deutsch wird auf den aktuellen Stand (Januar 2022) eingegangen.

Den Customizer bei einem Block Theme nutzen

Der Customizer kann nicht mehr direkt über das Dashboard-Menü aufgerufen werden, wenn man ein blockbasiertes Theme wie Twenty Twenty-Two verwendet. Grundsätzlich ist das ja auch aus der Sicht der Theme-Entwickler eine logische Entwicklung, weil ja alle Einstellungen über die Full Site Editing-Funktionen angepasst werden sollen. Aber so ganz hat man sich vom Customizer wohl (noch?) nicht trennen können: Diese Option „schlummert“ in den Tiefen der WordPress-Instanz. Wenn man z. B. Twenty Twenty-Two installiert und aktiviert hat, kann man an die URL /wp-admin/customize.php anhängen und schwupp ist der Customizer wieder da. Zum Testen habe ich u. a. eine lokale WordPress-Instanz mit folgender URL eingerichtet:
http://fse-5.9.test

Um den Customizer aufzurufen, ergibt sich damit:
http://fse-5.9.test/wp-admin/customize.php

Diese Möglichkeit ist zwar schon ganz nett, aber lieber wäre mir natürlich, wenn ich einen Menüpunkt im Dashboard dazu hätte. Dazu benötigen wir eine Funktion, die entweder in ein Child-Theme geschrieben oder aber über das Plugin Code Snippets erstellt werden muss.

Verwendung des Plugins Code Snippets

Das Plugin Code Snippets ist eine hervorragende Lösung, wenn man individuelle Änderungen nutzen möchte, aber kein Child Theme verwendet.

Wenn man das Plugin Code Snippets installiert hat, erscheint links in der Menüleiste ein zusätzlicher Menüpunkt „Snippets“ mit einer Schere als Symbol. Bei dem Untermenüpunkt „Einstellungen“ braucht man im Prinzip keine Änderungen vorzunehmen.

Untermenüpunkte von Code Snippets
Menü von Code Snippets

Um ein neues Snippet anzulegen klickt man auf den Untermenüpunkt „Neu hinzufügen“. Hier trägt man das Snippet wie folgt ein:

  1. Bezeichnung (hier Urheber-Vermerk“).
  2. Bei Code wird das Snippet eingetragen.
  3. Unter „Beschreibung“ kann eine etwas ausführlichere Darstellung des Snippets eingetragen werden.
  4. Wenn man mehrere Snippets verwendet, kann man zusätzlich noch Schlagwörter vermerken

Anschließend klickt man auf den Button „Speichere Änderungen und Aktiviere“. Das war’s.

Snippet für Customizer beim Theme Twenty Twenty-Two

Über das Plugin Code Snippet kann man die nachfolgende function erfassen:

Customize bei Twenty Twenty-Two
Ausführung nur im Administrationsbereich
Customize bei Twenty Twenty-Two
Neuer Menüpunkt „Customize“
add_action( 'admin_menu', 'register_my_custom_css' );

function register_my_custom_css(){
	add_menu_page( 'Customize', 'Customize', 'manage_options', '/customize.php', '', 'dashicons-megaphone', 62 ); 
}

Die Funktion add_menu_page() wird auf der folgenden Seite im Codex von WordPress erläutert. Denkbar wäre allerdings auch ein Untermenüpunkt mittels add_submenu_page(), wie das bei den „normalen“ Themes ist unter Design angezeigt wird.

Danach steht Customize zur Verfügung und man kann CSS-Regeln wie gewohnt unter „Zusätzliches CSS“ bzw. „Additional CSS“ erfassen.

So kann man beispielsweise auch unter „Site Identity“ bzw. „Website-Informationen“ ein Website-Icon festlegen. Dieses Website-Icon wird in den Browsern als grafisches Wiedererkennungsmerkmal neben der eingegebenen Internet-Adresse angezeigt.

Zusätzliches CSS bei Twenty Twenty-Two
Customize mit allen Optionen

Fazit

Bei den Blöcken in WordPress gibt es zwar viele Möglichkeiten ohne CSS Einstellungen wie Farbe, Schriftgröße, etc. vorzunehmen. Aber wenn diese Möglichkeiten nicht ausreichend sind, dann können zusätzliche CSS-Regeln hilfreich sein. Bei den neuen blockbasierten Themes wie z. B. beim Theme Twenty Twenty-Two wird der Menüpunkt für „Customize“ nicht mehr angeboten. Mittels einer kleinen Funktion kann dieser Menüpunkt zusätzlich eingebaut werden – wenn man diese Option für zusätzliche CSS-Regeln denn benötigt.

Linkliste zu Block Themes, WordPress 5.9 und u. a. auch zum Customizer bei Block Themes


Mehr erfahren auf dieser Webseite

Zum Blog

Mehr erfahren auf unserer Webseite

Wir freuen uns über Ihre Kontaktaufnahme

Was halten Sie davon?

Wir hoffen, dieser Beitrag hat Ihnen gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

Weitere interessante Beiträge rund um WordPress finden Sie hier

Schreibe einen Kommentar