Schon öfter ist der Begriff „Childtheme“ gefallen. Was ist das? Und ist es unbedingt notwendig?
Ein Childtheme ist ein Theme, das man anlegt oder vom Themehersteller bereits mitausgehändigt bekommt. Es erbt als „Kindtheme“ grundsätzlich alle Eigenschaften von einem Eltern-Theme. Individuelle Anpassungen werden aber zusätzlich geladen und bei einer Aktualisierung des Eltern-Themes nicht überschrieben.
Natürlich sollte man sich alles sparen, was nicht verwendet wird, nur hatte ich noch kein Projekt bei dem für Veränderungen ein solches Childtheme nicht notwendig war, daher empfehle ich immer von Anfang an ein solches zu erstellen.
Vorsicht ist geboten, wenn man erst nachträglich eines erstellt. Hier muss man unter Umständen die Themeoptionen und/oder die Customizereinstellungen aus dem Elterntheme ex- und in das Childtheme importieren. Falls das Theme eine solche Funktion nicht voraussieht, hat das Plugin Customizer Export/Import bisher gute Arbeit geleistet.
Ein Childtheme besteht mindestens aus zwei, üblicherweise drei Dateien.
- functions.php
- style.css
- screenshot.png
Die functions.php ist die Datei, die ich in anderen Tipps am häufigsten erwähne. Denn in dieser Datei können Code-Schnipsel eingetragen sind. Sie sind hier vor Updates und Pluginänderungen sicher und werden bei aktiviertem Childtheme immer ausgeführt.
Die functions.php als Basis enthält den öffnenden Tag <? um Php auszuführen und eine Anweisung, dass zum Eltern-Css auch das Kind-CSS (Style-Dateien) geladen werden.
<?
/**
* Load child theme css and optional scripts
*
* @return void
*/
function wws_child_enqueue_scripts() {
wp_enqueue_style('child-style',get_stylesheet_directory_uri().'/style.css',['parent-style'],'1.0.0');
}
add_action('wp_enqueue_scripts', 'wws_child_enqueue_scripts');
Die style.css enthält als Kommentar ein paar wichtige Daten zum Childtheme, wie z.B. den Namen und den verweis auf das zugehörige Elterntheme. Alle Gestaltungsänderungen als CSS sollten hier unterhalb eingefügt werden, da dies im Endeffekt der performantere und Cache freundlichere Weg ist.
Wichtig ist hier die Angabe nach Template. Hier ist das Verzeichnis des Elternthemes einzutragen. Die Angabe „Template“ unterscheidet ein Elterntheme von einem Childtheme.
/*
Theme Name: Child-Theme Name
Description: Beschreibung des Themes
Author: Ich
Template: parent-theme
Version: 1.0.1
Text Domain: child-theme
*/
body {
background-color: blue;
}
Sie screenshot.png ist optional und zeigt eine kleine Vorschau des Themes in der Themeauswahl im Backend an.
