Leitfaden zu WordPress-Child-Themes

Was ist ein WordPress-Child-Theme

Ein Child-Theme (Kind-Theme) in WordPress ist ein Theme, das Funktionalität, Stile und Template-Dateien von einem anderen Theme erbt, das als Parent-Theme (Eltern-Theme) bezeichnet wird. Ein Child-Theme ermöglicht es Ihnen, Design und Funktionalität der Website zu ändern, ohne die Dateien des Parent-Themes direkt zu ändern. Warum ist das wichtig? Weil bei einem Update des Parent-Themes alle Ihre Änderungen in dessen Dateien gelöscht und auf den Standardzustand zurückgesetzt werden.

Stellen Sie sich folgendes Szenario vor: Sie haben ein Premium-WordPress-Theme gekauft, CSS-Stile angepasst, eigene Funktionen in functions.php hinzugefügt und Template-Dateien geändert. Einen Monat später veröffentlicht der Autor des Themes ein Update mit Sicherheitspatches. Sie aktualisieren das Theme und – alle Ihre Anpassungen sind verschwunden. Sie müssen alles von Anfang an wiederholen. Mit einem Child-Theme existiert dieses Problem nicht, weil Ihre Änderungen in separaten Dateien gespeichert werden, die bei Updates nicht angerührt werden.

Warum ein Child-Theme verwenden

Es gibt mehrere wichtige Gründe für die Verwendung von Child-Themes anstelle direkter Änderungen am Parent-Theme.

Sichere Updates

Dies ist der Hauptgrund. WordPress-Themes werden regelmäßig mit Sicherheitspatches, Fehlerkorrekturen und neuen Funktionen aktualisiert. Ohne Child-Theme haben Sie zwei schlechte Optionen: Sie aktualisieren das Theme und verlieren alle Anpassungen, oder Sie aktualisieren das Theme nicht und setzen die Website Sicherheitslücken aus. Mit einem Child-Theme aktualisieren Sie das Parent-Theme sorgenfrei, weil Ihre Änderungen im Child-Theme sicher sind.

Code-Organisation

Ein Child-Theme trennt Ihre Anpassungen klar vom Originalcode des Themes. Wenn Sie die Dateien des Child-Themes betrachten, sehen Sie genau, was Sie im Vergleich zum Original-Design geändert haben. Dies erleichtert das Debugging, die Dokumentation und die Zusammenarbeit mit anderen Entwicklern. Wenn etwas nicht ordnungsgemäß funktioniert, können Sie die Datei einfach aus dem Child-Theme löschen und zum ursprünglichen Verhalten des Parent-Themes zurückkehren.

Lernen und Experimentieren

Ein Child-Theme ist ein sicherer Raum zum Erlernen der WordPress-Entwicklung. Sie können mit CSS, PHP und Template-Dateien experimentieren, ohne Angst zu haben, die Website zu beschädigen. Wenn etwas schief geht, deaktivieren Sie das Child-Theme, und die Website kehrt mit dem Parent-Theme zum ursprünglichen Aussehen zurück. Dies ist besonders nützlich für Anfänger, die gerade WordPress-Entwicklung lernen.

Schritt-für-Schritt-Erstellung eines Child-Themes

Das Erstellen eines Child-Themes ist ein einfacher Prozess, der nur zwei Dateien erfordert. Hier ist eine detaillierte Anleitung.

Schritt 1: Verzeichnis erstellen

Erstellen Sie im Verzeichnis wp-content/themes/ einen neuen Ordner für das Child-Theme. Greifen Sie über den cPanel File Manager oder FTP auf die Dateien zu. Die Namenskonvention lautet parent-theme-name-child. Wenn Sie beispielsweise das Theme „flavor" verwenden, erstellen Sie den Ordner „flavor-child". Dies ist nicht obligatorisch, erleichtert aber die Identifizierung des Child-Themes. Der Ordnername muss unter allen Themes auf der Website eindeutig sein.

Schritt 2: style.css-Datei erstellen

