WordPress-Theme-Tutorial für Anfänger – Teil 8: Übersetzung
In dieser Lektion lernen wir, wie die Übersetzung (oder auch bekannt als i18n) in WordPress funktioniert und wie Sie die notwendigen Anpassungen in unseren Vorlagen vornehmen. Wir werden auch lernen, wie man PoEdit richtig einrichtet, um eine Übersetzungsdatei für unser Thema zu erstellen, die in verschiedene Sprachen übersetzt werden kann.
Warum sich die Mühe machen, Übersetzungsunterstützung hinzuzufügen?
Alle Themes, zumindest diejenigen, die zur Verwendung durch andere Personen als den Entwickler veröffentlicht werden, sollten zur Übersetzung verfügbar sein. Dies wird als Internationalisierung (kurz i18n) bezeichnet und ermöglicht es Menschen, Texte, die Sie Ihrem Thema hinzufügen, in eine andere Sprache zu übersetzen.
Das funktioniert so, dass du als Theme-Autor oder Plugin-Entwickler all deine Texte (wie „Weiterlesen”, „Keine Beiträge”) in bestimmte Funktionen verpackst, die es WordPress ermöglichen, diese aufzunehmen und einzufügen eine Übersetzung, falls vorhanden. Innerhalb Ihres Designs (oder Plugins) können Sie Dateien eines bestimmten Dateityps für jede übersetzte Sprache hinzufügen oder sicherstellen, dass andere Personen ihre eigene Übersetzung in ihrer eigenen Sprache erstellen können.
Dies ist sehr nützlich für Leute, die WordPress und Ihr Design (oder Plugin) in einer anderen Sprache als der Ausgangssprache verwenden möchten, in der es geschrieben wurde (was normalerweise Englisch ist). Es kann aber auch verwendet werden, um bestimmte Texte innerhalb derselben Sprache in etwas anderes umzuwandeln.
Wenn Sie sich für das Thema interessieren, hat WordPress Codex einen langen und guten Dokumentationsleitfaden zu i18n für Entwickler.
Implementieren von i18n in unserem Thema
Wir haben den ersten Teil bereits im vorherigen Schritt dieser Themen-Tutorial-Serie erledigt, wo wir load_theme_textdomaindie Einrichtungsfunktion unseres Themas hinzugefügt haben. Falls Sie es vergessen haben, haben wir Folgendes hinzugefügt:
load_theme_textdomain('wptutorial', get_stylesheet_directory(). '/lang');Das erste Argument ist das Handle, dies ist eine eindeutige Zeichenfolge, mit der Sie alle Texte gruppieren, die zu Ihrem Thema gehören. Sie werden dieses Handle jedes Mal wiederholen, wenn Sie einen Text übersetzbar machen. Das zweite Argument teilt WordPress mit, wo sich die Übersetzungsdateien befinden. Wir haben sie so definiert, dass sie sich in einem Unterordner „ lang” in unserem Themenverzeichnis befinden.
Machen Sie sich keine Sorgen, wenn dieser Ordner nicht existiert oder keine Dateien enthält – nichts wird abstürzen. Wenn WordPress weder den Ordner noch die richtigen Übersetzungsdateien findet, kehrt es standardmäßig zu den Texten zurück, die wir im Design haben.
Der nächste Schritt besteht darin, unseren gesamten Code durchzugehen und alle Textausgaben zu finden, die übersetzbar sein sollten. Es empfiehlt sich sicherzustellen, dass wir absolut alle Texte abdecken. Nichts ist ärgerlicher als die Verwendung eines Designs oder Plugins, bei dem der Autor fest codierte Texte macht, die es unmöglich machen, sie zu übersetzen oder in irgendeiner Weise zu ändern.
Wie man Texte übersetzbar macht
Was wir mit allen Texten machen, ist, sie in eine der gettext-Funktionen von WordPress zu packen, die am häufigsten _e()oder sind __(). Der erste ist ein Unterstrich mit „e”, der verwendet wird, wenn Sie den Text gleichzeitig wiederholen möchten. Der zweite besteht aus zwei Unterstrichen und wird verwendet, wenn Sie ihn nicht wiedergeben, sondern speichern oder in einer Variablen verwenden möchten.
WordPress hat mehr Gettext-Funktionen, die spezifischeren Zwecken dienen, zum Beispiel esc_html__(), _n(), _x()und mehr. Wir werden jedoch in diesem Tutorial nicht ins Detail gehen.
Die gettext-Funktionen nehmen zwei Parameter entgegen; erstens den Text selbst und zweitens das Handle, das Sie in definiert haben load_theme_textdomain. In diesem Fall ist es „ wptutorial“.
Wenn Sie zum Beispiel so etwas haben:
echo 'Read more';Sie müssen es ersetzen durch:
_e('Read more', 'wptutorial');Und ähnlich zum Speichern in eine Variable;
$myvariable = 'Read more';Es muss so geschrieben werden:
$myvariable = __('Read more', 'wptutorial');Jetzt müssen wir alle Texte in unseren Vorlagen finden! Wenn Sie dieses Tutorial bis zu einem „T” befolgt haben, sind es nicht viele. Wir haben einige Strings in index.phpund einige in single.php.
Hinzufügen von Übersetzungsunterstützung in unserem Thema
Beginnen wir mit index.phpund suchen Sie die Nachricht „Keine Posts, sorry”, die wir hinzugefügt haben, wenn die Schleife keine Posts enthielt. Wir packen diesen Text ein, _e()weil wir ihn trotzdem wiedergeben wollen. Das bekommen wir also:
Da Sie verwendet _e()haben, sollten Sie keine Änderung sehen, wenn Sie auf der Startseite oder im Archiv auf Aktualisieren klicken. Aber unter der Haube ist dieser Text jetzt übersetzbar!
Wir haben denselben Text in unserem single.phpund page.php. Aktualisieren Sie diese auf die gleiche Weise wie in index.php. Wir haben einige weitere Texte in hinzugefügt single.php, also sieht es so aus, nachdem alle Texte übersetzbar gemacht wurden:
Von nun an stellen wir sicher, dass alle Texte, die wir in unser Thema einfügen, in __()oder eingeschlossen werden _e().
Übersetzungsdateien
Es gibt zwei Möglichkeiten, Übersetzungsdateien für Ihr Thema bereitzustellen;
- Geben Sie eine
.pot-Datei an - oder stellen Sie ein Paar von
.pound –.moDateien bereit.
Die .pot-Datei wird für ein Thema empfohlen, das Sie verkaufen oder an andere Benutzer verschenken, da es mit dieser Datei sehr einfach ist, eine Übersetzungsdatei für eine neue Sprache zu erstellen. Es ist jedoch nicht einfach (oder kostenlos), eine dieser Dateien zu erstellen. Wenn Sie mit WP-CLI (Befehlszeile WordPress) oder Grunt vertraut sind, können Sie die Richtlinien in der WordPress-Dokumentation hier befolgen. Wenn nicht, könnte die andere Alternative für Sie sein.
Die Dateien .pound .moarbeiten zusammen. WordPress benötigt eine .mofür die Übersetzung von Texten, aber diese Datei ist nicht menschenlesbar. Damit haben wir die .pofür uns lesbare Datei. Mit der richtigen Software wird die .moDatei immer dann generiert, wenn Sie Änderungen vornehmen.
Der Nachteil von .poand .mo-Dateien besteht darin, dass Sie für jede Sprache ein Paar generieren müssen, und sobald Sie es in eine Sprache übersetzt haben, gibt es keine einfache Möglichkeit, alle Übersetzungen zu leeren, um eine weitere neue Sprache zu erstellen.
Sie benötigen ein Programm zum Bearbeiten .potund .poDateien. Am gebräuchlichsten ist PoEdit. PoEdit ist kostenlos und funktioniert sowohl für iOS als auch für Windows. Einige erweiterte Funktionen (z. B. das Generieren einer .pot-Datei) erfordern jedoch leider eine kostenpflichtige Version. Wir werden die kostenlose Version verwenden, um eine .poDatei für unser Thema zu erstellen.
Laden Sie PoEdit herunter und installieren Sie es, um dem Rest des Tutorials zu folgen.
Erstellen einer .po-Datei für unser Thema mit PoEdit
Das Erstellen einer Übersetzungsdatei für Englisch macht normalerweise keinen Sinn, wenn alle Texte in unserem Thema sowieso Englisch sind, aber für die Zwecke dieses Tutorials werde ich eine englische Übersetzungsdatei erstellen.
1 Öffnen Sie PoEdit und klicken Sie auf Datei > Neu…
2 Sie werden aufgefordert, eine Sprache auszuwählen. Wählen Sie Ihre gewünschte Sprache, zum Beispiel Englisch.
3 Drücken Sie Speichern (Strg+S). Suchen Sie Ihren Themenordner und geben Sie den /lang/Unterordner ein. (Wenn Sie es im letzten Schritt nicht erstellt haben, erstellen Sie es jetzt). Der Name Ihrer Datei ist entscheidend. Für Themen sollte nur Ihr Sprachcode genannt werden. Für amerikanisches Englisch wäre es en_US, für Norwegisch ist es nb_NO. Google es oder konsultiere diese Übersicht, um deinen Sprachcode zu finden. Wir nennen es en_US.po.
4 Klicken Sie im Menü auf Katalog > Eigenschaften…
5 Auf der ersten Registerkarte können Sie einige Informationen wie den Namen Ihres Projekts (Thema) eingeben oder die Sprache ändern – dies ist jedoch nicht erforderlich. Ich empfehle, den Zeichensatz in UTF-8 zu belassen, da wir dies für WordPress schreiben.
6 Klicken Sie auf die Registerkarte Quellenpfade. Hier müssen Sie festlegen, in welchen Ordnern die Datei nach übersetzbaren Texten suchen soll. Die Pfade sind relativ, und da wir es bereits in einem Unterordner unseres Designs gespeichert haben, wissen wir, dass es ein Verzeichnis höher gehen muss. Klicken Sie auf die Schaltfläche + unter dem Feld Pfade und wählen Sie Ordner hinzufügen. Wählen Sie Ihr Themenverzeichnis. Dies sollte ein Pfadelement „.” hinzufügen. (einen Ordner nach oben gehen). Vergewissern Sie sich, dass sich „Basispfad” auf Ihr Root-Theme-Verzeichnis bezieht.
7 Klicken Sie auf die nächste Registerkarte, „Quellen-Keywords”. Hier müssen Sie PoEdit mitteilen, welche Funktionen Sie für übersetzbare Texte verwendet haben (zB __, _e, esc_html_eund so weiter). Klicken Sie auf die Schaltfläche +, um jede Funktion hinzuzufügen, und schreiben Sie sie ohne „()”. Es liegt an Ihnen, ob Sie alle Ihre Grundlagen abdecken und alle gettext-Funktionen von WordPress hinzufügen möchten, aber in diesem Tutorial wissen wir, dass wir nur zwei verwendet haben. Also fügen wir zwei Elemente hinzu; __()und _e(). Fügen Sie die Funktionen ohne Klammern hinzu.
8 Klicken Sie auf OK.
9 Nun müssen Sie PoEdit nur noch anweisen, die bereitgestellten Pfade nach Funktionen zu scannen, die __()und verwenden _e()(oder was auch immer Sie angegeben haben). Sie tun dies, indem Sie auf die Schaltfläche „Update from code” klicken. (Die Windows-Version hat den Text auf der Schaltfläche, aber die iOS-Version nicht – also müssen Sie für iOS die Schaltfläche drücken, die normalerweise die letzte in der Symbolleiste ist; ein Dateisymbol mit einem „Wiederherstellen”-Symbol oben. Klicken Sie Klicken Sie auf die Schaltfläche „Von Code aktualisieren”, und Sie sollten alle Texte mit einer Schnittstelle zur Übersetzung aufgelistet sehen:
Nett!
Generierte Übersetzungsdateien
Jetzt können Sie PoEdit verwenden, um jeden String zu übersetzen, aber wir werden das hier nicht tun, da es keinen Sinn macht, Englisch in Englisch zu übersetzen. Denken Sie daran, auf Speichern zu klicken, um eine .moDatei zu aktualisieren und zu generieren, und jedes Mal, wenn Sie einen weiteren Text in Ihrem Design hinzufügen, müssen Sie erneut auf die Schaltfläche „Aus Code aktualisieren” klicken. Dann erscheinen die neuen Änderungen in Ihren Vorlagen.
Wenn Sie den /langUnterordner in Ihrem Themenverzeichnisordner überprüfen, sollten Sie zwei Dateien sehen; die .poDatei, die wir gerade erstellt haben, und eine .moDatei mit demselben Namen, die von uns generiert wurde und in PoEdit gespeichert wurde.
Sie können eine Kopie der en_US.poDatei erstellen und sie in einen anderen Sprachcode umbenennen. Denken Sie jedoch daran, dass PoEdit keine einfache Möglichkeit bietet, alle übersetzten Zeichenketten zu löschen; Sie müssten eine nach der anderen löschen. Dies ist der Grund, warum dies für Benutzer scheiße ist, die Ihr Thema in eine andere Sprache übersetzen möchten. Wenn Sie also die Möglichkeit haben, eine .potDatei zu erstellen, sollten Sie dies tun.
WordPress sucht nach Übersetzungsdateien in Abhängigkeit von der Sprache, die im Admin-Menü Einstellungen > Website-Sprache definiert ist. Wenn Sie eine andere Sprache als Englisch hinzugefügt haben, können Sie sie testen, indem Sie die Sprache der Website wechseln und sehen, ob Ihre Übersetzung angezeigt wird!