WordPress Theme Update-sicher übersetzen mit Child-Theme

Sobald Du beginnst, irgendwelche Anpassungen an Deiner WordPress Website vorzunehmen, brauchst Du unbedingt ein Child-Theme.

Eine der häufigsten Änderungswünsche dürfte dabei die Theme-Übersetzung sein.

In diesem Post stelle ich die grundsätzlichen Vorteile und Möglichkeiten des Child-Themes vor und erkläre konkret, wie Du die Sprachdatei Deines Themes Update-sicher für Deine Bedürfnisse anpassen kannst.

Warum brauche ich überhaupt ein Child-Theme?

Grundsätzlich hast Du die volle Kontrolle über Dein WordPress und kannst ändern was Du willst.

Davon ist aber aus einem entscheidenden Grund abzuraten: Bei jedem Update werden alle Deine Änderungen einfach durch die neue Version überschrieben. Das gilt sowohl für WordPress selbst, aber auch für alle Themes und Plugins.

Dafür gibt es das Konzept des Child-Themes, in dem Du Deinen Ideen freien Lauf lassen kannst.

Das Prinzip des Child-Themes ist dabei einfach: Du wählst ein beliebiges Theme als sogenanntes Parent-Theme aus. Das von Dir erstellte Child-Theme erbt nun erst einmal das komplette Aussehen und alle Funktionen – bis Du jetzt gezielt etwas änderst, hinzufügst oder auch weglässt, sei es beim Aussehen, Funktionalität oder eben bei der Übersetzung, was wir in diesem Post durchführen werden.

Tipp: Ich würde ein Child-Theme immer möglichst sofort erstellen, sobald das (Parent-)Theme ausgewählt worden ist, auch wenn noch gar keine Änderungen geplant sind. Ich hatte selbst einmal den Fall, dass ich das Premium Theme The7 (ein grundsätzlich sehr empfehlenswertes Theme, wobei ich in diesem Artikel mehr über die Wahl des perfekten WordPress Themes schreibe) installiert und ganz normal im Admin-Bereich konfiguriert habe (Design, Farben, Menü- und Widget-Bereiche, etc.).

Später musste ich noch Änderungen machen, die ich schlauerweise Update-sicher in einem Child-Theme vornahm. Nur: Bei Aktivierung des Child-Themes wurden alle diese Konfigurationen wieder auf die Standardwerte zurückgesetzt… Kostete mich eine gefühlte Stunde Arbeit, diese wiederherzustellen 😉

Ein Child-Theme erstellen

Für dieses Beispiel habe ich das WordPress Theme Hueman gewählt, das über keine deutsche Sprachdatei verfügt. Dieses Theme ist frei verfügbar und Du kannst es ebenfalls unter Design – Themes – Themes installieren finden und installieren.

WordPress Child-Theme Hueman
WordPress Child-Theme des Hueman-Themes

Wie Du im Screenshot oben siehst, habe ich WordPress bereits auf Deutsch umgestellt (siehe z.B. Hinterlasse eine Antwort), während das Theme noch auf Englisch ist (siehe z.B. 1 Response). Und das übersetzen wir jetzt – auf die Update-sichere Art per Child-Theme.

Schritt 1: Du musst in Deiner WordPress-Installation einen neuen Ordner für Dein Child-Theme anlegen, und zwar unter wp-content/themes/. Benenne den Ordner nach Deinem Child-Theme, ohne Leerzeichen und Grossbuchstaben zu verwenden. Ich nenne das Child-Theme einfach Hueman-Child, den Ordner entsprechend hueman-child:

Child-Theme Hueman Neuer Ordner
Neuer Ordner für Child-Theme Hueman

Schritt 2: Als nächstes musst Du eine Datei style.css mit folgendem Inhalt erstellen und in den Ordner des Child-Themes hochladen:

/*
 Theme Name:     Hueman-Child
 Theme URI:      https://8020webdesign.ch/hueman-child/
 Description:    Hueman Child-Theme mit deutscher Übersetzung
 Author:         Michael Bruetsch
 Author URI:     https://8020webdesign.ch
 Template:       hueman
 Version:        1.0.0
*/

@import url("../hueman/style.css");

Die Angaben kannst Du natürlich mit Deinen ersetzen, wichtig ist lediglich, dass sowohl unter Template: als auch in der @import Zeile der korrekte Ordnername des Parent-Theme angegeben ist. In diesem Fall ist das hueman.

Die style.css Datei ist grundsätzlich für das Aussehen Deiner Website verantwortlich. Mit der Zeile @import machen wir nichts anderes, als genau das Aussehen des Parent-Themes zu übernehmen. Die Angaben wie der Name oder Autor werden dann in WordPress bei der Theme-Auswahl angezeigt.

Schritt 3: Jetzt müssen wir noch eine zweite Datei erstellen und in den Child-Theme Ordner hochladen; die functions.php. In diese kannst Du folgenden Code kopieren:

<?php
function my_child_theme_setup() {
	load_child_theme_textdomain( 'hueman', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_child_theme_setup' );
?>

Du musst lediglich darauf achten, dass Du nach load_child_theme_textdomain den korrekten Parent-Theme Ordnernamen angegeben hast, in meinem Fall wieder hueman.

Die functions.php Datei kann für funktionale Anpassungen verwendet werden. Mit dem obigen Code sagen wir unserem WordPress, dass es die Sprachdateien unseres Child-Themes im Unterordner languages verwenden soll.

Schritt 4: Erstelle im Ordner deines Child-Themes den Unterordner languages. Gehe nun in den languages Ordner des Parent-Themes. Kopiere die Dateien en_US.po und en_US.mo in den erstellten languages Ordner Deines Child-Themes, und benenne sie in de_DE.po und de_DE.mo um.

Wenn das Parent-Theme bereits eine deutsche Übersetzung hätte, könntest Du natürlich direkt die de_DE Dateien kopieren.

Nun müsstest Du folgende Struktur im Ordner Deines Child-Themes haben:

Child-Theme Hueman Ordnerstruktur
Ordnerstruktur des kompletten Child-Theme Hueman

Schritt 5: Nun sind wir fast fertig: Gehe im Admin-Bereich auf Design – Themes und schon siehst Du Dein selbst erstelltes Child-Theme, welches Du nur noch aktivieren musst:

Child-Theme Hueman aktivieren
Child-Theme Hueman aktivieren in WordPress

Jetzt kannst Du alle benötigten Formulierungen Update-sicher übersetzen. Wie Du Sprachdateien ganz einfach online bearbeiten kannst, habe ich in dem Extra-Post Sprachdateien online per Plugin bearbeiten beschrieben.

Gratuliere! Nun hast Du Dein erstes selbst übersetztes WordPress Theme im Einsatz!

Child-Theme Hueman übersetzt
„Response“ und „Comments“ ist jetzt in unserem Hueman Child-Theme übersetzt

Mit einem Child-Theme ist noch mehr möglich. So kannst Du jede beliebige PHP-Datei des Parent-Themes überschreiben, indem Du einfach eine genau gleich benannte Datei in Deinem Child-Theme erstellst.

Du möchtest z.B. den Hinweis „Powered by WordPress“ aus Deiner Fusszeile löschen? Dann könntest Du die footer.php Datei in Dein Child-Theme kopieren und dort die entsprechenden Zeilen entfernen. Fertig.

Damit solltest Du nun einen guten Einblick in den Nutzen und Möglichkeiten eines Child-Themes bekommen haben. Und nun stehen Dir plötzlich auch alle englisch-sprachigen Themes der Welt zur Verfügung! 🙂

Michael Brütsch

Webdesigner & WordPress Experte: Ich kreiere WordPress Websites, die Google liebt (aka Suchmaschinenoptimierung / SEO).

20 Gedanken zu „WordPress Theme Update-sicher übersetzen mit Child-Theme“

  1. Hi. Danke. Supertolle Anleitung. Lange her seit dem letzten Kommentar.
    Bei mir wird nach dem Einrichten der Ordner das Theme (barnsbury) auf wordpress unter „Beschädigte Themes“ angezeigt, mit folgendem Hinweis:

    barnsbury-wpcom-child -> Das «barnsbury-wpcom» Theme ist kein gültiges Eltern-Theme.

    HInweis: der Ordner des barnsbury-Themes heisst eben „barnsbury-wpcom“

    Hast du da einen Verdacht woran das liegen könnte?

    Beste Grüsse
    Dani

    Antworten
  2. Hi Michael,

    toller Beitrag! Eine Frage habe ich noch und hoffe sehr, dass du mir helfen kannst.
    Ich habe ein Theme von Goodlayers und da musste ich Sprachdateien, die in „wp-content/plugins/tourmaster/languages“ stecken übersetzen. Dann kam ein Update und alles war wieder auf englisch. Wie bekomme ich diese (und noch 2-3 andere Sprachdateien in weiteren Verzeichnisses unter „plugins“ ins Child Theme bzw, dass diese nicht überschrieben werden? Wenn du mir da helfen kannst, bist du mein persönlicher Held 😀

    Dir noch einen schönen Abend!

    Antworten
  3. Hallo Michael,

    danke für den Artikel.
    Ich bin schon einige Zeit auf der Suche nach einer Anleitung für das Laden der Sprachdateien vom Parent Theme, wenn man ein Child-Theme verwendet. Dank deiner Anleitung funktioniert es jetzt prima 🙂

    Herzliche Grüße, Bettina

    Antworten
  4. Hello,
    I’m trying to use mo-files located in my child theme instead of using them in the parent theme due to theme updates. So if the mo files are located in the parent theme, the strings are translated. If the files are located in the child theme, nothing happens. Also when I use

    the translation didn’t work. How to integrate the mo files with child theme, so that it is also used by the parent theme?
    Thanks
    Simeon

    Antworten
    • Hi Simeon,

      Sounds like you’ve forgotten to tell WordPress to load the .mo files of the child theme (that would be step 3 in this article).

      If you did, double check that the text domain (in this example „hueman“) and folder structure are correct.

      If it still doesn’t work, you have to check with the theme authors how they load the language files. Maybe you need another approach. Hard to say from a distance 😉

      Good luck and best regards,
      Michael

      Antworten
  5. Hallo Michael,
    ich habe Deine Anleitung (die genauso beschrieben ist, wie einige andere Anleitungen) genau befolgt. Leider wird die Übersetzungsdatei nicht ausgeführt.

    Ich hatte sie zunächst im Ordner parent-theme/languages geführt. Da funktionierte es. Nachdem ich sie dort ausgeschnitten und in meinen Ordner child-theme/languages geschoben habe, funktioniert es nicht mehr. Habe schon alles, was mir eingefallen ist, ausprobiert. Hast Du eine Idee, woran es liegen kann?

    Vielleicht daran, dass im parent-theme jetzt keine Übersetzungsdatei außer der .pot Datei mehr liegt?

    Viele Grüße
    Daniel

    Antworten
    • Hallo Daniel,

      Grundsätzlich solltest Du die Datei im Parent Theme belassen und ins Child Theme kopieren. Daran sollte es aber nicht liegen.

      Was mir spontan einfällt: Hast Du auch die .mo-Datei kopiert bzw. mit dem von Dir genutzten Übersetzungstool generieren lassen? Die .po-Datei ist die Rohdatei zum Bearbeiten, die .mo-Datei ist die „kompilierte“ Datei, welche von WordPress tatsächlich genutzt wird.

      Wenn es nicht daran liegt, ist es schwierig, aus der Ferne eine Lösung zu finden. Es kann auch sein, dass das Parent Theme die Sprachdatei nicht Child Theme kompatibel lädt. Im Zweifelsfall mal nachfragen.

      Beste Grüsse,
      Michael

      Antworten
      • Hallo Michael,
        danke schon mal! 😉

        Ich hatte die Übersetzungsdatei mit poedit erstellt und in den parent-theme Ordner geladen.

        Habe gerade keine Möglichkeiten in poedit reinzuschauen. Kann es denn sein, dass ich beim Erstellen der Datei spezifische Angaben gemacht habe, die die Nutzung auf das parent-theme begrenzen?

        Die Lademöglichkeit muss ich mal abklären. Bei all den Schwierigkeiten, die ich mit dem Theme schon hatte, würde es mich nicht wundern, wenn es an der Programmierung läge. Da es jedoch gewisse Sprachbarrieren mit dem Support gibt, möchte ich erst alles andere ausschließen. 😉

        Beste Grüße zurück
        Daniel

        Antworten
        • Hi Daniel,

          Nein, an den Übersetzungsdateien liegt es nicht, die sind vom Theme unabhängig (aber wie gesagt schauen, dass .po und .mo-Datei hochgeladen sind).

          Und auch schauen, dass in der functions.php die richtige Textdomain geladen wird (im Beispiel oben ‚hueman‘).

          Ja, das mit dem Theme Support kenne ich 🙂

          Viel Erfolg und beste Grüsse,
          Michael

          Antworten
  6. Hallo Michael,
    Deinen Beitrag habe ich zu spät gelesen.
    Leider habe ich noch kein Child-Theme erstellt, und bin bereits zur Hälfte mit meiner Seite fertig. Theme: The7…
    Was bedeutet das jetzt? Ist dann beim Update alles weg, was ich angepasst hatte? Ich habe einige Änderungen im Custom CSS vorgenommen, die kann ich aber in eine exterene txt Datei kopieren.
    Mir war aber nicht bekannt, dass ganz normal im Admin-Bereich vorgenommene Anpassungen auch weg sein können. Was muss ich denn da machen?
    LG
    Melanie

    Antworten
    • Hallo Melanie,

      Das betrifft nur Änderungen am Theme selbst: Z.B. an den PHP-Dateien oder an den Sprachdateien (.po/.mo-Dateien). Wenn ich Dich richtig verstanden habe, hast Du das nicht gemacht. Die Änderungen im Admin-Bereich (und somit auch das Custom CSS) bleiben beim Update erhalten. Daher solltest Du also keine Probleme haben 🙂

      Falls Du aber irgendwann ein Child-Theme brauchst, dann solltest Du daran denken, dass alle Einstellungen im Admin-Bereich verloren gehen beim Aktivieren vom Child-Theme. Es gibt Themes, die bieten die Möglichkeit die Einstellung zu exportieren (in ein XML-File). Das The7 aber leider nicht soviel ich weiss. Darum in diesem Fall am Besten einfach von jeder Konfigurationsseite einen Screenshot machen (und das Custom CSS kopieren).

      Beste Grüsse,
      Michael

      Antworten
  7. Vielen Dank für diesen Blogeintrag! Ich war auf der Suche nach einer deppensicheren Erklärung wie ich mein Child-Theme updatesicher übersetzen kann. Hiermit hab ich es geschafft 🙂

    Antworten

Schreibe einen Kommentar

Benachrichtigung bei neuen Kommentaren (wenn Du eine E-Mail erhalten willst, sobald ich Dir geantwortet habe):