Erstellen Sie eine style.css-Datei im Child-Theme-Verzeichnis mit folgendem Header-Kommentar: Theme Name (obligatorisch – eindeutiger Name Ihres Child-Themes), Template (obligatorisch – Name des Verzeichnisses des Parent-Themes, genau wie der Ordner heißt), Version, Description und Author. Das Template-Feld ist kritisch – es muss genau mit dem Namen des Parent-Theme-Ordners übereinstimmen. Wenn sich das Parent-Theme im Ordner flavor befindet, muss Template flavor sein. Ein Fehler in diesem Feld bedeutet, dass das Child-Theme nicht funktioniert.

Schritt 3: functions.php-Datei erstellen

Erstellen Sie functions.php im Child-Theme und fügen Sie eine Funktion hinzu, die die Stile des Parent-Themes lädt (enqueue). Dies ist erforderlich, damit das Child-Theme das Design des Parent-Themes erbt. Verwenden Sie wp_enqueue_style() innerhalb einer Funktion, die am wp_enqueue_scripts-Action-Hook befestigt ist. Enqueuen Sie parent-style mit get_template_directory_uri() für den Pfad zum Parent-Theme und child-style mit get_stylesheet_directory_uri() für den Pfad zum Child-Theme, mit parent-style als Dependency, damit es nach diesem geladen wird.

Schritt 4: Aktivierung

Gehen Sie ins WordPress-Adminpanel, Appearance → Themes, und aktivieren Sie Ihr Child-Theme. Sie sollten dieselbe Website wie zuvor sehen – alle Stile und Funktionen des Parent-Themes. Wenn die Website völlig anders aussieht (keine Stile), prüfen Sie, ob functions.php die Parent-Stile ordnungsgemäß enqueued hat und der Template-Header in style.css korrekt ist.

Anpassung des Child-Themes

Nun, da Sie ein funktionierendes Child-Theme haben, können Sie mit Anpassungen beginnen.

CSS-Anpassungen

Fügen Sie Ihre CSS-Änderungen zur style.css-Datei des Child-Themes hinzu. Da das Child-Theme NACH dem Parent-Theme geladen wird, haben Ihre Stile Vorrang (CSS-Cascade-Prinzip). Wenn Sie beispielsweise die Farbe von Überschriften ändern möchten, fügen Sie die Regel zum Child-style.css hinzu, und sie überschreibt den Stil aus dem Parent-Theme. Verwenden Sie die Browser-Entwicklerwerkzeuge (F12), um die genauen CSS-Selektoren zu identifizieren, die Sie ändern müssen.

Template-Override

WordPress verwendet eine Template-Hierarchie, um zu bestimmen, welche Datei zur Anzeige einer Seite verwendet wird. Ein Child-Theme kann jede Template-Datei aus dem Parent-Theme überschreiben, indem es eine Datei mit demselben Namen erstellt. Wenn Sie beispielsweise das Aussehen eines einzelnen Blog-Beitrags ändern möchten, kopieren Sie single.php aus dem Parent-Theme in das Child-Theme und ändern Sie es. WordPress verwendet automatisch die Version aus dem Child-Theme. WICHTIG: Kopieren Sie die gesamte Datei, nicht nur den Teil, den Sie ändern, da die Datei im Child-Theme die Parent-Version vollständig ersetzt.

functions.php-Besonderheiten

Im Gegensatz zu Template-Dateien, bei denen das Child-Theme das Parent ersetzt, wird functions.php aus dem Child-Theme VOR der functions.php des Parent-Themes geladen. Das bedeutet, dass beide Dateien gleichzeitig aktiv sind. Das ist nützlich, weil Sie neue Funktionen hinzufügen können, ohne die gesamte functions.php des Parent-Themes zu kopieren. Aber Vorsicht – wenn Sie eine Funktion mit demselben Namen wie im Parent-Theme definieren (und das Parent eine if(!function_exists())-Prüfung verwendet), hat Ihre Version Vorrang.

Hinzufügen neuer Template-Dateien

Neben dem Überschreiben vorhandener Template-Dateien kann ein Child-Theme völlig neue hinzufügen. Sie können beispielsweise ein benutzerdefiniertes Page-Template erstellen, das im Parent-Theme nicht existiert. Fügen Sie eine PHP-Datei mit einem Template-Name-Kommentar am Anfang hinzu, und sie wird im WordPress-Editor als Option verfügbar, wenn Sie eine neue Seite erstellen. Dies ist eine leistungsfähige Methode, um spezifische Layouts für Landing-Pages, Portfolio-Seiten oder andere spezielle Anforderungen hinzuzufügen.

