In diesem Beitrag schreibe über WordPress Childthemes. Ich werde hier als erstes erklären, was Childthemes sind, welche Vorteile es hat mit
Childthemes zu arbeiten und wie ihr selber anhand von einem bestehenden Theme, ein eigenes Childtheme entwickeln könnt.

Fangen wir mal damit an, was überhaupt ein Childtheme ist. Ein Child-Theme, ist ein WordPress Theme, welches auf einen übergeordneten Theme basiert. Das Childtheme vererbt Funktionen und Template-Dateien von Eltern-Theme. Dadurch kann man ein Theme anpassen, ohne das eigentliche Theme anzufassen.

Ein Child-Theme funktioniert folgendermaßen: Sobald eine Template-Datei benötigt wird, wird zuerst im Child-Theme Ordner geguckt, ob diese dort angelegt ist. Falls die Datei beim Child-Theme gefunden wird, wird diese geladen und ausgeführt. Wenn die Datei nicht existiert, wird auf das Parent-Theme zurückgegriffen und die benötigte Datei von dort geladen. Das hat den Effekt, das man einzelne Vorlagen mithilfe eines Child-Themes verändern kann, ohne das eigentliche Theme anzufassen. Besonders interessant ist die functions.php Datei. Man kann für eine eigene für das Child-Theme erstellen und dadurch ein Theme um Funktionen erweiterten, umschreiben oder löschen.

 

Vorteile von Child-Themes

Wie oben bereits schon angerissen. Durch ein Child-Theme kann man ein Theme umschreiben, ohne dieses anzufassen. Der größte Vorteil der dadurch entsteht ist, das das Theme weiterhin „updatebar“ bleibt – den wenn beispielweiße ihr ein gekauftes Theme benutzen wollt, es aber an eure Bedürfnisse anpasst und damit den Code verändert, sind alle Änderungen hinfällig. Natürlich besteht die Möglichkeit das Theme einfach nicht mehr zu aktualisieren, aber das ist auch nicht die Lösung.

Sehr nützlich werden Child-Themes auch, wenn ihr ein eine WordPress-Multisite betreibt. Den wenn ihr da ein Theme für gleich mehrere Seiten benutzen wollt, dieses aber auch für die Seiten individuell anpassen wollt, braucht ihr nicht das Theme komplett zu kopieren, umzubennen und umprogrammieren – da reicht es aus, wenn die jeweilige Template-Datei im Child-Theme neu anlegt und diese umschreibt.

 

Tutorial: Eigenes Child-Theme erstellen

wordpress-child-theme-ordner-anlegenAls erstes legt ein Verzeichnis in WordPress an. Der Ordner kommt unter „/wp-content/themes/“, sodass der Pfad einschließen folgendermaßen aussieht „/wp-content/themes/child-theme-ordner/“.

Als nächstes müsst ihr in eurem Child-Theme-Verzeichnis eine „style.css“ erstellen. In der „style.css“ werden die Eigenschaften des Child-Themes eingetragen, wie der Name, eine Beschreibung und der Name des übergeordneten Themes. Die Angaben werden als aller erstes in der Stylesheet-Datei im Form eines Kommentars geschrieben.

 

 

So hat es auszusehen:

/*
Theme Name: Hier wird der Theme-Name angegeben
Theme URI: Die Adresse unter der man euer Theme finden kann
Author: Der Name des Autors, also euer eigener
Author URI: Die Adresse unter der ihr erreichbar seit, z.B. eure Website
Description: Eine Beschreibung für euer Theme
Version: Die Version eurer Themes - z.B. "1.0"
License: die Lizenz welche für das Theme gilt
License URI: Eine Seite wo man die Lizenz nachlesen kann 
Tags: Schlagwörter die euer Theme kurz beschreiben
Text Domain: ein alias für euer theme (sollte so wie euer Child-Theme-Ordner heißen)
Template: hier der Name des übergeordneten Themes (also eigentlich die "Text Domain") - z.B.
twentytwelve
*/

 

Screenshot fürs Child-Theme erstellen

