Kau-Boys

Aus persönlichen Gründen konnte ich einige Zeit lang nicht am Theme arbeiten und daher auch keine neuen Blogbeiträge schreiben. Aber jetzt bin ich wieder zurück und bekomme hoffentlich ein wenig mehr Geschwindigkeit ins Thema und kann vielleicht sogar häufiger als nur alle zwei Wochen bloggen. Ich habe noch immer das Ziel, mein neues Theme vor dem Blog-Geburtstag im Juni fertig zu haben.

Farben hinzufügen

Für viele Leute kann es sehr zur Wiedererkennung beitragen, wenn man die richtigen Farben (einer Marke) verwendet. Fangen wir also mit den Hauptfarben an. Bevor wir aber damit starten können, müssen wir uns mit einem der schwierigsten Probleme in der Informatik beschäftigen: Dinge benennen.

Farbnamen

Es gibt verschiedene Philosophien, sie man Farben benennen kann. Manche verwenden Namen wie primary, secondary, tertiary, usw. Aber als nicht Nicht-Muttersprachler in Englisch, und Legastheniker, kann ich einfach nicht merken, wie man dritten Namen schreibt. Geschweige denn, wie es mit dem vierten, fünften, … dann weiter geht. Daher verwenden andere Namen wie base, contrast, accent und für mehrere Varianten davon fügen sie dann ein numerisches Suffix ein, also z.B. contrast-2, contrast-3, usw. Das ist auch das Schema, das im Twenty Twenty-Four Theme verwendet wird.

Aber ehrlich gesagt weiß ich auch nicht wirklich, was der beste Weg ist, die Namen für die Farben festzulegen. Und da das neue Theme ja eine „Wiederbelebung“ eines ElmaStudio Themes ist, habe ich mir mal angesehen, wie es Ellen und Manuel aktuell handhaben. Wenn ich mir die beiden aktuellsten Themes Mugistore und SolarOne ansehe, dann kombinieren sie die Farbnamen zu etwas wie background-primary, font-primary, accent-primary, usw. Ich werde also versuchen es in meinem Theme genauso zu machen.

Farbwerte den Farbnamen zuweisen

Nachdem ich mich jetzt auf ein Namensschema festgelegt habe, möchte ich allen Farben aus dem Waipoua Theme einen Farbnamen im neuen Theme zuweisen. Daher habe ich erst einmal nach allen Farben im Theme gesucht und insgesamt 26 verschiedene gefunden. Das sind wirklich viele! Aber einige davon werden nur für bestimmte CSS-Selektoren verwendet und andere nur in den farbigen Buttons und Boxen, die Shortcodes verwenden.

Nach der Recherche zu jeder einzelnen Farbe und wo diese verwendet wird, bin ich schließlich bei den folgenden Farbdefinitionen gelandet:

