WordPress Child Themes

Ich hoffe ihr hattet alle einen guten Start in das neue Jahr 2014. Wie ihr sicherlich gemerkt habe, habe ich das letzte Jahr sehr ruhig – eventuell sogar zu ruhig – ausklingen lassen.

Aus diesem Grund möchte ich heute ein sehr interessantes Thema angehen: WordPress Child Themes.

Einige von euch kennen sich sicher schon aus, viele werden es aber zum ersten mal hören, also fangen wir ganz vorne an.

Was ist ein WordPress Child Theme?

Das Problem mit einem schönen WordPress Theme ist doch folgendes, es kann noch so gut sein, am Ende ist es aber nie perfekt für den eigenen Nutzen, es sei denn man hat das nötige Kleingeld in eine  professionell erstellte WordPress Webseite nach Wunsch investiert.

Was daraus folgt? Man fängt an daran rumzuschrauben, hier ein wenig Code raus, da ein wenig Code rein, h1 wird hier h2 und so weiter.

Dann kommt der Tag an dem der Ersteller des Original Themes ein Update bereitstellt, schnell auf Update geklickt und zack alle eigenen Änderungen sind dahin.

Das ist der Punkt an dem ein Child Theme ist Spiel kommt, alle Änderungen die ihr nach der Installation eures Themes hinzufügt, bleiben auch bei späteren Updates erhalten, sehr praktisch wie ich finde, denn euer Child Theme stellt nur die Sachen des „Main“ / Parent Themes dar, die ihr nicht im Child Theme verändert habt.

Ich persönlich nutze diese sehr häufig, allerdings ist es nicht ganz so leicht umzusetzen, aber seht selbst.

Ab in den Code:

Ich versuche  die Erstellung eines Child Themes so einfach wie möglich zu erklären, sollten sich trotzdem Fragen ergeben, könnt ihr in den Kommentaren natürlich jederzeit gerne Fragen stellen.

1. Die Vorbereitungen:

Legt einen Ordner in eurem WordPress Theme Verzeichnis an, diesen findet ihr in dem ein FTP Programm zur Hand nehmt, dann in euer Blog Hauptverzeichnis manövriert und dort folgende Ordner aufsucht:

/Euer_Blog/wp-content/themes/

Dort legt ihr einen neuen Ordner an mit dem Namen eures geplanten Child Themes, der WordPress Codex empfiehlt hier den Namen eures Parent Themes zu nehmen und es mit einem „-child“ zu versehen.

Im Prinzip könnt ihr es aber nennen wie ihr wollt. Leerzeichen solltet ihr allerdings vermeiden, einige Sonderzeichen natürlich auch.

2. Ein wenig Code

In eurem neuen Ordner legt ihr nun eine neue Datei an und zwar eine Datei mit dem Namen style.css, dieses mal muss diese Datei auch genau so heißen.

Euer Pfad sollte also nachher etwa so aussehen:

/Euer_Blog/wp-content/themes/parentthemename-child/style.css

Diese style.css sollte dann in etwa so aussehen, wie im Code den ihr ein paar Zeilen tiefer seht. Wichtig ist eigentlich nur die Zeile 7 – „Template: …“!

Hier sollte exakt der Ordner stehen, der euer Parent Theme beinhaltet.

Alle anderen Änderungen könnt ihr ganz frei bestimmen, also der Theme Name, die URI, die Description und so weiter sind vollkommen beliebig.