screenshotIhr könnt ein Screenshot für euer Child-Theme erstellen. Dazu legt ihr einfach eine PNG-Grafik mit 300 Pixel in der Breite und 225 Pixel in der Höhe an und nennt diese „screenshot.png“. Die Grafik legt ihr einfach in den Child-Theme-Ordner rein. Das Screenshot wird euch angezeigt, wenn ihr im Wordpress-Backend auf „Design » Themes“ geht, da wo ihr das Theme für eure Seite aussucht.

 

 

Damit ist das Child-Theme bereits fertig und einsatzfähig. Ihr müsst beachten, das natürlich das übergeordnete Theme auch in WordPress installiert sein muss, damit ihr das Child-Theme verwenden könnt, ansonsten kriegt ihr unter „Design » Themes“ eine Fehlermeldung angezeigt in der steht, das das Child-Theme fehlerhaft sei.

Jetzt könnt ihr das Childtheme so anpassen wie ihr wollt und das eigentliche Theme bleibt im Original-zustand. Ein kurzes Beispiel – ihr wollt die Startseite anpassen (der Fall dürfte wahrscheinlich häufig vorkommen), kopiert dazu du „index.php“ aus dem Eltern-Theme und fügt es in euer Child-Theme ein. Um die Änderungen nun vorzunehmen öffnet ihr die „index.php“ in eurem Child-Theme und fügt dort die Änderungen ein.

 

Fertige Child-Theme Vorlage zum downloaden

Hier habe ich euch noch eine fertige Child-Theme Vorlage bereitgestellt. Ihr könnt die Vorlage hier als ZIP-Datei downloaden, entpacken und anpassen.

» WordPress Child-Theme Vorlage zum Anpassen

 

Noch ein Hinweis – Kein CSS-Code wird geladen

Wenn ihr euch wundert, warum bei der Vorlage sobald ihr sie aktiviert keine Stylesheet geladen werden, hier die Erklärung. Es wird schon eine Stylesheet-Datei geladen, nur die aus dem Child-Theme-Ordner und da in der nicht mehr steht, als die Theme-Definition, wird auch nichts formatiert. Ihr müsst also noch den Code aus der „style.css“ des Parent-Theme einbinden. Ihr könnt das machen indem ihr über die „style.css“ mithilfe von „@import“ die andere Stylesheet-Datei einbinden (davon rate ich euch aber ab, wird bei Website-Optimierungen bemängelt) oder in dem ihr den Code von der einen CSS-Datei in die andere kopiert (rate ich aber auch von ab, da dadurch bei einem Update die neuen CSS-Definitionen wieder manuell nachgefügt werden müssen) – wozu ich rate: ladet mithilfe der „funktions.php“ als eigene „<link rel=“stylesheet“ />“ Definition mit.

 

Hier ein fertiger Codesnippet für die funktions.php (die ist in der Vorlage, welche ich zur Verfügung stelle nicht mit dabei – die müsst ihr euch selber anlegen.)

<?php
 add_action('wp_head','load_parent_style',0);
 function load_parent_style() {
 wp_register_style('parent-theme',get_bloginfo('template_directory').'/style.css');
 wp_enqueue_style('parent-theme');
 }
?>

Mit dieser Basis könnt ihr euch selber Child-Themes anhand von euren Themes erstellen und benutzen.

 

Weitere Artikel zu WordPress Child-Themes:

 

Weiterführende Links:

Kategorien: Wordpress | Schlagwörter: Blog-Netzwerk, Child-Theme, Entwicklung, Theme
Der Autor:
Ich bin ein junger Webentwickler aus Fulda. In meinen Blog schreibe ich über Themen wie Wordpress, Zend Framework und Tipps für einen leichteren Arbeitsablauf. Ich möchte meine Erfahrungen teilen und dem einem oder anderen Webentwickler damit das Leben erleichtern. Finde mich auf Google+, auf Xing oder folge mir auf Twitter. Ich freue mich über jeden neuen Kontakt.

Tragen Sie sich für meinen Newsletter ein