WordPress Theme-Anpassungen mit Hilfe eines Child-Themes

3. Dezember 2012
von

Wordpress bietet die Möglichkeit, sogenannte Child-Themes anzulegen. Diese kommen dann zum Einsatz, wenn ihr ein vorhandenes Theme nach euren Vorstellungen anpassen möchtet. Das geht einfacher als es klingt, und ich zeige euch, wie es funktioniert.

Das Theme bestimmt, wie die Seite aussieht, wie sie sich verhält, und was sie alles kann. Wenn ihr also das Aussehen oder die Funktionalität eurer Seite ändern möchtet, dann müsst ihr das Theme anpassen.

Doch wie passt ihr das Theme an?

Das Child-Theme steht über dem Parent (Eltern-) Theme. Es übernimmt Aussehen und Funktionalität vom Parent Theme. Vereinfacht gesagt, besteht ein Theme aus vielen Bauklötzen, die zusammen eine Form bilden. Mit dem Child-Theme lassen sich die Bauklötze in eine neue Form bringen. Es können Bauklötze entfernt, verschoben oder neue hinzugefügt werden. Man baut also nicht von Grund auf ein neues Theme, sondern man verwendet eine bestehende Form und baut diese um.

Ihr habt ein schönes Theme gefunden, das ihr für euer Blog verwenden möchtet. Leider passen euch die Schriftart, die Farben und die Grösse bestimmter Bereiche nicht. Die logische Schlussfolgerung wäre also: Weil das Theme das Aussehen meiner Seite bestimmt, passe ich das Theme meinen Bedürfnissen an.

Dies ist grundsätzlich auch richtig, führt aber spätestens bei einem Update des Themes zu Problemen. Und das aus folgendem Grund:

Das ursprüngliche Theme bietet die ganze Maschinerie, die eine WordPress-Seite benötigt. Nehmt ihr jetzt Änderungen am Design vor, nehmt ihr Änderungen an der Maschinerie vor. Gute Themes erhalten regelmässig Updates. Dabei werden CSS-, HTML- oder PHP-Anpassungen vorgenommen. Mit einem Update der Maschinerie wird das Vorhandene überschrieben und somit auch alle Änderungen, die ihr gemacht habt.

Hier kommt das Child-Theme ins Spiel. Wenn ihr aber von Anfang an mit einem Child-Theme arbeitet, befinden sich eure Änderungen hierarchisch oberhalb der Maschinerie. Und bei einem Update bleiben eure Anpassungen erhalten.

Step by Step zu euerem persönlichen WordPress-Theme:

1. Theme installieren

Für das Tutorial habe ich das Standard Theme “Twenty Twelve” von WordPress verwendet.

Theme installieren

2. Child-Theme erstellen

Alle Themes, die ihr installiert habt, befinden sich im WordPress-Ordner unter:

wpcontent/themes

Dort befindet sich auch der Theme-Ordner von “Twenty Twelve”. Innerhalb des Themes-Ordners erstellt ihr nun einen neuen Ordner für euer Child-Theme.

Child Theme Ordner

Dem Ordner könnt ihr einen beliebigen Namen geben. Hier heisst er childoftwentytwelve.

 

Jetzt kommt der wichtigste Teil:

– Öffnet einen HTML-Editor, z.B TextWrangler (Mac) oder Gedit (Linux, Windows).
– erstellt eine neue CSS-Datei und speichert diese unter dem Namen style.css im soeben neu angelegten Ordner.
– Fügt folgenden Code zuoberst in die Datei:

/*
Theme Name: Child of Twenty Twelve
Description: Fancy Child theme von Twenty Twelve
Author: Marco Korradi
Version: 1.0
Template: twentytwelve
*/

Die beiden Zeichen “/*” und “*/” sind wichtig, denn der Code soll als Kommentar in style.css vorhanden sein. Dieser Kommentar beschreibt das Theme. Am wichtigsten ist die Bezeichnung Template: twentytwelve, denn damit geben wir an, welches Theme das Parent-Theme ist, also jenes Theme, von welchem wir alle Eigenschaften übernehmen.

3. Child Theme aktivieren

Damit euer Theme auch funktioniert, muss es in WordPress noch aktiviert werden. Dies macht ihr genau gleich, wie mit anderen Themes. Einfach unter Appearance >> Themes das Child-Theme aktivieren

