locale switcherの構築

Webflowは、サイトのロケール間を効率的に移動できるように、custom locale switcherを設計することができます。

ローカライズされたサイトを公開したら、サイト訪問者がニーズに合った適切なロケールまたは言語を選択できる方法を構築する必要があります。

Locales list elementを使用すると、locale switcherを構築できます。

Locales list elementはCollection list elementと同様に機能し、公開が有効になっているすべてのロケールを表示します。

‍

デザインは自由にカスタマイズできますが、今回はナビゲーションバーにドロップダウンでlocale switcherを構築する方法について紹介します。

‍

始める前に

Localization overviewでローカライズについての概要をご確認ください。

locale switcherを構築するときは、primary localeを編集していることをご確認ください 。

サイトにナビゲーションバーを追加し、ドロップダウン要素をナビゲーションバーにドラッグします。

‍

locale switcherの構築

1. ナビゲーターパネルを開く
2. ドロップダウン要素の横にある矢印をクリックすると、その子要素が表示されます
3. Add panel>Advancedに移動
4. Locales listをナビゲーションバーにドラッグします
5. ドロップダウン要素をLocales wrapper要素内にドラッグします
6. ドロップダウンリスト要素内のLocales listをドラッグします
7. ドロップダウンリンク要素を削除します
8. ドロップダウントグル要素内のテキストブロック要素を選択します
9. Element settings panel>Text block settingsに移動します
10. 紫色の「ドット」アイコン をクリックします
11. ロケール名を選択
12. ドロップダウン要素と子要素を好きなようにスタイル設定します

locale switcherに画像を追加して、各ロケールの表示画像 (アイコンやフラグなど) をその名前とともに表示することもできます。

1. Add panel>Mediaに移動
2. ドロップダウントグル要素内に画像要素をドラッグします
3. Element settings panel>Image settingsに移動します
4. 紫色の「ドット」アイコンをクリックします
5. Locale画像を選択
6. 画像をスタイリング

これで、locale switcherのドロップダウンには、Settings panel>Localizationで Enable publishing to this subdirectory がオンになっているすべてのlocaleが表示され、ドロップダウンのテキストと画像は現在のlocale (例: 「英語 (米国)」) に一致します。

公開が有効になっている場合、localeは公開済みのlocale listとlocale switcherに自動的に追加されます。

‍公開localeの詳細については、こちらをご覧ください。

‍