BlogTrainer

WordPress-Seminare

child-theme-2013

WordPress Child-Theme mit Sprachdatei – einfach erklärt

Wenn Sie für Ihr WordPress-Theme Änderungen am Stylesheet oder an den PHP-Dateien planen, sollten Sie dies immer an einem „Child-Theme“ und nicht am vorhandenen „Parent-Theme“ vornehmen. Bei einem „internationalisierten“ Theme müssen Sie oft auch Änderungen an der deutschen Sprachdatei vornehmen, die zusammen mit dem „Parent-Theme“ installiert wurde. Auch diese Änderungen sollten Sie nicht am Original, sondern am Ableger (dem „Child“) erledigen.

Der Hauptgrund für diese Vorsichtsmaßnahme liegt auf der Hand: Auch die Theme-Designer produzieren hin und wieder Updates für ihr Theme. Und so könnten bei einem Update alle Ihre Änderungen mit einem einzigen Klick versehentlich überschrieben werden. Das gilt auch für die geänderten Sprachdateien. Besonders „gefährlich“ ist das bei Verwendung eines der Standardthemes (Twenty Ten, Twenty Eleven, Twenty Twelve oder Twenty Thirteen), denn deren deutsche Sprachdateien liegen nicht einmal im jeweiligen Themeordner, sondern im Ordner wp-content/languages/themes. Kein guter Ort, denn dort werden sie garantiert beim nächsten WordPress-Update „übergebügelt“.

4 Schritte zum Child-Theme mit eigener Sprachdatei

In diesem Artikel zeige ich Ihnen, wie Sie für jedes beliebige Theme ein Child-Theme anlegen und mit einer eigenen, „überschreibungssicheren“ Sprachdatei versehen. Ich zeige das hier am Standard-Theme Twenty Thirteen.

Das Verfahren funktioniert aber für jedes Theme. Mein Child-Theme soll den Namen Zwanzigdreizehn tragen, wobei der Name frei wählbar ist.

Datei screenshot.png, 600 x 450 Pixel.

Unser künftiges Child-Theme mit Sprachdatei benötigt folgende Dateien:

  • screenshot.png
    Diese PNG-Datei sollte 600 Pixel breit und 450 Pixel hoch sein. Sie können sie mit jedem beliebigen Grafikprogramm erstellen.

Der Zweck dieser Datei ist es, dass sie im Auswahlmenü Design → Themes angezeigt wird. Deshalb muss der Name screenshot.png exakt stimmen. Es muss aber natürlich kein wirklicher Screenshot unseres Themes sein.

  • de_DE.po und de_DE.mo
    Dieses Pärchen aus PO-Datei und MO-Datei sind die Sprachdateien unseres Themes. Sie dürfen nicht mit den gleichnamigen Sprachdateien von WordPress verwechselt werden! Bei allen ins Deutsche übersetzten Themes sind beide Dateien in der ZIP-Datei enthalten, die Sie beim Download oder Kauf des Themes erhalten haben.

Wenn Sie jedoch ein Standard-Theme wie Twenty Thirteen als Parent-Theme verwenden wollen, downloaden Sie zunächst eine Variante der aktuellen deutschen Sprachdateien und entpacken Sie diese lokal. Die Sprachdateien der Standard-Themes finden Sie im Ordner themes. Entnehmen Sie dort die beiden gewünschten Dateien und benennen Sie diese wie folgt um:
twentythirteen-de_DE.po → de_DE.po
twentythirteen-de_DE.mo → de_DE.mo

Falls Sie an den Sprachdateien Änderungen machen möchten, so ist jetzt ein guter Zeitpunkt dafür. Ändern Sie mit einem PO-Editor alle unschönen und falschen Übersetzungen in der PO-Datei. Ich korrigiere z.B. immer das deppenhafte „Hinterlasse einen Kommentar“ (eine wörtliche und somit falsche Übersetzung von „Leave a comment“) zu „Schreibe einen Kommentar“. Beim Speichern der PO-Datei wird automatisch auch die MO-Datei gespeichert.

  • style.css
    Das Stylesheet eines Child-Themes besteht in der einfachsten Form aus nur fünf Zeilen. Kopieren Sie also diese fünf Zeilen in eine leere Datei und speichern Sie sie mit einem Texteditor (nicht Word!) unter dem Namen style.css ab.
