WPML

Right-to-Left-Sprachen (RTL) stellen eine besondere Herausforderung dar. Zum Glück trägt WordPress viel dazu bei, diesen Aufwand zu verringern. Wir zeigen Ihnen, wie Sie basierend auf dem Standard-Theme TwentyTen eine perfekt funktionierende RTL-Website erstellen.

Wenn Sie eine mehrsprachige RTL-/LTR-Website erstellen, müssen Sie zwei Dinge beachten:

  • Bearbeitung / Übersetzung
  • Anzeige

Der erste Teil, das Erstellen oder Übersetzen Ihrer Website, bedeutet, dass Sie im WordPress-Admin-Bereich in der richtigen Sprache und in der richtigen Schreibrichtung arbeiten. Wenn Sie zwischen LTR- und RTL-Sprachen übersetzen, denken Sie daran, dass Sie Inhalte mit gemischter Schreibrichtung auf demselben Bildschirm sehen müssen.

Bei der Anzeige der Website muss Ihr Theme die richtige Anzeigerichtung für RTL- und LTR-Sprachen unterstützen.

Dieses Tutorial orientiert sich an unserer mehrsprachigen Twenty Ten-Demo-Website, die auf Englisch, Spanisch und Hebräisch (RTL) verfügbar ist.

Vorbereitung – Herunterladen der .mo-Dateien für Core und Theme


WordPress selbst und das Standard-Theme sind vollständig in viele Sprachen lokalisiert. Wir benötigen die neueste Version der Lokalisierung, daher habe ich mich entschieden, diese aus den lokalisierten WordPress-Builds zu beziehen. Sie können sie hier herunterladen:
Nachdem Sie WordPress heruntergeladen und entpackt haben, gehen Sie zu wordpress/wp-content/languages. Kopieren Sie den gesamten Inhalt in Ihr languages-Verzeichnis. Gehen Sie für das Theme genauso vor. Die Übersetzungsdateien befinden sich in wp-content/themes/twentyten (oder im aktuellen Standard-Theme, falls Sie diesen Beitrag später lesen).

Sie sollten auch WPML so konfigurieren, dass es das Theme und die Plugins übersetzen kann.

Übersetzen


Das Übersetzungsmanagement-Modul von WPML ermöglicht es, Aufträge zur Übersetzung zu senden und mit verschiedenen Konten zu übersetzen. Es ermöglicht Ihnen auch, mit dem Übersetzungs-Editor von WPML zu übersetzen. Wenn Inhalte mit gemischter Schreibrichtung beteiligt sind, ist dies besonders wichtig, da der Übersetzungs-Editor die Richtung für jedes Feld automatisch anpasst.

Wenn dies neu für Sie ist, lesen Sie zuerst über das Übersetzungsmanagement-Modul.

So sieht es aus, wenn ich den Beitrag Hello World ins Hebräische übersetze.

Right-to-Left-Bearbeitung

Sie können sehen, dass die englischen Texte linksbündig ausgerichtet sind, während Hebräisch rechtsbündig ist. Ich kann sogar den HTML-Modus verwenden, um Elemente aus dem Englischen zu kopieren und einzufügen. Der HTML-Modus wird in LTR angezeigt, damit Sie Tags korrekt eingeben können.

Wenn Sie Strings übersetzen, zeigt WPML diese ebenfalls in der richtigen Richtung an. So sieht der Bildschirm der String-Übersetzung aus, wenn ich den Titel des Search-Widgets übersetze.

RTL-String-Übersetzung

Die Module Übersetzungs-Editor und String-Übersetzung ermöglichen es uns, die Website vollständig zu übersetzen. Als Nächstes sehen wir uns an, wie wir sie ordnungsgemäß in der richtigen Richtung anzeigen.

Anzeigen der Website in RTL und LTR


Nachdem Ihre Inhalte nun übersetzt sind, ist es an der Zeit, unsere Aufmerksamkeit dem Theme zu widmen.

Diese kleine Zeile sorgt für die eigentliche Magie:

<html dir="rtl" lang="he-IL">

Sie können dies sehen, wenn Sie den Quelltext einer beliebigen hebräischen Seite betrachten. Zum Beispiel die Startseite.

Das Attribut dir="rtl" teilt der Website mit, dass die Anzeigerichtung für die gesamte Website Right-to-Left ist. Browser verstehen dies und spiegeln alles in die richtige Richtung.

Diese einzige PHP-Zeile aus der header.php macht dies möglich:

<html <?php language_attributes(); ?>>

Der Aufruf von language_attributes fügt die Attribute dir und lang ein. Die Werte stammen aus der .mo-Datei des Cores. Wenn Sie die korrekten .mo-Dateien für WordPress haben, erhalten Sie die richtigen Werte für diese Attribute.

Wenn HTML und CSS Ihres Themes „sicheren“ Praktiken folgen, ist dies wirklich alles, was Sie benötigen. Mit „sicher“ meine ich keine absoluten Positionierungen oder Breiten. Wenn Sie absolute Werte verwenden müssen, sollten Sie in Erwägung ziehen, unterschiedliches CSS pro Sprache zu laden.

Sie können dies ganz einfach mit bedingten Anweisungen tun, die die Konstante ICL_LANGUAGE_CODE überprüfen (beschrieben in der WPML-Coding-API).

Die Ergebnisse


Hier sehen Sie, wie unsere Demo-Website auf Englisch, Spanisch und Hebräisch aussieht.

Englisch

Spanisch

Hebräisch

Es ist nicht so schwer, wie es scheint. Probieren Sie es aus und lassen Sie uns wissen, wie es Ihnen ergeht.

Fanden Sie das nützlich? Teilen Sie diesen Artikel: