Kennen Sie das?

Sie haben die Ruhe der letzten Feiertage dazu genutzt, um ihrer Webseite ein neues Aussehen zu verpassen. Fast einen ganzen Tag hat allein die Suche nach dem richtigen Theme gedauert. Das musste zudem noch an einigen Stellen angepasst werden, damit es auch wirklich ihren Bedürfnissen entsprach und Ihren Geschmack vollständig widerspiegelte. Aber jetzt ist alles fertig und die Seite kann der Öffentlichkeit zugänglich gemacht werden. Das neue Aussehen Ihrer Webseite kommt bei allen gut an. Und alles scheint für den Moment gut zu laufen.

Doch dann meldet WordPress, dass es ein neues Update für das von Ihnen installierte Theme gibt. Sie spielen es ein und mit nur einem Mausklick sind sämtliche von Ihnen gemachten Änderungen am Theme durch das Original-Aussehen wieder ersetzt. Sie müssen all Ihre Änderungswünsche wieder von Hand einpflegen – so gut sie sich daran noch erinnern können.

Es muss doch eine Möglichkeit geben, die weniger Kopfschmerzen bereitet?

Child Themes schaffen Abhilfe

In WordPress macht man sich dazu die Technik der Vererbung zu Nutze. Das funktioniert ähnlich wie in der Natur: Eltern vererben ihren Kindern durch die Genetik bestimmte Fähigkeiten wie zum Beispiel die Haar- oder Augenfarbe genauso wie mögliche Verhaltensweisen und mehr. Im Laufe des Lebens sammeln die Kinder viele eigene Erfahrungen, durch die dann die genetisch übermittelten Erfahrungen erweitert oder gar überschrieben werden.

WordPress-Themes können Eigenschaften ebenfalls vererben. Das Original-Theme bildet dabei das Parent Theme (oder auch Eltern Theme), das alle grundlegenden Eigenheiten des Aussehens der Webseite beinhaltet und diese an das Child Theme (oder auch Kind Theme) vererbt. Möchten Sie nun eigene Änderungen am Aussehen des Themes vornehmen, so müssen Sie in diesem Fall natürlich nicht warten, bis das Child Theme seine eigenen Erfahrungen gemacht hat. Vielmehr nehmen Sie die gewünschten Änderungen einfach im Child Theme vor.

Damit haben Sie nun nicht nur den Update-Prozess vereinfacht, Sie müssen sich auch keine Sorgen mehr darüber machen, wenn Sie mal aus Versehen das Aussehen ihrer Webseite durch Ihre Änderungen zerschossen haben. In letzterem Fall können Sie immer wieder zurück zum Parent Theme kehren und haben das Theme in seiner Ursprungsform wieder vorliegen.

Das Child Theme erbt das Aussehen des Parent Themes.

1. Vorbereitung des Child Themes

In diesem Beispiel wird ein Child Theme für das derzeit aktuelle WordPress Theme WordPress-Theme Twenty Sixteen erstellt. Sie können die Schritte zum Erstellen eines Child Themes aber auch auf jedes andere Theme anwenden.

Um den Vorgang zu vereinfachen ist es ratsam, sich das Original-Theme herunterzuladen. Extrahieren Sie dieses in einen neu angelegten Ordner namens »meine-themes«. Wenn Sie sich nun den Inhalt von »meine-themes« anzeigen lassen, finden Sie darin den Ordner (z. B. »twentysixteen«), der alle Dateien des Original-Themes enthält.

Legen Sie in dieser Ansicht nun einen neuen Ordner an, der den Namen des Original Themes enthält, gefolgt von dem Wort »-child« (z. B. »twentysixteen-child«).

Wechseln Sie anschließend in den neu erstellten Ordner.

Erstellen Sie darin eine Datei namens »style.css« und tragen Sie dort die folgenden Informationen ein. Dabei können Sie die Felder Theme Name, URI, Description und Author ganz nach ihren Wünschen mit Inhalten befüllen.

Vorschaubild des WordPress-Themes Twenty Sixteen

Das Vorschaubild des WordPress Themes Twenty Sixteen liegt als screenshot.png im Hauptordner der Theme-ZIP-Datei.

Download: WordPress.

 /*
Theme Name: TwentySixteen Child Theme
Theme URI: https://de.wordpress.org/themes/twentysixteen/
Description: TwentySixteen Child Theme
Author: Patmo.de
Author URI: https://patmo.de
Template: Twenty Sixteen
Version: 1.0.0
*/

/* =Ab hier können Sie Änderungen vornehmen
------------------------------------------------------- */ 

Bei den Informationen zum Eintrag »Template:« muss besonders auf Groß- und Kleinschreibung geachtet werden. Wenn ein Child Theme nicht aktiviert werden kann, ist die nicht korrekte Schreibweise eine häufige Ursache. Dieser Eintrag verweist auf den Namen des Parent Themes und gibt einen Verweis darauf, von welchem Theme vererbt werden soll.