/* Theme Name: zwanzigdreizehn Template: twentythirteen */ @import url("../twentythirteen/style.css");

Natürlich ersetzen Sie den Theme-Namen zwanzigdreizehn durch den Wunschnamen Ihres Child-Themes und das Template twentythirteen an beiden(!) Stellen durch den Namen Ihres Parent-Themes. Achten Sie dabei auf Kleinschreibung!

Das Importieren (Zeile 5) des Style-Sheets des Parent-Themes in das Style-Sheet des Child-Themes hat gegenüber dem kompletten Kopieren den Vorteil, dass Sie im Child-Theme nur solche Schriftarten, Farben, Abstände usw. definieren müssen, die vom Style des Parent Themes abweichen. Solche Änderungen und Ergänzungen folgen dann ab Zeile 6 nach der Import-Anweisung.

  • functions.php
    Legen Sie nun eine weitere leere Datei an, kopieren Sie dort die folgenden Zeilen hinein und speichern Sie diese mit einem Texteditor (nicht Word!) unter dem Namen functions.php ab:
<?php function my_child_theme_setup() { load_child_theme_textdomain( 'twentythirteen', get_stylesheet_directory() ); } add_action( 'after_setup_theme', 'my_child_theme_setup' ); ?>

Hier tauschen Sie nur den Namen des Parent-Themes twentythirteen gegen den Namen Ihres verwendeten Parent-Themes aus.

Durch die Funktion load_child_theme_textdomain() erreichen Sie, dass WordPress die Sprachdatei de_DE.mo im Ordner unseres Child Themes sucht, und nicht im Parent-Theme.

So, nun sind Sie fast fertig. Falls Sie es noch nicht getan haben, installieren Sie jetzt das Parent-Theme (in meinem Beispiel twentythirteen) auf dem Server. Das Child-Theme zwanzigdreizehn wird nicht ohne das Parent-Theme laufen, da es alle im Child-Theme nicht angelegten Dateien immer aus dem Parent-Theme laden will.

Legen Sie nun lokal einen Ordner für Ihr Child-Theme an, z.B. mit den Namen zwanzigdreizehn. Legen Sie die vier erstellten Dateien screenshot.png, de_DE.mo, style.css und functions.php hinein. Die PO-Datei de_DE.po ist später auf dem Server nicht erforderlich, würde aber auch nicht stören.

Kopieren Sie nun den Child-Theme-Ordner per FTP auf Ihren Server in das Verzeichnis wp-content/themes, direkt neben den Ordner Ihres Parent-Themes. Falls Sie die FTP-Daten Ihres Servers nicht zur Hand haben, können Sie den Child-Theme-Ordner zwanzigdreizehn natürlich auch zippen und die ZIP-Datei zwanzigdreizehn.zip über Design → Themes → Themes installieren → Hochladen auf den Server bringen.

Ist das Child-Theme hochgeladen, müssen Sie es nur noch unter Design → Themes aktivieren.

design-themes

Künftige Änderungen Ihres Style-Sheets fügen Sie wie oben beschrieben ab Zeile 6 ein. Wollen Sie andere PHP-Dateien Ihres Themes ändern (z.B. die header.php), so kopieren Sie diese von Ihrem Parent-Theme in den Child-Theme-Ordner und nehmen die Änderungen nur im Child-Theme-Ordner vor.

Tipp: Besuchen Sie unseren Workshop ”Professionelle Websites mit WordPress” jeden Monat in Berlin, Hamburg, Hannover, Düsseldorf, Köln, Frankfurt, Stuttgart, München, Nürnberg und Leipzig!

Das könnte Sie auch interessieren: