WPML
チュートリアル

右から左（RTL）へ記述するWordPressサイトの作成

Amir1分

共有：

右から左へ記述する言語（RTL言語）は特有の課題をもたらします。幸いなことに、WordPressはこの負担を大幅に軽減してくれます。デフォルトのTwentyTenテーマをベースに、完全に機能するRTLサイトを作成する方法を説明します。

多言語のRTL/LTRサイトを作成する際、2つの問題に対処する必要があります。

  • 編集 / 翻訳
  • 表示

最初の部分であるサイトの作成や翻訳では、WordPress管理画面で適切な言語と適切な方向で作業することを意味します。LTR言語とRTL言語の間で翻訳を行う場合、同じ画面で方向が混在したコンテンツを表示する必要があることに注意してください。

サイトを表示する際、テーマはRTL言語とLTR言語の正しい表示方向を処理する必要があります。

このチュートリアルでは、英語、スペイン語、ヘブライ語（RTL）で利用できるTwenty Tenの多言語デモサイトに沿って説明します。

準備 – コアとテーマの.moファイルの取得


WordPress自体とデフォルトテーマは、多くの言語に完全にローカライズされています。最新バージョンのローカライズが必要なため、ローカライズされたWordPressビルドから取得することにしました。これらは以下から取得できます。
WordPressをダウンロードして展開したら、wordpress/wp-content/languagesに移動します。内容をすべてlanguagesディレクトリにコピーします。テーマについても同じ操作を行います。翻訳ファイルはwp-content/themes/twentyten（この記事を後から読んでいる場合は、現在のデフォルトテーマ）にあります。

また、テーマとプラグインを翻訳できるようにWPMLを設定する必要があります。

翻訳


WPMLの翻訳管理モジュールを使用すると、翻訳ジョブを送信したり、異なるアカウントを使用して翻訳したりできます。また、WPMLの翻訳エディタを使用して翻訳することもできます。翻訳エディタは各フィールドの方向を自動的に調整するため、方向が混在したコンテンツを扱う場合にこれは特に重要です。

これを初めて使用する場合は、まず翻訳管理モジュールについてお読みください。

Hello Worldの投稿をヘブライ語に翻訳すると、次のようになります。

右から左への編集

英語のテキストが左揃えになっているのに対し、ヘブライ語は右揃えになっていることがわかります。HTMLモードを使用して、英語から項目をコピーして貼り付けることもできます。HTMLモードはLTRで表示されるため、タグを正しく入力できます。

文字列を翻訳する際にも、WPMLは正しい方向で表示します。Searchウィジェットのタイトルを翻訳する際の文字列翻訳画面は次のようになります。

RTLの文字列翻訳

翻訳エディタと文字列翻訳モジュールを使用することで、サイトを完全に翻訳できます。次に、適切な方向で正しく表示する方法を説明します。

RTLとLTRでのサイトの表示


コンテンツの翻訳が完了したので、テーマに注目しましょう。

この短い1行がほとんどの魔法をかけます。 

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

ヘブライ語のページのソースを表示すると確認できます。たとえば、ホームページなどです。

dir="rtl"属性は、サイト全体の表示方向が右から左であることをサイトに伝えます。ブラウザはこれを理解し、すべてを右方向へと反転させます。

header.phpのこのPHPの1行がそれを実現します。 

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

language_attributesの呼び出しにより、dir属性とlang属性が挿入されます。その値はコアの.moファイルから取得されます。WordPressの正しい.moファイルがあれば、これらの属性に正しい値が設定されます。

テーマのHTMLとCSSが「安全な」手法に従っていれば、本当にこれだけで十分です。安全な手法とは、絶対配置や絶対幅を使用しないことを意味します。どうしても絶対値を使用しなければならない場合は、言語ごとに異なるCSSを読み込むことを検討してください。

これは、ICL_LANGUAGE_CODE定数（WPMLコーディングAPIで説明）を調べる条件文を使用して簡単に実行できます。

結果


英語、スペイン語、ヘブライ語でのデモサイトの表示は以下のようになります。

英語

スペイン語

ヘブライ語
見た目ほど難しくはありません。ぜひ試してみて、結果をお知らせください。

この記事が役に立ちましたか？この記事を共有：

おすすめの記事