言語スイッチャーは、閲覧者にコンテンツを表示する言語を選択させることができます。 WPMLを使用することで様々な方法で言語スイッチャーを追加できます:ウィジェットとしてメニュー内に、またはサイトフッターに配置できます。 投稿の上または下にリンクを表示し、他の言語を提供できます。

WPMLを使用して追加された言語スイッチャーは、いかなるテーマにも適合し、外見を向上します。

サイト言語スイッチャーは WPML -> 言語ページにより追加され、カスタマイズが可能です。

グローバル言語スイッチャーオプション

言語スイッチャーに関する最初のセクションは、言語の順序のようなグローバル設定です。 これらのオプションはあなたが追加する 全ての言語スイッチャーに適用されることにご注意ください。

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

URL引数を保存する設定

言語スイッチャーオプションのセクションはURL引数オプションの保存機能を含んでいます。

URL引数はプラグインにより必要とされることがあるため、言語を切り替えるとき、保存することをおすすめします―それがこの機能の目的です。 保存したい引数はここにコンマ区切りのリストとして追加します。

“URL引数保存ダイアログボックス

この機能を使用する以下の例をみてみましょう:

  • 以下の引数を追加したとしましょう:bar, foo
  • 「ハローワールド」という投稿を翻訳します。
  • フロントエンドで「ハローワールド」投稿を開き、これをURL:?bar=10&foo=100&lost=1000 の末端に追加するとします(2つの引数と lost を追加したことにご注意ください)。
  • 言語の切り替え – URLは?bar=10&foo=100 のみで終了します

多様な種類の言語スイッチャー用の別個のセクション

それぞれの種類の言語スイッチャーは別個のセクションを持っています。 言語スイッチャーに選択されたオプションは、 それぞれのスイッチャーに適用されます。 下の画像に見られる通り、言語ページはサイトに有効な多様な言語スイッチャーのプレビューを表示 します。

各タイプの言語スイッチャー用の別個のセクション
各タイプの言語スイッチャー用の別個のセクション

各セクションに「追加」ボタン(同じ種類の他の言語スイッチャーを追加)、既存のスイッチャーを編集する「ペンシル」アイコンと「ゴミ箱」アイコンがあります。

各言語スイッチャーに対する完全コントロール

各言語スイッチャータイプは、それ自体の設定を有しています。 これにより、スイッチャーに含まれるものや外見に完全かつ独立したコントロールを得られます。

例えば、下の画像は言語スイッチャー設定に関するダイアログボックスを表示します。

言語スイッチャーメニューの設定
言語スイッチャーメニューの設定

言語スイッチャーオプションを表示するライブプレビュー

言語スイッチャーの設定を変更すると、プレビューが更新されます。 プレビューは「図式」です。 フロンドエンドCSSを読み込まない(WordPress管理を読み込むことはお勧めできません)ため、 実際の言語スイッチャーのスタイルは少々異なります。 しかし、様々なオプションの効果、カラー設定、順序、コンテンツは表示されます。

言語スイッチャーメニューのHTML構造

3.6バージョン以降、WPML は言語スイッチャーをそのHTMLとともにレンダリングしません。 代わりに、メニュー構造に「言語スイッチャー」要素を入れます。 このため、テーマは他のメニューアイテムと同様に言語スイッチャーをレンダリングします。

基本的にこれにより言語スイッチャーはテーマのCSSルールを採用し、サイトの外見が改善されます。

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

メニュー言語スイッチャーのカスタマイゼーション

WPML3.6バージョンは、メニュー言語スイッチャー用に新しいCSSクラス、 wpml-ls-menu-itemを追加しました。 これによりメニュー言語スイッチャーアイテム(リンク)のカスタマイゼーションがシンプルになります。

例えば、サイトがTwenty Sixteenテーマを使用し、メニュースイッチャーが言語の国旗だけを表示する場合、フロントエンドレンダリングがおかしくなります。 下の画像のように、メニューアイテムの幅が奇妙に大きくなります。

Twenty Sixteenテーマの国旗のみの言語スイッチャー
Twenty Sixteenテーマの国旗のみの言語スイッチャー

これは wpml-ls-menu-item CSSクラスを使用することで簡単に修正できます。

li.wpml-ls-menu-item ul li a {
width: auto;
}

テーマのCSSファイルを編集する必要はありません。言語スイッチャーオプションでカスタムルールに追加のCSSセクションを追加するだけです。

下の画像の通り、リストアイテムの幅が改善されました。

カスタムCSS適用後のメニュー言語スイッチャー
カスタムCSS適用後のメニュー言語スイッチャー

カスタム位置にWPMLの言語スイッチャーを表示する

時折、特定のカスタム位置に言語スイッチャーを追加する必要性が生じます。 この場合、言語スイッチャーはテーマのPHPテンプレートの中、またはページと投稿内に直接表示できます。

言語スイッチャーカスタム位置のグローバル設定は、サイトの他のスイッチャーと同様に同じ場所、言語ページ言語スイッチャーオプション部分で設定されています。

PHP アクションを使用する

テーマのPHPテンプレートファイルの中に言語スイッチャーを表示するには、以下の2つのアクションを使用します。

  • do_action('wpml_add_language_selector'); カスタム言語スイッチャーセクション内で設定されるオプションに基づいて言語スイッチャーを出力する。
  • do_action( 'wpml_footer_language_selector'); フッターに言語スイッチャーオプションを表示するオプションが無効の場合でも、フッター言語スイッチャーで設定されるオプションに基づいて、言語スイッチャーを出力する。

WPMLショートコードを使用する

投稿とページ内で、下の2つのWPMLのショートコードのうち1つを使用できます。 この2つは表示する言語スイッチャーが異なります。

  • [wpml_language_selector_widget]カスタム言語スイッチャーセクション内で設定されるオプションに基づいて言語スイッチャーを出力します。
  • [wpml_language_selector_footer] – はフッターに言語スイッチャーオプションを表示するオプションが無効の場合でも、フッター言語スイッチャーで設定されるオプションに基づいて、言語スイッチャーを出力します。

自分のカスタム言語スイッチャー

必要な場合、独自の言語スイッチャーを作成することもできます。 カスタム言語スイッチャーには、自分が好きなオプションを全て含むことができます。 自分の言語の国旗を表示したり、特定の順序で言語を表示する人もいます。

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

2通りの方法でこれを実行できます:TwigテンプレートまたはPHP APIを使用する。

3.6バージョン以降、WPMLは、Twigテンプレートによるカスタム言語スイッチャーの作成をサポートします。 これは人気の高いシンプルな方法で、PHPプログラミングを必要としません。 Twigテンプレートの良い点は、テーマに簡単に含み、 ユーザーにオプションとして表示されることです。

もう1つの方法は、PHP APIを使用してカスタム言語スイッチャーを作成することです。 この方法にはPHPの知識が必要です。