WPML言語スイッチャーのカスタマイズ – 配置、スタイリング、動作

WPMLの言語スイッチャーでできること

追加の設定なしで、WPMLは以下の機能を持つスイッチャーを生成します。

• サイト上のすべてのアクティブな言語を、選択した順序で表示します。
• 各言語をネイティブ名（Deutsch、Français）または現在のサイト言語（German、French）のいずれかで表記します（選択可能）。
• オプションで国旗（テーマに合わせて拡大縮小するスプライト）を表示します。
• 翻訳が不足している場合も適切に処理します。言語をスキップするか、その言語のホームページにリンクします。
• 任意のWordPressメニュー、ウィジェットエリア、フッター、または投稿の上下にインラインで配置できます。
• 任意のページビルダーのレイアウトに対応するGutenbergブロックとして提供されます。
• 邪魔になる特定のページ（404、チェックアウト、アカウント）では非表示にできます。
• レンダリングされたHTMLをキャッシュし、ページの読み込みを高速化します。

ほとんどのサイトでは、組み込みの配置とデフォルト設定が使用されます。より詳細な制御が必要なテーマ開発者は、WPMLのAPIを使用してコード内でカスタムスイッチャーを構築できます。

設定の場所

WPML > 設定 > 言語スイッチャーを開きます。このページはUIのタブではなく、目的別にグループ化されています。変更したい内容に一致するセクションを選択してください。

表示される言語とその順序

言語スイッチャーのオプションカードには、すべてのアクティブな言語がリストされたドラッグアンドドロップエリアがあります。ここでの順序が、サイト上のすべてのスイッチャーでの順序を決定します。言語を上下にドラッグして保存します。

同じカードで、以下を選択します。

• ネイティブ名と現在の言語のラベル。Deutsch（ネイティブ名）またはGerman（現在の言語）を表示します。ネイティブ名はその言語の話者にとって親しみやすく、現在の言語は初めての訪問者にとってわかりやすくなります。
• 国旗のオン/オフ、および国旗のフォーマット。

翻訳が不足している場合の動作

すべてのページがすべての言語に翻訳されているとは限りません。現在のページの翻訳がない言語に対してスイッチャーがどのように動作するかは、翻訳のない言語の処理方法オプションで決定します。

• 言語をスキップする（デフォルト）。このページでは、その言語がスイッチャーから消えます。最もすっきりとしたUXであり、訪問者は実際に読める言語のみを目にします。
• 翻訳が不足している場合は言語のホームにリンクする。スイッチャーの項目には、代わりにその言語のホームページが表示されます。すべての言語に常にどのページからでもアクセスできるようにしたい場合に便利ですが、訪問者が予期しないコンテンツにたどり着く可能性があります。

この選択はUXに影響を与えるため、慎重に検討する価値があります。

スイッチャーの表示場所

5つの配置場所があり、同じ設定ページでそれぞれ個別に切り替えることができます。

• メニュー言語スイッチャー。任意のWordPressメニュー（ヘッダー、フッター、サイドバーなど、テーマがメニューを割り当てる場所）にスイッチャーを配置します。メニューごとに異なる配置にしたい場合は、複数追加できます。各メニューのスイッチャーには、配置場所を示す独自のプレビュー行が表示されます。
• ウィジェット言語スイッチャー。サイドバー、ヘッダーゾーン、フッターカラムなど、テーマが登録している任意のウィジェットエリアにスイッチャーを追加します。
• フッター言語スイッチャー。すべてのページの下部にスイッチャーを自動的にレンダリングする、単一のグローバルな切り替えスイッチです。
• 投稿の翻訳へのインラインリンク。各投稿の上下に「この投稿はXで利用できます」というリンクを表示する単一のチェックボックスです。
• カスタムスイッチャー。組み込みの配置では不十分な場合、テーマ開発者は任意のテンプレートファイルからWPMLのスイッチャーAPIを呼び出すことができます。設定ページには、レンダリングオプション用の「カスタマイズ」ボタンが表示されます。

特定のページでのスイッチャーの非表示

404ページ、アカウント画面、チェックアウトなど、一部のページにはスイッチャーは必要ありません。WPMLの条件付き表示ルールを使用すると、テーマのdisplay:noneCSSに頼ることなく、ページごとにスイッチャーを非表示にできます。

ページごとのルールは、同じ「設定 > 言語スイッチャー」ページで設定します。スイッチャーを非表示にしたいページを選択すると、そのルールはすべてのスイッチャーの配置に一度に適用されます。

URLパラメータの保持

訪問者がスイッチャーをクリックすると、WPMLは翻訳先言語のURLを再構築します。デフォルトでは、クエリ文字列パラメータ（?utm_source=newsletter、フィルターパラメータなど）は破棄されます。これにより、分析キャンペーンやフィルタリングされたリストが機能しなくなります。

URL引数を保持するフィールドには、切り替え時に保持したいクエリキーをリストします。ここに入力したもの（1行に1つ）は、翻訳されたURLに移動する訪問者とともに引き継がれます。

スイッチャー用のカスタムCSS

追加のCSSの下にある単一のテキストエリアを使用すると、サイト上のすべてのスイッチャーに一度にスタイリングを適用できます。テーマファイルに触れることなく、スイッチャーをテーマに合わせるのに便利です。

スイッチャーテンプレートのキャッシュ

パフォーマンスカードには、言語スイッチャーのテンプレートをキャッシュするという単一のチェックボックスがあります。これをオンにすると、WPMLはすべてのスイッチャーの配置のレンダリングされたHTMLをキャッシュし、アクセスの多いサイトでのページの読み込みを高速化します。

注意点：スイッチャーのオプションを変更してもフロントエンドに変更が反映されない場合は、まずキャッシュを確認してください。キャッシュをオフにしてリロードすると、変更が表示されます。その後、本番環境用にキャッシュを再度オンにします。

テーマコード内のカスタムスイッチャー

組み込みの配置が適さないサイト（ページヘッダー内の特定の位置にあるスイッチャー、テーマによってレンダリングされるカスタムドロップダウン、WordPressメニューやウィジェットエリア以外の場所など）のために、WPMLはテーマ開発者がカスタムスイッチャーを構築できるAPIを提供しています。

カスタム言語スイッチャーカードには、「有効化」トグルと「カスタマイズ」ボタンがあります。有効にすると、テーマのテンプレートコードはWPMLのドキュメント化されたPHP APIを使用して、任意の場所にスイッチャーをレンダリングできます。