Was ist ein Child Theme und wie erstellt man eines in WordPress
Einleitung
Untergeordnete WordPress-Themes sind Themes, die mit einem echten (übergeordneten) WordPress-Theme zusammenarbeiten und alle dessen Funktionen, Eigenschaften und Stil erben. WordPress Child-Themes sind die primäre Methode zur Anpassung von Themes.
Das Parent-Child-Theme-Konzept wurde vom WordPress-Core-Theme entwickelt, um Benutzern eine effiziente und sichere Anpassung ihrer Themes zu ermöglichen. Wie wir alle wissen, werden WordPress-Themes regelmäßig aktualisiert. Wenn ein Theme aktualisiert wird, werden alle benutzerdefinierten Änderungen, die zuvor vorgenommen wurden, überschrieben. Bisher war es nicht möglich, ein WordPress-Theme zu aktualisieren, ohne diese benutzerdefinierten Änderungen zu verlieren. Benutzer hatten zwei Möglichkeiten – entweder ihre Bemühungen zu verschwenden und ihre Arbeit zu verlieren, oder ihre Website aufgrund von Sicherheitslücken des veralteten Themes einem Exploit-Risiko auszusetzen. Im Gegensatz zu übergeordneten Themen ermöglichen untergeordnete Themen, dass Anpassungen separat und unbeeinflusst von der Aktualisierung des übergeordneten Themas erhalten bleiben.
Wann sollte man ein WordPress-Child-Theme verwenden?
Zunächst muss man wissen, dass nicht alle WordPress-Themes nach dem Parent-Child-Theme-Konzept entwickelt wurden. Übergeordnete WordPress-Themes werden oft als Theme-Frameworks bezeichnet, die ihre eigenen Hooks und Filter enthalten. Sie müssen das übergeordnete Theme sorgfältig auswählen und sicherstellen, dass es einfach zu verwenden ist und korrekt funktioniert, wenn es als untergeordnetes Theme konfiguriert wird.
Zweitens müssen Sie den Zweck der Erstellung eines untergeordneten Themas bestimmen. Es gibt Situationen, in denen dies nicht die effektivste Lösung ist, je nachdem, was Sie erreichen wollen.
Wenn Sie ein benutzerdefiniertes Thema verwenden, das speziell für Sie entwickelt wurde, ist es nicht unbedingt erforderlich, ein untergeordnetes Thema zu erstellen, da keine Gefahr besteht, dass Ihre Änderungen verloren gehen. Betrachten Sie dies nicht als eine Empfehlung, kein untergeordnetes Design zu verwenden, sondern als eine mögliche Option. Wenn Sie Ihre Designdateien nicht direkt bearbeiten möchten, können Sie sich für ein untergeordnetes Design entscheiden, wenn Ihr benutzerdefiniertes Design eine solche Konfiguration zulässt. Außerdem ist das Bearbeiten von Theme-Dateien immer mit einem gewissen Risiko verbunden, insbesondere wenn Sie kein erfahrener Entwickler sind.
Falls Ihr Ziel darin besteht, eine bestimmte Funktionalität hinzuzufügen, anstatt designbezogene Anpassungen vorzunehmen, könnte die Verwendung eines Plugins oder das Kodieren eines Plugins ein geeigneterer Ansatz sein. In einem solchen Szenario können Sie die Funktionalität beibehalten, wenn Sie sich jemals entscheiden, vom aktuellen Thema zu einem anderen zu wechseln. Wenn die Funktionalität jedoch in das untergeordnete Thema implementiert wird, geht sie verloren.
Wie funktioniert ein WordPress-Child-Theme?
Wie bereits erwähnt, erbt das Child-Theme das Design und die Funktionalität des Parent-Themes, aber wie funktioniert das genau?
Das Child-Theme enthält spezielle Anweisungen, die WordPress mitteilen, dass es sich um ein Child-Theme handelt und welches das eigentliche Parent-Theme ist. WordPress verwendet dann den Code des Parent-Themes und überschreibt nur die notwendigen Teile mit dem im Child-Theme definierten Code.
Jedes untergeordnete Thema muss über zwei notwendige Dateien verfügen: eine Stylesheet-Datei (style.css) und eine Funktionsdatei (functions.php). Die Stylesheet-Datei enthält einen auskommentierten Text, der WordPress mitteilt, dass es sich um ein untergeordnetes Thema handelt und welches das übergeordnete Thema ist. Die Funktionsdatei enthält eine Funktion, die die Stylesheet-Datei des übergeordneten Themas einordnet, so dass das Stylesheet des untergeordneten Themas zuerst geladen wird. Sie wird auch verwendet, um bestimmte Funktionen hinzuzufügen, indem der erforderliche Code in die Datei eingefügt wird.
Je nachdem, was Sie erreichen wollen, müssen Sie möglicherweise zusätzliche Dateien im Child-Theme erstellen, z.B. Template-Dateien, Template-Teile, Include-Dateien usw.
Die größte Herausforderung bei der Arbeit mit Child-Themes besteht wahrscheinlich darin, den Umgang mit ihnen zu erlernen. Robuste Frameworks erfordern eine gewisse Einarbeitungszeit, da jedes Framework seine eigenen Hooks und Filter hat.
Bevor Sie mit der eigentlichen Erstellung eines Child-Themes beginnen, empfehlen wir Ihnen dringend, auf einer Entwicklungs- oder Staging-Website zu arbeiten. Glücklicherweise bieten wir hier bei der ORC Webhosting GmbH ein Ein-Klick-WordPress-Staging an, so dass Sie alles einfach testen können, bevor Sie es live auf Ihre Produktionswebsite übertragen.
Erstellen eines untergeordneten Themes
Um ein grundlegendes WordPress-Child-Theme zu erstellen, müssen Sie die beiden oben genannten erforderlichen Dateien (Stylesheet- und Funktionsdatei) in einem neuen, unabhängigen Ordner erstellen.
In dieser Anleitung wird ein Beispiel mit dem WordPress-Standard-Theme Twenty Twenty gegeben.
Erstellen eines Ordners für ein Child-Theme
Zuerst muss ein neuer Ordner für die Dateien des Child-Themes erstellt werden. Dieser Ordner muss sich im Verzeichnis der WordPress-Themes (wp-content/themes) befinden. Es wird empfohlen, den Ordner nach dem übergeordneten Theme zu benennen, gefolgt von „-child“, z.B. „twentytwenty-child“.
Sie können einen neuen Ordner mit dem in cPanel integrierten Dateimanager oder mit Ihrem bevorzugten FTP-Client erstellen.
Erstellen einer Stylesheet-Datei
Nachdem Sie den neuen Ordner angelegt haben, müssen Sie darin eine Datei mit dem Namen style.css erstellen.
Diese Datei enthält die CSS-Regeln, die das Aussehen Ihres Designs steuern. Sie müssen den folgenden Header-Kommentar einfügen, der grundlegende Informationen über das Thema enthält und WordPress mitteilt, dass es sich um ein untergeordnetes Thema des definierten übergeordneten Themas handelt.
/*
Theme Name: Twenty Twenty Child
Theme URI: http://meinewebseite.ch
Description: Twenty Twenty Child Theme
Author: John Smith
Author URI: http://meinewebseite.ch
Template: twentytwenty
Version: 1.4
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
*/
Wenn Sie den Kommentar in die Datei style.css einfügen, stellen Sie bitte sicher, dass Sie ihn ganz oben einfügen und die Details durch Ihre Themeninformationen ersetzen.
Die wichtigsten Details, auf die Sie achten sollten, sind folgende:
Themenname – Sie müssen dem untergeordneten Thema einen eindeutigen Namen geben.
Vorlage – Sie müssen den Namen des übergeordneten Themenverzeichnisses angeben. Diese Zeile existiert nur in untergeordneten Themen und wird ohne sie nicht richtig funktionieren. In unserem Fall ist das Themenverzeichnis „twentytwenty“. Wenn Sie ein anderes Design verwenden, stellen Sie bitte sicher, dass Sie diese Zeile entsprechend ersetzen. Sie können dies in wp-content/themes überprüfen.
Die restlichen Details finden Sie in Ihrem WordPress-Admin-Dashboard > Ansicht > Themen > Themendetails.
Wenn Sie die Details bei Bedarf ändern, stellen Sie bitte sicher, dass Sie die Datei speichern.
Funktionsdatei erstellen
Damit die Styles aus dem Parent-Theme korrekt eingebunden werden, muss eine neue Datei namens functions.php im Verzeichnis des Child-Themes erstellt werden. Andernfalls erscheint das Child-Theme ungestylt und fehlerhaft.
Die ideale Methode zum Laden von Enqueuing-Stylesheets ist, dass das Parent-Theme die Stylesheets sowohl des Parent- als auch des Child-Themes lädt. Allerdings tun dies nicht alle WordPress-Themes. Daher müssen Sie den Code des Eltern-Themes überprüfen, um herauszufinden, wie es funktioniert, und den Handle-Namen herausfinden, den das Eltern-Theme verwendet. Das Handle ist der erste Parameter der Funktion wp_enqueue_style().
Wenn das Parent-Design den Style mit einer Funktion lädt, die mit get_template beginnt, muss das Child-Design nur die Child-Styles über das Handle des Parent-Elements im Abhängigkeitsparameter laden.
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( 'parenthandle' ),
wp_get_theme()->get('Version') // this only works if you have Version in the style header
);
}
Wenn das übergeordnete Design den Stil mit einer Funktion lädt, die mit get_stylesheet beginnt, muss das untergeordnete Design sowohl das übergeordnete als auch das untergeordnete Stylesheet laden. Sie müssen sicherstellen, dass Sie den gleichen Handle-Namen verwenden, den das übergeordnete Design für die übergeordneten Stylesheets verwendet.
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parenthandle = 'parent-style'; // This is 'twentytwenty-style' for the Twenty Twenty theme.
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
array(), // if the parent theme code has a dependency, copy it to here
$theme->parent()->get('Version')
);
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( $parenthandle ),
$theme->get('Version') // this only works if you have Version in the style header
);
}
Wenn Sie den entsprechenden Code in die Datei functions.php einfügen, vergessen Sie nicht, die Datei zu speichern.
Damit ist die Erstellung des Child-Themes abgeschlossen. Es muss nur noch aktiviert werden.
Child-Theme aktivieren
Der letzte Schritt ist die Aktivierung des Child-Themes. Dazu loggen Sie sich bitte in Ihr WordPress-Admin-Dashboard ein und navigieren über das Menü auf der linken Seite zu Darstellung > Themes.
Auf der Seite „Themen“ finden Sie Ihr neues untergeordnetes Thema zwischen den anderen WordPress-Themen. Bitte bewegen Sie den Mauszeiger darüber und klicken Sie auf die Schaltfläche «Aktivieren».

Wenn Sie dies getan haben, wird Ihr neues untergeordnetes Thema funktionieren.
Beachten Sie, dass Sie keinen Unterschied im Aussehen und Verhalten Ihrer Website feststellen werden, da wir keine stilistischen oder funktionalen Anpassungen vorgenommen haben.
Sie können nun damit beginnen, alle gewünschten Anpassungen vorzunehmen, ohne sich Sorgen machen zu müssen, dass Ihre Arbeit verloren geht, wenn das Design aktualisiert wird.
Herzlichen Glückwunsch! In dieser Anleitung haben Sie gelernt, wie Sie WordPress Child Themes erstellen und Design- und Funktionsänderungen sicher auf Ihre Website anwenden können. Wir hoffen, Sie konnten unseren Anweisungen problemlos folgen und das gewünschte Ergebnis erzielen.