In diesem Artikel möchte ich euch zeigen, wie ihr ganz leicht ein eigenes Block Theme erstellen und bearbeiten könnt.
Die Erstellung des Themes
Das Plugin „Create Block Theme“
Mit dem Plugin „Create Block Theme“ lässt sich quasi auf Knopfdruck ein eigenes Theme erstellen. Alternativ kann man auch ein Child Theme eines bestehenden Themes erstellen.
Nach der Installation des Plugins ruft ihr als erstes den Website-Editor auf. Diesen findet ihr am Admin Menü unter Design. Allerdings müsst ihr dafür ein Block Theme aktiviert haben. Ich nutze für dieses Beispiel das WordPress eigene Theme Twenty Twenty-Four.
Im Website-Editor angekommen klickt ihr nun irgendwo auf die Seite. Dann öffnet sich rechts eine Leiste. Dort gibt es nun einen Tab, der mit einem Schraubenschlüssel gekennzeichnet ist.
Klickt ihr auf den Schraubenschlüssel, öffnet sich das Menü des „Create Block Theme“-Plugin.
Dort gibt es den Punkt „Create Blank Theme“. Mit dieser Option könnt ihr ein völlig jungfräuliches Block Theme erstellen.
Unter „Theme erstellen“ könnt ihr alternativ das aktuelle Theme klonen oder ein Child Theme erstellen.
Nun füllt ihr die Felder aus.
Der Theme-Name muss eingegeben werden.
Mit einem Klick auf Additional Theme MetaData könnt ihr den Bereich öffnen, in dem ihr noch weitere Meta Daten eingeben könnt. Eine Beschreibung ist immer von Vorteil, wenn ihr schon wisst, wie das Theme später aussehen soll und welche Eigenschaften es mitbringt.
Theme-URI könnt ihr eintragen, wenn ihr später eine Webseite für das Theme erstellen wollt.
Autor und URI des Autors macht auch Sinn, falls vorhanden.
Die Minimum WordPress Version würde ich immer auf die aktuelle stellen, da ihr das Theme ja gerade mit dieser Version entwickelt.
Ihr könnt die Daten auch später in der style.css und der readme.txt eintragen oder ändern.
Nun klickt ihr auf „Create Blank Theme“ und das Theme wird erstellt und aktiviert.
Die theme.json Datei
Bei dem Block Themes enthält die theme.json alle Informationen darüber, wie die Blöcke auszusehen haben, wenn man sie hinzufügt. Hier gibt es globale Einstellungen bis hin zu den feinsten Einstellungen der einzelnen Blöcke. Hier könnt ihr das Theme und alle Blöcke nach eurem Belieben stylen.
Wenn ihr euch jetzt die automatisch erstellte theme.json Datei im Theme Ordner anschaut, sieht diese folgendermaßen aus.
{
"$schema": "https://schemas.wp.org/wp/6.6/theme.json",
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "620px",
"wideSize": "1000px"
},
"spacing": {
"units": [ "%", "px", "em", "rem", "vh", "vw" ]
},
"typography": {
"fontFamilies": [
{
"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
"name": "System Font",
"slug": "system-font"
}
]
},
"useRootPaddingAwareAlignments": true
},
"templateParts": [
{
"area": "header",
"name": "header"
},
{
"area": "footer",
"name": "footer"
}
],
"version": 3
}
Wie ihr sehen könnt, ist diese noch nicht sehr groß. Wir werden später dafür sorgen, dass sich das ändert. Ganz ohne manuelle Bearbeitung der Datei.
Die Schriftarten
In diesem Zustand hat unser neues Theme noch keine Schriftarten. Ich arbeite gerne mit lokalen Schriftarten. Dies reduziert den Traffic beim Seitenladen und ist DSGVO freundlich.
Den Bereich „Schriftarten“ findet ihr im „Stile“-Tab unter Typografie.
Klickt ihr dann auf den Button „Schriften verwalten“ so öffnet sich das Fenster, in dem ihr die Schriften installieren, aktivieren und löschen könnt.
Hier geht ihr auf den Tab „Schriften installieren“ und bestätigt den Zugriff auf Google Fonts. Danach könnt ihr die Schriftarten installieren, die ihr haben wollt.
Gebt dazu einfach die Schriftart in das Suchfeld ein, die ihr installieren wollt. Ich mache das hier einmal mit Nunito und später noch mit Comfortaa und Quicksand.
Von der ausgewählten Schriftart wählt ihr die Varianten aus, die ihr später nutzen wollt. Ihr könnt auch alle auswählen. Aber zu viele Schriftarten beeinträchtigen die Performance des Themes. Daher sollte man die ungenutzten später wieder deaktivieren.
Seid ihr fertig mit der Auswahl, bestätigt dies mit Klick auf „Jetzt installieren“.
Änderungen in theme.json speichern
Einer der größten Vorteile von Block Themes ist, meiner Meinung nach, dass Änderungen, die im Front End gemacht werden, einfach in die theme.json geschrieben werden können.
Hierzu müssen wir wieder das „Create Block Theme“ Menü aufrufen.
Mit einem Klick auf „Save Changes to Theme“ kommt ihr in ein Untermenü.
Wählt hier „Save Fonts“ aus. Die anderen Haken könnt ihr erstmal weglassen. Klickt danach ganz unten auf „Änderungen speichern“.
Nach dem neu Laden der Seite könnt ihr in der Schriftarten Bibliothek sehen, dass die installierten Schriften nun unter „Schriften des Themes“ zu finden sind. Wie eben schon erwähnt, habe ich zusätzlich noch Nunito, Comfortaa und Quicksand installiert.
Ihr seht auch, dass oben unter „Installierte Schriften“ alle Varianten auf „inaktiv“ gesetzt wurden. Ihr könnt nun dort alle Schriften auswählen und löschen.
Die Schriftarten in der theme.json
Wenn ihr euch nun nochmal die theme.json in eurem Theme Verzeichnis anschaut, werdet ihr feststellen, dass nun alle Schriftarten dort aufgeführt sind. Dort gibt es unter settings nun die Struktur typography.
...
"typography": {
"fontFamilies": [
{
"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
"name": "System Font",
"slug": "system-font"
},
{
"name": "Nunito",
"slug": "nunito",
"fontFamily": "Nunito, sans-serif",
"fontFace": [
{
"src": [
"file:./assets/fonts/nunito/nunito-400-normal.woff2"
],
"fontWeight": "400",
"fontStyle": "normal",
"fontFamily": "Nunito"
},
{
"src": [
"file:./assets/fonts/nunito/nunito-400-italic.woff2"
],
"fontWeight": "400",
"fontStyle": "italic",
"fontFamily": "Nunito"
},
{
"src": [
"file:./assets/fonts/nunito/nunito-700-normal.woff2"
],
"fontWeight": "700",
"fontStyle": "normal",
"fontFamily": "Nunito"
},
{
"src": [
"file:./assets/fonts/nunito/nunito-700-italic.woff2"
],
"fontWeight": "700",
"fontStyle": "italic",
"fontFamily": "Nunito"
}
]
},
{
"name": "Quicksand",
"slug": "quicksand",
"fontFamily": "Quicksand, sans-serif",
"fontFace": [
{
"src": [
"file:./assets/fonts/quicksand/quicksand-400-normal.woff2"
],
"fontWeight": "400",
"fontStyle": "normal",
"fontFamily": "Quicksand"
},
{
"src": [
"file:./assets/fonts/quicksand/quicksand-700-normal.woff2"
],
"fontWeight": "700",
"fontStyle": "normal",
"fontFamily": "Quicksand"
}
]
},
{
"name": "Comfortaa",
"slug": "comfortaa",
"fontFamily": "Comfortaa, system-ui",
"fontFace": [
{
"src": [
"file:./assets/fonts/comfortaa/comfortaa-400-normal.woff2"
],
"fontWeight": "400",
"fontStyle": "normal",
"fontFamily": "Comfortaa"
},
{
"src": [
"file:./assets/fonts/comfortaa/comfortaa-700-normal.woff2"
],
"fontWeight": "700",
"fontStyle": "normal",
"fontFamily": "Comfortaa"
}
]
}
]
},
...Des Weiteren fällt hier auf, dass hier unter settings.typography.fontFamilies.fontFace.src immer auf den Ordner ./assets/fonts/... verwiesen wird. Dieser wurde von „Create Block Theme“-Plugin automatisch erstellt. Somit sind die Fonts automatisch lokal installiert.
Schriftarten den Elementen zuweisen
Als nächstes müsst ihr die neuen Schriftarten den Elementen zuweisen. Die Zuweisung macht ihr ebenfalls im „Stile“-Tab unter Typografie. Dort gibt es unten den Bereich „Elemente“.
Klickt ihr auf eines der Elemente, bspw. Text, könnt ihr hier die Schriftart für jeglichen Standardtext einstellen.
Unter „Links“ die Schriftart für Links, unter „Überschriften“ die Schriftart für Überschriften, usw.
Ich mache hier folgende Einstellungen:
| Element | Schriftart |
|---|---|
| Text | Nunito |
| Links | Nunito |
| Überschriften | Quicksand |
| Beschriftungen | Nunito |
| Buttons | Comfortaa |
Nun müsst ihr das erste Mal Änderungen über den normalen „Speichern“-Button speichern.
Hier bekommt ihr nun immer aufgelistet, was ihr gerade in Begriff seid zu speichern. Ihr habt jetzt die Schriftarten der Elemente geändert. Dies wird hier also korrekt angezeigt.
Klickt also auf „Speichern“.
Dann speichert ihr die Änderungen wieder ins Theme, wie oben beschrieben. Nur diesmal müsst ihr zusätzlich noch die Option „Save Style Changes“ aktivieren.
Wenn ihr euch jetzt die theme.json anschaut, bemerkt ihr eine zusätzliche Struktur „styles“, in der den einzelnen Elementen die Schriftart zugewiesen ist. Dies ist nun Standardeinstellung für das Theme.
...
"styles": {
"elements": {
"button": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--comfortaa)"
}
},
"caption": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--nunito)"
}
},
"heading": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--quicksand)"
}
},
"link": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--nunito)"
}
}
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--nunito)"
}
},
...Die Farbpalette
Die Einstellung der Farbpalette ist nach dem Hinzufügen der Schriftarten denkbar einfach.
Die Farbpalette findet ihr ebenfalls im „Stile“-Tab, wenn ihr dort auf „Farben“ und dann auf „Palette“ klickt.
Wenn ihr unten auf das „+“ neben Individuell klickt, könnt ihr eine Farbe hinzufügen und benennen.
Bei meinem Theme habe ich mich als Primär- und Sekundär Farbe für zwei blau-Töne entschieden. Außerdem habe ich eine eigene Text Farbe angegeben und diverse grau-Töne.
Hier eine Liste:
| Beschriftung | Hex-Code |
|---|---|
| Text | #333333 |
| Primary | #4272ff |
| Secondary | #1a2e66 |
| Dark | #000000 |
| Dark-Grey | #444444 |
| Mid-Grey | #888888 |
| Light-Grey | #cccccc |
| Light | #ffffff |
| Primary Hover | #2e4fb3 |
| Secondary Hover | #2c4fb0 |
Noch eine Anmerkung. Die Farben Dark und Light wären natürlich sinnvoller mit Black und White bezeichnet. Dies gibt allerdings Probleme. Die Farben werden dann, Stand heute, in der Palette nicht dargestellt.
Um die Änderungen zu übernehmen, müsst ihr nur noch Speichern und dann die Änderungen ins Theme schreiben.
Die Farbpalette in der theme.json
Ihr habt nun eine neue Struktur color unter settings. Dort seht ihr nun die gesamte Palette, wie ihr sie angelegt habt. Unter name seht ihr die eingegebene Beschriftung für die Farbe. Den slug hat WordPress automatisch erstellt. Als kleine Schönheitskorrektur entferne ich das „custom-“ vor den jeweiligen slugs. Das ist noch einer der Vorteile der Block Themes. Ihr könnt auch Änderungen in der theme.json vornehmen, ohne euch direkt alles zu zerschießen. Die Änderungen werden dann als Standard für das Theme hinterlegt. Wenn ihr dann bei irgendeiner Option auf „zurücksetzen“ geht, wird der Zustand aus der theme.json wiederhergestellt.
...
"color": {
"palette": [
{
"color": "#333333",
"name": "Text",
"slug": "custom-text"
},
{
"color": "#4272ff",
"name": "Primary",
"slug": "custom-primary"
},
{
"color": "#1a2e66",
"name": "Secondary",
"slug": "custom-secondary"
},
{
"color": "#000000",
"name": "Dark",
"slug": "custom-dark"
},
{
"color": "#444444",
"name": "Dark-Grey",
"slug": "custom-dark-grey"
},
{
"color": "#888888",
"name": "Mid-Grey",
"slug": "custom-mid-grey"
},
{
"color": "#cccccc",
"name": "Light-Grey",
"slug": "custom-light-grey"
},
{
"color": "#ffffff",
"name": "Light",
"slug": "custom-light"
},
{
"color": "#2e4fb3",
"name": "Primary Hover",
"slug": "custom-primary-hover"
},
{
"color": "#2c4fb0",
"name": "Secondary Hover",
"slug": "custom-secondary-hover"
}
]
},
...Die Farb-Slugs als CSS-Variablen
Die Slugs können später als CSS-Variablen aufgerufen werden. Die Variablen haben dabei folgendes Format:
var(--wp--preset--color--SLUG)
SLUG wird dabei durch z.B. primary ersetzt, um einem Element die Primärfarbe zuzuweisen.
Genauso werden auch später die Farben in der theme.json zugewiesen. Ihr könnt zwar auch feste Hex-Codes hinterlegen, dann ändert sich das Theme aber nicht dynamisch, wenn jemand die Farbpalette bearbeitet. Nutzt ihr die Variablen, kann man mit Bearbeiten der Farbpalette ein komplett neues Design zaubern.
Farben den Elementen zuweisen
Als nächstes könnt ihr den einzelnen Elementen, wie Text, Hintergrund, Links, usw. die Farben zuweisen.
Dafür klickt ihr „Stile“-Tab wieder auf Farben und dann seht ihr unten die Elemente aufgeführt. Klickt sie alle einzeln an und wählt die Theme Farben aus, die ihr zuweisen wollt. Ihr müsst vorher einmal die Seite neu laden, damit die Farben auch dem Theme zugewiesen werden, nachdem sie in die theme.json geschrieben wurden.
So sollte es aussehen, wenn ihr die Seite neu geladen habt, und die Farbe für z.B. den Text einstellen wollt. Als Textfarbe nehme ich natürlich die Farbe, die ich auch mit der Bezeichnung „Text“ versehen habe. Wenn ihr mit der Maus über die Farbe geht, wird die Bezeichnung der Farbe eingeblendet.
Am Ende sollte das Ganze dann so aussehen.
Folgende Zuweisungen habe ich gemacht:
| Element | Farbe 1 | Farbe 2 |
|---|---|---|
| Text | Text | |
| Hintergrund | Light | |
| Link | Primary (Standard) | Primary Hover (On Hover) |
| Beschriftungen | Dark-Grey | |
| Button | Light (Text) | Primary (Background) |
| Überschrift | Text | (Keine) |
Um die Änderungen zu übernehmen, müsst ihr wieder Speichern und dann die Änderungen ins Theme schreiben.
Die Elemente und ihre Farben in der theme.json
Nun seht ihr, dass die Elemente zu den Schriftarten auch noch Farbeinstellungen bekommen haben. Außerdem gibt unter styles jetzt die Struktur color. Dort findet ihr die Grundeinstellung für Text und Hintergrund.
...
"color": {
"background": "var(--wp--preset--color--light)",
"text": "var(--wp--preset--color--text)"
},
"elements": {
"button": {
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--light)"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--comfortaa)"
}
},
"caption": {
"color": {
"text": "var(--wp--preset--color--dark-grey)"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--nunito)"
}
},
"heading": {
"color": {
"text": "var(--wp--preset--color--text)"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--quicksand)"
}
},
"link": {
":hover": {
"color": {
"text": "var(--wp--preset--color--primary-hover)"
}
},
"color": {
"text": "var(--wp--preset--color--primary)"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--nunito)"
}
}
},
...Unter link findet ihr sogar noch eine Struktur :hover. Hier wird die Farbeinstellung festgelegt, die ein Link haben soll, wenn man mit der Maus darüberfährt. Dies kann man sich später zu Nutze machen, um auch Buttons eine andere Farbe beim Überfahren mit der Maus zu geben. Dies ist leider anders aktuell nicht möglich.
Buttons für Überfahren mit der Maus stylen
Ich möchte hier nur kurz erklären, wie ihr die Pseudo Klassen der Buttons stylen könnt. Dafür müsst ihr leider in die theme.json schreiben. Ihr müsst der Struktur styles.elements.button die Struktur :hover anhängen. Alternativ geht auch :focus oder :active, wenn ihr diese Pseudo Klassen stylen wollt. Das muss dann folgendermaßen aussehen:
...
"elements": {
"button": {
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--light)"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--comfortaa)"
},
":hover": {
"color": {
"text": "var(--wp--preset--color--primary)",
"background": "var(--wp--preset--color--light)"
}
}
},
...
},
...Schatten
Genauso, wie ihr die Farben konfiguriert habt, könnt ihr auch die Schatten konfigurieren und ins Theme speichern. Darauf gehe ich hier aber nicht im Detail ein.
Das Layout
Was man aber definitiv noch einstellen sollte, ist das Layout.
Die Layout Einstellungen findet ihr wieder im „Stile“-Tab unter „Layout“.
Ich möchte ein eher breites Layout haben. Den Inhalt stelle ich daher auf 1024px und die weite Breite auf 1400px.
Die Innen- und Blockabstände stelle ich auf XS.
Ihr könnt auch rechts auf diese kleinen Schieberegler Symbole klicken. Dann könnt ihr Abstände mit einer Einheit, bspw. „px“ oder „rem“ einstellen.
Um die Änderungen zu übernehmen, müsst ihr nur noch Speichern und dann die Änderungen ins Theme schreiben.
Die Layout Einstellungen in der theme.json
Unter settings seht ihr, dass sich die layout Struktur geändert hat. Unter styles wurde die Struktur spacing erzeugt, die die Einstellungen blockGap und padding enthält, die wir eben gemacht haben.
{
"settings": {
...
"layout": {
"contentSize": "1024px",
"wideSize": "1400px"
},
...
},
"styles": {
...
"spacing": {
"blockGap": "var(--wp--preset--spacing--30)",
"padding": {
"bottom": "var(--wp--preset--spacing--30)",
"left": "var(--wp--preset--spacing--30)",
"right": "var(--wp--preset--spacing--30)",
"top": "var(--wp--preset--spacing--30)"
}
},
...
},
...Euer erstes Block Theme
So schnell habt ihr euer erstes Block Theme erstellt. Und das, ohne auch nur eine Zeile Code zu schreiben.
Im folgenden Beitrag widmen wir uns der Erstellung von Templates. Wir möchten ja, dass unterschiedliche Beitragstypen, unterschiedlich dargestellt werden.
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.