10. September 2008

Allgemeine Tipps, WordPress

WordPress Child Themes

von Simon [webdemar] - 16 Kommentare

Wie kann man ein WordPress Theme verändern ohne es zu verändern? Die Frage klingt paradox, die Antwort jedoch ist sehr einfach. Mit WordPress Child Themes. Diese ermöglichen uns, das Theme zu beeinflussen ohne die Originaldateien verändern zu müssen.

Das einfachste Child Theme ist ein extra Verzeichnis im Verzeichnis /wp-content/themes, das ein CSS-File enthält, welches dem Child Theme sagt, welches sein Parent Theme ist und das CSS dieses Parent Themes erweitert oder überschreibt. Klingt ein wenig verwirrend, ist es aber nicht. Gehen wir mal ins Detail.

Was ist der Sinn von Child Themes?

Viele, die sich ein WordPress Theme heruntergeladen haben, möchten dieses den eigenen Bedürfnissen anpassen. Sei es, dass der verwendete Font oder die Farbe aller Links verändert werden sollen.

Diese Änderungen lassen sich mit ein paar CSS-Kenntnissen im Theme-Stylesheet (CSS) umsetzen. Jedoch muss man hierfür die Theme-Dateien verändern.

Bei langlebigeren WordPress Themes mit gutem Support (kostenlose und auch Premium WordPress Themes) werden evtl. Updates des Themes angeboten, die Bugs beheben oder das Theme einfach verbessern. Oder man hat sein Theme auf einem Theme Framework aufgebaut, welches ständig erweitert und verbessert wird.

Ohne Child Themes müsste man hier jedes mal neu die Änderungen am Theme durchführen, um die Updates realisieren zu können. Mit dem Einsatz eines Child Themes kann ich dieses Update getrost einspielen, denn meine Änderungen sind ja in einem extra Verzeichnis losgelöst vom Parent Theme. So gehen meine Änderungen nicht verloren und das Update des Parent Themes ist eine Sache von ein paar Minuten.

Wie erstelle ich ein WordPress Child Theme?

Das Erstellen eines Child Themes ist denkbar einfach. Dazu brauchen wir zunächst ein Parent Theme, das es mit dem Child Theme anzupassen gilt. In meinem Beispiel verwende ich hierfür mein Theme deLight. Das Theme liegt im Verzeichnis /wp-content/themes/deLight.

Als nächstes erstellen wir unser Child Theme, welches ich deLightChild nenne. Wir erstellen also im Verzeichnis /wp-content/themes einen neuen Ordner namens deLightChild (wp-content/themes/deLightChild). In dem deLightChild-Ordner erstellen wir ein neues Stylesheet names style.css (wichtig: die Stylesheet-Datei muss genau so heißen, damit WordPress das Child Theme erkennt).

Ganz oben in unserem neuen Stylesheet machen wir folgende Angaben:

/*
Theme Name: deLightChild
Theme URI: http://webdemar.com/demo/?wptheme=deLightChild
Description: Child Theme for deLight
Author: webdemar
Author URI: http://webdemar.com
Template: deLight
Version: 0.1
*/

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

Besonders wichtig ist hierbei der Punkt Template. Hier wird unserem Child Theme gesagt, welches sein Parent Theme ist. Wichtig ist hierbei, dass nicht der Name, sondern der Ordner des Parent Theme angegeben werden muss! In meinem Fall sind diese indentisch. Wenn jedoch Dein Parent Theme BeispielTheme heißt und es im Ordner bsptheme liegt, musst Du hier Template: bsptheme angeben.

Mit dem Import-Befehl laden wir uns das gesamte Stylesheet unseres Parent Themes. Wichtig ist, dass keine anderen CSS-Angaben davor stehen, weil das Parent CSS sonst nicht mehr importiert wird.

Unser Child Theme ist jetzt erstellt und erscheint ab sofort im WordPress-Administrationsbereich unter Darstellung > Themes als eigenständiges Theme.

Wir können jetzt beginnen, Änderungen in dem Child Theme CSS vorzunehmen.

In meinem Beispiel Child Theme möchte ich, dass alle Links nicht in dem Weinrot des deLight-Themes, sondern in Blau dargestellt werden.

Ich schreibe also folgendes in das Stylesheet:

a {
color:#0000cc;
}

Fertig ist unser Child Theme!

Child Theme deLightChild mit Parent Theme deLight.

Child Themes, WordPress Themes