Permalink

4

Ein WordPress Child-Theme erstellen und wozu es dienen kann

Ich bin kein Programmierer. Einen gewissen Reiz übt dieses kryptische Geschreibe aber schon länger auf mich aus. Ich interessiere mich dafür, kann aber nicht viel.

Im Zuge der Entstehung von unserem neuen Blog Social Media Statistik habe ich mich mal wieder ein bisschen damit auseinander gesetzt. Diesmal genau genommen mit Child-Themes und ein bisschen CSS-Programmierung.

Seit der Version 3.0 bietet WordPress solche Child-Themes an. Im Prinzip können diese Child-Themes alles, was ein normales Theme auch kann. Man muss aber nicht von Anfang anfangen und kann die CSS und .php-Dateien des Original-Themes verwenden und anpassen. So kann man sich, ohne direkt ein komplett eigenes Theme zu programmieren, ein bisschen Individualität schaffen.

Was kann ein Child-Theme?

Wie oben schon gesagt: Ein Child-Theme kann alles, was ein Original-Theme auch kann. Sprich: Man kan die style.css-Datei anpassen und jeder der .php Dateien. Hier erkläre ich erst einmal die Änderungen in der CSS-Datei. Ein Artikel zu den php-Dateien folgt noch in den nächsten Tagen.

Welche Vorteile bieten ein Child-Theme?

Das ist ziemlich leicht zu beschreiben: Man kann sich Individualität schaffen, ohne hierfür ein eigenes Theme zu programmieren. Außerdem, und das ist der wichtigste Punkt: Die Änderungen gehen bei einem Update des Original-Themes nicht verloren! 

Für manche Plugins muss man ja z.B. in die einzelnen .php-Dateien “eingreifen” bzw. dort etwas ergänzen oder bearbeiten. Macht man das und es gibt es Update für das Theme, sind die Änderungen verschwunden. Genauso ist es auch beim Code-Schnipsel, den man für ein Tracking-Programm, Beispielsweise Google-Analytics einbinden muss. Wenn man diese Änderungen nicht irgendwo dokumentiert und diese dann wieder in den neuen Dateien ergänzt, sind die Funktionen weg.

Wie erstellt man ein Child-Theme?

Das ist ganz einfach: Was man immer braucht ist eine style.css Datei. Um anfangen zu können, kopiert Euch diese Zeilen in ein Text-Programm Eurer Wahl (Ich persönlich nutze und empfehlt notepad++):

/*
Theme Name: gib hier den Namen für Dein Child-Theme ein
Theme URI: Deine URL
Description: beschreibe Dein Child-Theme
Author: Dein Name
Author URI: Deine URL
Template: Der Name Des Original-Themes (So, wie der Ordner benannt ist)
Version: Versionierung Deines Child-Themes
Tags: Name des Child-Themes
*/
/*Mit dieser Funktion importierst Du die Original CSS-Datei*/
@import url("../yoko/style.css");

Bei der Funktion “@import url” musst Du noch die Style-Datei Deines Original-Themes relativ verlinken. Oben siehst Du ein Beispiel von meinem Blog. Du musst im Prinzip nur das “yoko” in dem Code durch den Ordner-Namen Deines Original-Themes ersetzen.

Diese Datei speicherst Du dann unter dem Namen “style.css” auf Deinem PC. In Deinem Webspace erstellst Du einen neuen Ordner unter /wordpress/wp-content/themes/, der den Namen Deines Child-Themes trägt. Dort lädst Du die css-Datei hoch.

Sobald das geschehen ist, hast Du das Child-Theme als Auswahl in Deinem WordPress-Backend. Wenn Du dieses aktivierst, bist Du bereit und hast Dein erstes eigenes Child-Theme erstellt. Allerdings wirst Du zunächst keine Veränderungen feststellen, weil Du ja bisher nur das Original-Theme importierst. Die php-Dateien werden sowieso noch von Deinem Original-Theme verwendet.

CSS-Anpassungen – aber wie?

Mit der Import-Funktion hast Du ja zunächst einmal alle Funktionen der Original CSS-Datei importiert. Jede Klasse oder Id, die Du jetzt einzeln in Deiner Child-CSS-Datei aufführst, wird angepasst. Ich möchte hier alles möglichst einfach darstellen, daher verzichte ich auf die CSS-Grundlagen wie Klassen und IDs. Am Besten kann man ein Theme anpassen, indem man die Firefox-Erweiterung “Firebug” oder im Chrome-Browser das Developer Tool nutzt.

Da ich mittlerweile fast nur noch den Chrome-Browser nutze, zeige ich Euch die Beispiele mit dem Developer-Tool. Firebug funktioniert aber sehr ähnlich.

