Wie bei den meisten Softwareentwicklungen musst du nicht bei Null anfangen, um etwas Wertvolles für deine Kunden oder dich zu schaffen.
Das gilt besonders für WordPress-Blockthemes. Das Plugin Create Block Theme, das im WordPress-Plugin-Repository verfügbar ist, bietet eine unkomplizierte Möglichkeit, ein neues Block-Theme zu erstellen – egal, ob es von einem aktiven Theme abgeleitet ist oder mit einer leeren Leinwand beginnt.
Das Plugin nutzt die Fähigkeiten des WordPress-Site-Editors zur Erstellung von Themes und ist damit ein mächtiges Werkzeug für Theme-Entwickler. Da es jedoch dauerhafte Änderungen an deiner Website vornehmen kann, empfehlen wir dringend, es in einer Staging-Umgebung zu verwenden. Wenn du ein Kinsta-Nutzer bist, kannst du schnell und einfach eine Staging-Umgebung für deine Website einrichten.
Wie erwartet, ist dieses Plugin nur mit Block-Themes kompatibel und funktioniert nicht mit Classic-Themes. In diesem Artikel stellen wir dir die Funktionen des Plugins Create Block Theme vor und erklären dir, wie du es verwenden kannst.
Wie man mit dem Plugin Create Block Theme arbeitet
Das Plugin „Create Block Theme“ bietet zwei Möglichkeiten, auf seine Funktionen zuzugreifen, je nach deinen Vorlieben und deinem Arbeitsablauf:
Du kannst entweder über das WordPress Admin-Dashboard unter Darstellung > Blocktheme erstellen auf die Einstellungen des Plugins zugreifen.
Hier findest du eine Liste von Optionen, darunter das Speichern von Änderungen am aktuellen Theme, das Erstellen neuer Themes oder das Exportieren von Themes. Diese Methode ist zwar einfach, hat aber im Vergleich zum Site Editor nur wenige Funktionen.

Wir empfehlen, das Plugin im WordPress-Site-Editor zu verwenden, um ein optimales Ergebnis zu erzielen. Wenn du das Schraubenschlüssel-Symbol im Seiteneditor auswählst, kannst du alle Funktionen des Plugins direkt in einer Live-Bearbeitungsumgebung freischalten. Dank dieser Integration kannst du deine Änderungen nahtlos in der Vorschau anzeigen und anpassen.

Die Funktionen des Create Block Theme-Plugins erkunden
Das Plugin Create Block Theme bietet eine Reihe von Funktionen, mit denen du Blockthemen effizient erstellen, anpassen und exportieren kannst. Schauen wir uns jede Funktion im Detail an:
1. Änderungen an einem Theme speichern
Das Konzept und die Ausführung sind ganz einfach. Ändere im Seiteneditor deine Stile, Vorlagen und Muster in das aktive Thema und speichere deine Arbeit.

Die Schaltfläche Änderungen speichern dient dazu, das zu speichern, was du exportieren möchtest, und nicht die Änderungen am Theme, die du vorgenommen hast und die nur mit der Standardschaltfläche Speichern gespeichert werden können. Gespeicherte Änderungen können immer mit dem WordPress-Revisionstool zurückgesetzt werden (ohne das Plugin zu benötigen).
Wie du oben siehst, hast du acht Optionen, wenn du das Theme exportieren möchtest:
- Schriftarten speichern
- Template-Änderungen speichern
- Nur geänderte Vorlagen verarbeiten
- Synchrone Muster speichern
- Text lokalisieren
- Bilder lokalisieren
- Navigationsverweise entfernen
2. Eine Themevariation erstellen
Auch wenn es auf den ersten Blick nicht offensichtlich ist, kannst du mit dieser Option nicht nur eine Stilvariation erstellen, sondern auch eine neue Farbpalette und/oder einen Schriftsatz (eine Sammlung von Schriftarten, die auf Text, Links, Überschriften, Beschriftungen und Schaltflächen angewendet werden können).
In dem Beispiel unten haben wir einen Stil „Meine neue Variation“ erstellt. Dazu musst du mindestens eine neue Farbpalette und einen neuen Schriftsatz erstellen, die mit der neuen Stilvariation verknüpft werden. Beachte, dass du hier nur die neue Variante siehst (ohne Änderungen an den Standardfarbpaletten und -sätzen).

