WordPress Themes anpassbar machen mit Child Themes

WordPress Themes anpassbar machen dank Child Themes

Mit der damaligen WordPress 3.0 Version entstand ein Feature, welches es möglich macht, Themes umzubauen, ohne das Ursprungs-Theme verändern zu müssen. Dies bringt den großen Vorteil, dass neue Updates von dem Theme meist ohne Schwierigkeiten eingespielt werden können und die geänderten Einstellungen dennoch greifen.

Dazu sind nur wenige Schritte notwendig, die ich euch gerne an dem kostenlosen Theme „Twenty Fifteen“ erklären möchte.

theme_15

Das Theme könnte nun aktiviert werden

Zunächst einmal ladet ihr euch das entsprechende Theme herunter und legt es im WordPress Theme Ordner ab, sodass ihr unter „Design -> Themes“ das Theme sehen könnt. In meinem Beispiel das Theme „Twenty Fifteen“.

So, nun habt ihr schon mal euer „Parent Theme“ aktiviert, aber genau das soll nun nicht angepasst werden, um später updaten zu können. Also begebt ihr euch auf die Konsole oder auf den FTP und sucht euer WordPress mit dem Theme Ordnern (bei Mittwald unter /html/wordpress/wp-content/themes).

Ihr seht nun die entsprechenden Theme Ordner, in meinem Beispiel ist erst einmal „twentyfifteen“ relevant. Euer Ordner wird höchstwahrscheinlich so ähnlich klingen wie das Theme, das ihr benutzen möchtet.

Erstellt im Ordner „themes“ nun das Child Theme; der Name sollte am besten so klingen, dass ihr euch später nicht fragt, was dieses Theme macht und somit aus Versehen löscht. Ich nenne den Ordner z. B. einfach „twentyfifteen-child“.

theme_15_11

Aufbau der Ordnerstruktur

Ihr wechselt nun in das Child Theme hinein und erledigt die letzten notwendigen Schritte.

Hier ist es wichtig, WordPress mitzuteilen, dass ein Child Theme vorliegt und dieses mit einer höheren Priorität als das Parent Theme angesprochen wird. Das geht ganz einfach, indem ihr in dem Child Theme Ordner die Datei „style.css“ anlegt und diese folgerndermaßen befüllt:

Inhalt der style.css:

/*
Theme Name: Child Theme von Twenty-Fitfteen
Description: Child Theme mit diversen manuellen Anpassungen
Author: Artur Nikiforov
Author URI:
Template: twentyfifteen (Ordnername des Parent Themes)
Version: 1.0
Tags: (Kann leer gelassen werden)
*/
@import url(„../twentyfifteen/style.css“);

Was seht ihr in dieser style.css und warum müsst ihr diese anlegen? Eigentlich recht simpel, wenn man die Antwort kennt. Der Theme Name wird euch später mit der Description, dem Author, der Author URL sowie der Version und den Tags im WordPress Backend unter Themes angezeigt, es sind also Zusatzinformationen.

Die Zeile „Template“ gibt an, welches das Parent Theme ist, damit wird die Verbindung der beiden Themes hergestellt. Die letzte Zeile importiert eure CSS-Anweisungen aus dem Parent Theme; ohne diese Informationen würde euer Template sonst im Frontend recht leer aussehen.

Das Child Theme ist nun fertig und kann über das WordPress Dashboard unter „Design -> Themes“ aktiviert werden. Wichtig ist auch, dass ihr das Child Theme aktiviert und nicht das ursprüngliche Parent Theme.

Das Child Theme steht, wie geht es weiter?

Dadurch dass ihr nun euer Theme Update sicher gemacht habt, könnt ihr fleißig im Child Theme Ordner Änderungen durchführen. Diese werden übernommen, legen aber euer Parent Theme beim Update nicht lahm.

Ihr könnt in der style.css z. B. festlegen, dass der Text in eurem Footer nicht mehr braun sein soll, sondern mintgrün. Dazu tragt ihr einfach die folgenden Zeilen ein:

#footer {
color:#BDFCC9;
}

Das Child Theme überträgt die Angaben an das Parent Theme und euer Footer erstrahlt in der Schriftfarbe Mintgrün.

Das Gleiche kann auch mit einzelnen Dateien gemacht werden, wenn zum Beispiel die search.php (die Datei, die für die Suchfunktion zuständig ist) umgeschrieben werden muss; so kopiert ihr euch diese einfach in den Child Theme Ordner und passt sie an.

WordPress gibt auf diesem Wege eine super Möglichkeit, das System so anzupassen, wie ihr es gerne haben möchtet und dennoch Update sicher zu bleiben.

PS: Falls euch im Dashboard das fehlende Bild des Child Themes stört, so erstellt einfach ein Bild in 600px x 450px und nennt es screenshot.png. Das einfach nur noch in den Child Theme Ordner ablegen.

Dann mal viel Spaß beim Anpassen! :)

Kommentare

  1. Anja am

    Danke, sehr gut und vor allem einfach erklärt! Ich habe es ohne Probleme und beim 1. Versuch gleich hinbekommen!
    Liebe Grüße Anja

    Antworten

Kommentar hinzufügen