So erstellen Sie ein Block-Child-Theme in WordPress

Veröffentlicht: 2023-07-14

Stellen Sie sich dieses Szenario vor: Sie haben gerade ein nahezu perfektes Thema für die Verwendung auf Ihrer Website gefunden. Es ist gut gestaltet und enthält die gewünschten Layouts. Sie möchten jedoch die Farbpalette ändern und Kunden daran hindern, einige Bereiche zu ändern. Leider ist es bei dem von Ihnen verwendeten Theme nicht möglich, die Standardfarben zu entfernen oder Blöcke zu sperren.

Während Sie die Dateien des Themes direkt bearbeiten könnten, gehen alle Ihre Änderungen verloren, wenn Sie Aktualisierungen des Themes durchführen. Sie könnten mithilfe eines Code-Snippet-Plugins ein wenig benutzerdefiniertes CSS hinzufügen, dies ändert jedoch nichts an den Stiloptionen, die angemeldeten Benutzern zur Verfügung stehen.

Also was kannst du tun? Wie ändern Sie die verfügbaren Optionen für den globalen Stil? Dafür benötigen Sie ein Block-Child-Theme.

Was ist ein WordPress-Child-Theme?

Laut der WordPress-Entwicklerdokumentation:

Ein untergeordnetes Thema erbt das Erscheinungsbild des übergeordneten Themas und alle seine Funktionen, kann jedoch verwendet werden, um Änderungen an jedem Teil des Themas vorzunehmen. Auf diese Weise werden Anpassungen von den Dateien des übergeordneten Themes getrennt gehalten. Durch die Verwendung eines untergeordneten Themes können Sie das übergeordnete Theme aktualisieren, ohne dass sich dies auf die Anpassungen auswirkt, die Sie an Ihrer Website vorgenommen haben.

Um also ein untergeordnetes Theme in WordPress nutzen zu können, muss auch das übergeordnete Theme installiert sein. Ihr untergeordnetes Thema erbt alles vom übergeordneten Thema, mit einigen hinzugefügten Variationen.

So erstellen Sie ein untergeordnetes Thema

Möchten Sie eine Codeoption zum Anpassen des Stils auf Ihrer Website bevorzugen? Wie beim Überschreiben anderer WordPress-Themes ist die Verwendung eines untergeordneten Themes die beste Möglichkeit, Code zu überschreiben. Wenn Ihr Theme aktualisiert wird, bleibt der Code Ihres untergeordneten Themes erhalten.

In diesem Artikel behandeln wir die Schlüsselkomponenten, die ein gutes WordPress-Child-Theme ausmachen, und stellen ausführliche Leseressourcen bereit.

1. Wann sollte ein Block-Child-Theme verwendet werden?

Kinderthemen sind oft eine tolle Lösung. Wenn Sie jedoch nur ein wenig CSS-Code hinzufügen möchten, ist ein ganzes untergeordnetes Thema möglicherweise übertrieben. Ziehen Sie ein Plugin wie Code Snippets in Betracht, um ein wenig Anpassungen vorzunehmen.

Anpassen von Kundenseiten

Wenn Sie Websites für Kunden erstellen, möchten Sie möglicherweise einige zusätzliche Anpassungen anbieten.

Wenn Sie die Möglichkeit für Benutzer steuern möchten, neue Blöcke einzufügen, vorhandene Blöcke zu verschieben oder Blöcke zu löschen, möchten Sie möglicherweise eine Blocksperre implementieren. In diesem Einführungs-Tutorial erfahren Sie, wie Sie Blöcke sperren und vieles mehr.

Themenvariationen erstellen

Zusätzlich zur Definition, welche Bereiche des Theme-Layouts Clients ändern können, möchten Sie möglicherweise auch ihre Farbpalettenoptionen ändern, indem Sie die Standardeinstellungen des Themes oder WordPress weglassen und einzigartige Optionen hinzufügen. Sie können auch Farbverläufe und Duoton-Optionen definieren, die auch in Ihrem Theme verfügbar sein sollen.

2. Wählen Sie ein gutes WordPress-Theme

Nicht alle Themes sind gleich. Zusätzlich zu dem, was Sie im Theme-Design sehen, spielen bei der Auswahl eines übergeordneten Themes weitere Faktoren wie die Häufigkeit von Updates, die Qualität des Supports, die Dokumentation und der Ruf des Theme-Entwicklers eine Rolle. Weitere Informationen finden Sie unter So verwenden Sie WordPress-Themes zum Erstellen einer Website.

3. Erstellen Sie eine Testumgebung

Sie haben jetzt das übergeordnete Thema ausgewählt, Markenwerte gesammelt und entschieden, welche Einstellungen Sie überschreiben möchten. Als Nächstes müssen Sie eine Testumgebung einrichten.

Wenn Sie einen verwalteten WordPress-Hosting-Anbieter wie GoDaddys Managed WordPress Hosting nutzen, können Sie Ihre One-Click-Staging-Site als Entwicklungsumgebung verwenden. Wenn Sie zum Hosten beispielsweise cPanel oder VPS verwenden, können Sie eine separate WordPress-Installation einrichten und Ihre vorhandene Site klonen oder in die neue Installation kopieren.

Wenn Sie das Child-Theme nicht auf eine bestehende Site anwenden oder lieber von Grund auf neu erstellen möchten, können Sie mit einem Tool wie MAMP oder DesktopServer von ServerPress eine lokale WordPress-Entwicklungsumgebung auf Ihrem Computer erstellen.

4. Erstellen Sie Ihr Theme-Verzeichnis

Zuerst müssen Sie das übergeordnete Theme installieren. Stellen Sie dann über einen FTP-Client eine Verbindung zu Ihrer Entwicklungsumgebung her und navigieren Sie zum Speicherort Ihrer WordPress-Dateien.

Sie suchen nach folgendem Ordner:

 /wp-content/themes/

Dort finden Sie alle Ihre installierten WordPress-Themes. Jedes Theme verfügt über einen eigenen Ordner oder ein eigenes Verzeichnis, das alle Dateien des Themes enthält. Sie werden der Liste ein neues Verzeichnis hinzufügen, das Ihr untergeordnetes Thema enthält. Am Ende erhalten Sie so etwas wie:

 /wp-content/themes/your-child-theme/

5. Erstellen Sie Ihre Designdateien

Für unser Beispiel gehen wir davon aus, dass wir das Thema „Twenty Twenty Two“ verwenden. Sie müssen dieses Theme installiert haben, damit das untergeordnete Theme darauf verweisen kann.

In Ihrem neuen untergeordneten Theme-Verzeichnisordner erstellen Sie zwei neue Dateien:

 style.css
theme.json

Beide Dateien dienen einem bestimmten Zweck. Die Datei „style.css“ wird verwendet, um WordPress Informationen über das Theme bereitzustellen, wie z. B. den Namen, den Autor, die Tags und die ID des übergeordneten Themes.

Die Datei theme.json wird verwendet, um die vielen Einstellungen in Global Styles und mehr zu definieren. Weitere Informationen zu theme.json finden Sie im Entwicklerhandbuch.

In früheren Classic-Themes war die Datei „functions.php“ in untergeordneten Themes erforderlich. Für untergeordnete Blockthemen ist dieser Schritt nicht erforderlich.

Style.css

Was gehört in Ihre style.css- Datei? In der Entwicklerdokumentation heißt es:

Ihr Stylesheet muss den unten aufgeführten erforderlichen Header-Kommentar ganz oben in der Datei enthalten. Dadurch erhält WordPress grundlegende Informationen zum Thema, einschließlich der Tatsache, dass es sich um ein untergeordnetes Thema mit einem bestimmten übergeordneten Thema handelt.

Sie müssen das Boilerplate in die Datei style.css einfügen, die Ihre Header-Informationen enthält. Der Vorlagenname: entspricht dem Ordnernamen (Verzeichnisnamen) des übergeordneten Themas, auf dem Sie aufbauen. Der Name der Textdomäne ist für Ihr WordPress-Child-Theme eindeutig.

Unten finden Sie ein Beispiel für ein untergeordnetes Thema mit Twenty Twenty Two:

 /*
Themenname: Twenty Twenty-Two Child
Theme-URI: https://example.com/
Autor: Ihr Name
Autor-URI: https://example.com/
Beschreibung: Twenty Twenty Two Child Theme
Erfordert mindestens: 5.8
Getestet bis: 5.9
Erfordert PHP: 5.6
Version: 0.1
Lizenz: GNU General Public License v2 oder höher
Lizenz-URI: http://www.gnu.org/licenses/gpl-2.0.html
Textdomäne: twentytwentytwo-child
Vorlage: twentytwentytwo
Tags: benutzerdefinierte Farben, benutzerdefiniertes Menü, benutzerdefiniertes Logo, Editor-Stil, vorgestellte Bilder, vollständige Website-Bearbeitung, Blockmuster

Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two Child wird unter den Bedingungen der GNU GPL vertrieben.
*/

Theme.json

Weitere Informationen zu theme.json finden Sie in der Entwicklerdokumentation. Werfen wir einen Blick auf die Datei Twenty Twenty Two theme.json:

 {
 "Version 2,
 "Einstellungen": {},
 "Stile": {},
 "customTemplates": {},
 "templateParts": {}
}

Innerhalb jedes dieser Stile stehen Ihnen weitere Stile zur Verfügung. Im Stilbereich verwendet Twenty Twenty Two beispielsweise Folgendes:

 {
 "Einstellungen": {
 „appearanceTools“: wahr,
 "Farbe": {
 „Duoton“: [
 {
 "Farben": [
 „#000000“,
 „#ffffff“
 ],
 „slug“: „Vordergrund und Hintergrund“,
 „name“: „Vorder- und Hintergrund“
}

Benötigen Sie Hilfe beim Erstellen einer theme.json-Datei? Sehen Sie sich themegen.app an, um eine Anleitung zum Erstellen vieler Auswahlmöglichkeiten für Ihre theme.json-Datei zu erhalten.

6. Anpassen Ihres Block-Child-Themes

Auch wenn Sie Ihre theme.json-Datei ganz einfach erstellen und an Ihr Theme anhängen können, müssen Sie noch ein paar andere Entscheidungen treffen. Child-Themes und sogar Block-Themes sind ein neuer Bereich für WordPress. Der Site Editor verfügt zum Zeitpunkt dieses Beitrags eindeutig über ein Beta-Label. Sie möchten noch einmal nachschlagen, um zu sehen, was in untergeordneten Themen, wie z. B. Vorlagenteilen, funktioniert und was nicht.

Darüber hinaus finden Sie möglicherweise Einstellungen, die Global Styles und theme.json noch nicht unterstützen. Wenn Sie zusätzliches CSS hinzufügen, beispielsweise einen Gruppenblockrahmen mit einem Boxschatten, möchten Sie dies möglicherweise zu Ihrer style.css- Datei hinzufügen.

 .has-primary-border-color {
 Kastenschatten: .1rem .1rem .05rem #647BAF ;
}

7. Testen Sie Ihr Child-Theme

Sobald Sie das Gefühl haben, dass Ihre Website in Ihrer aktuellen Entwicklungsumgebung gut aussieht, ist es an der Zeit, sie zu testen, bevor Sie sie auf eine Live-Website hochladen.

  • Testen Sie in verschiedenen Browsergrößen, z. B. mobilen Ansichtsfenstern
  • Testen Sie in verschiedenen Browsern oder verwenden Sie ein Tool wie BrowserStack
  • Überprüfen Sie die Barrierefreiheitsstandards. Beginnen Sie mit WebAim

8. Bereiten Sie das Hochladen Ihres Block-Child-Themes vor

Wenn Sie auf einer Staging-Site entwickelt haben, sind Ihre Dateien genau dort, wo sie sein müssen. Sie können Ihre Hosting-Optionen aufrufen, um die Staging-Site zum Leben zu erwecken. Wenn Sie Dateien in einer lokalen Entwicklerumgebung erstellt haben, ist es an der Zeit, die Dateien „style.css “ und „theme.json“ zusammen als eine ZIP-Datei zu komprimieren und auf Ihre Website hochzuladen.

Erinnern wir uns noch einmal an die Erstellung Ihres Block-Child-Themes

  1. Entscheiden Sie, ob Sie ein Block-Child-Theme benötigen
  2. Wählen Sie ein übergeordnetes Thema
  3. Konfigurieren Sie Ihre Testumgebung
  4. Erstellen Sie Ihr Themenverzeichnis
  5. Erstellen Sie Ihre Designdateien
  6. Passen Sie Ihr Block-Child-Theme an
  7. Testen Sie Ihr Child-Theme
  8. Laden Sie sie auf die Live-Site hoch

Wie klassische Themes in WordPress benötigen Block-Themes weiterhin einen Ort zum Speichern von Anpassungen, die nicht überschrieben werden, wenn das übergeordnete Theme ein Update erhält. Wenn Sie ein Block-Child-Theme erstellen, können Sie Optionen hinzufügen, sperren und weglassen, die für andere Benutzer auf der Site verfügbar sind.