{
	"settings": {
		"color": {
			"defaultPalette": false,
			"palette": [
				{
					"slug": "black",
					"color": "#000000",
					"name": "Black"
				},
				{
					"slug": "white",
					"color": "#ffffff",
					"name": "White"
				},
				{
					"slug": "grey",
					"color": "#909090",
					"name": "Grey"
				},
				{
					"slug": "red",
					"color": "#F55243",
					"name": "Red"
				},

				{
					"slug": "background-primary",
					"color": "#ffffff",
					"name": "Background Primary"
				},
				{
					"slug": "background-secondary",
					"color": "#f6f6f6",
					"name": "Background Secondary"
				},
				{
					"slug": "background-tertiary",
					"color": "#b3b4ae",
					"name": "Background Tertiary"
				},
				{
					"slug": "background-quarternary",
					"color": "#909090",
					"name": "Background Quartenary"
				},

				{
					"slug": "font-primary",
					"color": "#333333",
					"name": "Text Primary"
				},
				{
					"slug": "font-secondary",
					"color": "#4c4a4a",
					"name": "Text Secondary"
				},

				{
					"slug": "primary",
					"color": "#f55243",
					"name": "Brand Primary"
				},

				{
					"slug": "border-primary",
					"color": "#ececec",
					"name": "Border Primary"
				},
				{
					"slug": "border-secondary",
					"color": "#dddddd",
					"name": "Border Secondary"
				},

				{
					"slug": "input-background",
					"color": "#ffffff",
					"name": "Input Background"
				},
				{
					"slug": "input-background-hover",
					"color": "#fcfcfc",
					"name": "Input Background Hover"
				},
				{
					"slug": "input-border",
					"color": "#999999",
					"name": "Input Border"
				},

				{
					"slug": "social-icons-background",
					"color": "#b3b4ae",
					"name": "Social Icons Background"
				},
				{
					"slug": "social-icons-background-hover",
					"color": "#333333",
					"name": "Social Icons Background Hover"
				},

				{
					"slug": "red-btn-box",
					"color": "#e22727",
					"name": "Red Button & Box"
				},
				{
					"slug": "green-btn-box",
					"color": "#71b247",
					"name": "Green Button & Box"
				},
				{
					"slug": "blue-btn-box",
					"color": "#56b3b7",
					"name": "Blue Button & Box"
				},
				{
					"slug": "yellow-btn",
					"color": "#f9d93a",
					"name": "Yellow Button"
				},
				{
					"slug": "yellow-box",
					"color": "#f7ec69",
					"name": "Yellow Box"
				},
				{
					"slug": "white-box",
					"color": "#fff",
					"name": "White Box"
				},
				{
					"slug": "lightgrey-box",
					"color": "#f6f6f6",
					"name": "Lightgrey Box"
				},
				{
					"slug": "grey-btn-box",
					"color": "#d3d3d3",
					"name": "Grey Button & Box"
				},
				{
					"slug": "dark-box",
					"color": "#333",
					"name": "Dark Box"
				},
				{
					"slug": "black-btn",
					"color": "#000",
					"name": "Black Button"
				}
			]
		}
	}
}

Insgesamt sind es 29 Farbdefinitionen. Wenn man den Farbwähler im Block Editor öffnet, beispielsweise in einem Absatz-Block, dann sieht man das folgende:

Einige Farben sind hier „doppelt“, aber es ist genau, wie es auch andere ElmaStudio Themeas machen und ich denke, es ist eine gute Idee. Sagen wir zum Beispiel, dass ihr die Farbe aller Social-Media-Icons verändern möchtet. In diesem Fall müsst ihr nur den Wert von zwei dieser Farben verändern. Das wäre auch im „Style-Book“ möglich, aber über diesen Weg ist es sehr viel einfacher, vor allem dann, wenn ihr es in einem Child Theme anpassen möchtet.

Die Farben verwenden

Nachdem wir nun einige Farben haben, können wir diese verwenden. Um ein wenig mehr „Branding“ in das Theme zu bekommen, könnten wir mit der Header-Farbe anfangen. Das eigentliche Markup für den Header erstellen wir später, fangen wir also erst einmal im Website-Editor an:

Wie kommen wir zu diesem Ergebnis? Zuerst einmal navigieren wir zu „Design > Website-Editor“. Dort klicken wir dann zweimal in den Header und anschließend auf den „Bearbeiten“ Button. Ein alternativer Weg hierher ist „Design > Website-Editor >Vorlagen > Header“ und dann den Header auswählen, den ihr bearbeiten wollt (wir haben aktuell nur einen). Dort klick ihr entweder auf das „Bearbeiten Icon“ (den Beistift) oben links oder ihr klickt einfach noch einmal in der Header im Haupt-Fenster.

Anschließend öffnen wir dann die „Listenansicht“ und wählen dort den ersten „Gruppe“ Block aus. In diesem gehen wir dann in den „Block“ Einstellungen auf den „Stile“ Tab (der schwarz/weiße Kreis). Als „Hintergrund“ Farbe wählen wir die „Brand Primary“ Farbe (rot) und klicken dann auf die „Text“ Farbe.

