ナビゲーションをスキップする
ホーム » WPML ドキュメンテーション » 入門ガイド » 言語セットアップ » WordPressサイトに言語スイッチャーを追加する方法

WordPressサイトに言語スイッチャーを追加する方法

Amir
更新済み
5月 21, 2024

WPMLを使えば、ウェブサイトのメニューやウィジェット、フッターに言語スイッチャーを追加できる。 また、フラッグを含めたり、言語をネイティブネームで表示したり、カスタムスタイルを追加することもできる。

言語スイッチャーにより、訪問者はあなたのコンテンツを読みたい言語を選択することができる。 好みに応じて、ウェブサイトのさまざまな場所に表示することができる。

例えば、言語スイッチャーをメニューとしてヘッダー部分に配置することができる。

Language switcher in the header section
ヘッダー部分の言語スイッチャー

また、ヘッダーのデザインを編集したくない場合は、フッターセクションの下部に言語スイッチャーを設置することもできる。

Language switcher in the footer section
フッターセクションの言語スイッチャー

WPMLを使えば、上記で特集したような言語スイッチャーを自分のサイトに簡単に追加することができる。 そのためだ：

  1. 言語スイッチャーを表示する場所を決める
  2. 言語スイッチャーに国旗を追加する（しないこともできる）
  3. 言語スイッチャーをスタイリッシュにする

ウェブサイトの翻訳を忘れずに

言語スイッチャーを追加しても、ウェブサイトが自動的に多くの言語で利用できるようになるわけではない。 サイトに追加言語を提供するには、まず翻訳する必要がある。
WPMLを使ってウェブサイトを簡単に翻訳する方法を学ぼう。

1.言語スイッチャーを表示する場所を決める

WPMLはデフォルトでサイトのフッターに言語スイッチャーを追加する。 しかし、言語スイッチャーを追加できるサイトは他にもたくさんある：

  • メニューとウィジェット
  • 投稿コンテンツの上または下
  • テンプレート、テンプレートパート、サイトナビゲーション

PHPを使ったテンプレートファイルやショートコードを使ったページや投稿に言語スイッチャーを追加する必要がある？ カスタム・ロケーションに言語スイッチャーを追加する方法の詳細を読む。

メニュー、フッター、ウィジェットに言語スイッチャーを追加する

これらの特定の領域に言語スイッチャーを追加してカスタマイズするには、WordPressダッシュボードのWPML →Languagesに移動する。

ここから、メニューやウィジェットに新しい言語スイッチャーを追加したり、フッターのデフォルト言語スイッチャーを編集することができる。

言語スイッチャーを追加または編集する

投稿コンテンツの上下に言語スイッチャーを追加する

また、投稿コンテンツの上や下から、投稿やページの翻訳にリンクすることもできる。 これは、他の利用可能な翻訳をリンクとして表示する。

これを有効にするには、WPML→Languagesと進み、Links to translation of postsまでスクロールダウンする。 チェックボックスをチェックすると、すべてのオプションが表示される。

投稿の翻訳へのリンクを可能にする

テンプレート、テンプレートパート、ナビゲーションに言語スイッチャーブロックを追加する

WordPressのサイトエディター（以前はFull Site Editingとして知られていた）を使用している場合、WPML言語スイッチャーブロックを使用して、任意のテンプレートまたはテンプレートパートに言語スイッチャーを追加することができる。

サイトテンプレートに言語スイッチャーブロックを追加する

言語スイッチャー・ブロックを二次言語で外観するためには、翻訳する必要がある。

  1. WPML→翻訳管理に進む。
  2. 言語スイッチャーブロックを追加したサイトの部分（テンプレート、テンプレートパート、サイトナビゲーションなど）を検索する。
  3. 翻訳を依頼する。
言語スイッチャーブロックを含むテンプレートパートを翻訳する
  1. Advanced Translation Editorを使って翻訳した場合は、言語スイッチャーのフィールドを第二言語にコピーし、Completeをクリックする。
