renvert.com Logo Druckversion


WordPress
Child-Themes

Ein fremdes WordPress-Theme updatesicher anpassen.

[zum Inhalt]
Hintergrundbild

WordPress Themes bearbeiten
auf die elegante Art.

Nicht jeder, der mit WordPress arbeitet, ist auch in der Lage, ein Theme — also eine Designvorlage — komplett von Null selbst aufzubauen. Das ist auch nicht unbedingt immer nötig. Wozu auch — schließlich existieren genügend frei verfügbare Designs da draußen. Und wenn man keinen Anspruch auf ein individuelles Design legt, ist das auch völlig ausreichend. In der Regel geht man so vor, dass man sich ein Theme auf WordPress.org aussucht, dieses in seinem Blog installiert, aktiviert und dann das Design und die Templates nach Bedarf anpasst.

Doch Vorsicht – Themes werden genauso wie Plugins gewartet und vom Autor auch aktualisiert. Wenn man also Änderungen direkt in einem Fremd-Theme vorgenommen hatte, werden diese durch eine Aktualisierung überschrieben (!). Aber auch wenn man ein Backup besitzt, ist die Anpassung nach dem Theme-Update mühselig.

Die Lösung: ein Child-Theme

Von der Formulierung lässt sich bereits erahnen, dass es sich hierbei um ein Theme handelt, das einem anderen untergeordnet ist. Wir möchten einen Ordner erzeugen, in dem wir all unsere Anpassungen speichern können, ohne das Parent-Theme, also unsere Vorlage, zu verändern.

Ich habe mich also für eine Vorlage entschieden. Das Theme "Arcade Basic" soll es sein. Nach dem Herunterladen und Installieren sieht meine Theme Seite wie folgt aus:

Child-Themes: Das installierte Parent-Theme
Child-Themes: Das vorinstallierte Standard-Theme "Twenty Fifteen" und unser neues Theme "Arcade Basic"

Erzeugen des Child-Themes

Wir erstellen nun im Theme-Ordner unseres WordPress unter wp-content/themes/ einen neuen Ordner, den wir beliebig benennen dürfen. Ich nenne ihn einfach logisch mit "arcade-child".

Die neue Struktur im Theme-Ordner

Allein die Anwesenheit dieses neuen Ordners veranlasst WordPress, in der Theme-Übersicht einen Fehler auszuwerfen. Wenn ich die Seite (Theme-Übersicht) neu lade, heißt es im unteren Bereich:

Die folgenden Themes sind installiert, aber nicht vollständig.
Themes müssen ein Stylesheet und ein Template haben.
Name: arcade-child
Beschreibung: Es fehlt ein Stylesheet.

Wir erfahren also, was mindestens notwendig ist – ein Stylesheet und wenigstens ein Template. Was WordPress nicht weiß ist, dass wir ein Child-Theme aufsetzen. Hierzu benötigen wir in unserem neuen Ordner tatsächlich zunächst nur die style.css. Diese kopieren wir uns von der Vorlage in unseren Child-Theme Ordner. Dazu legen wir noch ein Vorschaubild für die Theme-Übersicht. Die PNG-Datei sollte eine Auflösung von 880 x 660 Pixeln haben. Benenne diese mit screenshot.png und lege diese dann in den Ordner des Child-Themes ab.

Der Child-Theme Ordner mit Stylesheet und Screenshot
Der Child-Theme Ordner mit Stylesheet und Screenshot

Öffnen wir nun die kopierte style.css in einem Text-Editor und schauen uns mal den obersten Kommentar genauer an:

/*!
Theme Name: Arcade Basic
Theme URI: https://themes.bavotasan.com/2014/arcade/
Author: c.bavota
Author URI: http://bavotasan.com/
Description: Create a truly unique design with Arcade, a lightweight and fully  responsive  HTML5 theme. Use the theme customizer to add your own header image, page layout, site width and more. Distinguish each post with one of the eight supported post formats, such as: Video, Image, Aside, Status, Audio, Quote, Link and Gallery. Install JetPack to display each of your galleries through a tiled view and jQuery carousel. Compatible with bbPress & BuddyPress. Built using SASS, Compass and Bootstrap 3. Uses Google Fonts for improved typeface readability and works perfectly in desktop browsers, tablets and handheld devices. For a live demo go to http://demos.bavotasan.com/arcade/.
Version: 1.0.4.1
Text Domain: arcade
Domain Path: /library/languages/
Tags: black, blue, gray, silver, white, light, one-column, two-columns, left-sidebar, right-sidebar, fluid-layout, responsive-layout, buddypress, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html

Arcade WordPress Theme, Copyright 2014 c.bavota
Arcade is distributed under the terms of the GNU GPL
*/