Child Theme aktivieren

4. CSS Styles

Das Theme hat zum jetzigen Zeitpunkt noch keinerlei CSS-Eigenschaften. Ihr habt nur definiert, dass es ein Child-Theme von “Twenty Twelve” ist. Die Datei style.css ist auch bis auf den Kommentar noch leer. Um die CSS-Styles vom Parent-Theme zu übernehmen, gibt es nun zwei Möglichkeiten:

1. Styles kopieren

oder

2. Styles importieren

Bei der ersten Variante kopiert ihr von Hand alle CSS Styles aus der style.css vom Parent-Theme in die style.css des Child-Themes. Somit habt ihr die volle Kontrolle, könnt alles Styles bearbeiten und erlebt keine bösen Überraschungen. Der grosse Nachteil: Bei einem Update der CSS-Styles vom Parent-Theme bekommt euere style.css kein Update. Es bleibt so, wie ihr es eingefügt habt.  Beim Importieren werden die CSS-Styles mit einem Befehl in die style.css des Child-Themes importiert. Dies hat den Vorteil, dass bei einem Update auch CSS-Änderungen übernommen werden. Der Nachteil ist: Eure Änderungen und jene, die durch ein Update vorgenommen werden, können sich gegenseitig behindern.

Trotzdem: Für eure Art der Anpassungen eignet sich die Import-Variante am besten. Dazu müsst ihr folgenden Code in eure style.css einfügen:

@import url(‘../twentytwelve/style.css’);

Ein kurzer Kontrollblick auf die Seite zeigt, dass jetzt euer Child-Theme die CSS-Styles vom Parent Theme übernommen hat.

5. Eigener Style

Jetzt stellt sich die Frage: “Wie finde ich heraus, wo ich was ändern muss, damit die Artikelüberschrift anders aussieht?” Oder:”Wo ist die Standardschriftart definiert?“.

Die meisten Browser bieten sogenannte Webdeveloper-Werkzeuge an. Für dieses Tutorial habe ich den Browser Chrome von Google benutzt. Und mit diesem wurden folgende Schritte durchgeführt:

1. Aufgabe: Ändern der Schriftgrössen für die Artikelüberschriften
–  Die neue Webseite im Browser öffnen.
– Rechtsklick auf eine Überschrift und “Element überprüfen” anklicken. Nun solltet ihr folgendes zu sehen bekommen:

Artikelüberschrift suchen

Im unteren Bereich des Fensters seht ihr im Quellcode, welches Element ihr ausgewählt habt, und rechts davon gleich die dazugehörigen CSS-Styles. Ihr seht also, dass der Titel “Hello World” ein h1-Element mit der Klasse entry-title ist.

In der style.css von eurem Child-Theme könnt ihr jetzt folgenden Code hinzufügen:

h1.entry-title a {
font-size:3em;
}

Das a am Schluss ist nötig, weil der Titel gleichzeitig auch ein Link ist.

2. Aufgabe: Standardschriftart ändern

Um herauszufinden, wo die Standardschriftart definiert ist, geht ihr gleich vor wie bei der ersten Aufgabe. Ihr solltet nun sehen, dass die Schriftart für das gesamte Dokument im body-Element definiert ist. Im CSS-Bereich des Webdeveloper-Tools sieht ihr folgende Definition für den body:

font-family: "Open Sans", Helvetica, Arial, sans-serif;

Also müsst ihr folgendes im style.css ändern.
body.custom-font-enabled {
font-family: serif;
}

Das waren zwei Beispiele, wir ihr CSS-Styles ändern könnt. Es erfordert am Anfang viel Recherchearbeit, bis man weiss, welche Klassen für welches Element bestimmt sind. Aber es ist sicher die einfachste Art, schnell und vor allem nachhaltig Änderungen an einem Theme vorzunehmen.

6. Fazit

Ein Child-Theme bietet wirklich jede Menge Möglichkeiten, um ein Theme den eigenen Wünschen anzupassen. Der grösste Vorteil liegt klar darin, dass bei einem Update die eigenen Änderungen nicht verloren gehen.

Folgende Artikel vertiefen das Thema Child-Themes weiter:

– Child-Themes im WordPress Codex
– Child-Themes Basics von ThemeShaper