RTL steht für „right to left“ (von rechts nach links). Nur wenige Sprachen auf der Welt verwenden die RTL-Textrichtung, aber diese Sprachen umfassen über eine Milliarde Menschen. Das Hinzufügen von RTL-Support für Ihr Theme ist einfach und kann dessen Markt erheblich vergrößern.
Hier sind zwei Seiten, eine in RTL- und eine in LTR-Richtung (normal):
| Englisch – LTR | Hebräisch – RTL |
|---|---|
 |
 |
Sie können sehen, wie alles auf der RTL-Seite horizontal „gespiegelt“ erscheint. Es ist, als würde man die „normale“ LTR-Seite durch einen Spiegel betrachten. Dieses Spiegelbild zu erstellen, ist eigentlich ganz einfach. Die Richtung „dir“ im CSS übernimmt die meiste Arbeit und Sie müssen nur an wenigen Stellen Anpassungen vornehmen.
Laden einer anderen CSS-Datei für RTL-Sprachen
WordPress weiß, welche Sprachen einen RTL-Textfluss haben, und macht es Ihnen leicht, deren Layout anzupassen. Erstellen Sie eine neue Datei rtl.css und legen Sie sie im Stammverzeichnis Ihres Themes ab.
WordPress lädt die Datei rtl.css, nachdem es die normale styles.css geladen hat. Daher muss die RTL-CSS-Datei nur Attribute überschreiben, die geändert werden müssen. Das bedeutet, dass die Datei rtl.css für die meisten Themes in der Regel ziemlich klein ist.
Einstellen der Seitenrichtung auf RTL
Das Attribut „direction“ im CSS teilt dem Browser die Richtung der Seite mit. Für RTL-Sprachen sollten Sie es auf „rtl“ setzen. Es gibt noch ein weiteres „magisches“ Attribut, das Sie für eine korrekte RTL-Anzeige setzen sollten. Es heißt „unicode-bidi“. Dieses „magische“ Attribut ist ziemlich einfach zu verstehen, wenn Sie es gewohnt sind, in RTL zu schreiben. Es steuert die Art und Weise, wie Zeichen innerhalb der Zeile angezeigt werden.
Für eine korrekte RTL-Anzeige fügen Sie dem Selektor .body Folgendes hinzu:
{
direction:rtl;
unicode-bidi:embed;
}
Und schon sind Sie fertig! Ihr Theme wird nun in RTL angezeigt. Fast. Diese beiden Anweisungen sorgen dafür, dass der größte Teil der Seite korrekt aussieht. Jetzt müssen Sie noch Ausnahmen behandeln.
Spiegeln von Textrichtung, Floats und Clears
Jede Stelle im CSS, an der Sie die Textrichtung festlegen und Elemente floaten lassen, erfordert manuelle Aufmerksamkeit.
Suchen Sie alle Selektoren für text-align, float und clear. Wenn einer davon eine Richtung angibt, wechseln Sie zwischen „right“ und „left“. Denken Sie an das Spiegelbild, das wir erreichen wollen, dann wird das Verständnis dieser Transformation einfacher.
Grafiken, die eine Richtung implizieren
Eine weitere Sache, auf die Sie achten sollten, sind Grafiken mit einer „Richtungsbedeutung“. Wenn Sie beispielsweise eine Slideshow erstellen, haben Sie möglicherweise Pfeile für das nächste und das vorherige Element. Denken Sie daran, dass Ihre Website in RTL-Sprachen wie durch einen Spiegel betrachtet erscheint, also sollten Sie auch die Richtungsgrafiken spiegeln. Wenn Sie in LTR einen nach rechts zeigenden Pfeil für „weiter“ verwenden, sollten Sie in RTL einen nach links zeigenden Pfeil für „weiter“ bereitstellen.
Auswahl benutzerdefinierter Schriftarten
RTL-Sprachen haben nicht die gleichen Schriftarten wie LTR-Sprachen. Wenn Sie ausgefallene Schriftarten verwenden und das Layout Ihres Themes darauf angewiesen ist, sollten Sie Ersatzschriftarten für diese Sprachen finden. Wenn Sie eine Schriftart wählen, die in einer RTL-Sprache nicht existiert, greift der Browser auf das zurück, was er kennt. Es ist besser, wenn Sie alternative, vorhandene Schriftarten angeben, die Ihnen gefallen.
Wenn Sie Standard-Webschriftarten verwenden, ist alles in Ordnung.
So testen Sie Ihr Theme in RTL
Wenn Sie Ihre RTL-CSS-Datei entwickeln, ist es eine gute Idee, immer zu testen, was Sie tun.
- Ändern Sie die Sprache in der Datei wp-config.php in diese Sprache. Wenn Sie WPML verwenden, fügen Sie Ihrer Website einfach eine RTL-Sprache hinzu.
Hinzufügen von RTL-Sprachen - Übersetzen Sie die fest codierten Texte Ihres Themes (zumindest die im Frontend) in diese Sprache. WPML ermöglicht Ihnen dies mit dem Modul String-Übersetzung.
Übersetzen der Texte des Themes - Besorgen Sie sich Beispielinhalte in dieser Sprache. Für eine einfache Bearbeitung in RTL im WordPress-Admin-Bereich gehen Sie zu Ihrem Profil, scrollen Sie zur Einstellung der Admin-Sprache und stellen Sie die Sprache auf dieselbe wie die Bearbeitungssprache ein.
Bearbeiten von Inhalten im RTL-Modus
Sie kennen keine RTL-Sprachen? Verwenden Sie einfach Google Übersetzer. Die Übersetzung wird größtenteils unsinnig sein, aber für CSS-Entwicklungszwecke ist das in Ordnung.
Gehen Sie nun die verschiedenen Arten von Inhalten auf Ihrer Website durch. Stellen Sie sicher, dass Sie Beiträge, Seiten, die Startseite und alle von Ihnen erstellten benutzerdefinierten Inhalte einbeziehen.
Für optimale Ergebnisse suchen Sie sich jemanden, der diese Sprache spricht, und lassen Sie ihn einen Plausibilitätscheck für Sie durchführen. Ihr RTL-sprachiger Freund wird die restlichen 5 % der Probleme finden, die Sie übersehen. Das ist ein „Nice-to-have“, also stellen Sie Ihre RTL-Bemühungen nicht ein, wenn Sie niemanden kennen, der beim Testen helfen kann. Sobald Sie die RTL-fähige Version Ihres Themes veröffentlichen, werden Sie viel Feedback von Ihren Kunden erhalten. Wenn Sie 95 % der Arbeit erledigen, werden sie gerne Korrekturen für die restlichen 5 % beisteuern.
Bonusmaterial – Ihr Theme-Admin-Bereich in RTL-Sprachen
Die Grundvoraussetzung für ein RTL-kompatibles Theme ist, dass das Frontend (öffentliche Inhalte) in RTL-Sprachen korrekt angezeigt wird. Dies ist die absolute Basis, ohne die niemand Ihr Theme verwenden kann, um Websites in RTL-Sprachen zu erstellen.
Darüber hinaus möchten viele Benutzer den WordPress-Admin-Bereich in ihrer Sprache haben. Das bedeutet auch, dass die Admin-Bildschirme Ihres Themes in RTL-Ausrichtung angezeigt werden.
Der einfache Weg, diese RTL-Kompatibilität für die Admin-Bildschirme Ihres Themes zu erreichen, ist die Verwendung der Standard-WordPress-CSS-Klassen für GUI-Elemente. Zwar bedeutet dies, dass Sie keine ausgefallenen CSS-Effekte verwenden können, um Ihre GUI aufzupeppen. Es bedeutet aber auch, dass sich Ihre GUI perfekt in den WordPress-Admin-Bereich einfügt und in LTR / RTL korrekt angezeigt wird.
Wenn Sie Ihr benutzerdefiniertes CSS für Admin-Bildschirme verwenden müssen, überprüfen Sie, wie es in einer RTL-Sprache aussieht. Die gleichen Regeln, die Sie für das Frontend-CSS befolgen, gelten auch für das Backend. Spiegeln Sie Aligns, Floats und Clears; vermeiden Sie absolute Positionierung und achten Sie auf Bilder.
Eine großartige Referenz – das Standard-WordPress-Theme
Zur Information: Die Standard-WordPress-Themes sind alle perfekt an RTL-Sprachen angepasst. Öffnen Sie das Standard-Theme und suchen Sie nach der Datei rtl.css. Sie werden sehen, welche Änderungen am CSS für das Standard-Theme vorgenommen wurden. Normalerweise sind diese Änderungen ziemlich klein und leicht nachzuvollziehen.