Ende Mai 2022 erscheint WordPress 6.0. Die Fülle an Neuerungen ist dabei nicht so riesig, wie die Sechs vor dem Punkt andeuten mag. Dennoch gibt es interessante neue Aspekte. Einer davon ist der Stilwechsel im Block Theme.
Stilwechsel im Block Theme? Laut WordPress bedeutet dies, dass das Aussehen der Website in einem einzigen Block-Theme geändert werden kann, ohne auf ein anderes Theme zu wechseln. Oder mit anderen Worten: Ihnen gefällt Twenty Twenty-Two an sich ganz gut, allein die Farbauswahl entspricht nicht Ihren Vorstellungen? Dann bietet WordPress 6.0 nun die Möglichkeit, eine beliebige Anzahl an eigenen Styles zu hinterlegen.
Twenty Twenty-Two bietet neue Stilvorlagen
Mit WordPress 6.0 bietet Twenty Twenty-Two neue Stilvorlagen. Eigene Stilvorlagen lassen sich aber auch im Rahmen eines eigenen Themes beziehungsweise eines Child Themes für ein Block Theme erstellen. Alles, was es dazu braucht, ist ein Verzeichnis mit dem Namen /styles als Unterordner des aktiven Block Themes.
In diesem styles-Verzeichnis können Sie dann mehrere JSON-Dateien hinterlegen, die natürlich nicht alle theme.json heißen können. Vielmehr brauchen diese Vorlagn jeweils einen eindeutigen Namen. Zum Beispiel pink.json oder blue.json. So jedenfalls heißen zwei der Stilvorlagen, die Twenty Twenty-Two nun mitliefert.
Die Anforderung, eine solche JSON-Datei zu erstellen, macht das Ganze nicht unbedingt einfach. Auf keinen Fall ist dies eine Aufgabe für einen WordPress-Einsteiger. Zumindest ambitionierte Fortgeschrittene können es aber durchaus hinbekommen.
Um einen Zugang zu finden, hilft es sicherlich, sich die theme.json des aktiven Block Themes erst einmal anzuschauen. Schnell ist offensichtlich: So eine theme.json ist in verschiedene Bereiche aufgeteilt. Diese Bereiche behandeln unterschiedliche Aspekte. Es beginnt mit den Custom Templates, gefolgt von den Settings. Unter diesen zeigen sich die Farben für den Duotone-Effekt, die Verläufe und die Paletten. Später gibt es dann noch die Aspekte wie Abstände oder Typographie, bis ganz zum Schluss die Template Parts die Datei beenden.
Wesentlich ist nun: Für Ihre Stilvorlage brauchen Sie nicht alle Bereiche zu übernehmen. Wenn Sie zum Beispiel nur die Farben ändern wollen, dann kopieren Sie sich eben nur diesen Bereich in Ihre JSON-Datei. Alle anderen Information bezieht WordPress dann aus der theme.json des Block Themes, dem Sie Ihren Style hinzugefügt haben.
Erstellen / Bearbeiten einer theme.json für den Stilwechsel im Block Theme
Sagen wir, Ihnen geht es wie mir und Sie wollen ein paar bunte Hintergründe erstellen. Neben Weiß noch Gelb, Grün und Blau. Dann reicht es, in der jeweiligen JSON-Datei nur die Palette zu bearbeiten. Alles andere brauchen Sie dann aus der theme.json gar nicht zu übernehmen.
Der Bereich für die Twenty Twenty-Two Palette sieht jedenfalls wie folgt aus:
"palette": [
{
"slug": "foreground",
"color": "#000000",
"name": "Foreground"
},
{
"slug": "background",
"color": "#ffffff",
"name": "Background"
},
{
"slug": "primary",
"color": "#1a4548",
"name": "Primary"
},
{
"slug": "secondary",
"color": "#ffe2c7",
"name": "Secondary"
},
{
"slug": "tertiary",
"color": "#F6F6F6",
"name": "Tertiary"
}
]Fünf Farbwerte sind definiert. Jede Definition hat einen slug und einen name, deren Wert dann immer jeweils derselbe ist. Also zum Beispiel "foreground". So lassen sich diese fünf Farbwerte auch gut zuordnen. Hier ist der Vordergrund also immer schwarz und der Hintergrund ist weiß. Der Farbwert für Primary ist dieser Petrol-Ton (#1a4548), der für Secondary ein Rosé (#ffe2c7"). Tertiary nutzt ein sehr helles Grau (#F6F6F6).
Das könnte man nun ändern. Sagen wir, der Hintergrund soll ein sehr dunkles Grau, nahezu Schwarz zeigen. Der Vordergrund ein sehr helles Grau, nahezu Weiß. Primary soll gelb sein, Secondary pink und Tertiary blau. Ihre JSON-Datei, die Sie der Einfachheit halber grau.json nennen, sähe dann also so aus:
{
"version": 2,
"title": "grau",
"settings": {
"color": {
"palette": [
{
"slug": "foreground",
"color": "#FFFFFF",
"name": "Foreground"
},
{
"slug": "background",
"color": "#2a2a2a",
"name": "Background"
},
{
"slug": "primary",
"color": "#FFEA7A",
"name": "Primary"
},
{
"slug": "secondary",
"color": "#fe60d1",
"name": "Secondary"
},
{
"slug": "tertiary",
"color": "#54A4FF",
"name": "Tertiary"
}
]
}
}
}Und im Ergebnis sähe es so aus:
Wenn Sie wollen, können Sie aber noch alle Farben des Regenbogens hinterlegen. Für jede Farbe gibt es dann ein solches Paket aus slug, color und name. Wobei slug und name auch "lila" oder "meinliebstesgruen" lauten könnten.
Diese Datei, hochgeladen in Ihr styles-Verzeichnis, sorgt nun dafür, dass Sie im Rahmen Ihres Block Themes einen Stilwechsel vollziehen können.
Stilwechsel im Block Theme über den Website Editor
Grundsätzlich sollte der Design Editor Ihnen nun Ihre neue Stilvorlage anbieten. Zu finden ist sie unter den Globalen Stilen über den Link »Durchstöbere die Stile«.
Es kann aber sein, dass Sie dort erst einmal nichts sehen. Oder zumindest nicht Ihre Vorlage, die Sie zuvor auf den Server in das styles-Verzeichnis geladen haben.
Gründe dafür kann es so einige geben. Alle haben eines gemeinsam: Sie haben einen klitzekleinen Fehler in Ihrer JSON-Datei produziert. Welcher Art Fehler dies sein kann? Nun ja, eine fehlende Klammer zum Beispiel. Oder ein Komma zu viel. Diese Art Fehler zu finden, erfordert dann eine extreme Begeisterung für Genauigkeit.
Und natürlich können Sie noch mehr Anpassungen vornehmen. Die Farben für den Duotone-Effekt oder für die Verläufe ändern. Änderungen an der Typographie, zum Beispiel einzelner Elemente ändern. Aber je mehr Sie ändern, umso größer die Gefahr, dass Ihnen einer dieser blöden kleinen Fehler unterläuft. An denen kann dann auch eine verzweifeln, die das Suchen nach eigenen Fehlern im Code kennt.
Schon allein deshalb bin ich der Überzeugung, dass eine Aufgabe des Full Site Editings wie diese nichts für Einsteiger ist.
Beitragsbilder: Britta Kretschmer, Illustration des fliegenden Kolibris (Public Domain)
Schreibe einen Kommentar