Wix マルチリンガル:マルチステートボックスを使用して左横書き(LTR)から右横書き(RTL)に切り替える
12分
警告:
検索エンジンのボットは、ボックス内のコンテンツを読み取ることができないため、マルチステートボックスを追加すると、サイトの SEO に悪影響が生じます。
英語などの言語は左から右(LTR)に記述しますが、ヘブライ語などの言語は右から左(RTL)に記述します。多言語サイトがこれら両方の言語に対応している場合は、選択した言語に基づいて異なるコンテンツを表示するマルチステートボックスを追加することができます。これにより、言語ごとに異なる「ステート(状態))」を作成して、個別にデザインをカスタマイズすることができます。(英語)

ステップ 1 | サイトのメイン言語のバージョンにマルチステートボックスを追加する
最初のステップで、メイン言語で白紙のマルチステートボックスをサイトに追加します。テキスト、画像、ボタン、必要なパーツを追加して、その言語に合わせてデザインします。
Wix エディタ
Wix Studio エディタ
始める前に:

サイトに Wix マルチリンガルを追加し、コーディングを有効にしていることを確認してください。(英語)

- エディタに移動します。
- エディタ左側で「パーツを追加」
をクリックします。
- 「ボックス」をクリックします。
- 「マルチステートボックス」をクリックします。
- 空白のマルチステートボックスをページ上の場所にドラッグします。

- ボックスのデフォルトの ID を分かりやすい名前に変更します:
- エディタ左側の「ページコード」
をクリックします。
- 「ホーム」をクリックします。
- ページコードタブで「プロパティ・イベント」アイコン
をクリックします。
- マルチステートボックスを選択します。
- ID 横の項目に、分かりやすいボックス名を入力します。
- エディタ左側の「ページコード」

- ボックスにパーツを追加して、自由にデザインすることができます。
ステップ 2 | 現在のステート名を変更する
メイン言語でボックスの準備ができたら、「ステートの管理」パネルを開き、現在のステート名を変更します。追加するコードが正しく機能するよう、引用符なしで正しく「LTR」と入力してください。
Wix エディタ
Wix Studio エディタ
- マルチステートボックスを選択します。
- 「ステートの管理」をクリックします。
- 現在のステート名横の「その他のアクション」アイコン
をクリックします。
- 「ID を編集」を選択します。
- テキストボックスに「LTR」と入力し、「完了」をクリックします。
注意:メイン言語が右横書き言語(RTL)の場合は、ステートに「RTL」と名前を付けてください。 - その他のステート横の「その他のアクション」アイコン
をクリックし、「削除」を選択してそれらを削除します。

ステップ 3 | ステートを複製して名前を変更する
「ステートの管理」パネルで「LTR」のステートを作成したら、それを複製し、名前を「RTL」に変更します。前のステップと同様、コードが正常に動作するよう、引用符なしで正しく「RTL」と入力してください。
Wix エディタ
Wix Studio エディタ
- マルチステートボックスを選択します。
- 「ステートの管理」をクリックします。
- 現在のステート名横の「その他のアクション」アイコン
をクリックします。
- 「複製」を選択します。
- 複製したステート横の「その他のアクション」アイコン
をクリックします。
- 「ID を編集」を選択します。
- テキストボックスに「RTL」と入力し、「完了」をクリックします。
注意:第二言語が左横書き言語(LTR)の場合は、ステート名を「LTR」に変更してください。

ステップ 4 | 第二言語のボックスを調整する
これで、マルチステートボックスの設定が完了し、翻訳の準備が整いました。RTL 言語に切り替え、ステートを RTL に変更して、コンテンツのローカライズを開始します。要素の配置は、元のステートの配置に影響を与えることなく変更することができます。次に、コードスニペットをページのコードにコピーします。
Wix エディタ
Wix Studio エディタ
- エディタ上部の「言語を切り替える」ドロップダウンメニューをクリックします。

- 編集したい RTL 言語を選択します。
- 「マルチステートボックス」ドロップダウンをクリックし、該当するボックスのステートを選択します。

- ボックスで翻訳したいパーツを選択します:
- テキスト:「翻訳を編集する」または「機械翻訳する」をクリックし、テキストを翻訳します。次に、「テキスト設定」パネルで「テキストの方向を変更」アイコン
をクリックし、テキストの方向を切り替えます。
- 画像:「翻訳を編集する」をクリックし、「変更」をクリックして、サイトの RTL 言語バージョン用に別の画像を選択します。
- テキスト:「翻訳を編集する」または「機械翻訳する」をクリックし、テキストを翻訳します。次に、「テキスト設定」パネルで「テキストの方向を変更」アイコン

- プロパティ・イベントパネルで以下のコードを追加します:
- エディタ左側の「ページコード」
をクリックします。
- 「ホーム」をクリックします。
- ページコードタブで「プロパティ・イベント」アイコン
をクリックします。
- マルチステートボックスを選択します。
- 以下のコードスニペットをコピーし、コードパネルの上部に貼り付けます。
- エディタ左側の「ページコード」
1import wixWindow from 'wix-window';
2const rtlLangs = ['he', 'ar', 'fa'];
- onReady 関数に以下のコードを追加します:
重要:
- プレースホルダ ID は、以前に作成した ID に置き換えてください。
- onReady 関数は、ユーザーの利便性を高めるために記述するものです。すでにこの関数がある場合は、{ } 内のコードのみを追加してください。
1$w.onReady(function () {
2 let lang = wixWindow.multilingual.currentLanguage;
3
4 if (rtlLangs.includes(lang)) {
5 $w('#myBoxID').changeState('RTL');
6 }
7 else {
8 $w('#myBoxID').changeState('LTR');
9 }
10});

- 「プレビュー」をクリックし、マルチステートボックスの動作をテストします。
- 変更内容を公開する準備ができたら、サイトを公開します。
追加の右横書き(RTL)機能をご希望ですか??
Wix マルチリンガルを使用すると、右横書きコンテンツで多言語サイトを作成することができます。現在、メニュー、テキスト、画像など、サイトの一部を言語ごとに RTL になるようカスタマイズすることが可能です(例:ヘブライ語やアラビア語など)。
Wix マルチリンガルで、その他にどのような右横書き(RTL)機能をご希望ですか?カスタマーケアまで、ご意見・ご要望をお寄せください。