Fortgeschrittene Techniken

Entfernen von Parent-Actions und -Filters

Manchmal möchten Sie Funktionalität aus dem Parent-Theme entfernen, anstatt neue hinzuzufügen. Verwenden Sie remove_action() und remove_filter() in der functions.php des Child-Themes, um Hooks zu entfernen, die das Parent-Theme registriert hat. Dies erfordert die Kenntnis des genauen Funktionsnamens, Hooks und der Priorität aus dem Parent-Theme. Überprüfen Sie den Quellcode des Parent-Themes, um diese Informationen zu finden. Hinweis: remove_action() muss aufgerufen werden, nachdem die Action registriert wurde – verwenden Sie den after_setup_theme-Hook mit späterer Priorität.

WooCommerce-Template-Override

Wenn Sie WooCommerce verwenden, kann das Child-Theme WooCommerce-Template-Dateien überschreiben, indem ein woocommerce/-Verzeichnis innerhalb des Child-Themes erstellt wird. Um beispielsweise das Aussehen der Produktseite anzupassen, kopieren Sie content-single-product.php aus wp-content/plugins/woocommerce/templates/ nach wp-content/themes/ihr-child-theme/woocommerce/ und ändern Sie es. WooCommerce verwendet automatisch Ihre Version.

Verwendung des Child-Themes mit Page-Buildern

Wenn Sie Elementor, Divi oder einen anderen Page-Builder verwenden, wird das Child-Theme weiterhin empfohlen. Der Page-Builder speichert Inhalte in der Datenbank und ist daher nicht von Template-Dateien abhängig, aber CSS-Anpassungen, benutzerdefinierte PHP-Funktionen und Header-/Footer-Änderungen sollten im Child-Theme sein. Die meisten beliebten Themes (Astra, GeneratePress, OceanWP) haben offizielle Child-Themes, die auf der Website des Theme-Autors zum Download verfügbar sind.

Häufige Fehler und wie man sie vermeidet

• Falscher Template-Header: Template muss exakt mit dem Namen des Parent-Theme-Verzeichnisses übereinstimmen. Selbst ein Unterschied in Groß-/Kleinschreibung kann ein Problem verursachen.
• Fehlendes Enqueue der Parent-Stile: Ohne ordnungsgemäßes Enqueue wird das Child-Theme das Design des Parent-Themes nicht erben, und die Website sieht kaputt aus.
• Kopieren zu vieler Dateien: Kopieren Sie nicht alle Dateien aus dem Parent-Theme in das Child-Theme. Kopieren Sie NUR Dateien, die Sie tatsächlich ändern. Zu viele Kopien bedeuten, dass Sie für diese Dateien keine Updates aus dem Parent-Theme erhalten.
• Vergessen des PHP-Tags: functions.php muss mit dem <?php-Tag beginnen. Ohne ihn erkennt WordPress die Datei nicht als PHP und ignoriert sie.
• Bearbeiten des Child-Themes statt des Customizers: Verwenden Sie für einfache Änderungen (Farben, Schriftarten, Layout) den WordPress Customizer, der Einstellungen in der Datenbank speichert. Verwenden Sie das Child-Theme für strukturelle Änderungen, die der Customizer nicht abdeckt.

Fazit

WordPress-Child-Themes sind ein essenzielles Werkzeug für jeden, der das Aussehen oder die Funktionalität seiner Website anpasst. Sie werden in 5 Minuten erstellt (zwei Dateien), schützen Ihre Anpassungen vor Updates des Parent-Themes und bieten eine organisierte Möglichkeit zur Verwaltung von benutzerdefiniertem Code. Egal, ob Sie nur ein paar CSS-Regeln ändern oder komplexe Template-Overrides erstellen, verwenden Sie immer ein Child-Theme. Bei BeoHosting kann unser Support Ihnen bei der Erstellung und Konfiguration eines Child-Themes für Ihre WordPress-Website helfen, sodass Sie das Design sicher anpassen können, ohne befürchten zu müssen, Änderungen zu verlieren.