Folge 5: Ein Child-Theme erstellen und verwenden

Auch wenn es in letzter Zeit sehr still geworden ist: keine Sorge! Die Serie WordPress für Let’s Player ist selbstverständlich noch am Laufen. Problematisch ist nur, für dieses Unterfangen Zeit zu finden. Schließlich möchte ich euch auch qualitativ hochwertige Artikel bieten und nichts „mal eben hinrotzen“, nur um irgendwas hier stehen zu haben, oder überhaupt nichts mehr zu verfassen.

Weiterhin arbeite ich zurzeit intensiv an der Neugestaltung meiner eigenen Let’s Player-Webseite breathlp.de. Dort setze ich momentan meine neusten Ideen zu verwirklichen und den vorhandenen Code weiter aufzuräumen.. Aber wie dem auch sei..

WordPress für Let’s Player geht weiter!

Ich werde die Serie auf jeden Fall fortführen und beenden, dies aber in dem Tempo, wie es mir passt. Ich hoffe ihr habt dafür Verständnis, vielen Dank aber auf jeden Fall für die positive Resonanz bisher!

Naja, genug der Vorrede! In dieser Folge wollen wir uns nun der Erstellung eines so genannten Child-Themes widmen. Wir brauchen dies, um Änderungen an unserem gewählten Theme vornehmen zu können, ohne dass diese bei einem Update dessen verloren gehen. Diese Änderungen werden zum Beispiel eine schönere Artikel-Auflistung auf der Startseite und innerhalb der Kategorien oder den eigentlichen YouTube Player beinhalten.

Child-Themes zu verwenden bietet außerdem noch etliche weitere Vorteile, auf die ich hier aber (erstmal?) nicht eingehen möchte. Es ist aber nur besser für euch für unser Vorhaben, ein solches zu erstellen und zu verwenden :)

Wie funktioniert ein Child-Theme überhaupt?

Man kann sich das wie eine Erweiterung für ein bestehendes Theme vorstellen. Es enthält zusätzliche Dateien, die bestimmte Bereiche des eigentlichen Themes verbessern oder austauschen sollen. Wir werden darüber unserer Webseite sozusagen ein paar DLCs verpassen!

Dem entsprechend ist ein Child-Theme eigentlich nicht mehr als ein weiterer Theme-Ordner innerhalb unserer WordPress Installation. Innerhalb diesem befinden sich dann Template und Style-Dateien sowie alles weitere, was man vielleicht zusätzlich einbinden möchte. Die Dateien, die wir im Theme austauschen wollen, haben dabei den selben Namen wie das Original im eigentlichen Theme (und sollte auch auf diesem basieren). Aber genaueres dazu dann gleich.

Wie legt man ein Child-Theme an?

Das Child-Theme besteht – wie gesagt -aus einem Ordner mit mindestens einer Datei. Enthalten ist auf jeden Fall eine style.css. Dort wird das neue Theme als Child-Theme erklärt und mit dem „richtigen Theme“ verknüpft. Innerhalb dieser CSS-Datei können wir unser Child-Theme selbstverständlich aber auch optisch anpassen.

Die style.css: Die Wurzel unseres Vorhabens

Ein Beispiel für die style.css:

/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fourteen-child
*/

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

/* =Theme customization starts here
-------------------------------------------------------------- */

In diesem oberen Abschnitt der style.css wird das Theme beschrieben. Ihr könnt einen solchen Abschnitt innerhalb jeden Themes finden. Wichtig und notwendig sind eigentlich nur „Theme Name“ und „Template“, der Rest ist eigentlich nur optional und eher wichtig, wenn ihr euer Theme veröffentlichen wollt.

Das muss auf jeden Fall angepasst werden:

Mit „Theme Name“ müsst ihr euer Theme einen Namen geben. Dieser kann sich trefflich an dem Eltern-Theme (also das Theme auf dem dieses basiert) orientieren, ihr könntet dort aber auch alles mögliche eintragen.

Unter „Template“ stellen wir schließlich die Verbindung zum Eltern-Theme auf. Dies ist einfach nur der Name des Ordners, in dem sich das Eltern-Theme befindet. Bei dem in Folge 4 gewählten Theme also „iconic-one“.

Relativ wichtig ist auch noch die @import-Zeile. Das Child-Theme verwendet nämlich von alleine nur die eigene style.css, da wir aber im Grunde erstmal die Styles vom Eltern-Theme haben wollen, müssen wir die style.css dessen erstmal importieren. Wir können die dort bestimmten Stile bei Bedarf überschreiben. Die Zeile braucht man auch nur auf die Ordnerstruktur des Eltern-Themes anpassen (z.B. „../iconic-one/style.css“ beim Beispiel – Wir wissen ja, dass jedes Theme die style.css im Root-Ordner dessen hat).

Und..

Das war’s im Grunde auch schon! Das Child-Theme könnte man so in den WordPress-Einstellungen bereits aktivieren.

Was es sonst noch zu sagen gibt

Optional kann man in dem Theme-Ordner auch noch eine screenshot.png mit den Maßen 880×660 Px einfügen. Dies ist das Vorschau-Bild, das bei der Theme-Auswahl gezeigt wird. Ist aber eigentlich auch nicht unbedingt notwendig, wer dem ganzen aber den letzten Schliff verpassen möchte.. ;)

Die Änderungen bezüglich Template-Dateien oder weiteren Sachen zu Child-Themes werden wir uns in den nächsten Folgen dann anschauen. Gesagt sei halt nochmal, dass die Template-Dateien im Child-Theme Ordner die des Eltern-Themes überschreiben und dies die ganze Magie ist, warum wir das überhaupt machen. Bis zum nächsten Mal!

Jens Jakob

Autor, Fotograf, Videoproduzent... und mehr - oder weniger. Ich mache, worauf ich Lust habe. Auf lichtbahn.de schreibe ich über eben solche vielseitige Themen, was mich interessiert, was ich mache und was mich antreibt. Viel Spaß beim Lesen!

3 Kommentare:

  1. Pingback: Eigenen YouTube Player durch Playlist der Let's Play-Serie ergänzen - lichtbahn.de

  2. Möchte schon seit längerem eine Homepage für meine Let’s Plays einrichten und mit deinem Tutorial habe ich damit jetzt endlich mal angefangen. Sieht noch nicht so ganz gut aus, aber jeder fängt ja mal klein an :-)
    Freue mich schon auf die nächsten Teile des Tutorials ^^

    • Sorry für die seeehr späte Antwort und starke Verzögerung vom neuen Part, der ist aber jetzt endlich draußen :)

      Und genau so ist es. Aber kann man ja dran arbeiten! :D

Kommentar verfassen - Was meinst du dazu?