Child-Theme für WordPress erstellen

Als ich diesen Blog anfing, machte ich mir keine großen Gedanken über das Aussehen. Mir war es wichtig, zunächst meine Artikel online zu stellen. Damals habe ich auch mangels besseren Wissens einen Fehler begangen, den man in der Programmierung nicht machen sollte: Ich habe Änderungen am Original-Theme vorgenommen. Anhand meiner Erfahrungen mit anderer Blog-Software war ich einfach davon ausgegangen, dass dies der einzige Weg war. Heute weiß ich, dass WordPress die Möglichkeit bietet, ein eigenes Theme von einem anderen Theme abzuleiten. Davon habe ich Gebrauch gemach und möchte davon berichten.

Jugendsünden

Wie ich eingangs schrieb, ändert man eigentlich keine Originaldateien. Der Grund ist einfach: Stellt Euch vor Ihr nutzt ein Theme und nehmt einige Änderungen vor. Nun gibt es eine Aktualisierung. Wie hoch ist die Wahrscheinlichkeit, dass Ihr diese Änderung in Euer angepasstes Theme übernehmt? Das Problem wird bei Sicherheitsaktualisierungen deutlich. Wird eine Sicherheitslücke gestopft und Ihr übernehmt die Änderung nicht, könnten böse Buben mit Eurer Webseite Schindluder treiben.

Deshalb bezeichne ich mein Vorgehen beim ersten Theme für diesen Blog als „Jugendsünde“. Das ich dieses Theme nicht lange nutzen wollte ist keine Entschuldigung, sondern nur eine Erklärung.

Vorbereitung

Zunächst musste natürlich das Original-Theme installiert werden. Dies machst Du unter WordPress entweder über die Theme-Suche oder Du lädst ein Theme manuell herunter und in Deinen Blog wieder hoch. Ich bevorzuge zweitere Variante. Das Theme installiere ich zunächst lokal auf meinem Rechner und mache meine Anpassungen. Warum ich das mache, habe ich im Artikel Updates dieser Webseite erklärt: Ich nutze eine Versionsverwaltung, um meine Änderungen zu verfolgen. Aktualisiere ich lokal das Theme, erkenne ich leichter die Änderungen und kann diese in meine angepassten Dateien übernehmen.

Nachdem ich das Theme installiert hatte, aktivierte ich dieses und schaute mir genau an, welche Änderungen ich vornehmen möchte. Anschließend ging es an die Erstellung meines Child-Themes.

Wie definiere ich nun ein Child-Theme?

Im Ordner wp-content/themes liegen alle Themes für WordPress. In diesem Verzeichnis habe ich einen neuen Ordner namens stubenradio erstellt. Damit dieser Ordner für Themes erkannt wird, muss eine Datei namens styles.css angelegt werden. Diese Datei definiert normalerweise nur das Aussehen einer Webseite, doch hier enthält sie weitere Informationen für WordPress. Damit ist WordPress in der Lage, das Theme zu erkennen.

/*
Theme Name: Stubenradio
Theme URI: http://www.stubenradio.de
Description: Child of Shootingstar Theme
Author: Falk Döring
Author URI: http://www.stubenradio.de
Template: shootingstar
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, black, white, gray, blue, green, orange, one-column, two-columns, right-sidebar, responsive-layout, custom-background, custom-header, custom-colors, custom-menu, featured-images, full-width-template, sticky-post, theme-options, translation-ready, editor-style, rtl-language-support
Text Domain: stubenradio
*/

Bitte beachtet, dass dieser Text zwischen /* und */ steht. Das markiert den Beginn und das Ende eines Kommentars und sollten auch drin bleiben, da sonst der Browser nicht weiß was er machen soll.

Mit Theme Name: habe ich das Theme benannt. Die folgenden vier Zeilen sind für mich weniger interessant und deshalb mit irgendwas ausgefüllt worden. Wichtig hingegen ist wiederum Template:. Hier definierte ich das Theme, von dem mein Theme abgeleitet wird. In meinem Fall ist das shootingstar. Die nächsten Zeilen habe ich vom Theme shootingstar übernommen. Mit Text Domain: definierte ich einen generischen Namen für mein Theme.