デフォルト言語から言語スイッチャーフィールドをコピーする

言語スイッチャーが第二言語で表示されるようになる。

2.言語スイッチャーに国旗を追加する（しないこともできる）

言語スイッチャー・ブロックに国旗を追加または削除するには、サイドバーの言語スイッチャー表示設定の切り替えを使用する。

言語スイッチャー・ブロックにフラグを追加する

別の場所にある国旗を追加または削除するには、WPML→Languagesに行き、変更したい言語スイッチャーを編集する。 次に、フラグオプションをチェックするかしないかを選択する。

フッターの言語スイッチャーにフラグを追加する

WPMLには、設定済みの各言語に少なくとも1つの国旗が含まれている。 デフォルトでは、フラグはSVG形式を使用する。 ただし、WPML →Languagesで設定を変更すれば、代わりにPNGを使って国旗を表示できる。

%%tb-image-alt-text%%
で国旗ファイル形式を選択する WPML → 言語

カスタムフラッグをアップロードすることもできる。 言語スイッチャーにカスタムフラッグを追加する方法の詳細はこちら。

3.言語スイッチャーをスタイリングする

国旗を表示するかしないかだけでなく、言語スイッチャーの他の面もカスタマイズできる。 これには、言語の並び順の設定、ネイティブネームでの言語表示、色の設定などが含まれる。

フロントエンドのメニュー言語スイッチャー

グローバル設定

言語の順序など、サイト上のすべての言語スイッチャーに対してグローバルな設定を行うことができる。 これを行うには、WPML→Languagesと進み、言語スイッチャーオプションまでスクロールする。 これらのオプションは、あなたのサイトのすべての言語スイッチャーに 適用される。

メイン言語スイッチャーのオプションセクション

言語スイッチャーごとの設定

また、言語スイッチャーごとに設定を指定することもできる。 これによって、何を含み、どのように見えるかについて、完全かつ独立したコントロールが可能になる。 各ロケーションの言語スイッチャーに適用するオプションは、その言語スイッチャーにのみ適用される。

例えば、メニューには国旗だけを表示し、フッターには国旗と言語名を表示することができる。

言語スイッチャー・ブロックでこれらの設定を変更するには、ブロックを選択し、サイドバーで設定を調整する。

言語スイッチャーのブロック設定

その他の言語スイッチャーについては、WPML→Languagesに進み、調整したい特定の言語スイッチャーを編集する。

フッター言語スイッチャーの設定

言語スイッチャーの設定を変更すると、プレビューが更新される。 プレビューは “概略図 “である。 フロントエンドのCSSを読み込まないので、実際の言語スイッチャーは異なるスタイルになる。 しかし、さまざまなオプション、カラー設定、順番、コンテンツの効果を示してくれる。

カスタム言語スイッチャー

デフォルトでは、WPMLはあなたのウェブサイトのデザインとスタイルに言語スイッチャーを適合させるために、テーマのCSSルールを使用する。 さらにカスタマイズが必要な場合は、PHP APIを使ってカスタム言語スイッチャーを作成することができる。 このアプローチにはPHPの知識が必要だ。

カスタムフローティング言語スイッチャー

言語スイッチャーのトラブルシューティング

WPMLを使用して追加された言語スイッチャーは、ほとんどのテーマでうまく見える。 言語スイッチャーがあなたのテーマで正しく表示されない場合、CSSの衝突が考えられる。 言語スイッチャー向けのスタイリングの問題を修正するガイドを読む。

WPMLをまだお持ちでない？

WPMLはあなたのウェブサイトに言語スイッチャーを簡単にアドオンし、カスタマイズすることができる。 まずは料金ページで、あなたのサイトにぴったりのプランを見つけよう。

WPMLを使った多言語ウェブサイトの構築について詳しくは、WPMLを使ったウェブサイトの翻訳方法をご覧いただきたい。