Hier kommt eine Herausforderung: Es soll ein wirklich minimales WordPress-Theme erstellt werden, nennen wir es MiniMiniMini. Was ist mindestens nötig, um ein solches Minimal-Theme zu aktivieren? Mal sehen:
Ein Theme-Ordner wp-content/themes/miniminimini im Wurzelverzeichnis unserer WordPress-Installation.
Und zwei Dateien, mehr nicht.
Erstens eine style.css-Datei, die keinen CSS-Code enthalten muss, aber wenigstens genau eine Kommentar-Zeile:
/* Theme Name: MiniMiniMini
Zweitens eine Template-Datei. Bei den aktuellen Block-Themes muss diese Datei index.html heißen und im Verzeichnis miniminimini/templates liegen, weil WordPress sie genau dort erwartet.
Ein minimales Standard-Template
Ein einfaches Beispiel für so ein minimales Standard-Template (in Gegenüberstellung zu einem klassischen PHP-Template, wo die Template-Datei index.php heißt und direkt im Theme-Verzeichnis liegen muss) findet sich in meinem großen Übersichts-Artikel über das Full-Site-Editing. Hier ist der Inhalt einer solchen index.html:
<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header"} /--> <!-- wp:query {"tagName":"main","layout":{"inherit":true}} --> <main class="wp-block-query"><!-- wp:post-template --> <!-- wp:post-title {"isLink":true} /--> <!-- wp:post-excerpt {"moreText":"Mehr","showMoreOnNewLine":false} /--> <!-- /wp:post-template --></main> <!-- /wp:query --> <!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer"} /-->
Damit funktioniert unsere WordPress-Website, obwohl unser minimales Template einen Malus hat: Es zeigt immer nur einen Auszug eines Beitrags- oder Seiteninhalts an und eignet sich damit zwar bestens für alle Seiten, auf denen Beitrags-Listen angezeigt werden, aber nicht für einzelne Beiträge oder Seiten. Dort wird auch immer nur ein Text-Auszug statt des gesamten Inhalts angezeigt.
Um dies zu beheben, legen wir im Verzeichnis templates flugs eine Kopie der Datei index.html unter dem Namen singular.html an und ersetzen dort die Zeile mit dem wp:post-excerpt wie folgt:
<!-- wp:post-content {} /-->
Nun wird für die Darstellung von Einzelseiten nicht mehr das Template index.html, sondern singular.html verwendet, das den komplette Beitrags-Inhalt angezeigt. Dafür sorgt die Template-Hierarchie von WordPress.
Es geht (nicht ganz) ohne theme.json
Und was ist mit der theme.json? Dies ist die globale Konfigurationsdatei für moderne WordPress-Block-Themes. So mächtig diese Datei auch ist – unser MiniMiniMini-Theme lässt sich ganz ohne theme.json ausführen.
Oder – doch nicht so ganz. Zwar wird die Website angezeigt, aber ohne theme.json funktioniert der Site-Editor nicht richtig. So lässt sich keine Farbpalette erstellen, und der Versuch, eine Schrift aus dem Google-Fonts-Verzeichnis einzubinden, resultiert in der seltsamen Fehlermeldung:
„u is undefined“
Dabei handelt es sich offenbar um eine Javascript-Fehlermeldung, die im von ReactJS erzeugten Site-Editor eingeblendet wird. Solche Probleme verschwinden aber, sobald eine minimale Datei theme.json im Theme-Verzeichnis angelegt wird:
{ "version": 3 }
Diese Zeile besagt, dass Version 3 der theme.json verwendet wird, welche seit WordPress 6.6 gültig ist. Ältere WordPress-Editionen (ab 5.9) benötigen Version 2. Im Übrigen funktioniert Version 2 auch noch mit WordPress 6.6, aber Features, die aus der Weiterentwicklung des Editors resultieren, können nur in Version 3 genutzt werden.
Wenn die Template-Parts fehlen
Ein typisches WordPress-Template enthält zudem sogenannte Template-Teile („Template parts“) für Seitenkopf („Header“) und Seitenende („Footer“), die bereits im obigen Beispiel in unserer minimalen index.html eingebunden sind. Das Theme funktioniert selbst dann, wenn die Dateien für diese Template-Parts gar nicht vorhanden sind. Man sieht dann lediglich im Site-Editor einen Hinweis:
Das Template-Teil wurde gelöscht oder ist nicht verfügbar
Es genügt in diesem Fall, das Unterverzeichnis miniminimini/parts/ und darin wiederum zwei leere Dateien namens header.html und footer.html anzulegen, damit der Hinweis im Site-Editor verschwindet und statt dessen zwei leere Bereiche, einer für den Header und einer für den Footer, erscheinen, die wir nun nach unseren Vorstellungen mit Blöcken füllen dürfen. Übrigens lassen sich Templates und Template-Teile auch direkt im Seiten-Editor zusammenklicken, so dass wir uns die leeren Dateien auch sparen können.
Da haben wir es also: das MiniMiniMini-Wordpress-Theme, das aus mindestens fünf (teilweise leeren) Dateien in einem Theme-Verzeichnis mit zwei Unterverzeichnissen besteht.
Zugegeben: Schön sieht eine WordPress-Website mit diesem völlig ungestylten Theme nicht aus. MiniMiniMini lässt sich aber gut als maximal Bloat-freies Starter-Theme für ein eigenes Design verwenden. Warum nicht minimal anfangen, statt ein vorgefertigtes Theme zu verwenden, das dann wieder an die eigenen Vorlieben angepasst werden muss?
Aber bitte mit Schema: theme.json im Code-Editor
Leider ist der Site-Editor von WordPress immer noch nicht so weit entwickelt, dass sich darin aller globalen Stile für ein ordentliches Web-Design ganz ohne Coden zusammenklicken lassen. Was jetzt schon gut funktioniert, sind die Festlegung der Typografie (mit Zugriff auf Googles Font-Verzeichnis) und der Farbpalette. Eine andere elementare Einstellung wie die Festlegung der Inhaltsbreite(n) ließ sich dagegen (Stand: WordPress 6.6) nur mit Anfassen der theme.json zu Stande bringen.
Die theme.json sollte man mit einem ordentlichen Code-Editor bearbeiten und der Datei den Schema-Hinweis
"$schema": "https://schemas.wp.org/trunk/theme.json"
hinzufügen. Dann kann ein Editor wie VS Code beim Tippen helfen und Syntax-Fehler markieren. Kurios: Nachdem ich die Breite für normale und weite Inhalte in der theme,json unter dem Schlüssel „settings“ wie folgt
"contentSize": "800px", "wideSize": "1200px",
festgelegt hatte, tauchte sie auch – oh Wunder! – im Site Editor unter Stile > Layout auf. Im Übrigen lässt sich ebenfalls unter „settings“ mit dem Schlüssel
"appearanceTools": true
Tschüss, Pagebuilder
Ja, das klingt immer noch mühsam. Aber: Wer sich mit Blöcken und dem Site-Editor anfreunden kann, wer vor dem Editieren der theme.json nicht zurückschreckt, braucht keinen Pagebuilder (Elementor, Bricks, Divi, WP Bakery oder wie sie alle heißen) mehr und ist deshalb auch nicht auf die (oft Abo-pflichtige) Produktpflege eines Drittherstellers angewiesen.
Und wenn MiniMiniMini dann endlich zu einem echten Design erblüht ist, kann man es aus dem Site-Editor in ein zip-Archiv exportieren und auf diese Weise sein ganz eigenes Theme distribuieren.