Ein Child-Theme erstellen

Modul 5: Themes und Plugins · Lesezeit: 9 Minuten

Lernziel: Nach dieser Lektion können Sie ein Child-Theme erstellen und wissen, wann Sie eines brauchen und wann nicht.

Kernbegriffe: Child-Theme, Parent-Theme, Template: in style.css, functions.php, wp_enqueue_style, Template überschreiben, theme.json in einem Child, Create Block Theme

Das Problem, das ein Child-Theme löst

Angenommen, Sie möchten den Kopfbereich Ihres klassischen Themes etwas anders gestalten und passen dafür header.php im Theme-Ordner an. Es funktioniert. Drei Wochen später erscheint ein Update des Themes, das Sie automatisch installieren lassen (wie es sich gehört, Lektion 7.2). Das Update ersetzt alle Dateien des Themes, und Ihre Anpassung ist weg.

Ein Child-Theme ist ein kleines Theme, das sagt: „Verwende alles von diesem anderen Theme (dem Parent-Theme), außer dem, was ich selbst habe.“ Sie legen Ihre Anpassungen im Child-Theme ab. Das Parent-Theme aktualisieren Sie ganz normal weiter, und Ihre Anpassungen bleiben erhalten.

Wann ja und wann nicht

Sie brauchen ein Child-Theme, wenn Sie Dateien eines Themes anpassen oder ergänzen möchten:

• ein Template (bei einem klassischen Theme eine PHP-Datei, bei einem Block-Theme ein HTML-Template) anders haben möchten;
• eigenes CSS wollen, das zu umfangreich für das CSS-Feld ist;
• eigenen PHP-Code wollen, der zur Gestaltung gehört (ein zusätzliches Bildformat, eine zusätzliche Menüposition).

Sie brauchen kein Child-Theme, wenn:

• Sie ein Block-Theme im Website-Editor anpassen: Diese Anpassungen stehen in der Datenbank und überstehen ein Update (Lektion 5.1);
• Sie nur ein bisschen CSS über Zusätzliches CSS hinzufügen (im Customizer bei einem klassischen Theme, oder bei Stile im Website-Editor);
• Sie eine Funktion hinzufügen möchten, die nichts mit der Gestaltung zu tun hat (ein Formular, eine Verknüpfung). Die gehört in ein Plugin, damit sie einen Theme-Wechsel übersteht.

Ein Child-Theme für ein klassisches Theme

Ein Child-Theme ist ein Ordner in wp-content/themes/ mit mindestens einer Datei: style.css. Angenommen, Ihr Parent-Theme liegt in wp-content/themes/hoofdthema/. Erstellen Sie dann einen Ordner wp-content/themes/hoofdthema-child/ mit dieser style.css:

/*
Theme Name:   Hoofdthema Child
Template:     hoofdthema
Description:  Eigen aanpassingen voor example.com
Version:      1.0.0
Text Domain:  hoofdthema-child
*/

/* Ihr eigenes CSS kommt hier unten. */
.site-header { border-bottom: 3px solid #e8a33d; }

Die wichtigste Zeile ist Template:. Dort steht der Name des Ordners des Parent-Themes (nicht der Name, den Sie im Dashboard sehen). Stimmt dieser nicht exakt (Groß-/Kleinschreibung, Bindestriche), meldet WordPress bei Design > Themes, dass das Parent-Theme fehlt.

Außerdem erstellen Sie eine functions.php, um die Stylesheets zu laden. Der saubere Weg:

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'hoofdthema-child',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );
} );

Ob das Parent-Theme sein eigenes Stylesheet selbst lädt, ist von Theme zu Theme unterschiedlich. Schauen Sie in die Dokumentation Ihres Parent-Themes; manche verlangen, dass Sie im Child zusätzlich das Stylesheet des Parents laden, mit get_template_directory_uri() . '/style.css'. Funktioniert Ihre Website nach der Aktivierung ohne Formatierung, wird das Stylesheet des Parents nicht geladen.

Möchten Sie ein Template anpassen, kopieren Sie nur diese eine Datei (zum Beispiel header.php) vom Parent in Ihr Child und bearbeiten die Kopie. WordPress schaut zuerst im Child, dann im Parent. Kopieren Sie nicht alle Dateien: Dann erhalten Sie die Verbesserungen des Parents nicht mehr.

functions.php des Childs ersetzt die des Parents nicht, sondern wird davor geladen. Beide werden ausgeführt.

Ein Child-Theme für ein Block-Theme

Bei einem Block-Theme funktioniert es ähnlich, mit Block-Dateien:

• style.css mit demselben Kopf und Template:;
• theme.json: Diese wird mit der des Parents zusammengeführt, also tragen Sie nur ein, was Sie ändern möchten (zum Beispiel die Farbpalette);
• templates/ und parts/, die die des Parents ersetzen.

Eine functions.php ist bei einem Block-Theme oft nicht nötig, da WordPress die Stile aus theme.json selbst lädt.

Es gibt ein offizielles Plugin, Create Block Theme, das aus dem Website-Editor heraus ein Child-Theme für Sie erstellt, inklusive Ihrer Anpassungen aus der Datenbank. Praktisch, wenn Sie ein Block-Theme angepasst haben und diese Anpassungen in Dateien festhalten möchten (zum Beispiel um sie auf eine andere Website mitzunehmen).

So richten Sie es auf Ihrer Website ein

1. Erstellen Sie den Ordner und die Dateien auf Ihrem eigenen Computer und kontrollieren Sie den Ordnernamen des Parent-Themes.
2. Laden Sie den Ordner mit dem Dateimanager oder per SFTP nach wp-content/themes/ hoch. Oder packen Sie den Ordner als ZIP und laden Sie ihn bei Design > Themes > Neues Theme > Theme hochladen hoch.
3. Gehen Sie zu Design > Themes. Ihr Child-Theme steht dabei. Aktivieren Sie es.
4. Kontrollieren Sie Ihre Website: Menüs und Widgets müssen beim Wechsel zu einem Child möglicherweise neu verknüpft werden; Einstellungen aus dem Customizer gelten pro Theme, also richten Sie diese neu ein oder exportieren Sie sie mit einem Plugin.
5. Das Parent-Theme muss bestehen bleiben. Entfernen Sie es nicht; das Child funktioniert ohne es nicht.

Tun Sie dies am besten zunächst in einer Staging-Umgebung (Lektion 8.3), denn der Theme-Wechsel auf einer vielbesuchten Live-Website kann kurzzeitig etwas unübersichtlich sein.

Zusammenfassung

• Ein Child-Theme bewahrt Ihre Anpassungen an Theme-Dateien außerhalb des Parent-Themes, damit Updates sie nicht überschreiben.
• Sie brauchen es nicht für Anpassungen im Website-Editor oder ein bisschen Zusätzliches CSS; Funktionen gehören in ein Plugin.
• Minimal: ein Ordner mit style.css, in dem Template: exakt den Ordnernamen des Parent-Themes nennt.
• Kopieren Sie nur die Templates, die Sie wirklich anpassen; functions.php des Childs kommt neben die des Parents.
• Das Parent-Theme bleibt bestehen und wird weiter aktualisiert.

Quiz

Aufgabe

Aufgabe A5.2: Ihr Child-Theme kontrollieren. Erstellen Sie ein Child-Theme für Ihr Theme auf Ihrer Testwebsite oder in Staging (Lektion 8.3), und aktivieren Sie es. Geben Sie die Adresse der Website und den Ordnernamen des Child-Themes ein. Das Programm ruft wp-content/themes/<Ordner>/style.css ab und prüft: Die Datei existiert, es steht ein Theme Name: und ein Template: darin, die style.css des Parents in diesem Ordner existiert ebenfalls, und die Startseite verweist auf das Child-Theme (es ist also aktiv).

Aufgabe D5.2: Was haben Sie angepasst und warum? Notieren Sie, welche Dateien sich in Ihrem Child-Theme befinden, was Sie in jeder Datei angepasst haben und warum das nicht im Website-Editor, in Zusätzliches CSS oder in einem Plugin möglich war. Vermerken Sie, dass das Parent-Theme noch installiert ist und automatische Updates hat.

Weiterführende Informationen

Diese Artikel beschreiben die Schritte in den Panels von WebOké; in anderen Panels funktionieren sie ähnlich.

• DirectAdmin Anleitung 11.1: Dateimanager öffnen: die Verzeichnisse in Ihrem Paket
• DirectAdmin Anleitung 11.2: Dateien hochladen und herunterladen
• DirectAdmin Anleitung 11.7: Verbinden mit FileZilla (FTP, FTPS und SFTP)
• Child themes (developer.wordpress.org, Englisch): https://developer.wordpress.org/themes/advanced-topics/child-themes/