Da Waipoua im Theme eine 75% transparent verwendet, wählen wir erst einmal „White“ (die zweite Farbe in der ersten Reihe) aus. Anschließend klicken wir auf den „Vorschau-Bereich“. Das ist das weiße Quadrat (in diesem Screenshot mit dem „Schachmuster“) über dem Quadrat mit „White #FFFFFF“ (Im Screenshot „Individuell #FFFFFFBF“). Jetzt können wir entweder direkt den HEX Code mit der Transparenz eintragen (in diesem Fall „#FFFFFFBF“), oder aber wir wählen im Drop-Down RGB oder HSL aus und ändern dann den Wert für „A“ auf einen Wert von „75“. Das sollte uns dann das Ergebnis aus dem Screenshot geben.

Ich hoffe, ihr konntet mir bis hierhin folgen. Für jeden einzelnen Schritt einen Screenshot zu machen, wäre etwas viel gewesen. Vielleicht muss ich nächstes Mal doch ein Video aufnehmen. 😀

Die Änderungen ins Theme speichern

Alle Änderungen, die wir bisher am Header gemacht haben, stehen aktuell nur in der Datenbank. Sie spiegeln sich noch nicht in den Dateien unseres Themes wider. Um die Änderungen aus dem Header Template zu kopieren, könnten wir das rohe HTML aus dem Website-Editor in unsere Datei kopieren. Anschließend könnten wir die Änderungen gefahrlos im Website-Editor zurücksetzen.

Ein einfacherer Weg ist hier allerdings wieder die Verwendung des Create Block Theme Plugins. Es fügt im Website-Editor ein Icon hinzu, über dass ihr dann den aktuellen Zustand des Themes als ZIP-Datei herrunterladen oder die Dateien in euren Theme aktualisieren könnt. Beachtet aber, dass hierbei die Dateien ohne weitere Rückfrage sofort überschrieben werden. Ich hoffe, dass ihr alle Versionsverwaltung und eine gute IDE verwendet, dann ist das nicht so schlimm. Aber seid hier vorsichtig.

Nachdem ihr auf das „Schraubenschlüssel“ Icon geklickt habt, öffnet sich die „Block-Theme erstellen“ Plugin-Seite. Darin könnt ihr dann auf den „Änderungen speichern“ Button klicken. Das speichert alles in euer Theme – nicht nur das aktuell geöffnete Template – und setzt anschließend alle Anpassungen in der Datenbank zurück.

Wir werden diese Option in Zukunft jedes Mal nutzen, nachdem wir Änderungen im Website-Editor vorgenommen haben. Nachtürlich könnten wir auch jedes Mal manuell den Code in die theme.json Datei schreiben, aber wieso sollten wird das tun? Stattdessen können wir das Theme einfach im Website-Editor erstellen und bekommen immer sofort eine Live-Vorschau.

Fazit

Das Setzen von ein paar Farben klingt erst einmal einfach, aber auch hier bedarf es etwas Planung. Ihr solltet wirklich sicher gehen, das von Anfang an richtig zu machen, bevor ihr anfangt Farben zu verwenden. Denn wenn ihr später etwas daran ändern möchtet, ist es sehr viel mehr Aufwand.

Nachdem wir nun unsere ersten Änderungen im Website-Editor gemacht haben, werden wir uns im nächsten Schritt um das Layout kümmern. Das wären zum Beispiel Spalten/Sidebar, Seitenbreite, Elemente im Header und Footer, usw. Es gab ein paar Dinge, bei denen ich mir nicht sicher war, ob diese umsetzbar wären, aber nachdem WordPress 6.5 gerade veröffentlicht wurde, scheinen einge Dinge einfacher geworden zu sein. Wenn das geklappt hat, könnt ihr euch schon bald auf den nächsten Blogbeitrag freuen.

Nachdem wir im letzten Beitrag das rohe Theme erstellt haben, ist es nun an der Zeit, ein paar grundlegende Dinge hinzuzufügen. Um schnell ein ähnlicheres Aussehen zu erhalten, könnten wir mit den Schriftarten anfangen.

Mein Blog verwendet die Standard-Schriftarten von Waipoua, ich habe allerdings die Hauptfarben in einem Child-Theme geändert. Das Theme sieht ohne Änderungen wie folgt aus:

WIe ihr also sehen könnt habe ich den Rot-Ton im Header geändert, sowie die Hintergrundfarbe der Sidebar. Außerdem habe ich die Social-Icons oben rechts eingefärbt. Der Rest sieht aber ziemlich ähnlich zum Parent-Theme aus.

Hinzufügen der Schriftarten

Das wird ein interessantes Kapitel. Stand heute würde man hierzu folgendes tun:

1. Herunterladen der Schrifarten – für Google Fonts verwende ich hierzu normalerweise den google-webfonts-helper und lade alle Varianten herunter
2. Speichern der Schriften in einem Ordner in eurem Theme
3. Definieren der Schriften in der theme.json Datei

Wenn ihr diesen manuellen Weg gehen wollt, dann ich euch die hervorragende Anleitung von Carolina auf der „Full Site Editing With WordPress“ website sehr empfehlen.

Aber da es bald eine neue Möglichkeit gibt Schriften zu einem Block-Theme hinzuzufügen, möchte ich diesen Weg kurz zeigen. Mit der aktuellen WordPress Version 6.4 müsst ihr hierzu noch zusätzlich das Gutenberg-Plugin installieren, da die Funktion noch nicht „final“ ist und somit noch nicht mit Version 6.4 in den Core gemerged wurde. Wir müssen uns also noch ein wenig gedulden.

Mit dem aktivierten Gutenberg-Plugin navigiert ihr dann zu „Design > Theme-Schriften verwalten“. Hier erhaltet ihr die folgende Ansicht:

Hier seht ihr eine Übersicht der aktuell im Theme vorhandenen Schriften auf der rechten Seite, sowie eine Vorschau für diese Schriften. Oben rechts könnte ihr die beiden Buttons „Google Font hinzufügen“ oder „Lokale Schrift hinzufügen“ verwenden, um eine neue Schriftart zu eurem Theme hinzuzufügen.

Fangen wir mit der Schriftart für Überschriften an. Hierfür wird die Google Font „Oswald“ verwenden. Wir klicken also auf den Button „Google Font hinzufügen“ und wählen dann im Dropdown die Schriftart aus. Anschließend sehen wir alle verfügbaren Varianten. Ich habe einfach alle über die Checkbox im Tabellenkopf ausgewählt:

Das Waipoua Theme hatte nur die Stärke 400 verwendet, aber da man mit einem Block-Theme mehr Kontrolle darüber hat, welche Schriften man wo verwenden möchte, fand ich es eine gute Idee einfach alle verfügbaren Varianten zur Verfügung zu stellen. Damit sieht dann der Text immer optimal aus, ganz egal, welche Stärke (sofern verfügbar) man verwendet.

Nach einem Klick auf den „Google Fonts zu deinem Theme hinzufügen“ Button solltet ihr eine Erfolgsmeldung wie „Die Schrift Oswald wurde zum Theme Kauri hinzugefügt“ sehen. Das gleiche machen wir jetzt noch einmal für die Schrift „PT Sans“ und wählen auch hier wieder alle Varianten aus.

Wenn wir nun zu „Theme-Schriften verwalten“ zurück navigieren, dann sollten wir diese neuen Schriften in der rechten Sidebar sehen können. Insgesamt haben wir zwei Schriften mit insgesamt 10 Varianten und einer Gesamtgröße von 1,5 MB hinzugefügt:

Ergebnis des Schriften-Imports

Sehen wir uns mal an, was wir nach dem letzten Schritt erhalten haben. Die Orderstruktur des Themes sieht nun wie folgt aus:

$ tree .
.
├── assets
│   └── fonts
│       ├── oswald_normal_200.ttf
│       ├── oswald_normal_300.ttf
│       ├── oswald_normal_400.ttf
│       ├── oswald_normal_500.ttf
│       ├── oswald_normal_600.ttf
│       ├── oswald_normal_700.ttf
│       ├── pt-sans_italic_400.ttf
│       ├── pt-sans_italic_700.ttf
│       ├── pt-sans_normal_400.ttf
│       └── pt-sans_normal_700.ttf
├── parts
│   ├── footer.html
│   └── header.html
├── readme.txt
├── screenshot.png
├── style.css
├── templates
│   └── index.html
└── theme.json

