Child-Theme Twenty Twelve erstellen

Ein Child-Theme für Twenty Twelve zu erstellen, ist mit dieser Anleitung leicht. Da es noch kein Twenty Twelve Theme Extensions Plugin gibt, ist dies der leichteste Weg, um z.B. die Farben zu ändern. Dabei solltest Du aber beachten, dass man z.B. die Hintergrundfarbe unter Design/Hintergrund ändern kannst. Im Folgenden wird Schritt für Schritt skizziert, wie Du am Beispiel des WordPress-Themes Twenty Twelve ein Child-Theme erstellen kannst. Dieses Beispiel kann man leicht auf alle anderen WordPress Themes übertragen.

Schneller: Hier geht’s direkt zum Twenty Twelve Child-Theme Download…

Child-Theme Twenty Twelve erstellen: Warum?

Ein Child-Theme erstellt man allgemein, weil bei einem Update des Themes nicht alle seine Änderungen an diesem Theme verlieren möchte. Das Child-Theme ist also die Versicherung, dass man die Arbeit, die man in die Veränderung der Theme-Files gesteckt hat, nicht verliert bzw. nicht wiederholen muss, wenn ein Theme-Update kommt.

Child-Theme Twenty Twelve erstellen: Schritt 1 – Theme-Ordner erstellen

Zuerst wird über FTP auf dem Webserver im Ordner wp-content/themes ein neuer Theme-Ordner erstellt. Wir nennen ihn: myTwentyTwelveExtensions (am besten mit kleinen Buchstaben). Im Theme-Verzeichnis sieht es dann ungefähr so aus:

Child-Theme-Twenty Twelve erstellen

Child-Theme-Twenty Twelve erstellen

Child-Theme Twenty Twelve erstellen: Schritt 2 – style.css erstellen

Nun erstellen wir mit einem Editor eine Datei namens style.css mit dem folgenden Inhalt:

1
2
3
4
5
6
7
8
9
10
11
12
/*
/*
Theme Name: My Twenty Twelve Child-Theme Extensions
Theme URI: http://www.mydomain.de/
Description: My own Twenty Twelve extensions
Author: Chris Andersen | myblogtrainer.de
Author URI: http://www.myblogtrainer.de/child-theme-twenty-twelve-erstellen/
Template: twentytwelve
Version: 0.1.0
*/
 
@import url("../twentytwelve/style.css");

Am besten ist es, wenn du diesen “Code” einfach in Deine style.css kopierst, denn die Daten müssen peinlich genau stimmen.
Die einzige Änderung, die Du machen musst, ist, dass Du in der Zeile Theme URI mydomain durch Deine eigene Domain ersetzt.

Alles andere kannst Du so lassen wie es ist, denn so kannst Du später immer unter Design/Theme, also genau an der richtigen Stelle, den direkten Link zu diesem Artikel finden.

Damit ist das Child-Theme fertig.
Nun kannst Du die Farben, Styles bzw. das Design Deines neuen Themes verändern und die geänderte style.css – Datei jeweils in Deinen neuen Theme-Ordner hochladen.

Child-Theme Twenty Twelve erstellen: Schritt 3 Theme aktivieren

Jetzt kannst Du Dir die Vorschau unter Design/Themes/Vorschau ansehen, und wenn Du mit Deinen Änderungen zufrieden bist, Dein neues Theme aktivieren.

Child-Theme aktivieren

Child-Theme aktivieren

Hast Du Fragen oder Kommentare zum Thema Child-Theme Twenty Twelve erstellen? Schreibe einen Kommentar…

8 Gedanken zu „Child-Theme Twenty Twelve erstellen

  1. Stefan

    Hallo Chris,

    sind die CSS Angaben auch in der style.css im Childtheme aus dem WP-Editor sichtbar? Leider ist das nämlich nicht der Fall bei mir und bevor ich groß rumspiele, wollte ich sichergehen. Woran kann das liegen? Eine falsche Pfadangabe? Oder lautet die Importfunktion inm JEDEM Fall:

    @import url(“../twentytwelve/style.css”);

    Wäre nett wenn Du kurz antworten könntest!

    Antworten
    1. Chris Andersen Artikelautor

      @Stefan
      bist Du sicher, Du befindest Dich in der richtigen CSS? Hast Du rechts oben im WP-Editor das Childtheme ausgewählt?

  2. daniel

    gut erklärt chris, vielen dank!

    weisst du auch, wie es mit dem verhalten auf tablets & smartphones aussieht? bleibt das responsive 2012-theme auch durch dein child-theme responsive?

    viele grüße
    daniel

    Antworten
    1. Chris Andersen

      @Helmuth
      Es gibt eine Menge Plugins zu dem Thema. Die Frage, die Du Dir bei der Suche stellen solltest, ist eher: Wie willst Du sie einbauen?
      Aber lass einmal hören, warum Du Dich für welches Plugin entschieden hast.
      BG Chris :-)

  3. Sabrina

    Also ich muss ja gestehen, dass ich zwar sehr gerne mit WordPress arbeite, jedoch vor dem Schritt ein Theme selbst zu erstellen bislang immer zurückgeschreckt habe. Grund dafür liegt ganz einfach darin, dass ich zwar mit HTML recht gut klar komme, PHP jedoch für mich noch immer ein großes Faktor X ist :) Aber ich denk mal die Anleitung klingt sinnigund einfach, kurz um ich werd es heute mal versuchen. Mal schaun ob du mir das Mysterium Quellcode WP etwas verständlicher gemacht hast :)

    LG Sabrina

    Antworten

Hinterlasse eine Antwort

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

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>