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

WPMLで多言語サイトを開発する際、カスタム言語スイッチャーが必要になる場合があります。簡単なPHPとCSSで実現する方法をご紹介します。

WPMLを使用すると、メニュー、ウィジェット、フッター、およびサイトエディター（旧称：フルサイト編集）を使用するサイトに言語スイッチャーを追加でき、カスタマイズオプションや組み込みの国旗も利用できます。しかし、サイトによってはもっと特別なものが必要になることもあります。

このチュートリアルでは、フローティング言語スイッチャーを追加する方法を説明します。フローティング言語スイッチャーは見た目が良く、顧客が自分の言語でサイトを閲覧しやすくなります。

主な手順は次の3つです。

言語スイッチャーをレンダリングするPHPコードの追加
CSSを使用した言語スイッチャーのスタイル設定
言語スイッチャー設定の更新

PHPの部分

最初のステップは、ページ上に言語スイッチャーをレンダリングするためのPHPコードを追加することです。そのために、言語スイッチャーを内部に含むdivコンテナを追加する関数を作成します。言語スイッチャーをレンダリングするには、 wpml_add_language_selectorアクションを使用できます。

この例では、新しい言語スイッチャーをフッターに表示したいため、WordPress独自のwp_footerフックで新しい関数を使用します。

完全なPHPコードは次のようになります。

言語スイッチャーのPHP

//WPML - Add a floating language switcher to the footer
 add_action('wp_footer', 'wpml_floating_language_switcher'); 
 
 function wpml_floating_language_switcher() { 
    echo '<div class="wpml-floating-language-switcher">';
        //PHP action to display the language switcher (see https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#using-php-actions)
        do_action('wpml_add_language_selector');
    echo '</div>'; 
}

これをコピーして、（子）テーマのfunctions.phpファイルに追加できます。

スタイル設定の部分

先ほどのコードを追加した時点で、サイトのフッターには新しい言語スイッチャーがすでに追加されています。次に、サイトの右下にフローティング表示されるようにカスタマイズします。これはposition: fixedというCSS属性で実現できます。

次の手順に従ってCSSコードを追加します。

WPML → 設定 → 言語スイッチャーに移動します。
「言語スイッチャーのオプション」カードで、「追加のCSS」を展開します。

または、外観 → カスタマイズに移動し、「追加のCSS」をクリックしてこのCSSコードを追加することもできます。

次の例では、角丸やボックスシャドウなどの追加のカスタマイズを加えています。もちろん、必要に応じてカスタマイズできます。

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

/*Removing some default CSS from our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
 
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
 
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
 
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 6px; /*rounded border*/
  /*Box Shadow*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}

設定の部分

最後に、言語スイッチャーに国旗のみが表示されるようにいくつかの設定を調整する必要があります。

次の手順に従います。

WPML → 設定 → 言語スイッチャー → カスタム言語スイッチャーに移動します。
「カスタム言語スイッチャー」までスクロールダウンし、「有効化」をクリックします。
「カスタマイズ」ボタンをクリックします。
「言語スイッチャーに含める内容」で、「国旗」のチェックを入れたままにし、「ネイティブの言語名」、「現在の言語での言語名」、および「現在の言語」のチェックを外します。
「保存」をクリックします。

これで完了です。サイトに見栄えの良いカスタム言語スイッチャーが表示されているはずです。

おまけ：垂直方向のフローティング言語スイッチャー

以下のスクリーンショットのように、代わりに垂直方向の言語スイッチャーを作成することもできます。

この場合、前のCSSを次のコードに置き換えるだけです。

垂直方向の言語スイッチャーのCSS

/*Removing some default CSS our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
 
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
 
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
 
.wpml-floating-language-switcher .wpml-ls-item {
  display: block;
}
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 20px;
  right: 0px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 6px 0 0 6px; /*rounded border*/
  /*Box Shadow*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  z-index: 999;
}