Kaum zu glauben, aber nachdem ich mein Theme aktiviert hatte, stand mir nun das Theme „Shootingstar“ mit allen seinen Einstellungen als Theme „Stubenradio“ zur Verfügung.

Ich möchte meine Styles ändern

Wenn ich nun das Aussehen anpassen möchte, muss ich dieses WordPress bekannt machen. Standardmäßig wird die style.css für diesen Zweck nicht genutzt. Diese Erkenntnis und die Lösung kosteten mich eine halbe Stunde Arbeit.

Zunächst musste ich in meinem Theme-Verzeichnis eine functions.php anlegen. In dieser fügte ich folgende Zeilen hinzu:

<?php

function theme_enqueue_styles() {
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );

    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

Mit diesen Zeilen hängte ich die Styles meines Themes an das Original-Style an. Jetzt passierte das, was ich ursprünglich wollte: Ich überschrieb die Styles vom Eltern-Theme.

Aus Programmierersicht eine nicht ganz intuitive Vorgehensweise, aber sie funktioniert.

Ich möchte mein Theme ändern

Zuletzt noch ein Hinweis, wie die Themes angepasst werden. Zunächst musst Du rausfinden, welche Stelle Du ändern möchtest und welche Datei sich dahinter verbirgt. Hast Du den Übeltäter im Parent-Theme gefunden, kopierst Du diese Datei in Dein Child-Theme-Verzeichnis. Nun kannst Du Deine Änderungen vornehmen. Alle Dateien, die Du nicht in dein Theme-Verzeichnis kopierst und anpasst, werden aus dem Parent-Theme-Verzeichnis geladen.

Auf diese Art habe ich die schema.org-Auszeichnung hinzugefügt.

Texte anpassen

WordPress wird für verschiedene Sprachen zur Verfügung gestellt. Ein Problem ist, dass die Original-Texte meistens auf englisch sind und die Übertragungen in andere Sprachen meistens von Google Translator anstatt einem Muttersprachler vorgenommen werden. Ein weiteres Problem kann sein, dass die Übertragung nicht zum Kontext deiner Webseite passt. Aus diesem Grund war es für mich interessant zu wissen, wie die Übersetzungen angepasst werden können.

Um meine eigenen Übersetzungen zu nutzen, musste ich zunächst im eigenen Theme-Verzeichnis einen Ordner languages anlegen. Anschließend wurde WordPress in der Datei functions.php mitgeteilt, dass es in diesem Ordner Übersetzungen findet:

function stubenradio_setup() {
    load_theme_textdomain(
        'stubenradio',
        get_stylesheet_directory() . '/languages'
    );
}
add_action('after_setup_theme', 'stubenradio_setup');

Jetzt konnte ich meine eigenen Übersetzungen nutzen. Dazu legte ich meine Übersetzungsdateien in den languages-Ordner und versah die zu übersetzenden Stellen in den Themes-Dateien mit der Textdomain stubenradio.

Fazit

WordPress bietet von Haus aus Möglichkeiten, vorhandenen Themes an Deine Vorstellungen anzupassen, ohne die Originale zu überschreiben. Das ist für mich eindeutig ein Pluspunkt. Damit wird mir Flexibilität geboten, die allerdings mit etwas Konfiguration einher geht. Die Grenzen werden dort gesetzt, wo Dein angepasstes Theme das Original-Theme fast vollständig überschreibt. Aber ehe das zum Beispiel bei mir passiert, habe ich vielleicht schon ein komplett neues Theme erstellt.

Zum Schluss noch ein Link zum Thema Erstellen von Child-Themes auf der Dokumentations-Seite von WordPress.

Über den Autor

Falk Döring
Falk ist der Gründer von stubenradio.de. Einige Jahre war er Moderator und stellvertretender Sendeleiter in verschiedenen Webradios und kennt das typische Auf und Ab. Eines Tages hatte er die Nase voll und hörte auf zu moderieren. In diesem Blog veröffentlicht er seine Erfahrungen, gibt einen Blick hinter die Kulissen und gibt Tipps und Tricks rund um das Thema Webradio.

Schreiben Sie einen Kommentar

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