Twenty Ten Child Thema anlegen

Update November 2016

Das Plugin Child Theme Configurator spart wertvolle Lebenszeit, indem es das Anlegen von Child Themes per wenigen Klicks ermöglicht. Dabei haben Sie auch die Möglichkeit, ganz ohne FTP bestimmte Dateien aus dem Verzeichnis des Eltern-Themes in das Child-Verzeichnis umzukopieren. Tipp der Redaktion!

Original-Inhalt März 2011

Grundsätzlich ist Twenty Ten, das Standard-Thema von WordPress 3, ein sehr flexibles und gut durchdachtes Thema. Allerdings braucht man in der Realität oft Eigenschaften des Themas, die Twenty Ten einfach nicht bietet.

Und wenn man dann die eigenen Änderungen an HTML oder CSS direkt in Twenty Ten Dateien umsetzt, werden die mühevoll eingetragenen Änderungen bei der nächsten Aktualisierung von WordPress eliminiert. Denn Twenty Ten wird ebenfalls aktualisiert, die Dateien werden durch neue Versionen ersetzt. Es macht daher Sinn, ein Child Thema („Kind Thema“) von Twenty Ten anzulegen, und nur in den Dateien des Child Themas Änderungen vorzunehmen.


Am Ende des Artikels finden Sie übrigens Twenty Ten Child Themen als gezippte Dateien zum Download. Das spart Lesezeit und Sie können sofort loslegen.

Wenn Sie verstehen wollen, welchen Zweck die einzelnen Dateien haben, und warum sie den Inhalt haben, den sie haben, empfehlen wir das Weiterlesen.

Die Zeugung

Starten Sie Ihr FTP-Programm (wir empfehlen FileZilla) und stellen Sie eine FTP-Verbindung zu Ihrem Webserver her, auf dem WordPress installiert ist.

Legen Sie am Server im Verzeichnis wp-content/themes ein neues Verzeichnis für Ihr Child Thema an. In unserem Beispiel nennen wir das neue Verzeichnis ganz pragmatisch twentyten-child, aber Sie werden ihm vermutlich einen schöneren Namen geben.

Kopieren Sie aus dem Verzeichnis twentyten die Datei style.css in das neue Verzeichnis twentyten-child und öffnen Sie die Datei in einem Editor.

style.css

Schreiben Sie in der Child Theme Datei style.css anstelle von

Ihre eigenen neuen Angaben hinein:

Ändern Sie die Angaben (Theme Name, Theme URI, …) nach Belieben, aber belassen Sie die Angabe für „Template“ unbedingt auf „twentyten“. Denn mit der Angabe twentyten erfährt WordPress, dass es sich hierbei um ein Child Thema handelt, dessen Eltern-Thema im Verzeichnis twentyten liegt.

Genau, auf diese Weise können Sie auch Child Themen von anderen Themen erzeugen, indem Sie einfach den Verzeichnisnamen des Elternthemas bei Template angeben.

Wenn Sie sicher sind, dass Sie im Layout nur wenige Angaben ändern wollen, dann fügen Sie gleich anschließend noch hinzu:

und löschen sämtliche CSS Angaben dahinter aus Ihrer neuen Datei style.css. Das gibt Ihnen die Möglichkeit, Ihre neuen CSS-Angaben zusätzlich zu den Twenty Ten CSS-Angaben einzutragen. Alle bereits existierenden Twenty Ten Angaben bleiben damit auch in Ihrem Child Thema aktiv.

Die Datei style.css würde dann also diesen Inhalt haben:

Wenn Sie aber annehmen, dass Sie höchstwahrscheinlich weitaus mehr Layout-Angaben ändern wollen, dann benutzen Sie die include-Angabe nicht, sondern lassen sämtliche CSS-Angaben von Twenty Ten in Ihrem neuen style.css vorerst bestehen, um sie später überschreiben und ergänzen zu können.

Sie können nun bereits im Admin-Backend unter „Design“  / „Themes“ Ihr neues Thema wählen und aktivieren. Wenn Sie noch keine neuen Layout-Angaben in Ihrer Child-Datei style.css gemacht haben, sollte sich am Aussehen der Website vorerst nichts ändern. Aber Sie haben schon die Voraussetzungen geschaffen, um Änderungen machen zu können, die auch nach Updates von WordPress erhalten bleiben.

Hinweis: ab nun das Thema Twenty Ten nicht und niemals aus Ihrer WordPress Installation löschen, ansonsten funktioniert auch Ihr neues Thema nicht mehr.

functions.php

Grundsätzlich sucht WordPress bei einem Child Thema immer zuerst nach den Themen-Dateien (wie z.B. header.php, page.php, single.php, etc.), die werden dann anstelle der Dateien des Eltern-Themas ausgeführt. Falls es bestimmte Dateien nicht findet, greift WordPress auf die entsprechenden Dateien aus dem Verzeichnis des Eltern Themas („parent themes“) zurück.

Beispiel: Um eine Seite anzuzeigen, sucht WordPress nach der Datei page.php. Wenn diese Datei im Verzeichnis Ihres Child Themas existiert, wird sie von WordPress benutzt. Wenn sie nicht existiert, dann arbeitet WordPress mit der Datei page.php aus dem Verzeichnis des Eltern Themas.

Im Fall der Datei functions.php (beinhaltet Funktionen und Filter) ist das aber anders. Wenn WordPress im Kindverzeichnis die Datei functions.php findet, wird deren Inhalt zusätzlich zu den Funktionen in der Datei functions.php im Elternverzeichnis ausgeführt, und zwar noch vor den Funktionen der Elterndatei.

Wenn Sie also später eigene Funktionen anlegen möchten, dann erstellen Sie im Verzeichnis twentyten-child eine leere Datei namens functions.php. Diese Datei wird Ihre neuen Funktionen oder Filter aufnehmen. So könnten Sie etwa ganz neue Header-Bilder in neuen Bildgrößen benutzen, die Twenty Ten Widget-Bereiche reduzieren oder erweitern, und vieles mehr.

Wen Sie mit eigenen Funktionen in Ihrem Thema nichts am Hut haben, dann vergessen Sie die letzten beiden Absätze. Schon passiert?

Achtung, fertig, los

Vorerst haben wir also diese Daten-Struktur für unser neues Child Thema:

Damit sind die Voraussetzungen geschaffen, um mit Twenty Ten als Basis völlig neue WordPress Themen zu schaffen, die sich visuell und funktionsmäßig kräftig von Twenty Ten unterscheiden werden, und trotzdem viel Arbeit sparen, da wir bestehende Twenty Ten-Features weiterverwenden können. Ein Beispiel für eine konkrete Anwendung gleich hier.

Seitenleiste in Twenty Ten nach links setzen

Suchen Sie nach diesen CSS-Angaben im style.css:

und ersetzen Sie diese durch folgende Angaben:

Damit rutscht die Seitenleiste nach links, und der Content nach rechts. Wenn Sie das der Datei style.css in Ihrem Child Thema Verzeichnis beibringen, bleibt die Änderung auch nach dem nächsten WordPress-Update erhalten.

Und für das Template One column, no sidebar fügen Sie hinzu:

screenshot.png

Sie möchten zweifellos Ihr neues Design unter „Designs“ / „Themes“ im Admin-Bereich auch visuell erkennen. Machen Sie einen Screenshot Ihres Designs im Format PNG, bringen Sie das Bild auf die Größe 300 x 225 Pixel, und legen es unter dem namen screenshot.png in das Verzeichnis Ihres Child Themas.

Downloads

Wir stellen hier Twenty Ten Child Themen zum Download zur Verfügung, innerhalb derer Sie Ihre Anpassungen vornehmen können.

Anleitung: installieren Sie das Child Thema Ihrer Wahl im Admin-Bereich mittels „Design“ -> „Themes“ -> „Themes installieren“ -> „Hochladen“.

Sticker Downloads Alternativ können Sie das in der gezippten Datei enthaltene Verzeichnis per FTP in das Verzeichnis /wp-content/themes/ auf Ihren Webserver hochladen.

Bei den beiden alternativen Basis-Varianten ändern die downloadbaren Child Themen absolut nichts am Original-Layout von Twenty Ten. Sie benutzen sie dann, wenn sie an Twenty Ten Änderungen am Layout mit eigenen CSS-Anweisungen vornehmen wollen, die auch nach Updates erhalten bleiben sollen.

Downloads von Twenty Ten Child Themen
Child Thema Anmerkungen
Die Basis I Die CSS-Anweisungen von Twenty Ten werden mit
@import url(‚../twentyten/style.css‘) weiterhin benutzt
Die Basis II Die CSS-Anweisungen von Twenty Ten sind vollständig in der Datei style.css enthalten, und können daher beliebig überschrieben werden.
Twenty Ten mit Seitenleiste links Die CSS-Anweisungen von Twenty Ten werden mit
@import url(‚../twentyten/style.css‘)
weiterhin benutzt

Weitere Varianten folgen. Teilen Sie uns doch Ihre Wünsche mit.

PS: David Cox von Digital Raindrops hat einen Child Theme Creator veröffentlicht, mit dessen Hilfe Sie für viele Seitenelemente neue Farben angeben können.

Hinweis: wir haben auch entsprechende Vorlagen-Child Themes für das Thema Twenty Eleven vorbereitet.

Anwendungen

Wir sammeln Beispiele zur Nutzung von Twenty Ten Childthemen. Lesen Sie auch unseren Artikel über

WordPress Layout: Kopfzeile neu gestalten (Twenty Ten)

Ähnliche Artikel:

5 Antworten auf „Twenty Ten Child Thema anlegen“

  1. Vielen herzlichen Dank für Eure Tips/Lernseiten!!. Auf der Suche“wie mache ich ein Theme Widgetfähig“ bin ich glücklicherweiße auf Eure Seite gekommen. Ich hoffe es gibt auch weiter neue Tips rund um das individuelle Umbauen eines WP Themes..
    Vielen lieben Dank für Eure Arbeit
    Juli

  2. Toller Beitrag. Ich habe das Basis Beispiel gerade mal auf einem Blog ausprobiert und man sieht das es im Ansatz wirklich einfach umzusetzen ist. Hätte ich das früher gewusst, das es sowas gibt hätte ich mir auf meinem Blog einiges an Arbeit gespart 🙂

Schreibe einen Kommentar

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