WordPress Child Themes
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:
1 2 3 4 5 6 7 8 9 10 11 | /* 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:
13 14 15 | a { color:#0000cc; } |
Fertig ist unser Child Theme!
Child Theme deLightChild mit Parent Theme deLight.
Simon [webdemar]
Moin, ich bin Simon und betreibe webdemar.com als meine ernstgemeinte Spielwiese für WordPress, Webdesign und so.
7 Kommentare
8 Trackbacks
- deLight customization - no floating smilies | Nick Prosch online - [...] If you don’t want to mess up your theme’s CSS use so called Child Themes as webdemar describes here ...
- Ideenklau » Theme Frameworks und Child Themes - [...] für mich entdeckt. Sie trägt den Namen “Child Themes” und wird wunderbar bei Webdemar erklärt, besser kann ich das ...
- Theme Frameworks und Child Themes « Ideenklau - [...] für mich entdeckt. Sie trägt den Namen “Child Themes” und wird wunderbar bei Webdemar erklärt, besser kann ich das ...
- WordPress Child Themes | webdemar.com - [...] WordPress Child Themes | webdemar.com Comments0 ...
- #35 – 2009 • abgefahren, delicious, leumund, links, sammlung, woche • leumund.ch - [...] August 2009 · Allerlei Im Fluss Woche 35 – 2009: WordPress Child Themes | webdemar.com • Grand ...
- peternolte.com » Blog Archive » “Vintage Green” ein child theme für Mimbo 3.0 - [...] grundlegender Artikel zum Thema child themes hat Simon auf webdemar veröffenlicht. Sehr informativ und verständlich. [...]
- WordPress Themes anpassen | TreasureZone - [...] Eine gute Anleitung, wie man WordPress Themes über Child Themes verändern kann, habe ich bei WEBDEMAR ...
- links for 2010-03-07 | Helmis Social Log - [...] 2010-03-07Written on März 8, 2010 by Frank Helmschrott in bookmarks0 Comments - Leave a comment!WordPress Child Themes | webdemar.comWie ...
Kommentar schreiben
23. Dezember 2008
Your thema is so nice. Esperially it is nice as visual.
27. März 2009
Kann man bei einem Child Theme auch die Templates und Images an sich ändern?
Habe bisher immer nur gelesen, dass man das CSS ändern kann.
Wenn ja wie kann man z.B. die Header des Child-Themes benutzen?
27. März 2009
@Manuel:
Neben der style.css hast Du noch weitere Einflussmöglichkeiten über die functions.php des Child-Themes. Wenn Du Dich damit ein wenig auskennst, kannst Du mit WordPress-Filtern arbeiten. Das eigentliche Markup des Themes kannst Du damit aber nicht oder nur geringfügig verändern.
1. April 2009
Nun habe ich mein erstes Theme fertig und möchte es demnächst zum Download anbieten. Basierend auf Kubrick — wie so viele — hat es aber bei der Totalüberholung relativ lange gedauert, bis alles im Kasten war. Da steht kaum noch ein Kubrick-Stein auf dem anderen. Gerade für weniger versierte Benutzer ist aber so ein Child-Theme eine feine Sache. Ich werde die CSS mit den am häufigsten geänderten Features (Linkfarbe, Textfarbe, Hintergrund etc.) versehen, dazu Kommentare und auskommentierte Code-Schnipsel, die dann nur noch angepasst und aktiviert werden müssen. So ein “Kind” ist dafür echt ein Traum! Und diese Erklärung hier wasserdicht und richtig gut. THX!
Jörg
30. April 2009
“Unser Child Theme ist jetzt erstellt und erscheint ab sofort im WordPress-Administrationsbereich unter Darstellung > Themes als eigenständiges Theme.” leider nicht
Da steht nur “Fehlerhafte Themes. Die folgenden Themes (mimbochild\par) sind fehlerhaft. Jedes Theme muss mindestens ein Stylesheet und eine Vorlagendatei haben.” Was will mir das Backend damit sagen?
28. Oktober 2009
Hallo, ich verstehe nach wie vor nicht ganz den Sinn der Child Themes. Ich suche nämlich nach einer Möglichkeit, meine Änderungen nicht nur in der style.css des Themes vor Änderungen bei einem Themeupdate zu schützen, sondern auch die php-Dateien des Themes (single.php etc.).
Gehe ich recht in der Annahme, dass child themes nur die eigenen, angepassten CSS schützt, nicht aber Änderungen an Theme PHP-Dateien zu schützen vermag?
Danke.
16. Februar 2010
es sind auch änderungen an den anderen template files möglich, zB. am single.php file. dazu kopierst du das single.php deines parent themes in den ordner des childthemes, neben das style.css. jetzt kannst du änderungen in single.php machen, oder es neu schrieben, genau wie du es auch im original theme machen kannst.
einziges problem bei einem theme-update: allfällilge änderungen im single.php bei einer aktualisierung des parent themes müssen dann wieder von hand gesucht/geändert werden.
zu beachten ist auch, das gewisse links anders gemacht werden müssen, da du dich ja mit dem file nicht mehr im ordner des parent-themes befindest.