Wir haben also einen neuen Ordner „assets/fonts“ und darin liegen die Google Fonts. Da diese aber nur als TTF-Dateien von fonts.google.com heruntergeladen werden können, erhalten wir auch genau dieses Format mit der (aktuellen) Schriften-Verwaltung von Gutenberg.

Aber schauen wir uns mal die theme.json Datei an, denn das ist der interessantere Teil des ganzen Schritts. Ihr solltet nun etwas finden, das in etwa so aussieht:

{
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
					"name": "System Font",
					"slug": "system-font"
				},
				{
					"fontFamily": "Oswald",
					"slug": "oswald",
					"fontFace": [
						{
							"fontFamily": "Oswald",
							"fontStyle": "normal",
							"fontWeight": "200",
							"src": [
								"file:./assets/fonts/oswald_normal_200.ttf"
							]
						},
						{
							"fontFamily": "Oswald",
							"fontStyle": "normal",
							"fontWeight": "300",
							"src": [
								"file:./assets/fonts/oswald_normal_300.ttf"
							]
						},
						{
							"fontFamily": "Oswald",
							"fontStyle": "normal",
							"fontWeight": "400",
							"src": [
								"file:./assets/fonts/oswald_normal_400.ttf"
							]
						},
						{
							"fontFamily": "Oswald",
							"fontStyle": "normal",
							"fontWeight": "500",
							"src": [
								"file:./assets/fonts/oswald_normal_500.ttf"
							]
						},
						{
							"fontFamily": "Oswald",
							"fontStyle": "normal",
							"fontWeight": "600",
							"src": [
								"file:./assets/fonts/oswald_normal_600.ttf"
							]
						},
						{
							"fontFamily": "Oswald",
							"fontStyle": "normal",
							"fontWeight": "700",
							"src": [
								"file:./assets/fonts/oswald_normal_700.ttf"
							]
						}
					]
				},
				{
					"fontFamily": "PT Sans",
					"slug": "pt-sans",
					"fontFace": [
						{
							"fontFamily": "PT Sans",
							"fontStyle": "normal",
							"fontWeight": "400",
							"src": [
								"file:./assets/fonts/pt-sans_normal_400.ttf"
							]
						},
						{
							"fontFamily": "PT Sans",
							"fontStyle": "italic",
							"fontWeight": "400",
							"src": [
								"file:./assets/fonts/pt-sans_italic_400.ttf"
							]
						},
						{
							"fontFamily": "PT Sans",
							"fontStyle": "normal",
							"fontWeight": "700",
							"src": [
								"file:./assets/fonts/pt-sans_normal_700.ttf"
							]
						},
						{
							"fontFamily": "PT Sans",
							"fontStyle": "italic",
							"fontWeight": "700",
							"src": [
								"file:./assets/fonts/pt-sans_italic_700.ttf"
							]
						}
					]
				}
			]
		}
	}
}

Nach der „System Font“ finden wir nun eine neue Definition für jede Variante unsere beiden neuen Schriften. Das ist eine ganze Menge Code, der uns hier automatisch erstellt wurde, und den wir somit nicht selbst schreiben müssen.

Wenn ihr nun aber die Seite neu ladet, dann werdet ihr erst einmal keine Änderung sehen. Das liegt daran, dass wir nun zwar die neuen Schriften zu unserem Theme hinzugefügt haben, sie aber noch an keiner Stelle in der theme.json Datei verwenden.

Schriften für Inhalt und Überschriften festlegen

Man kann die Schriftart für die ganze Seite, für bestimmte „Arten“ von Elementen, oder aber für individuelle Blöcke einstellen. Um das Ergebnis zu erhalten, das wir wollen, müssen wir das folgende zu unserer theme.json Datei hinzufügen:

{
	"styles": {
		"elements": {
			"heading": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--oswald)",
					"fontWeight": "400"
				}
			}
		},
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--pt-sans)",
			"fontWeight": "400"
		}
	}
}

Das legt die Schriften für den Inhalt sowie alle Überschriften fest, also sowohl Überschriften im Inhalt, als auch im core/site-title oder anderen „Überschriften“ Blöcken. Wir werden das später noch einmal etwas genauer anpassen müssen, aber aktuell erhalten wir damit das folgende Ergebnis:

Wenn es um die Schriften geht, dann sieht unsere Seite schon sehr viel mehr nach dem Original-Theme aus. Aber das ist natürlich lediglich der erste Schritt. Wir müssen noch viele weitere Dinge anpassen.

Bonus: Eine WOFF2 anstelle einer TTF Schrift verwenden – der beide

An der aktuellen Lösung mag ich nicht wirklich, dass sie TTF Dateien verwendet. Diese werden in der Regel für Desktop verwendet, und nicht im Web. Auch wenn sie von den meisten Browsern unterstützt werden, so sind sie doch sehr viel größer.

Wenn wir den google-webfonts-helper verwenden, können wir alle Schriften im WOFF2 Format runterladen und die theme.json Datei entsprechend anpassen. Ich habe hierzu auch noch alle Schriftarten jeweils in einen Unterordner gepackt, um sie besser zu organisieren.

Mit diesen Änderungen konnte ich die Größe aller Fonts von 1,5 MB auf nur noch ungefähr 590 KB für alle Varianten verringern. Auch wenn dieser Schritt nicht unbedingt notwendig ist, würde ich ihn euch doch sehr empfehlen. Es sei denn, ihr müsst unbedingt noch sehr alte Browser unterstützen. Dann könnt ihr natürlich auch ein anders Format mit dem google-webfonts-helper herunterladen.

Ihr könnt aber auch die TTF-Dateien als Fallback behalten. Dann könnte das in etwa wie folgt aussehen:

{
	"fontFamily": "Oswald",
	"fontStyle": "normal",
	"fontWeight": "200",
	"src": [
		"file:./assets/fonts/oswald/oswald-v53-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-200.woff2",
		"file:./assets/fonts/oswald/oswald-v53-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-200.ttf"
	]
}

Das vollständige Beispiel findet ihr im GitHub Repository des Themes.

Versteckte Funktion der „Theme-Schriften verwalten“ Funktionalität

Beim committen der Änderungen am Theme war mit aufgefallen, dass die readme.txt Datei verändert worden war. Zuerst dachte ich, dass ich daran bestimmt etwas geändert hatte. Aber dann sind mir folgende zusätzliche Zeilen aufgefallen:

Oswald Font
Copyright 2016 The Oswald Project Authors (https://github.com/googlefonts/OswaldFont) 
This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is available with a FAQ at: https://scripts.sil.org/OFL 
License URL: https://scripts.sil.org/OFL 
Source: http://www.sansoxygen.com
-- End of Oswald Font credits --

PT Sans Font
Copyright © 2009 ParaType Ltd. All rights reserved. 
Copyright (c) 2010, ParaType Ltd. (http://www.paratype.com/public), with Reserved Font Names "PT Sans", "PT Serif" and "ParaType". 
License URL: http://scripts.sil.org/OFL_web 
Source: http://www.paratype.com
-- End of PT Sans Font credits --

Die Funktionalität kümmert sich also nicht nur darum, dass die Schriften heruntergeladen, im Theme gespeichert und zur theme.json Datei hinzugefügt werden. Sie stelle auch sicher, dass ihr die notwendigen rechtlichen Angaben in euer readme.txt Datei habt. Wie cool ist das denn?! 🤓

Zusammenfassung

Das Hinzufügen von Google Fonts (oder Schriften aus anderen Quellen) kann über zwei Wege geschehen: manuell oder über „Theme-Schriften verwalten“. Während letzteres noch nicht ganz „fertig“ ist, funktioniert es doch erstaunlich gut. Wenn sie jetzt noch eine Funktion hinzufügen, mit der man ein anderes Format auswählen kann (oder den Standard ändern), dann kann ich es kaum erwarten, bis diese Funktion im Core landet.

Ich hatte eigentlich ursprünglich geplant in diesem Beitrag auch noch darüber zu schreiben, wie man Farben und die Breite der Seite festlegt. Aber ich denke mit dem Thema über Schriften reicht es auch für diesen Beitrag.

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. 😁