Ein Child Theme für Ihr WordPress-Theme erstellen
Wenn Sie die Dateien eines Themes direkt anpassen, ist Ihre Arbeit beim nächsten Update dieses Themes verloren. Ein Child-Theme verhindert das. Es ist ein kleines Theme, das alles von einem anderen Theme übernimmt, dem Parent-Theme, außer dem, was Sie selbst hineinschreiben. Das Parent-Theme können Sie weiterhin ganz normal aktualisieren. Hier erfahren Sie, wann Sie ein Child-Theme benötigen und wie Sie eines mit dem Dateimanager in DirectAdmin erstellen.
Benötigen Sie es?
| Sie möchten | Child-Theme nötig? |
|---|---|
| Ein Block-Theme im Website-Editor (Design > Editor) anpassen: Farben, Schriftarten, Header und Footer | Nein. Diese Anpassungen werden in der Datenbank gespeichert und bleiben bei einem Update erhalten. |
| Ein paar Zeilen CSS hinzufügen | Nein. Verwenden Sie Zusätzliches CSS im Customizer (klassisches Theme) oder unter Stile im Website-Editor. |
| Eine Funktion hinzufügen, die nichts mit der Gestaltung zu tun hat, etwa eine Anbindung oder ein Formular | Nein. Diese gehört in ein Plugin, damit sie auch nach einem Theme-Wechsel funktioniert. |
| Eine Template-Datei des Themes ändern, viel eigenes CSS oder PHP-Code, der zur Gestaltung gehört | Ja. |
Verwenden Sie ein Block-Theme? Versuchen Sie es dann zuerst im Website-Editor. Möchten Sie Ihre Anpassungen aus dem Website-Editor in Dateien festhalten, kann das offizielle Plugin Create Block Theme ein Child-Theme für Sie erstellen.
Schritt 1: Ordner Ihres Parent-Themes finden
- Öffnen Sie in DirectAdmin den Dateimanager. Siehe Dateimanager öffnen: die Ordner in Ihrem Paket.
- Gehen Sie zu
domains/example.com/public_html/wp-content/themes. - Notieren Sie den genauen Namen des Ordners Ihres Themes, zum Beispiel
hoofdthema. Es geht um den Ordnernamen, nicht um den Namen, den Sie in WordPress sehen.
Schritt 2: Ordner und style.css erstellen
- Klicken Sie im Ordner
themesauf Neuer Ordner und erstellen Sie zum Beispielhoofdthema-child. - Öffnen Sie diesen Ordner, klicken Sie auf Neue Datei und erstellen Sie
style.css. - Klicken Sie mit der rechten Maustaste auf die Datei, wählen Sie Bearbeiten, fügen Sie den untenstehenden Header ein und klicken Sie auf Speichern.
/* Theme Name: Hoofdthema Child Template: hoofdthema Description: Eigen aanpassingen voor example.com Version: 1.0.0 */ /* Je eigen CSS komt hieronder. */
Die Zeile Template: ist die wichtigste. Dort muss genau der Ordnername des Parent-Themes stehen, mit derselben Groß- und Kleinschreibung und denselben Bindestrichen. Stimmt dieser nicht, meldet WordPress, dass das Parent-Theme fehlt.
Schritt 3: functions.php oder theme.json
Klassisches Theme: Erstellen Sie im selben Ordner eine functions.php, die Ihr Stylesheet lädt:
<?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. Sehen Sie in der Dokumentation Ihres Themes nach. Wirkt Ihre Website nach dem Aktivieren ungestaltet, müssen Sie das Stylesheet des Parent-Themes ebenfalls laden, mit get_template_directory_uri() . '/style.css'. Die functions.php des Child-Themes ersetzt die des Parent-Themes nicht: Beide werden geladen, die des Child-Themes zuerst. Kopieren Sie daher niemals Funktionen aus der functions.php des Parent-Themes, denn doppelte Funktionsnamen verursachen einen kritischen Fehler.
Block-Theme: Eine functions.php ist meist nicht nötig. Möchten Sie zum Beispiel die Farbpalette ändern, erstellen Sie eine eigene theme.json. WordPress führt diese mit der des Parent-Themes zusammen, Sie tragen also nur das ein, was Sie ändern möchten.
Möchten Sie ein Template anpassen, kopieren Sie nur diese eine Datei aus dem Parent-Theme an dieselbe Stelle in Ihrem Child-Theme und passen Sie die Kopie an. WordPress sucht zuerst im Child-Theme und danach im Parent-Theme. Kopieren Sie nicht alles, sonst erhalten Sie keine Verbesserungen des Parent-Themes mehr.
Schritt 4: Aktivieren
- Gehen Sie in WordPress zu Design > Themes. Ihr Child-Theme wird dort angezeigt. Klicken Sie auf Aktivieren.
- Prüfen Sie Ihre Website: Header, Menüs, Widgets und Farben. Richten Sie Menüs und Customizer-Einstellungen bei Bedarf erneut ein.
- Behalten Sie das Parent-Theme und halten Sie es aktuell. Ohne Parent-Theme funktioniert das Child-Theme nicht.
Erstellen Sie das Child-Theme lieber auf Ihrem eigenen Computer? Packen Sie den Ordner dann als ZIP-Datei und laden Sie ihn in WordPress unter Design > Themes über die Schaltfläche Neues Theme hinzufügen und anschließend Theme hochladen hoch. Oder laden Sie den Ordner mit dem Dateimanager oder per SFTP nach wp-content/themes hoch, siehe Dateien hoch- und herunterladen.
Zurück zum alten Theme
Aktivieren Sie unter Design > Themes wieder das Parent-Theme. Können Sie sich wegen eines Fehlers in Ihrem Child-Theme nicht mehr in die Verwaltung einloggen, benennen Sie im Dateimanager den Ordner des Child-Themes um, zum Beispiel in hoofdthema-child-uit. WordPress greift dann auf ein Standard-Theme zurück, sofern dieses noch installiert ist. Mehr dazu in Fehler 500 oder "kritischer Fehler" auf Ihrer Website (auch nach einem WordPress-Update).
Weiterführende Informationen
- Child themes auf developer.wordpress.org (Englisch)
Möchten Sie mehr lernen? Besuchen Sie den kostenlosen WordPress-Kurs, Lektion 5.2 Ein Child-Theme erstellen.