Ein WordPress Child Theme anlegen

Um ein WordPress Theme an die eigenen Bedürfnisse anzupassen, ist es am sinnvollsten, ein Child Theme anzulegen. Hier können dann die gewünschten Änderungen vorgenommen werden, ohne das Original Theme verändern zu müssen. Hierbei wird das Parent Theme inkludiert und nur die Änderungen im Child Theme hinterlegt. Hauptsächlich werden die Änderungen im sogenannten CSS (Cascading Style Sheets, zu deutsch „Kaskadierende Stilvorlagen“) vorgenommen. Diese Datei nennt sich bei WordPress style.css und befindet sich im Wurzelverzeichnis des Themes.

Weitere Vorteile dieses Konzeptes sind z.B., dass Updates vom Parent Theme weiter durchgeführt werden können. Außerdem werden in dem Ordner des Child Themes ausschließlich die Dateien abgelegt, die tatsächlich angepasst werden. Dies macht die Handhabung deutlich einfacher.

Voraussetzung um ein Child anzulegen, ist ein FTP-Zugang mit entsprechenden Zugangsdaten zu dem Server auf dem die WordPress Seite gehostet ist. Außerdem wird ein FTP-Client benötigt, um auf die Dateien zugreifen zu können. Für Linux und Windows Systeme kann z.B. FileZilla verwendet werden. Zusätzlich braucht ihr natürlich ein Programm um die Dateien bearbeiten zu können. Hierfür kann ein einfacher Texteditor verwendet werden.

Ich werde das vorgehen anhand von dem Theme Twenty Fourteen beschreiben, da aus meiner Sicht eines der schönsten und für meine Bedürfnisse  am besten passendste von den Standard Themes ist. Das vorgehen ist allerdings auch auf andere Themes übertragbar.

Im root Verzeichnis der WorPress Installation auf dem Server liegt das Theme Twenty Fourten im folgenden Vereichnis:

/wp-content/themes/twentyfourteen

In dem Order /wp-content/themes wird nun ein entsprechender Ordner für das Child Theme angelegt. Hierbei sollte darauf geachtet werden, dass keine Umlaute oder Leerzeichen verwendet werden, z.B. twentyfourteen-child:

/wp-content/themes/twentyfourteen-child

Jetzt muss ein neues Stylesheet erstellt werden und mit folgendem Inhalt gefüllt werden:

/*
Theme Name: Twenty Fourteen Child
Theme URI: http://example.com/
Description: Twenty Fourteen Child Theme
Author: Ihr Name
Author URI: http://blog.boisen.biz/
Template: twentyfourteen
Version: 1.0.0
*/

@import url("../twentyfourteen/style.css");

/* Theme Anpassungen ab hier einfügen*/

Die erzeugte style.css Datei kann nun in den oben angelegten Ordner hochgeladen werden.

Ein paar Anmerkungen zu dem Inhalt:

Theme Name: Dies ist selbstredend. Einen Namen braucht das neue Theme. Eine Name ist zwingend erforderlich. Kann aber frei gewählt werden.

Theme URI: Hier kann optional die Webadresse der WordPress Seite eingetragen werden, für der das Theme erstellt wurde. Dies ist aber nicht zwingend erforderlich.

Description: Hier kann eine kurze Beschreibung des neuen Themes erfolgen. Auch diese Angabe ist nur optional.

Author: Hier kann der Name des Autors eingetragen werden. Diese Angabe ist aber nicht erforderlich.

Author URI: Zusätzlich kann optional eine Webadresse des Autors mit hinterlegt werden.

Template: Hier muss das Verzeichnis des Parent Themes angegeben werden. Dies Angabe ist zwingend erforderlich, damit WordPress die restlichen Bestandteile des Themes findet. Dabei ist auf die richtige Schreibweise und auf Groß- und Kleinschreibung zu achten.

Version: Hier kann eine Versionsnummer angegeben werden. Auch diese Angabe ist optional.

Die zusätzlich Import Anweisung ist in eigentlich nicht zwingend erforderlich, da das Theme prinzipiell auch ohne funktionieren würde. Allerdings werden dann nur die Angaben verwendet, die in der neuen style.css Datei beschrieben wurden. Sprich: Das alte Stylesheet wird vollständig ersetzt. In der Regel werden die original Stylesheets importiert und nur die Unterschiede in die Datei aufgenommen:

@import url("../twentyfourteen/style.css");

In den Klammern wird der Pfad zur style.css des Parent Themes angegeben. Die Import Anweisung muss zwingend nach dem Header der Datei erfolgen.

Das Child Theme ist nun fertig angelegt und kann in WordPress unter Design ausgewählt werden. Anpassungen können nun direkt mit dem WordPress eigenen Editor (Design->Editor) vorgenommen werden.

Sinnvoll ist es, dass die Änderung nach einer sinnvollen Gruppierung eingetragen werden, damit man sich später besser zurecht findet und die Änderungen leichter nachvollziehen kann:

/* Theme Anpassungen ab hier einfügen*/

/* Änderungen der Farben */

/* Änderungen der Schriften */

...

Zusätzlich kann dem neuen Theme noch mit ein Bild hinterlegt werden, dass dann im WordPress unter Design als Vorschaubild erscheint. Dafür muss einfach ein Bild mit dem Namen screenshot.png und einer Größe von 600×450 Pixel in das Theme Verzeichnis abgelegt werden.

Gruß,

Stefan

 

 

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.