Letzte Aktualisierung 15.03.2024
Wenn du WordPress verwendest, um deine Website zu betreiben, hast du vielleicht schon von Child-Themes gehört – aber was sind sie genau und warum sind sie wichtig? Stell dir vor, du hast Stunden damit verbracht, das perfekte Theme für deine Website zu finden, es anzupassen und zu optimieren, nur um festzustellen, dass ein Theme-Update deine Änderungen überschreibt und deine Website durcheinanderbringt. Frustrierend, nicht wahr? Hier kommen Child-Themes ins Spiel. In diesem Beitrag werden wir uns ausführlich mit der Verwendung von Child-Themes in WordPress befassen, warum sie unverzichtbar sind und wie du sie richtig einsetzen kannst, um deine Website sicher und flexibel zu gestalten.
Was ist ein Child-Theme denn überhaupt?
Ein Child-Theme ist im Grunde wie ein Anbau an ein bestehendes Haus – es erweitert und individualisiert das ursprüngliche Theme, ohne dessen Grundstruktur zu ändern. Es ermöglicht dir, deine Website nach deinen Vorstellungen anzupassen, ohne das Risiko einzugehen, das Haupttheme zu beschädigen. Kurz gesagt, es ist deine persönliche Werkbank für kreative Gestaltungsideen, ohne die Stabilität deiner Website zu gefährden.
Bei einem WordPress-Update wird das Original-Theme (Parent-Theme) mit den neuesten Änderungen überschrieben, das Child-Theme – und damit auch deine Anpassungen – wird bei einem Update nicht verändert.
Ein Child-Theme besteht aus mindestens 3 Dateien:
- style.css // definiert das Parent-Theme, erweitert die Optik
- functions.php // läd die style.css, erweitert die Funktionalität
- screenshot.png // das Vorschaubild, kann z.B. vom Original-Theme kopiert werden
Das alles muss in einem Ordner mit dem Namen „Parent-Theme“-child befinden.
Als Beispiel soll hier ein Child-Theme für das Theme „Twenty Sixteen“ erstellt werden.
Zusätzlich kannst du auch noch eine Datei „ReadMe.txt“ in den Ordner legen und hier alle wichtigen Informationen für die Anpassung und Verwendung des Child-Themes zusammenfassen. Das ist eine hilfreiche Gedächtnisstütze, wenn du häufiger mal ein Child-Theme anlegen musst.
style.css
Der Inhalt der style.css sollte mindestens folgenden Inhalt haben:
/* Theme Name: Original-Theme Child // im Beisp: TwentySixteen Child Template: twentysixteen */ /*Add your own styles here:*/
Die Einträge „Theme Name“ und „Template“ sind zwingend erforderlich.
Der Inhalt der „ReadMe.txt“ könnte demnach folgendermaßen aussehen:
// Diese Datei kann gelöscht werden!
// Informationen zu style.css
Zeile 2 : Theme Name:
// unter dieser Bezeichnung wird das Theme im Backend angezeigt.
// Ersetzen Sie "Parent-Theme" durch den Namen des Themes,
// welches Sie als "Parent" verwenden möchten
Zeile 3 : Template:
// Diese Information findet man im "parent"-Theme
// unter dem Eintrag “Text Domain:” in der Datei "style.css"
screenshot.png kann gegen ein anderes Bild (mit gleichem Namen) ausgewechselt werden.
functions.php
nach WordPress Codex sollte der Inhalt der functions.php folgendermaßen aussehen:
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
$parent_style = 'parent-style'; // z.B. 'twentysixteen-style' für das Twenty Sixteen Theme (siehe ReadMe.txt)
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array($parent_style), wp_get_theme()->get('Version') );
}
// Fügen Sie ab hier ihre functions ein. Sie können auch einige der Parent-Theme functions in diese Datei kopieren.
// WordPress wird dann diese functions anstatt der Original-functions verwenden.
Damit werden die beiden CSS Dateien bereits auf dem Server per PHP richtig „sortiert“.
Die Dateien des Child Themes werden anstatt der Dateien des Parent Themes mit gleichem Namen geladen. Dies gilt für alle Dateien eines Themes mit der Ausnahme der functions.php Datei. Hier werden die Inhalte beider Dateien nacheinander geladen. In der functions.php Datei des Child Themes sollten also nur solche Funktionen hinterlegt werden, die im Child Theme ZUSÄTZLICH benötigt werden.
screenshot.png
Um dem neu angelegten Child-Theme ein Vorschaubild zu verpassen benötigst du eine Bilddatei mit der Bezeichnung „screenshot.png“ in dem Child-Theme-Verzeichnis.
Das Bild kann vom Parent-Theme kopiert werden und dann z.B. mit einer Bildbearbeitung mit dem Zusatz „child-theme“ versehen werden.
Wie immer gilt: testen und Einsatz auf eigene Verantwortung