Wenn man nun etwas anpassen möchte, geht man ganz einfach so vor:

  1. Du öffnest Deine Seite (Bspw. nicokirch.de)
  2. Rechtsklick auf das Element, das Du bearbeiten möchtest.
  3. Dort “Element untersuchen” auswählen:
    Element untersuchen mit Chrome Developer-Tool
  4. Es öffnet sich unten die Developer -Leiste. Je nachdem, wo Du mit der Maus im Quell-Code hingehst, wird oben der Bereich hervorgehoben:
    Developer-Leiste im Chrome-Browser
  5.  In diesem Beispiel ist “h3″ ausgewählt. Rechts oben in der Developer-Leiste findest Du den entsprechenden Schnipsel aus der Original-CSS-Datei.
    #content h3 {
    	margin: 26px 0 12px>
    	font: bold 1.2em/ 1.4 'Droid Sans', arial, sans-serif;
    }
  6. Im Developer-Tool kannst Du diese Werte jetzt ändern und Du siehst direkt, wie die Änderungen sich auswirken. Keine Sorge: Damit hast Du noch keine Änderungen tatsächlich vorgenommen. Nur Du siehst diese Version – sobald Du die Seite neu lädst sind die Änderungen wieder weg.
  7. Einzelne Bereiche, wie z.B. “margin” kannst Du auch ausklappen. Dann siehst Du auch, wo der Abstand eingehalten werden soll. Hier gibt mein Theme vor, dass es bei allen Überschriften, die “h3″ (head 3) entsprechen, einen Außenabstand von 26 Pixeln oben, 0 Pixeln rechts und 12 Pixeln unten geben soll. Der Wert für den Abstand links ist in der oberen Version nicht angegeben und wird daher vom Wert für den Abstand rechts übernommen.
  8. Genaue Ansicht h3 im Developer-Tool
    Jetzt kannst Du ganz einfach daran rumspielen. Doppelklick auf die Werte hinter “margin” und schon kannst Du bearbeiten:
    Genaue Ansicht bearbeitetes h3 im Developer-ToolIch habe jetzt also den Abstand jeweils geändert. Das Ergebnis sieht jetzt so aus:
    bearbeitete Überschrift
    Man sieht: Der Abstand oben und unten sind deutlich größer geworden. Außerdem passt die Überschrift nicht mehr in eine Zeile, da ein Abstand rechts hinzugefügt wurde.
  9. Diese Änderung bekommt man nun ganz einfach in die CSS-Datei und damit in Dein Blog. Du kopierst einfach den Ausschnitt aus dem Developer-Tool in die CSS-Datei, die Du oben angelegt hast. Dies kannst Du entweder wieder in notepad++ tun und diese Datei wieder hochladen, oder Du änderst es direkt im WordPress-Backend. Den Editor findest Du unter Design, Editor.
    Am besten gibst Du in einem Kommentar noch an, was Du dort angepasst hast. Das sieht dann so aus:
    /*
    Theme Name: gib hier den Namen für Dein Child-Theme ein
    Theme URI: Deine URL
    Description: beschreibe Dein Child-Theme
    Author: Dein Name
    Author URI: Deine URL
    Template: Der Name Des Original-Themes (So, wie der Ordner benannt ist)
    Version: Versionierung Deines Child-Themes
    Tags: Name des Child-Themes
    */
    /*Mit dieser Funktion importierst Du die Original CSS-Datei*/
    @import url("../yoko/style.css");
    /*h3 um einen Außenabstand rechts ergaenzen und den Außenabstand oben und unten vergroessern*/
    #content h3 {
    margin: 55px 10px 60px;</li>
    font: bold 1.2em/ 1.4 'Droid Sans', arial, sans-serif;
    }

So, schon bist Du fertig und hast Deine erste Änderung mit Deinem Child-Theme vorgenommen. Das war jetzt nur eine ganz kleine Änderung. Das Prinzip ist aber immer das Gleiche.

Ich werde Euch zum Beispiel in den nächsten Tagen noch zeigen, wie man aus einem Menü ein Drop-Down-Menü erstellt mit solchen kleinen Änderungen. Außerdem kommt noch der Artikel, um die php-Dateien anzupassen. Das braucht man vor allem für einige Plugins und für den Tracking-Code.

{lang: 'de'}

Autor: Nico Kirch

Hallo, mein Name ist Nico Kirch. Hier blogge ich über alles, was mich bewegt - vor allem über Social Media & Kommunikation. Mehr über mich findet Ihr hier. Ihr findet mich unter anderem auf Google+.