So richten Sie in WordPress ein Child-Theme ein
Dieser Beitrag wurde ursprünglich am 01.10.2012 veröffentlicht und am 26.10.2015 aktualisiert.
****
Wenn man Anpassungen in einem WordPress – Theme direkt in der style.css vornimmt, gehen diese Anpassungen mit einem Update des Themes verloren.
Daher sollte man vor jeder Aktualisierung eines Themes eine Sicherungskopie der style.css vornehmen, um die Anpassungen nach der Aktualisierung wieder einspielen zu können.
Eine Alternative dazu ist die Erstellung eines Child-Themes.
Eine Child-Theme übernimmt die Funktion des übergeordneten Themes („Parent Theme“) und erlaubt es Ihnen, individuelle Anpassungen und Ergänzungen an einem Theme vorzunehmen, ohne dass diese bei der Aktualisierung des Parent-Themes verloren gehen.
Um ein Child-Theme zu erstellen, legen Sie zunächst mit Hilfe von Filezilla (bzw. des von Ihnen verwendeten FTP-Programms) auf Ihrem Webspace ein neues Verzeichnis unter „/wp-content/themes“ an.
Hinweis: Die Verzeichnisse sehen Sie in Ihrem FTP-Programm als Ordner.
Beispiel:
Ihr Parent-Theme befindet sich in folgendem Verzeichnis:
/wp-content/themes/twentyfifteen
Dann legen Sie im Ordner „themes“ einen neuen Ordner an und geben diesem einen griffigen Namen. Ich wähle im Beispiel „twentyeleven_child“
Dann sieht die Struktur so aus:
/wp-content/themes/twentyfifteen_child
Dann legen Sie mit einem Texteditor (z.B. WordPad auf einem Windows-Rechner oder TextEdit auf dem Mac / Ich selbst verwende auf dem MacBook „Tincta“ aus dem App-Store) eine neue Datei an und speichern Sie diese unter dem Namen style.css.
Bei der Benennung dieser Datei dürfen Sie nicht kreativ sein, denn die Datei „style.css“ ist für jedes WordPress-Theme zwingend erforderlich und muss auch genau so heißen.
Diese style.css wird später in das neu angelegte Verzeichnis „twentyfifteen_child“ kopiert, vorher sind aber noch ein paar Informationen in der Datei erforderlich.
Damit WordPress mit der style.css etwas anfangen kann, benötigt sie einen Informations-Header, der WordPress mit den notwendigen Informationen über diese Datei informiert.
Beispiel:
/*
Theme Name: Neues WordPress Theme
Theme URI: http://example.com/
Description: Ein tolles neues Theme genau nach meinen Vorstellungen
Author: Ihr Name
Author URI: https://wp-bistro.de/
Template: twentyfifteen
Version: 1.0
*/
Erläuterung
Theme Name:
Das ist der Name Ihres Child-Themes. Diese Angabe ist zwingend erforderlich, ohne einen Theme-Namen funktioniert die style.css nicht.
Sie dürfen hier Ihrer Fantasie freien Lauf lassen. Ich habe das Theme im Beispiel einfach nur „Neues WordPress Theme“ genannt, aber es gibt hier keine Restriktionen.
Theme-URI
Hier können Sie die Adresse Ihrer Webseite einfügen, für die Sie das Theme verwenden. Diese Angabe ist optional, Sie können Sie auch weglassen.
Description
Hier können Sie eine kurze Beschreibung zum Theme unterbringen, z.B. was das Theme kann, wie es aussieht oder ähnliches. Auch die Description ist eine optionale Angabe und kann weg gelassen werden.
Author bzw. Author-URI
Hier können Sie Ihren Namen und Ihre eigene Webadresse unterbringen, wenn Sie mögen. Auch das ist eine optionale Angabe und nicht zwingend erforderlich.
Template
Hier muss das Verzeichnis des Parent-Themes angegeben werden. Diese Angabe ist zwingend erforderlich, damit WordPress weiß, wo es die fehlenden Dateien zum Theme findet. Nur mit einer style.css allein kommt ein Theme nämlich nicht besonders weit 🙂
Wichtig: Bei dieser Angabe muss unbedingt Groß- und Kleinschreibung beachtet werden. Das Template muss genau so benannt werden, wie der entsprechende Ordner in Ihrer Verzeichnis-Struktur
Version
Hier kann eine Versions-Nummer angegeben werden. Auch dies ist eine optionale und nicht zwingend erforderliche Angabe
Alles, was nach dem */ kommt, ist dann das eigentliche Stylesheet des neuen Themes.
Jetzt ist die style.css soweit fertig, dass Sie diese in das neue Verzeichnis für Ihr Child-Theme hochladen können.
Wenn das erledigt ist, finden Sie die neue style.css in WordPress unter „Design“ -> „Editor“ und können Sie dort bearbeiten.
Gegebenenfalls ist es dafür erforderlich, rechts oben im Dropdown hinter „Zu bearbeitendes Theme wählen“ das Child-Theme auszuwählen.
Tipp:
Um Ihre Ergänzungen in der style.css auch nach einer ganzen Weile noch nachvollziehen zu können, empfiehlt es sich, mit Überschriften eine Struktur in die Regeln einzubringen.
Überschriften können Sie mit /* starten und */ beenden.
Beispiel:
/* Hier beginnen meine eigenen CSS Regeln */
/* Anpassungen an Schriften */
/* Anpassungen an Grafikelementen */
Und so weiter …
Import des Stylesheets aus dem Parent-Theme
Damit die Angaben aus dem Stylesheet des Parent-Themes übernommen werden ist es erforderlich, dieses in das Parent-Theme zu laden. Früher hat man das über @import direkt in der style.css des Child-Themes erledigt.
Diese Methode gilt heute als veraltet.
Der neue, korrekte Weg sieht den Import über die functions.php vor.
Dafür legen Sie wieder mit Ihrem bevorzugten Texteditor eine neue Datei an, die Sie „functions.php“ nennen.
In diese Datei gehört der folgende Code:
<?
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
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')
);
}
Die functions.php wird nun ebenfalls in den neu angelegten Ordner twentyfifteen_child hochgeladen, damit ist das Child-Theme funktionsfähig und kann aktiviert werden.
Weitere Dateien im Child-Theme
Das Stylesheet ist zwingender Bestandteil eines Child-Themes. Sie können aber nahezu alle Dateien des Parent-Themes in den Ordner des Child-Themes kopieren, wenn Sie daran individuelle Anpassungen vornehmen.
Wer den Code für Google Analytics nicht über ein Plugin einbindet sondern über die header.php, der sollte auch die header.php in das Child-Theme legen. Dadurch ist sichergestellt, dass Sie nicht bei jedem Theme-Update den Tracking-Code neu in das Theme einbauen müssen.
Dafür ist übrigens kein Import der alten Datei erforderlich. Kopieren Sie einfach die Datei aus dem Parent-Theme und fügen Sie diese in das Child-Theme ein. Simple as that
War diese Erläuterung für Sie hilfreich? Oder haben Sie noch Fragen? Dann stellen Sie diese gern in den Kommentaren.
Bildquelle:
© coramax – Fotolia.de