Du ahnst es womöglich schon: WordPress interpretiert tatsächlich die auskommentierten Angaben, um sie für die Zuordnung der Themes zu nutzen. Auch in den Templates findest Du "funktionale Kommentare".

Du kannst die Zeilen gemäß Deiner Infos anpassen. Da wir davon ausgehen, dass das Child-Theme nur unserem eigenen Zweck dient und wir es nicht verbreiten werden, sind lediglich folgende Zeilen zu beachten:

/*
Theme Name: Arcade Child-Theme
Text Domain: arcade-child
Author: <<Dein Name>>
Version: 1.0 beta
Template: arcade-basic
*/

Gib hier Deinem Theme einen Namen, eine Text-Domain, setze Dich als Autor fest und gib dem Theme eine Versionierung, damit Änderungen dokumentiert werden können. Die einzige Zeile, die im Parent-Theme nicht vorhanden ist, ist die mit der "Template"-Angabe. Hier wird der Name – genauer gesagt: der Ordnername – der Vorlage eingesetzt. In diesem Falle ist dies arcade-basic.

Erst jetzt solltest Du in der Theme-Übersicht Dein eigenes Child-Theme aktivieren:

Die Theme-Übersicht mit aktiviertem Child-Theme
Die Theme-Übersicht mit aktiviertem Child-Theme

Die Natur von Child-Themes

Wenn wir uns nun unsere Seite anschauen, sollte diese exakt so aussehen, als hätten wir Arcade Basic als Theme ausgewählt. Warum ist das so? Nun, WordPress geht hier ganz pragmatisch vor: Zunächst schaut das System im Ordner des Child-Themes, welche Dateien vorhanden sind und lädt diese anstelle derer im Parent-Theme. Ist eine Datei nicht vorhanden, wird das Original verwendet.

Wichtiger Hinweis:
Das betrifft alle Dateien bis auf die functions.php. Hier werden immer beide Dateien geladen. Möchtest Du eigene Funktionen schreiben, erstelle eine neue functions.php im Ordner des Child-Themes und kopiere die Datei nicht vom Original. Das hätte einen PHP-Fehler zufolge, da die Funktionen doppelt definiert würden.

Nun kannst Du sämtliche Templates, die Du bearbeiten bzw. verändern möchtest, vom Ordner des Parent-Themes in den eigenen Theme-Ordner kopieren und dort editieren. Es steht Dir auch frei, ganz eigene Templates hinzuzufügen. Somit bleiben die Dateien des Originals unverändert. Bei einem Update des Parent-Themes durch den Entwickler bleiben nun auch Deine Änderungen stets erhalten.

Vergleich: Parent-Theme (links) und Child-Theme (rechts)
So könnte es aussehen: Links das unveränderte Parent-Theme und rechts unser Child-Theme mit den angepassten Dateien und zusätzlichen Templates. WordPress interpretiert zunächst die Dateien im Child-Theme Ordner. Was dort nicht vorhanden ist, wird dem Originaltheme entnommen.

Um ein eigenes Seiten-Template zu erstellen, musst Du nichts weiter tun, als ein bestehendes Template des Themes zu kopieren und den auskommentierten Teil am Anfang der Datei zu editieren:

/**
 * Template Name: Mein eigenes Template
 *
 * Description: Dies ist mein eigenes Template für eine Sonderseite.
 *
*/

Das allein reicht bereits aus, um dieses neue Template in WordPress zur Verfügung zu stellen. Hierbei ist es völlig unerheblich, wie die Datei heißt – nur der Kommentar Template Name in der Datei ist entscheidend.

Screenshot: Auswahl des eigenen Templates im Backend von WordPress
Auswahl des eigenen Templates im Backend von WordPress

Viel Spaß beim Ausprobieren.

Im nächsten Beitrag der Serie "Working with WordPress" behandle ich das Aufsetzen und Bearbeiten eines sog. "Blank Themes". Das macht Sinn, wenn Du Dein eigenes Design und Deine eigenen Funktionen einem "nackten" Theme hinzufügen möchtest. Diese Methode habe ich auch bei renvert.com verwendet.

Folge mir auf twitter

Hinweis: Momentan ist die Geschwindigkeit meiner Website aufgrund eines Serverproblems bei meinem Hosting-Anbieter stark beeinträchtigt.
Ich bitte, diese Unannehmlichkeit zu entschuldigen.


Fenster schließen

Danke fürs Teilen.

Fenster schließen