Im folgenden Beispiel haben wir eine neue Farbpalette mit zwei Farben erstellt, die auf jede Stilvariation angewendet werden kann. Die linke Seite zeigt die Erstellung von zwei benutzerdefinierten Farben für die neue Farbpalette. Die Mitte zeigt den Speichervorgang. Die rechte Seite bestätigt die neue benutzerdefinierte Farbpalette.

Schließlich haben wir hier einen neuen Schriftsatz erstellt. Eine neue Schriftart, Roboto, wird hinzugefügt und dann den Text- und Überschriftenelementen zugewiesen (nicht abgebildet).

Die rechte Seite zeigt die Schriftarten an, die für den neuen Schriftsatz verwendet werden, die Mitte zeigt den Speichervorgang und die rechte Seite bestätigt den neuen Schriftsatz.
Kurz gesagt: Du kannst nicht nur eine komplette Stilvariation erstellen, sondern auch eine eigene Farbpalette und/oder einen eigenen Schriftsatz, den du nach Belieben auf dein Theme anwenden kannst
3. Ein leeres Theme erstellen
Wenn du mit einem sauberen, designunabhängigen Theme beginnen möchtest, ist die Option Leeres Theme erstellen der richtige Weg. Sie dient ähnlich wie das Unterstrich-Theme, das während der Classic-Ära des WordPress-Themes bei Entwicklern beliebt war.

Wenn du ein Block-Theme erstellst, wird ein einfaches Standard-Theme erstellt. Wie erwartet, wird ein leeres Theme:
- Nur eine Indexvorlage enthalten.
- Keine Stilvariationen haben.
- Ein einziges Kopf- und Fußzeilentemplate enthalten.
- Es enthält eine minimalistische
theme.json
Datei. - Keine
functions.php
Datei enthalten.
Im Gegensatz zu den Optionen Neues Thema erstellen oder Stilvariationen erstellen wird hier ein völlig neues Theme erstellt, was du auf der Seite Erscheinungsbild sehen kannst.

4. Theme als Zip exportieren
Dies ist eine praktische Funktion des Plugins, denn es ist die effizienteste Art, dein aktives Theme auf eine neue Website zu migrieren. Die Exportfunktion erstellt eine Standard-Theme-Zip-Datei, die für eine andere Website verwendet werden kann.

Worin besteht der Unterschied zwischen dem Export eines Themes auf diese Weise und der in WordPress integrierten Exportfunktion? Keiner. Dies ist nur eine sehr bequeme Art, das aktive Theme zu exportieren.
Wenn du mit der eingebauten Methode zum Exportieren eines aktiven Themes nicht vertraut bist, wähle die Drei-Punkte-Option in der oberen rechten Ecke und suche die Option Exportieren.

5. Ein neues Theme erstellen
Schauen wir uns die beiden Möglichkeiten an, die das Plugin für die Erstellung eines neuen Themes bietet. Wie das leere Theme werden auch die mit dieser Option erstellten Themes auf der Seite Erscheinungsbild > Themes angezeigt und werden nach der Erstellung automatisch zum aktiven Theme.
Egal, welche Option du wählst – ein Theme klonen oder ein Child-Theme erstellen -, du hast die gleichen Möglichkeiten wie beim leeren Theme.