/*
 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");

Quelle: WordPress Codex – Child Themes

WordPress Child Theme

Wenn ihr alles richtig gemacht hab, solltet ihr jetzt under Design -> Themes in eurem WordPress Backend ein neues Theme zur Auswahl haben, etwa so wie auf dem obigen Bild.

3. weitere Änderungen:

Bis jetzt haben wir ja nur eine neue style.css angelegt, fügt ihr hier Änderungen ein, wird automatisch die Funktion der Parent Themes überschrieben, oder eher überlagert. Ändert ihr also etwas, ändert sich auch euer Theme, wobei im Parent Theme natürlich nichts geändert wird.

Schreibt ihr hier also eine Zeile in eure neue style.css, wird diese Zeile angezeigt und nicht die äquivalente in dem Parent Theme.

Natürlich könnt ihr auch andere Dateien ändern, hier solltet ihr aber beachten, dass die *.php Dateien die ihr anlegt ausgeführt werden, nicht mehr die des Parent Themes. Es bietet sich also an die Datei erst einmal zu kopieren, dann in dem Child Theme einfügen und dort dann zu verändern, schon alleine weil die Datei die ihr überschreiben wollt, sowohl im Parent-, als auch im Child Theme, gleich heissen muss.

Eine Ausnahme stellt die function.php dar, diese überschreibt die Parent Datei nicht, sondern wird zusätzlich geladen.

Fazit:

Ein WordPress Child Theme ist wirklich eine schöne Sache, vor allem wenn man wirklich Veränderungen an dem Theme vornehmen will die sich nicht mit einem klick nach einem Update wieder herstellen lassen und gleichzeitig aber auf Updates nicht verzichten will.

Wie ihr gesehen habt ist die Sache auch nicht so aufwendig, natürlich ist sie nicht ohne Arbeit verbunden, aber einmal gemacht spart man sich im Nachhinein doch einiges an Ärger mit den Updates.

Eine Bitte hätte ich aber noch: Wenn ihr anfangt mit eurem FTP oder im Code zu arbeiten, macht bitte ein Backup. Hier können sich jederzeit Fehler einschleichen, Fakten können sich ändern und so weiter. Ein Backup ist also immer eine gute Idee, bevor man solche Sachen angeht!

Bewerte diesen Artikel:
1 Stern2 Stern3 Stern4 Stern5 Stern (Keine Bewertungen bis jetzt :( )
Loading...

8 Kommentare

  1. Sehr interessant und gut erklärt. Wer es einfacher mag wie ich wird Jedoch schnell zum Genesis Framework wechseln. Es bietet eine saubere und überschaubare Code-Basis und eine Menge Sicherheit durch Updates. Man muss so nur noch Veränderungen im Child-Theme vornehmen um es an seine Bedürfnisse anzupassen.
    Das spart zum einen eine Menge Zeit und man braucht nur bedingt Programmierkenntnisse. Wie siehst du das?

  2. Hallo,
    Child Ordner für Twenty Fourteen
    hab Ordner angelegt mit Creenshot und Css Datei, wo Anleitung reinkopiert ist.
    Kann im Dasboard auch das Child Theme anklicken, aber wenn ich mir die Seiten dann ansehe ist kein Code vom Eltern Theme übernommen worden. Bin auch Anfänger und weß nicht mehr weter. Im Child editor stehen nur die kopierten Zeilen. Ist Hilfe möglich?
    Gruß
    Horst

    • Moritz on 26/01/2014 at 11:21 said:

      Ich bin nicht ganz sicher ob ich dich richtig verstehe. Du hast ein Child Theme erstellt aber es sieht nicht so aus wie das Parent Theme? Kann es sein das du einen Fehler im CSS File hast? Es muss hier wirklich der original Template Name stehen!

      Grüße Moritz

  3. Interessanter Artikel und vor allem für Einsteiger verständlich erklärt. Vielleicht sollte man zu Beginn des Artikels noch ein Hinweis zum Backup machen. Nicht das die Einsteiger mit den Änderungen beginnen und sich bis zum Ende des Beitrags den ganzen Blog zerschossen haben. Ansonsten wie gesagt, interessanter Artikel!

  4. Muss meinem Vorredner recht geben. Vorher unbedingt ein Backup machen. Ansonsten ein sehr Interessanter Artikel.

  5. Immer ein Backup machen, das ist definitiv Pflicht! Ansonsten sehr informativer und spannender Artikel. Weiter so.

  6. Sehr gute Anleitung, kann mich den Vorrednern aber nur anschließen. Ohne Backup kann sowas auch mal nach hinten losgehen. Das wäre ziemlich ärgerlich und sollte nach Möglichkeit immer vermieden werden.

  7. Oh oh das mit dem vergessenen Backup habe ich gerade durch! Ein riesen Verlust und das wird garantiert kein zweites mal passieren^^

    Gruß Nico

Schreibe einen Kommentar

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

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

Post Navigation