Child Theme über ein Plugin erstellen
Wozu brauche ich ein Child-Theme?
Für gewisse Änderungen am Design einer WordPress-Seite muss man manchmal die Themedateien ändern oder neue Dateien hinzufügen. Zum Beispiel wenn man eine andere Schriftart verwenden möchte, sein Theme übersetzen will oder am Layout Änderungen vornehmen möchte.
Da du Zugang zu deinem FTP hast (da wo du dich mit Filezilla verbindest) ist das an sich auch kein Problem und du könntest diese Dinge in deinem Theme ändern. Zum Problem wird es dann, wenn du dein Theme updatest (was du unbedingt regelmäßig tun solltest).
Denn bei einem Update werde alle vorhanden Theme-Dateien gelöscht und durch die neuen Dateien ersetzt. Das heißt, deine Änderungen gehen ebenfalls verloren.
Damit dies nicht geschieht solltest du ein Child-Theme erstellen.
What the Hell ist ein Child-Theme?
Die Änderungen die du an deinen Theme-Dateien vornehmen wollen würdest, bündelst du zusammen und speicherst sie als Paket in einem einem sogenannten Child-Theme ab.
Dieser kleinen Version von einem Theme – nun dein Child-Theme – gibst du dann noch die Information, dass es nur ein Zusatz ist zu einem anderen Theme und die eigentlichen Styles in deinem „Parent-Theme“ liegen.
Unterschied Child-Theme und Custom CSS (Quick CSS)
Manche Themes haben ein Feld namens Custom CSS oder auch Quick CSS im Admin-Bereich. Dieses Feld kann man zwar auch für Design-Änderungen nehmen, die man mit CSS zum Beispiel aus dem Entwickler-Tool tätigen möchte. Wenn man jedoch eine eigene Schrift verwenden will, dann muss man diese Schrift unter Umständen direkt ins Theme hochladen. Dafür ist die Custom CSS also nicht geeignet und dafür braucht man ein Child-Theme.
Child-Theme erstellen
Das Erstellen von einem Child-Theme kannst du entweder per Hand über deinen FTP erledigen (Anleitung dazu findest du hier) oder aber du nutzt das Plugin „Child-Theme Wizard“ dafür.
Child-Theme über Plugin erstellen
Mit Hilfe des Plugins „Child Theme Wizard“ kannst du ganz leicht ein Child Theme erstellen, ohne dafür Code anzufassen oder dich irgendwo extra einloggen zu müssen.
- Installiere und aktiviere dir dazu zuerst das Plugin „Child Theme Wizard„
- Gehe dann in deinem Dashboard auf „Werkzeuge“ – „Child Theme Wizard“
- Wähle nun das Theme, für das du ein Child-Theme erstellen möchtest und fülle die einzelnen Punkte aus.
- Title: Name deines Child-Themes (wähle am Besten: „Name_deines_Parent-Themes Child“
- Description: eine Beschreibung deines Child-Themes. Zum Beispiel „Child von Name_deines_Parent_Themes“)
- Child-Theme Url: dieses Feld dient dazu zu wissen, woher das Child-Theme kommt (Themereforest-URL usw.) Da du dein Child-Theme selber erstellst, kannst du dies auch freilassen
- Author: der Name der Person, die das Child-Theme erstellt hat. Also dein Name
- Auhtor-URL: Webseite vom Child-Theme-Autor. Also deine Webseite. Du kannst dieses Feld aber auch freilassen.
- Version: Versionsnummer des Child-Themes. Dient zur Kontrolle in welcher Version das Child-Theme vorliegt, wenn man später Änderungen am Child-Theme hinzufügen möchte. Trage hier einfach 1.0 ein.
- „Include GPL-Lizense“ – hier am Besten „Yes, please“ einstellen. Damit gibst du deinem Child-Theme die gleiche Lizenz die auch WordPress.org unterliegt. Das bedeutet jeder kann mit deinem Child-Theme arbeiten und dieses weitervewenden und neue Dinge darauf aufbauen. Wenn du das nicht willst, dann solltest du hier „No, Thanks“ einstellen. Mehr Information zu GPL findest du in diesem Artikel auf WordPress.org.
- Wenn du die Punkte unter 3. eingestellt hast, dann kannst du nun auf „Create Child-Theme“ klicken. Damit wird dein Child-Theme erstellt.
- Gehe nun auf Design – Themes und aktiviere dein neues Child-Theme.
- Überprüfe im Front-End deiner Seite wie nun das Design deiner Webseite aussieht. Eventuell musst du nun Einstellungen erneut setzten, die du vorher im Parent-Theme gemacht hast. Du kannst aber auch wieder dein Parent-Theme aktivieren und nachschauen welche Einstellungen du gemacht hast. Deine gemachten Einstellungen im Child-Theme gehen dabei nicht verloren. Du kannst als ohne Probleme zwischen den einzelnen Themes wechseln.
- Nun kannst du das Plugin „Child Theme Wizard“ wieder löschen.
Fertig!
Kleiner Tipp:
Du solltest nicht zu viele Themes in deinem Backend installiert haben. Denn auch wenn ein Theme nicht aktiviert ist, kann bei einem Sicherheitsproblem dieses Themes deine Webseite trotzdem angegriffen werden.
Optimal ist, wenn du nur dein Parent Theme, dein Child Theme und ein Standard Theme (Twenty …) installiert hast.
Ein Standard-Twenty … ist deshalb sinnvoll, weil du bei einem Problem in deiner Webseite durch das kurzfristige aktivieren des Standart-Themes prüfen kannst, ob das Problem an deinem Theme liegt oder nicht.
Zudem dienen die Twenty-Themes als sogenanntes „Fall-Back“ falls dein Theme mal ein ernsthaftes Problem haben sollte. Zum Beispiel wenn du deine Webseite umziehst und es dabei ein Problem it dem Theme gibt, kannst du dich eventuell nicht mehr ins Backend einloggen. Hast du aber ein Standard-Theme installiert, wird dieses aktiv und du kommst an dein Backend ran.
Ich kann nicht recht einsehen, was für Vorteile ein Child Theme bringen soll. Das User-CSS ist im Dashbaord unter > Design > Customizer > Zusätzliches CSS viel besser zum Ändern. Änderungen werden sofort angezeigt.
Schriften kann man durch einfaches Kopieren bei Google Fonts, z. B.
@import url(‚https://fonts.googleapis.com/css?family=Caveat‘);
einfach mit der Import-Funktion in das User-CSS importieren.
Hey Jakob,
viele Änderungen kann man in der Tat über das Custom CSS vornehmen, aber nicht alle. Möchtest du zum Beispiel eine andere Schriftart als Google Fonts verwenden (es gibt dutzende weitere Anbieter), so musst du diese selber auf deinem Server hosten und einbinden. Dies geht nur über ein Child-Theme. Auch wenn du Änderungen in den .php-Dateien vornehmen möchtest ist ein Child-Theme notwendig oder bei Änderungen an den Sprachdateien.
Kurz und knapp erklärt – danke! Jetzt habe es ich das Problem mit Änderungen verstanden. Ich nutze ein Rating Plugin, welches in die single.php integriert werden muss.
Kommt ein Theme Update, darf ich die Änderung wieder nachziehen – jetzt nicht mehr.
Danke für die Anleitung
Hey Ulrich, schön dass dir die Anleitung geholfen hat.
Danke, spannend und gute Anleitung! Ich habe bisher immer mit CSS gearbeitet und komme damit super klar. Aber, man soll ja nie auslernen. (-;
Hallo und danke für diese Anleitung.
Ich habe noch eine Verständnisfrage:
Das Child-Theme beinhaltet NUR diejenigen Dateien des Parent-Themes, die von mir geändert werden, richtig?
Wenn ich das Child-Theme im Backend aktiviert habe, findet WordPress doch nur diese Teilmenge der Theme-Dateien, oder? Wie sage ich denn WordPress, dass es für alle weiteren Dateien in das Parent-Theme schauen muss?
Und was passiert, wenn ich ein Update vom Parent-Theme mache? Dann bleiben meine Child-Theme-Dateien unberührt, aber evtl. passen sie nicht mehr zum Parent-Theme, weil veraltet?
Grüße
Sabine
Liebe Sabine,
ja genau. In das Child-Theme kommen nur die Dateien, die du geändert hast. WordPress teilst du über einen Codeschnipsel in der functions.php mit, dass dieses Theme nur ein Child-Theme ist (das macht das Plugin „Child-Theme Wizard für dich) und sieht folgendermaßen aus:
// this code loads the parent’s stylesheet (leave it in place unless you know what you’re doing)
function theme_enqueue_styles() {
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));
}
add_action(‚wp_enqueue_scripts‘, ‚theme_enqueue_styles‘);
Damit sagt das Child, dass auch die Dateien vom Parent geladen werden soll.
Der letzen Punkt den du ansprichst ist ganz richtig. Je mehr man im Child-Theme anpasst, desto genauer muss man prüfen, was genau im Parent-Theme geändert wurde und ob man auch das eigene Child-Theme überprüfen muss. Dazu schaut man am Besten in die Changelogs des Updates.
Liebe Grüße,
Maja