Theme klonen
Beim Klonen eines Themes wird ein Duplikat der gespeicherten Änderungen des aktiven Themes erstellt. Sobald du dich für den Namen des geklonten Themes entschieden hast, kannst du auch die Metadaten für das Theme wie folgt festlegen:
- Name des Themes
- Beschreibung des Themes
- Theme-URI
- Autor
- Autor URI
- Minimale WordPress-Version
Child-Theme erstellen
Das Erstellen eines Child-Themes bietet Entwicklern die Möglichkeit, Änderungen an einem Theme vorzunehmen, ohne den Code zu verändern.
Die Auswahl der Metadaten ist dieselbe wie bei der Erstellung eines Klon-Themes.
6. Theme-Metadaten bearbeiten
Du kannst die Metadaten deines aktiven Themes direkt über das Plugin anpassen. Zu den Metadatenfeldern, die du aktualisieren kannst, gehören:
- Theme-Name: Der Name, der im WordPress-Theme-Manager angezeigt wird.
- Theme-Beschreibung: Eine kurze Beschreibung des Zwecks oder der Funktionen deines Themes.
- Theme URI: Eine URL, die auf die Dokumentation oder Demo des Themes verweist.
- Autor: Der Name des Erstellers des Themes.
- Theme-Version: Die Versionsnummer des Themes.
- Minimale WordPress-Version: Die früheste WordPress-Version, die mit dem Theme kompatibel ist.
- Theme-Tags: Schlüsselwörter, um dein Theme zu kategorisieren und zu beschreiben.
- Empfohlene Plugins: Plugins, von denen dein Theme abhängt oder die es verbessern.
- Schriftart-Credits: Danksagungen für alle in deinem Thema verwendeten Schriftarten.
- Bildnachweise: Danksagungen für alle Bilder, die in deinem Theme verwendet werden.
- Screenshot: Das Vorschaubild, das im WordPress-Theme-Manager angezeigt wird.
Diese Felder sind wichtig, um dein Theme professionell zu gestalten und für den Vertrieb vorzubereiten.
7. Theme.json anzeigen
Wenn du einen schnellen Blick in deine theme.json
Datei werfen möchtest, bietet das Plugin eine schreibgeschützte Ansicht der theme.json
Datei deines Themes. Diese Datei enthält die globalen Stile und Einstellungen für dein Thema, wie Farben, Typografie und Layout-Konfigurationen.
In dieser Datei kannst du schnell überprüfen, welche Anpassungen du an deinem Theme vorgenommen hast.

8. Benutzerdefinierte Stile anzeigen
Bei Block-Themes für Kinder enthält die Datei theme.json
Anpassungen, die sich nicht auf das Eltern-Theme auswirken. Dadurch wird sichergestellt, dass das übergeordnete Thema unberührt bleibt, während du bestimmte Änderungen im untergeordneten Theme vornimmst.
Die Schnittstelle zum Anzeigen dieser benutzerdefinierten Stile ist die gleiche wie die für die theme.json
Datei des Elternthemas.
9. Theme zurücksetzen
Mit dieser Option kannst du Änderungen an deinem Theme, einschließlich der Stile, Vorlagen und Vorlagenteile, auf den Stand zurücksetzen, den sie beim letzten Speichervorgang hatten.

Für einen robusteren Ansatz kannst du die WordPress Revisions-Funktion nutzen. Diese eingebaute Funktion bietet einen detaillierten Verlauf deiner Änderungen und ermöglicht es dir, dein Theme präzise auf einen früheren Zustand zurückzusetzen.

Zusammenfassung
Wenn du mit der Entwicklung eines benutzerdefinierten Block-Themes beginnst, ist das Plugin Create Block Theme ein ideales Werkzeug. Es nutzt alle Möglichkeiten von WordPress als Tool zur Theme-Erstellung und macht dein Theme schneller.
Während du mit dem Plugin arbeitest, erhältst du Browser-Warnungen, die dir helfen, die nächsten Schritte zu verstehen.
Im Wesentlichen ermöglicht dieses Plugin einen Datentransfer von der Datenbank zum Dateisystem. Wenn du Änderungen an einem Theme vornimmst, werden diese in der Datenbank gespeichert. Das Plugin holt diese Änderungen aus der Datenbank und erstellt die Dateien, die für ein neues Theme und/oder für einen Export benötigt werden, falls erforderlich.
Da sich das Plugin in aktiver Entwicklung befindet, kannst du mit Verbesserungen rechnen, musst aber auch auf mögliche Änderungen achten. Wenn du eine bestimmte Funktion testest, verwende immer eine Testumgebung. Bei Kinsta bieten wir Tools an, die es Theme-Erstellern und Entwicklern leicht machen, mit WordPress zu arbeiten.
Teste Kinsta noch heute und entdecke, wie wir dir helfen können, tolle WordPress-Themes zu erstellen!