Dies ist der Anfang einer neuen Beitrags-Serie für mein neues Blog-Theme. Wie in meinem vorherigen Blogbeitrag erwähnt, ist es mein Ziel, ein Theme zu bauern, das so nah an das aktuelle Design heran kommt, wie möglich. Dabei möchte ich nur den Website-Editor verwenden, um alle Styles und Templates zu erstellen.

Erstellung des Themes

Wenn ich in der Vergangenheit Themes von Grund auf entwickelt habe, dann habe ich hierzu meistens _s (underscores) verwendet. Aber da dies ein „Classic Starter Theme“ ist, brauchte ich etwas anderes. Glücklicherweise gibt es das „Create Block Theme“ Plugin, mit dem man ein Theme innerhalb einer WordPress Installation erstellen kann.

Nach der Installation und Aktivierung des Plugins navigiert man zu „Design > Block-Theme erstellen“ und wählt „Leeres Theme erstellen“ als Option aus. Auf der rechten Seite erscheint dann ein Formular, in dem ihr Name, Beschreibung, usw. für das neue Theme eintragen müsste. Das sind die Daten, die man für gewöhnlich im Header-Kommentar der style.css Datei findet.

Nachdem ihr das Formular ausgefüllt habt, klickt ihr auf den „Erstellen“ Button unten links. Das erstellt das neue Theme in eurer WordPress Installation. Jetzt könnt ihr es aktivieren und euch eure Seite ansehen. Das Ergebnis sollte in etwa wie folgt aussehen:

Wunderschön, nicht wahr? OK, noch nicht ganz das, was wir brauchen. Aber es ist bereits ein voll funktionsfähiges Block-Theme und wir können anfange, all die Styles hinzuzufügen, die wir brauchen.

Die Dateistruktur des Themes

Bevor wir aber mit unseren Arbeiten an Theme loslegen, schauen wir uns erst einmal an, was wir haben. Die initiale Dateistruktur unseres neuen Themes sieht wie folgt aus:

$ tree
.
├── parts
│   ├── footer.html
│   └── header.html
├── readme.txt
├── screenshot.png
├── style.css
├── templates
│   └── index.html
└── theme.json

2 directories, 7 files

Nicht wirklich viel. Aber wir haben bereits zwei „Parts“ für Header und Footer. Das einzige „Seiten Template“, das wir haben, ist die index.html Datei. Die style.css Datei ist im Grunde leer. Sie enthält lediglich die Header-Kommentare mit den Daten aus dem Formular. Interessanterweise finden wir darin eine Zeile mit der Angabe Requires PHP: 5.7, obwohl es diese PHP Version nie gab. 😅

Die wichtigste Datei ist aber die theme.json Datei. In dieser Basisversion hat sie lediglich 35 Zeilen und definiert ein paar Layout-Größen, Spacing-Einheiten und eine Sytem-Font-Family, sowie die Template Parts für den Header und Footer.

Im nächsten Blogbeiträgen dieser Serie werden wir recht viel mit dieser Datei arbeiten.

Der Name des neuen Themes

Wie ihr vielleicht schon festgestellt habt, habe ich das neue Theme „Kauri“ genannt (sowie die Entwicklungs-Seite). Das aktuelle Theme meines Blogs heißt Waipoua. Elmastudio benennt alle Themes nach Dingen in Neuseeland oder Asien. Der Waipoua Forest ist ein Wald in der Northland Region von Neuseeland. Dieser Forest zeige eine Auswahl von Kauri-Bäumen. Und spätestens jetzt sollte klar sein, wieso ich diesen Namen gewählt habe. 😊

Nächste Schritte

In der nächsten Ausgabe machen wir die ersten Anpassungen an der theme.json Datei. Vielleicht fügen wir ein paar Fonts ein, oder geben dem Theme eine generelle Breite. Bleibt also gespannt.

Wenn ihr dem Code folgen wollt, dann findet ihr den aktuellen Stand auf GitHub. Aber bitte erstellt noch keine Issues oder Pull-Requests, bevor ich diese Beitrags-Serie nicht abgeschlossen habe. 😁