Damit das Child Theme das Aussehen des Parent Themes nun erbt, legt man in dem Child Theme Ordner eine Datei »functions.php« an und trägt darin folgenden Code ein:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

Anmerkung: In früheren Versionen war es möglich, den Inhalt der »style.css« des Eltern Themes direkt in der »style.css« des Kind Themes durch einen Import-Befehl aufzurufen. Heute zählt dies jedoch nicht mehr als Best Practice, weswegen man die Vererbung nun in der »functions.php« vornimmt.

2. Vorschaubild des Child Themes

Jedes Theme, auch deren Kinder, sollten mit einem Vorschaubild ausgestattet werden, damit man später in der Theme-Übersicht schnell erkennen kann, um welches Theme es sich eigentlich handelt. Auch unser Child Theme benötigt ein Vorschaubild, wofür wir uns am Vorschaubild des Originals bedienen werden.

Kopieren Sie aus dem Original-Theme die Datei »screenshot.png« in das Hauptverzeichnis Ihres Child Themes. Öffnen Sie diese Datei dann in einem Bildbearbeitungsprogramm wie Photoshop, Gimp oder Paint. Wählen Sie eine recht große Schriftart und fügen Sie dem Bild einen Text hinzu, und zwar: »Child«. Speichern Sie das Ergebnis dann wieder als screenshot.png. Damit haben Sie einen ausreichenden Unterschied zum Original und erkennen Ihr Theme später schneller in der Übersicht wieder.

Vorschaubild des Child Themes zum WordPress-Themes Twenty Sixteen

Das Vorschaubild für unser Child Theme des WordPress Themes Twenty Sixteen.

3. Upload und Aktivierung des Child Themes

Wechseln Sie im Datei Explorer (oder Finder) wieder in das Verzeichnis »meine-themes«, in dem nun das Parent und das Child Theme Verzeichnis liegen sollten. Erstellen Sie dann aus dem Child Theme Verzeichnis eine Zip-Datei.

Wechseln Sie dann in den Browser und rufen Sie dort Ihre Webseite auf. Melden Sie sich notfalls auf der Seite an und rufen Sie im Dashboard-Menü »Design« > »Themes« auf.

Bevor Sie nun ihr Child Theme in ihre WordPress Installation hochladen, ist es wichtig, dass das Eltern Theme bereits installiert es. Ist dies der Fall, klicken Sie in der Themes Übersicht zunächst auf »Installieren« und auf der Folgeseite dann auf »Theme hochladen«. Wählen Sie im nächsten Schritt die soeben erstellte ZIP-Datei zum Hochladen aus und installieren Sie diese. Wenn keine Fehler auftreten, können Sie diese anschließend aktivieren und nutzen.

Treten bei der Installation Fehler auf, so kann dies verschiedene Ursachen haben. Wenn das Parent Theme zum Beispiel nicht gefunden wird, so ist dieses entweder noch nicht installiert oder aber in den CSS-Einstellungen falsch referenziert (Sie erinnern sich an den Hinweis auf die Groß-/Kleinschreibung? Überprüfen Sie diese noch einmal als Erstes. Wenn damit alles korrekt ist, überprüfen Sie den Pfad und die CSS-Pfad-Angaben zum Parent Theme. In aller Regel dürfte spätestens dies den Fehler beheben.)

Upload des Child Themes

4. Eigene Änderungen am Child Theme

Nachdem der Upload und die Aktivierung funktioniert haben, sieht das Kind Theme noch genauso aus wie das Original. Sie können sich nun daran machen, Ihre Änderungen am Theme vorzunehmen. Öffnen Sie dazu erneut die Datei »style.css« und fügen Sie Ihre Änderungen ganz unten in der Datei an.

Handelt es sich um neue CSS-Angaben, so werden diese automatisch zu denen des bestehenden Themes hinzugefügt. Wenn Sie jedoch bestehende CSS-Informationen hinzufügen, so werden die vererbten Original-CSS-Anweisungen damit überschrieben. Die folgende hinzugefügte Zeile lässt beispielsweise die angezeigten Navigationselemente in fettdruck erscheinen.

/*
Theme Name: TwentySixteen Child Theme
Theme URI: https://de.wordpress.org/themes/twentysixteen/
Description: TwentySixteen Child Theme
Author: Patmo.de
Author URI: https://patmo.de
Template: Twenty Sixteen
Version: 1.0.0
*/

/* =Ab hier können Sie Änderungen vornehmen
------------------------------------------------------- */

.main-navigation { font-weight: bold; } 

5. Erweiterung der Funktionalität des Child Themes

Manchmal ist es notwendig, einige der Kernfunktionen von WordPress anzupassen oder diese zu erweitern. Gründe können sein, dass man seinen Lesern und Besuchern zum Beispiel Leseexemplare im ePub-Format zum Download anbieten möchte, um das eigene Buch stärker zu promoten. Allerdings erlaubt es WordPress nicht, .epub-Dateien in die Mediathek hochzuladen. Bleibt einem also nur der Weg über den FTP-Upload oder gar über einen externen Dienst wie Dropbox?
Weit gefehlt.

