Wie man RTL-Sprachen in WordPress übersetzt: Arabisch, Hebräisch, Persisch
Sie haben gerade Ihr WordPress-Theme ins Arabische übersetzt. Sie laden die .mo-Datei hoch, ändern die Sprache der Website, und das Ergebnis ist unleserlich. Text läuft nach links über, Schaltflächen überlappen sich, und Ihr sorgfältig gestaltetes Layout sieht aus, als wäre es durch einen Aktenvernichter gelaufen.
Willkommen in der Welt der Rechts-nach-Links-Sprachen (RTL) -- wo die Übersetzung nur die halbe Miete ist.
Arabisch, Hebräisch und Persisch (Farsi) gehören zu den am weitesten verbreiteten Sprachen der Welt. Allein Arabisch hat über 400 Millionen Muttersprachler. Wenn Ihre WordPress-Seite diese Zielgruppen ignoriert, lassen Sie ernsthaft Geld liegen. Aber um sie zu bedienen, reicht es nicht aus, englische Wörter gegen arabische auszutauschen. Es erfordert ein Umdenken Ihrer gesamten Layoutrichtung.
Dieser Leitfaden behandelt alles, was Sie wissen müssen: wie RTL in WordPress funktioniert, wie Sie Ihr CSS reparieren, wie Sie .po-Dateien mit RTL-Strings handhaben und wie Sie die häufigsten Fallstricke vermeiden.
Wie RTL in WordPress Funktioniert
WordPress verfügt über eine integrierte RTL-Unterstützung. Wenn Sie Ihre Seitensprache auf Arabisch (ar), Hebräisch (he) oder Persisch (fa) einstellen, fügt WordPress automatisch dir="rtl" zum <html>-Tag hinzu und lädt ein rtl.css-Stylesheet, falls Ihr Theme eines bereitstellt.
Dies ist die Theorie. In der Praxis werden die meisten Themes mit minimaler oder fehlerhafter RTL-Unterstützung ausgeliefert.
Was sich Tatsächlich Ändert
Wenn der RTL-Modus aktiviert wird, spiegelt der Browser das gesamte Seitenlayout:
- Text fließt von rechts nach links.
- Sidebars tauschen die Seiten.
- Navigationsmenüs kehren die Reihenfolge um.
- Padding- und Margin-Werte werden umgekehrt (links wird rechts).
- Icons mit Richtungsbedeutung (Pfeile, Chevrons) müssen gespiegelt werden.
Wenn das CSS Ihres Themes nur für LTR geschrieben wurde, kämpft jede margin-left, padding-right, float: left und text-align: left-Deklaration nun gegen die RTL-Engine des Browsers.
Ihr CSS für RTL Reparieren: Eine Praktische Anleitung
Der sauberste Ansatz ist die Verwendung von CSS Logical Properties, die sich automatisch an die Schreibrichtung des Dokuments anpassen. Anstelle von left und right verwenden Sie inline-start und inline-end.
Vorher: Physische Eigenschaften (Funktioniert nicht in RTL)
/* LTR-only CSS -- breaks in Arabic */
.sidebar {
float: left;
margin-right: 20px;
}
.nav-arrow {
padding-left: 10px;
text-align: left;
}
.card {
border-left: 3px solid #0073aa;
}
Nachher: Logische Eigenschaften (Funktioniert in Beide Richtungen)
/* Direction-agnostic CSS -- works in both LTR and RTL */
.sidebar {
float: inline-start;
margin-inline-end: 20px;
}
.nav-arrow {
padding-inline-start: 10px;
text-align: start;
}
.card {
border-inline-start: 3px solid #0073aa;
}
Mit logischen Eigenschaften schreiben Sie Ihr CSS einmal, und es funktioniert sowohl in Englisch als auch in Arabisch korrekt, ohne jegliche Überschreibungen.
Die [dir="rtl"] Override-Methode
Wenn Sie Ihr gesamtes Stylesheet nicht umgestalten können, können Sie RTL gezielt mit Attributselektoren ansprechen:
[dir="rtl"] .sidebar {
float: right;
margin-left: 20px;
margin-right: 0;
}
[dir="rtl"] .nav-arrow {
padding-left: 0;
padding-right: 10px;
text-align: right;
}
Dies funktioniert, verdoppelt aber Ihren Wartungsaufwand. Jedes Mal, wenn Sie Ihre LTR-Stile aktualisieren, müssen Sie auch die RTL-Überschreibungen aktualisieren.
PO-Dateien mit RTL-Strings Übersetzen
Die Übersetzung selbst birgt Herausforderungen, die über das Layout hinausgehen. RTL-Sprachen haben einzigartige Eigenschaften, die die meisten automatisierten Tools aus dem Tritt bringen.
Bidirektionaler Text (Bidi) in PO-Dateien
Die eigentliche Komplexität zeigt sich, wenn sich RTL- und LTR-Text in einem einzigen String vermischen. Betrachten Sie dieses gängige WordPress-Muster:
msgid "Powered by %s"
msgstr "مدعوم بواسطة %s"
Der %s-Platzhalter wird durch einen englischen Produktnamen wie "WooCommerce" ersetzt. In der gerenderten Ausgabe muss der Browser arabischen Text von rechts nach links anzeigen, dann zu links nach rechts für das englische Wort wechseln und dann möglicherweise wieder zurück.
Dies wird als bidirektionaler Text (oder "Bidi") bezeichnet und wird durch den Unicode Bidirectional Algorithm behandelt. Meistens funktioniert es automatisch. Wenn Sie jedoch mehrere Platzhalter oder Zahlen neben RTL-Text haben, kann die visuelle Reihenfolge unvorhersehbar werden.
Häufige Übersetzungsfehler
Generische Übersetzungstools machen mehrere RTL-spezifische Fehler:
-
Umgekehrte Platzhalterreihenfolge. Ein String wie
%1$s out of %2$skönnte die Platzhalter vertauschen, weil die KI sie neu anordnet, um der arabischen Grammatik zu entsprechen. Dies führt zu einer falschen Ausgabe wie "10 out of Page" anstelle von "Page out of 10." Erfahren Sie mehr über den Schutz von Code-Variablen während der Übersetzung. -
Defekte HTML-Direktionalität. Wenn Ihr String Inline-HTML wie
<span dir="ltr">enthält, könnte ein naiver Übersetzer dasdir-Attribut entfernen oder es übersetzen. -
Fehlende Pluralformen. Arabisch hat sechs Pluralformen -- Null, Eins, Zwei, Wenige, Viele und Andere. Dies ist das komplexeste Pluralsystem aller von WordPress unterstützten Sprachen. Ein Tool, das nur zwei Formen generiert (wie Englisch Singular/Plural), wird Ihre arabische
.po-Datei beschädigen. Für einen tiefen Einblick in die Funktionsweise von Gettext-Pluralen lesen Sie unseren Leitfaden zur komplexen Pluralisierung in WordPress.
So sieht ein korrekt übersetzter arabischer Pluralstring in einer .po-Datei aus:
# Arabic: nplurals=6
msgid "%d comment"
msgid_plural "%d comments"
msgstr[0] "لا تعليقات"
msgstr[1] "تعليق واحد"
msgstr[2] "تعليقان"
msgstr[3] "%d تعليقات"
msgstr[4] "%d تعليقًا"
msgstr[5] "%d تعليق"
Wenn eine dieser sechs Formen leer oder falsch ist, greift WordPress für diese spezifische Anzahl auf den englischen String zurück. Ihre Benutzer sehen "5 comments" auf Englisch, verstreut in einer ansonsten vollständig arabischen Oberfläche.
Testen Ihrer RTL-Implementierung
Das Übersetzen und Reparieren von CSS reicht nicht aus. Sie müssen das Ergebnis in einem echten Browser überprüfen.
Eine Kurze Testcheckliste
- WordPress-Sprache umstellen auf Arabisch unter Einstellungen > Allgemein. Fügen Sie nicht einfach
dir="rtl"manuell hinzu -- verwenden Sie die tatsächliche Spracheinstellung, damit WordPress seine eigenen RTL-Überschreibungen lädt. - Navigationsmenüs prüfen. Sind sie gespiegelt? Öffnen sich Dropdowns in der richtigen Richtung?
- Formularfelder überprüfen. Eingabetext sollte von rechts nach links fließen. Platzhaltertext sollte rechtsbündig sein.
- Gemischt-direktionalen Inhalt überprüfen. Strings, die sowohl Arabisch als auch Englisch enthalten (wie Markennamen oder URLs), sollten in der richtigen visuellen Reihenfolge gerendert werden.
- Auf Mobilgeräten testen. RTL-Layoutfehler sind auf kleineren Bildschirmen oft gravierender, da weniger Platz für Ausrichtungsfehler vorhanden ist.
Wenn Ihre Übersetzungen überhaupt nicht angezeigt werden, ist das Problem möglicherweise nicht mit RTL verwandt -- überprüfen Sie zuerst Ihre .mo-Dateikompilierung und Dateipfade.
Browser-Entwicklerwerkzeuge Trick
In Chrome DevTools können Sie RTL auf jeder Seite vorübergehend erzwingen, ohne die WordPress-Einstellungen zu ändern:
/* Paste in DevTools console as: document.documentElement.dir = 'rtl' */
html {
direction: rtl;
}
Dies gibt Ihnen eine schnelle Vorschau, wie Ihr Theme mit RTL umgeht, bevor Sie überhaupt mit dem Übersetzen beginnen.
RTL-Übersetzung Richtig Automatisieren
Die manuelle Übersetzung von RTL-Sprachen ist teuer und langsam. Professionelle arabische Übersetzer verlangen Premiumpreise, und es ist schwierig, jemanden zu finden, der sowohl die Sprache als auch die WordPress-spezifische Gettext-Syntax versteht.
SimplePoTranslate löst dies mit einer Kontextsensitiven KI-Engine, die RTL-spezifische Herausforderungen nativ versteht:
- Alle sechs arabischen Pluralformen werden automatisch generiert. Unsere Engine liest den
Plural-Forms-Header in Ihrer.po-Datei und erzeugt genau die Anzahl von Formen, die Ihre Zielsprache benötigt. Keine leerenmsgstr-Slots, keine englischen Fallbacks. - Platzhaltersicherheit. Variablen wie
%s,%dund%1$swerden während der Übersetzung gesperrt. Die KI kann sie nicht neu anordnen, löschen oder beschädigen -- selbst wenn die arabische Grammatik eine andere Wortreihenfolge vorschlägt. Lesen Sie mehr darüber, wie Syntaxsperrung Ihren Code schützt. - Bidirektionaler Kontext. Die KI versteht, dass gemischt-direktionale Strings eine besondere Behandlung erfordern und behält HTML-Direktionalitätsattribute bei.
Ob Sie ein Blog-Theme für ein hebräisches Publikum lokalisieren oder einen vollständigen WooCommerce-Shop ins Persische übersetzen, der Prozess ist derselbe: Laden Sie Ihre .po-Datei hoch, wählen Sie Ihre Zielsprache aus und laden Sie die übersetzte Datei herunter. Der gesamte Workflow dauert Minuten, nicht Tage.
Für eine vollständige exemplarische Vorgehensweise des WordPress-Lokalisierungsprozesses lesen Sie unseren ultimativen Leitfaden zur WordPress-Lokalisierung.
Hören Sie auf, RTL als eine Nachzüglerlösung zu Behandeln
Rechts-nach-Links-Sprachen repräsentieren über eine Milliarde potenzielle Benutzer. Arabisch ist die fünfthäufigste Sprache der Welt. Hebräisch und Persisch bedienen kritische Märkte im Nahen Osten und in Zentralasien.
Wenn Ihre WordPress-Seite diese Benutzer nicht mit einer ausgefeilten, nativen Erfahrung bedienen kann, werden sie einen Konkurrenten finden, der dies kann.
Die gute Nachricht: WordPress verfügt bereits über die Infrastruktur. Ihr Theme benötigt lediglich das richtige CSS, und Ihre .po-Dateien benötigen ein Übersetzungstool, das die Komplexität von RTL-Sprachen respektiert.
Bereit, Ihre WordPress-Seite ins Arabische, Hebräische oder Persische zu übersetzen? Starten Sie kostenlos unter SimplePoTranslate.com