Ein Child-Theme erstellen
Hinweis: diese Anleitung entspricht nicht mehr den „Best Practice“. Eine Anleitung wie es besser (und einfacher) geht, findest du in dem Artikel „Child Theme erstellen über das Plugin „Child Theme Wizard“.
Warum braucht man ein Child-Theme?
Ein Child-Theme brauchst du, damit du Änderungen an deinem Theme vornehmen kannst, ohne das sie bei einem Update des Theme überschrieben werden.
Man kann zwar für viele Änderungen des Themes im Backend von WordPress vornehmen, jedoch gilt das nicht für alle Änderungen. Möchtest du zum Beispiel eine bestimmte Schrift verwenden oder auch dein Theme übersetzen, brauchst du ein Child-Theme, damit diese Änderungen nicht überschrieben werden.
Am Besten du legst gleich zu Beginn ein Child-Theme an, nachdem du dich für ein Themes entschieden hast. Auch wenn du jetzt noch keine dieser Änderungen vornehmen möchtest.
Denn angenommen, du willst nach einem Jahr etwas übersetzen, deine Schrift ändern oder ähnliches und legst dafür ein Child-Theme an, dann musst du alle Einstellungen im Backend von WordPress neu tätigen.
Was ist ein Child-Theme
Ein Child-Theme ist eine kleine Variante deines eigentlichen Themes. Es verweist auf das Design und die Funktionen deines Eltern-Themes.
Es wird als neues Theme angelegt, eine Verknüpfung zum Eltern-Theme hergestellt, im Backend aktiviert und dann eingerichtet. Danach kannst du die Änderungen im Child-Theme tätigen.
Sollte dann das Eltern-Theme geupdatet werden, dann hast du die Aktuelle Version deines Themes, aber deine Änderungen bleiben dennoch erhalten, weil nämlich das Eltern-Theme geupdatet wurde und die Änderungen im Child-Theme stehen.
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.
Wie du ein Child-Theme erstellst:
Um ein Child-Theme zu erstellen:
- öffnest du Filezilla und verbindest dich dich mit dem FTP-Bereich deiner Webseite
- Dort erstellst du unter wp-content – themes einen neuen Ordner (Rechtsklick – Verzeichnis erstellen)
- Diesen Ordner nennst du so wie dein Eltern-Theme mit -Child dahinter: twentythirteen-child
- Dann kopierst du dir die screenshot.png aus dem Eltern-Theme auf deinen PC und legst sie dann in dein Child-Theme
- Als nächstes speicherst du dir diese Datei auf deinem Computer als style.css ab: style.css
- Hier fügst du Folgendes ein:
/* Theme Name: Twentythirteen Child Template: twentythirteen*/
@import url("../twentythirteen/style.css");
/* Theme customization starts here-------------------------------------------------------------- */
- unter Theme Name schreibst du den Namen deines Child-Themes. Also erst der Name des Eltern-Themes und dann Child dahinter
- Unter Template schreibst du dein Elterntheme genauso wie der Ordner im FTP-heißt. Also in Kleinbuchstaben. Das ist sehr wichtig!
- Dann musst du noch die Styles aus dem Eltern-Theme importieren. Dies machst du mit:
@import url("../twentythirteen/style.css"); - statt twentythirteen schreibst du natürlich den Namen deines Eltern-Themes. Den Rest lässt du so.
- Diese Datei speicherst du nun ab und legst sie in dein Child-Theme Ordner.
- Dann gehst du in dein Admin-Bereich deiner Webseite und aktivierst dein Child-Theme
- Als letzten Schritt musst du nun die Einstellungen im Child-Theme tätigen (unter Design – Anpassen)
- Möchtest du nun Änderungen vornehmen, dann kannst du diese nach „Theme customization starts here“ anbringen.
/* Theme customization starts here-------------------------------------------------------------- */
Hallo Maya,
eine super Anleitung, danke!
Allerdings ist sie etwas veraltet. Mittlerweile nutzt man nicht mehr @import. Stattdessen kommt in die functions.php des Child Themes:
function theme_enqueue_styles() {
$parent_style = ‚parent-style‘;
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‘ );
Und in der style.css-Datei bleiben nur die allgemeinen Infos zum Child Theme.
(Quelle: https://codex.wordpress.org/Child_Themes)
Übrigens kann man Themes (und Plugins) noch viel einfach übersetzen, ohne Child Theme. Dafür gibt es ja die Übersetzungsdateien. Hier steht, wie es geht: hootproof.de/themes-plugins-uebersetzen/
Ich finde deinen Blog super und bin gespannt, wie es weitergeht!
Schönen Gruß
Michelle
Tut mir Leid, ich habe deinen Namen falsch geschrieben :( Sorry!
Liebe Michelle,
mit dem Child-Theme hast du recht, man kann beide Varianten nehmen, jedoch ist über functions.php zwar von der Performance her besser, aber für Anfänger etwas schwieriger umzusetzen. Ich wollte aber auch noch ein Tutorial dazu machen.
Hallo Maja,
gerade habe ich deine Anleitung auf YouTube angesehen. Super Sache, danke!
Kann ich ein Childtheme auch noch nachträglich erstellen, selbst wenn ich bereits in meinem Theme einige Änderungen vorgenommen habe (andere Schrift integriert, Farbe eines Buttons verändert auf einer Seite, Texte eingetragen, Menüstruktur verändert etc.) oder muss ich alles noch einmal neu machen?
Vielen Dank für deine Antwort.
Liebe Grüße, Petra
Liebe Petra,
du kannst ein Child-Theme auch noch nachträglich erstellen, musst dann aber die Einstellungen des Themes wieder neu einstellen.
Blogbeiträge, Seiten usw. bleiben erhalten. Ich glaube das Menü bleibt ebenfalls erhalten, jedoch musst du dieses wieder als Hauptmenü aktivieren.
Wenn du den Button über CSS geändert hast, dann kannst du den CSS-Code aus dem Parent-Theme ins Child-Theme kopieren.
Hoffe ich konnte dir weiterhelfen.
Liebe Grüße,
Maja
Vielen Dank, liebe Maja, das ist auf jeden Fall eine gute Nachricht.
Liebe Grüße,
Petra