Abhilfe schafft in diesem Fall die Datei »functions.php«, die in jedem Theme-Ordner zu finden sein sollte. Wenn sie also in unserem Child Theme noch nicht vorhanden ist – dann sollten wir sie schnell erstellen. Als Inhalt bekommt die Datei zunächst folgendes:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
// Unter diesem Kommentar können eigene Funktionen eingefügt werden
?>

Um in WordPress nun den Upload von .epub und sogar .mobi-Dateien zu erlauben, fügt man unterhalb des Kommentars aber vor dem schließenden PHP-Tag »?>« den folgenden Code ein.

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
// Unter diesem Kommentar können eigene Funktionen eingefügt werden
function addUploadMimes($mimes) {
$mimes = array_merge($mimes, array( ‘epub|mobi‘ => ‚application/octet-stream‘ ));
return $mimes;
}

add_filter(‚upload_mimes‘, ‚addUploadMimes‘);
?>

Anschließend wechselt man wieder zurück in den Ordner »meine-themes« und erstellt aus dem Verzeichnis »twentysixteen-child« wieder eine ZIP-Datei. Als nächstes löscht man in der WordPress-Installation das alte Child Theme und lädt das neu erstellte hoch, schon sollte der Medianuploader auch .epub und .mobi-Dateien akzeptieren, die man anschließend in die Buchseiten als Download mit einsetzen kann.

6. Noch mehr Veränderung

Wer eine noch stärkere Veränderung an seinem Theme vornehmen möchte, der kann dies über die zugehörigen .php-Dateien bewerkstelligen. Allerdings ist dieses Vorgehen mit Vorsicht zu genießen, da man hierzu gute Kenntnisse in PHP mitbringen sollte.

Wenn diese vorhanden sind, gibt es noch eine zweite, wichtige und zu beachtende Voraussetzung: Während die .CSS-Datei und die »functions.php« von den Eltern zum Kind vererben, überschreiben .PHP-Dateien die Inhalte der Eltern komplett. Aus diesem Grund ist es ratsam, sich immer die entsprechende .PHP-Datei aus dem Eltern Theme an die entsprechende Stelle ins Kind Theme zu kopieren und erst darin dann die Änderungen vorzunehmen. Andernfalls kann das Aussehen der Webseite hierdurch so stark verändert werden, dass das Ergebnis ganz und gar nicht mehr den eigenen Wünschen entspricht. In diesem Fall bleibt einem nur, die entsprechenden Dateien wieder zu entfernen und mit ihnen neu anzufangen.

Haben Sie beispielsweise vor, die Datei »header.php« zu verändern, dann kopieren Sie die Original-Datei aus dem entsprechenden Verzeichnis des Original Themes in das entsprechende Verzeichnis des Child Themes und nehmen Sie erst danach Änderungen vor.

Nachdem Sie alle Veränderungen ihren Wünschen gemäß angepasst haben, erstellen Sie sich eine finale Child Theme – ZIP-Datei und laden Sie diese in Ihrem WordPress hoch.

Fazit

Ein Child Theme erhöht die Sicherheit bei Updates des Original-Themes. Es bietet zudem eine einfache Möglichkeit, das Aussehen des Themes anzupassen, ohne das diese mit jedem Update des Ur Themes verschwunden gehen. Und selbst, wenn man sich einmal mit den Anpassungen verheddert hat und das Aussehen der Seite zerschossen erscheint, so kann man notfalls Schritt für Schritt die letzten Änderungen zurücknehmen und so das bisherige Aussehen schnell wieder herstellen.

Weitere Informationen zu Child Themes finden Sie auch im WordPress Codex.

Wenn Ihnen dieser Artikel gefallen hat oder wenn Sie weitere Fragen zu diesem Thema haben, dann hinterlassen Sie mir doch hier einen Kommentar. Oder teilen Sie den Beitrag gern in den sozialen Medien.

Fazit: Child Theme
BLEIBEN SIE INFORMIERT

BLEIBEN SIE INFORMIERT

Sind Sie interessiert daran, wie Sie Ihre Sichtbarkeit steigern und Ihr Marketing optimieren können? Haben Sie vor, Ihr Storytelling zu verbessern? Dann melden Sie Sich hier für meine kostenlosen Informationen zu diesen Themen an.

Als Abonnent erhalten Sie einmal alle 1 bis 2 Monate aktuelle, noch unveröffentlichte Tipps und Informationen direkt in Ihren E-Mail Posteingang.

Schön, dass Sie Sich für meine Info-Mails interessieren. Ihr Anmeldung ist eingegangen. Bitte überprüfen Sie nun ihren E-Mail-Posteingang.