Kinder machen das Leben leichter: Child-Themes richtig in WordPress anlegen

Kinder machen das Leben leichter: Child-Themes richtig in WordPress anlegen

Hilfe mir beim Programmieren mit WordPress

Hilfe mir beim Programmieren mit WordPress

Immer wieder kommen sie uns unter, diese Child-Themes. Meistens sind es eher Waise und verstoßene Kinder, ungeliebt und nicht gepflegt. Die meisten mögen sie nicht so recht, denn WordPress ist ja sooooo praktisch mit seinen Themes und da kannst du schnell mal was ändern.

Aber beim ersten Update ist die Überraschung groß:

Alle Änderungen sind weg!
Das ist gemein, WordPress kann doch nicht einfach alles überschreiben!

Das ist halt so, wenn man nicht aufpasst und direkt im Quellcode herumpfuscht. Natürlich gibt es die überall beliebte Variante:

  1. Vorhandenes Theme in in ein neues Verzeichnis kopieren
  2. Namen in der style.css ändern
  3. Änderungen direkt im Code machen
  4. Updates funktionieren nicht mehr

Auch nicht der schlaue Weg. Der richtige und komfortabelste ist der über ein Child-Theme, so wie es auch von WordPress selbst vorgeschlagen wird.

Aber viele von euch haben Probleme mit dem richtigen Anlegen eines Child-Themes. Darum gibt euch der Guru 2.0 heute eine passende Anleitung in die Hand.

1. Verzeichnis anlegen

Verzeichnis für neues Child-Theme

Verzeichnis für neues Child-Theme

Das ist noch das einfachst am ganzen. Aber eigentlich ist hier gar nichts schwierig, du musst nur ein paar Schritte in der richtigen Reihenfolge erledigen. Am einfachsten gehst du mit deinem FTP-Programm (wie zum Beispiel FileZilla oder Cyberduck) auf deinen Webserver und dort in das Unterverzeichnis /wp-content/themes/. Natürlich kannst du dies auch lokal ausprobieren. Dazu brauchst du aber eine lokale Installation von WordPress. Das ist auch der beste Weg, denn wenn du dummerweise was kaputt machst, ist dein echter Blog nicht in Gefahr.

Nehmen wir einfach mal an, du willst ein Child-Theme für das Theme twentyfifteen anlegen, aber es funktioniert für alle Themes gleich. Ich mache es immer so, dass ich dem neuen Verzeichnis den Namen des Hauptthemes mit einem angehängten -child gebe. Das ist aber nur meine Arbeitsweise, aber so erkenne ich sofort die Themes und die dazupassenden Kinder.

2. Stylesheet anlegen

Der nächste Schritt ist das Stylesheet für dein Child-Theme. Der Name dafür ist, wie immer bei WordPress –  style.css. Und auch der Inhalt ist nach WordPress-Standards, mit einer kleinen erweiterung.

Wichtig ist die Zeile 6 und die Zeile 8. In beiden Zeilen gibst du den Verweis, auf das Theme auf welches dieses Child-Theme beruht an. In der 6. zeile gibst du den Namen des Verzeichnis des Elternthemes an. Dieser muss genauso geschrieben sein, wie er am Server auch angelegt ist. Die zweite Zeile ist eher eine Information. Damit kannst du notieren, in welchem Namensraum die Übersetzungen geladen werden.

Eigentlich ist jetzt dein Child-Theme fertig. Mehr brauchst du gar nicht zum funktionieren. Doch damit die Stile des Haupt-Themes angewendet werden musst du noch den nächsten Schritt erledigen.

3. Theme-Funktionen anpassen

Wie eben gesagt brauchst du eine functions.php um die Stile des Eltern-Themes zu importieren. Klar könntest du eine @import-Regel verwenden, aber eleganter und sauberer ist mit einer Funktion, da du hier keine festen Pfadangaben verwendest.

