RTLは「右から左（Right to Left）」を意味します。世界中でRTLのテキスト方向を使用する言語はわずかですが、これらの言語の利用者は10億人を超えます。テーマにRTLサポートを追加するのは簡単で、市場を大きく広げることができます。
以下は、RTLとLTR（標準）の方向で表示された2つのページの例です。
| 英語 – LTR | ヘブライ語 – RTL |
|---|---|
 |
 |
RTLページでは、すべてが水平方向に「反転」して表示されていることがわかります。「通常の」LTRページを鏡で見ているような状態です。この鏡像を作成するのは実は非常に簡単です。CSSの「dir」方向がほとんどの作業を行い、いくつか修正するだけで済みます。
RTL言語用の異なるCSSファイルの読み込み
WordPressはどの言語がRTLのフローを持つかを認識しており、そのレイアウトを簡単にカスタマイズできるようにしています。新しいrtl.cssファイルを作成し、テーマのルートディレクトリに配置します。
WordPressは通常のstyles.cssを読み込んだ後にrtl.cssファイルを読み込むため、RTLのCSSファイルは変更が必要な属性を上書きするだけで済みます。つまり、ほとんどのテーマにおいて、rtl.cssファイルは通常非常に小さくなります。
ページの方向をRTLに設定
CSSの「direction」属性は、ブラウザにページの方向を指示します。RTL言語の場合、これを「rtl」に設定します。適切なRTL表示のために設定すべき、もう1つの「魔法の」属性があります。それは「unicode-bidi」と呼ばれます。RTLでの記述に慣れていれば、この「魔法の」属性を理解するのは非常に簡単です。これは、行内での文字の表示方法を制御します。
適切なRTL表示を行うには、.bodyセレクタに以下を追加します。
{
direction:rtl;
unicode-bidi:embed;
}
これで完了です！テーマがRTLで表示されるようになりました。ほぼ完成です。この2つのステートメントにより、ページの大部分が正しく表示されます。次に、例外を処理する必要があります。
テキストの方向、float、clearの反転
CSS内でテキストの方向を設定したり、要素をfloatさせたりしているすべての箇所で、手動での調整が必要です。
text-align、float、clearのすべてのセレクタを見つけます。これらで方向が指定されている場合は、「right」と「left」を反転させます。実現しようとしている鏡像を思い浮かべると、この変換を理解しやすくなります。
方向を意味するグラフィック
もう1つ注意すべき点は、「方向」の意味を持つグラフィックです。たとえば、スライドショーを作成している場合、次や前の項目への矢印があるかもしれません。RTL言語ではサイトが鏡越しに表示されることを思い出し、方向を示すグラフィックも反転させる必要があります。LTRで「次へ」に右向きの矢印を使用している場合、RTLでは「次へ」に左向きの矢印を用意する必要があります。
カスタムフォントの選択
RTL言語にはLTR言語と同じフォントがありません。装飾的なフォントを使用しており、テーマのレイアウトがそれに依存している場合は、これらの言語用の代替フォントを見つける必要があります。RTL言語に存在しないフォントを選択した場合、ブラウザは認識できるフォントに戻してしまいます。好みの代替フォントを指定しておくことをお勧めします。
標準のウェブフォントを使用している場合は問題ありません。
RTLでテーマをテストする方法
RTLのCSSファイルを開発する際は、常に行っている作業をテストすることをお勧めします。
- wp-config.phpファイルの言語をその言語に変更します。WPMLを使用している場合は、サイトにRTL言語を追加するだけです。
RTL言語の追加 - テーマにハードコードされたテキスト（少なくともフロントエンドのもの）をその言語に翻訳します。WPMLでは、文字列翻訳モジュールを使用してこれを行うことができます。
テーマのテキストの翻訳 - その言語のサンプルコンテンツを用意します。WordPress管理画面でRTLの編集を簡単に行うには、プロフィールに移動し、管理画面の言語設定までスクロールして、編集言語と同じ言語を設定します。
RTLモードでのコンテンツの編集
RTL言語がわからない場合は、Google 翻訳を使用してください。翻訳はほとんど意味をなさないかもしれませんが、CSSの開発目的であれば問題ありません。
次に、サイト内のさまざまなタイプのコンテンツを確認します。投稿、ページ、ホームページ、および作成したカスタムコンテンツを必ず含めてください。
最良の結果を得るには、その言語を話す人を見つけて、動作確認を依頼してください。RTL言語を話す友人は、あなたが見逃してしまう残りの5%の問題を見つけてくれるでしょう。これは「あれば良い」という程度のことなので、テストを手伝ってくれる人がいなくても、RTLへの取り組みを止める必要はありません。RTL対応版のテーマをリリースすればすぐに、クライアントから多くのフィードバックが得られます。あなたが95%の労力を費やせば、残りの5%の修正には彼らが喜んで協力してくれるでしょう。
おまけ – RTL言語でのテーマ管理画面
RTL互換テーマの基本的な要件は、フロントエンド（公開コンテンツ）がRTL言語で正しく表示されることです。これは真の基本であり、これがなければ、誰もあなたのテーマを使用してRTL言語でサイトを構築することはできません。
これに加えて、多くのユーザーはWordPress管理画面を自分の言語で表示したいと考えます。これは、テーマの管理画面もRTLの向きで表示されることを意味します。
テーマの管理画面でこのRTL互換性を実現する簡単な方法は、GUI要素に標準のWordPress CSSクラスを使用することです。確かに、これはGUIを華やかにするための装飾的なCSSエフェクトを使用できないことを意味します。しかし、GUIがWordPress管理画面に完全に溶け込み、LTRおよびRTLの両方で正しく表示されることも意味します。
管理画面にカスタムCSSを使用する必要がある場合は、RTL言語でどのように表示されるかを確認してください。フロントエンドのCSSに従うのと同じルールが、バックエンドにも適用されます。align、float、clearを反転させ、絶対配置を避け、画像に注意してください。
優れた参考資料 – デフォルトのWordPressテーマ
参考までに、デフォルトのWordPressテーマはすべてRTL言語に完全に対応しています。デフォルトのテーマを開き、rtl.cssファイルを探してください。デフォルトのテーマのCSSにどのような変更が加えられているかがわかります。通常、これらの変更は非常に小さく、理解しやすいものです。