[WordPress] Eigenes Child-Theme erstellen

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (Keine Bewertung vorhanden)
Loading...

Nach dem wir unser Projekt Mikes-PC Hilfe eingestellt haben, widmen wir uns im Rahmen des MiGo-IT-Blogs neuen Aufgaben. Unsere erste Herausforderung war, die richtige Plattform zu finden. Lange haben wir überlegt, auch hier das MiGo-Portal zum Einsatz zu bringen, uns aber dann doch dagegen entschieden. Warum? WordPress bietet bereits alles Out of the Box und dazu noch jede Menge Plugins. Wir müssen das Rad nicht neu erfinden. Und zum bloggen ist das perfekt.

Dadurch mussten wir uns intensiv mit WordPress auseinander setzen, diverse Features, die wir entdeckt haben, lassen wir nun in kleine Tutorials fließen. Heute beginnen wir mit dem Thema Child-Themes.

Was sind Child-Themes?

Wer nicht gerade ein WordPress Default Theme benutzt, wird merken, dass die Designer/Authoren der Designs recht häufig Updates bereitstellen. Wer nun aber dieses Theme verändert, hat ein Problem. Das Update überschreibt alle Files.

Um das zu umgehen, gibt es Child-Themes. Die Arbeitsweise ist ideal, denn man kopiert sich nur die Dateien aus dem originalen Theme, die man modifzieren will. Bei einem Update vergleiche ich anschließend, ob die ausgewählten Dateien Änderungen seit dem letzten Update haben (via eigenem SVN). Ist das nicht der Fall, brauche ich nichts tun.

Wie richte ich es ein?

Beginnen wir mit einem neuen Ordner im wp-content/themes Order, Bsp.: newTheme1. In diesem Ordner muss nun nur eine einzige Datei angelegt werden, damit das Child-Theme aktiviert werden kann, eine style.css. Wichtig ist nun deren Inhalt. In den ersten Zeilen muss folgender Inhalt erscheinen:

  1. /*
  2. Theme Name: MiGo-IT-Blog Theme
  3. Theme URI: http://www.migo-it-blog.de
  4. Author: MiGo-WebDesign
  5. Author URI: http://migo-webdesign.de
  6. Description: MiGo-IT-Blog Theme
  7. Version: 1.0
  8. Template: catch-box
  9. */
  10.  
  11. @import url("../catch-box/style.css");

Wichtig hier, in der letzten Zeile des Kommentars, Template. Dieser Wert muss dem Ordnernamen entsprechen, in dem das Master-Theme liegt. In dem Fall hier catch-box. Mit der import url Zeile wird bewirkt, dass das original CSS geladen wird. In den darauf folgenden Zeilen können nun sämtliche CSS Werte überschrieben werden bzw. eigene angelegt werden. Zum Beispiel:

  1. .feature-slider a.active {
  2. 	background-color: #ac0707;
  3. }

Jetzt lässt sich das Theme in dem WordPress Adminbereich schon aktivieren, und das neue CSS wird geladen. Damit aber nicht genug 🙂

Wie ändere ich den HTML Code, der erzeugt wird?

Jede Seite die man im Blog erreichen kann, wird durch ein Template erzeugt. Jedes dieser Templates baut sich aus diversen PHP Dateien zusammen. Jetzt ist etwas suchen angesagt, die richtige Datei muss gefunden werden. Je nach Theme etwas aufwändiger. Tipp: Debug Ausgaben einbauen (echo „DEBUG“;) und die original Dateien aktualisieren. Dann sieht man recht schnell, welche Datei wo benutzt wird. Einfacher ist es z.B. mit der header.php, die ist selbstsprechend.

Haben wir nun die Datei gefunden, die wir ändern möchten, kopieren wir diese eine Datei in unseren neuen Theme Ordner (newTheme1). Dort können wir diese nun nach belieben editieren. WordPress sucht zu jeder Datei, die im originalen Theme aufgerufen werden soll, in dem Child-Theme Ordner. Wird die Datei dort gefunden, wird diese genommen. Hier nochmals der Hinweis, bei einem Update des Master Themes, muss überprüft werden, ob auch in den Dateien im Child-Theme Ordner liegen, Änderungen manuell nachgezogen werden müssen.

Mein HTML Code liegt in der functions.php, was nun?

In dem Fall kann auch im Child-Theme eine eigene functions.php angelegt werden. Hier sollte die originale Datei aber nicht kopiert werden, sondern eine leere angelegt werden. Gute Themes erlauben das „überschreiben“ der originalen Funktion. Das bedeutet in der eigenen functions.php kann der Methodenname der originalen Funktion benutzt und dann deren Inhalt geändert werden. Ist das Master-Theme schlecht gebaut, erscheint im Blog ab sofort „Fatal error: Cannot redeclare class … in … on line …“. Hier bleibt leider nur der Weg die originale functions.php bei jedem Update wieder zu editieren.

Auch können in der eigenen functions.php eigene Funktionen eingebaut werden, die sich überall im Blog aus dem Template aufrufen lassen.

Wo gibts dazu mehr Informationen?

WordPress selbst hat dazu einen Wiki-Artikel veröffentlicht, jedoch nur auf englisch: WordPress Child-Themes.

Weitere Tipps

Wir können es nur wärmstens empfehlen, bei der Entwicklung SVN/CVS einzusetzen. Das erleichtert den Abgleich von Änderungen enorm. Wir haben dazu das original Theme als auch das Child-Theme im SVN eingecheckt, bei einem Update des Master-Theme ersetzen wir die lokalen Dateien und vergleichen gegen die eingecheckten im SVN. So sehen wir alle Änderungen auf einen Blick und können auch sehr schnell Änderungen am Child Theme nachziehen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*

Sicherheitsfrage *