Mit diesem Snippet stellst du sicher das die Stile importiert und angewendet werden. Wir verwenden wir hier nur einen kleinen Trick:

Ein Child-Theme ersetzt die Dateien des Eltern-Themes! Außer bei der functions.php.

Die zwei wichtigen Datei eines Child-Themes

Die zwei wichtigen Datei eines Child-Themes

UPDATE!
Nach einem Test und etwas logischer Überlegung habe ich die Zeile 4 und 5 auskommentiert. Denn dadurch wurde das Stylesheet des Child-Themes zweimal geladen. Ist eigentlich klar, denn durch das aktiveren des Child-Themes wurde auch dessen Stylesheet schon aktiviert. Wenn wir es jetzt nochmals in der functions.php laden, wird es natürlich ein zweites Mal geladen. Daher lassen wir diesen Aufruf besser weg.

Hier werden beide Dateien geladen. Nur jene vom Child-Theme wird als erstes geladen und danach die functions.php vom Eltern-Theme. Dadurch musst du aufpassen, dass du nicht dieselben Funktionsnamen verwendest um Konflikte zu vermeiden. Mit dem vorherigen Code drehen wir aber die Ladereihenfolge für die css-Datei um. Zuerst wird die style.css des Eltern-Themes geladen und danach durch die Stile des Child-Themes ergänzt.

Nun sollten auf deinem Webserver das Verzeichnis angelegt sein und darin sollten zwei Dateien liegen. Jetzt kannst du in deinem Dashboard probieren, das Theme mit dem Menüpunkt Design zu aktivieren.

4. Screenshot speichern

Das neue Child-Theme im Dashboard

Das neue Child-Theme im Dashboard

Wie du siehst, ist das Child-Theme zwar in deinem Dashboard vorhanden. Es zeigt dir auch den passenden Namen an, aber hübsch ist es nicht. Es fehlt einfach die passende Grafik, ein Foto für das Theme. Natürlich kannst du es aktivieren und verwenden, aber es fehlt halt etwas.

Daher brauchen wir ein bild für unser Theme. Du brauchst dazu eine Grafik mit 880 Pixel Breite und einer Höhe von 660 Pixel. Du kannst in dem Foto speichern was du willst, doch wäre ein Bild das mit dem Theme im Zusammenhang steht gut. Dann kannst du es leicht im Dashboard erkennen. Speichere das Foto mit dem Namen screenshot.png in das Verzeichnis deines Child-Themes.

Child-Theme mit eigenem Screenshot im Dashboard

Child-Theme mit eigenem Screenshot im Dashboard

Wichtig ist, dass es eine png-Datei ist und der Dateiname richtig ist. Sobald du das bild im passenden Ordner hast, kannst du dein Dashboard aktualisieren. Und voilà die Grafik erscheint wie durch Zauberhand.

5. Teile des Themes verändern

Und jetzt kannst du loslegen und (fast) alles des Elternthemes anpassen und verändern. Die einfachste Variante ist die “Kopie”. Kopiere dir die Datei des Eltern-Themes, welche du anpassen willst, in das Verzeichnis des Child-Themes. Jetzt kannst du den gesamten Quellcode innerhalb des Child-Themes anpassen.

WordPress löst es sehr einfach für dich. Wenn eine Datei im Eltern- und im Child-Theme existiert, wird immer die des Childs verwendet. Sonst wird immer die verwendet, welche existiert. Fehlt also eine Datei im Child und existiert im Haupt-Theme, wird die des Eltern-Themes verwendet. Legst du aber eine neue Datei im Child-Theme an, wird diese auch verwendet. Dadurch kannst Du Teile des Themes überschreiben und auch das Theme mit neuen Dateien ergänzen.

Wie schaut es aus, hat dir die Anleitung geholfen? Wenn du Fragen hast, der Guru 2.0 freut sich über jeden Kommentar und wird auch gleich mal antworten.

Kommentare sind geschlossen.

Blogheim.at Logo