Ein mini-mini-minimales WordPress-Starter-Theme

Miniatur-Figuren auf einer Tastatur
Quelle: meetthephil, Pixabay

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.

Blick in den WordPress-Site-Editor: Das MiniMiniMini-Theme, das so minimal ist, dass es nicht einmal ein Vorschaubild hat, lässt sich aktivieren.

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
die Bearbeitung weiterer Stile im Site-Editor freischalten.

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.

Schreibe einen Kommentar