Skip Navigation
更新済み
1月 8, 2024

WPMLで多言語サイトを開発中、カスタム言語スイッチャーが必要になるかもしれません。 これを簡単なPHPとCSSでどのように行うか学びましょう。

WPMLでは、カスタマイズオプションや組み込みフラッグを備えたサイトエディタ(旧称:Full Site Editing)を使って、メニュー、ウィジェット、フッター、サイトに言語スイッチャーを追加することができる。 しかし、あなたのサイトにはもっと特別なものが必要かもしれない。

このチュートリアルでは、浮遊言語スイッチャーの追加方法を説明します。 浮遊言語スイッチャーは外見が素晴らしいだけではなく、顧客があなたのサイトを彼らの言語で閲覧することを簡単にします。

フローティング言語スイッチャーを使ったサイト

これら3つのステップに従ってください:

  1. 言語スイッチャーをレンダリングするPHPコードを追加する。
  2. CSSで言語スイッチャーをスタイルする
  3. 言語スイッチャーの設定を更新する

PHPパート

最初のステップは、言語スイッチャーをレンダリングするPHPコードをページに追加することだ。 そのために、言語スイッチャーを入れたdivコンテナを追加する関数を作る。 を使うことができる。 wpml_add_language_selectorアクションで言語スイッチャーをレンダリングする。

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

完成したPHPコードは次のように見えます。

Language switcher 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: fixedCSS属性を使って行うことができる。

次のステップを使用して、CSSコードを追加しましょう:

  1. WPML → Languagesに進む。
  2. 言語スイッチャーのオプションまで スクロールダウンし、「追加のCSS 」セクションを展開する。

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

下の例では、丸みをおびた境界線やボックスの影などの追加のカスタマイゼーションを加えています。 もちろん、好きなようにカスタマイズできます。

Language Switcher Styling
/*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);
}

設定パート

最後に、言語スイッチャーが国旗のみを表示するように設定を調整します。

次のステップを使用します:

  1. WPML → Languagesに進む。
  2. カスタム言語スイッチャーまでスクロールダウンし、Enableをクリックする。
  3. カスタムボタンをクリックする。
  4. 言語スイッチャーに何を含めるかについては、Flagを選択し、他のオプションのチェックを外す。
  5. 保存をクリックする。
Language switcher options
フローティング言語スイッチャーで国旗だけを表示する

それだけです! ウェブサイトに素敵な言語スイッチャーが作成されました。

Horizontal language switcher
フロントエンドの言語スイッチャー

ボーナス:縦型の浮遊言語スイッチャー

下のスクリーンショットのように、縦型の言語スイッチャーを作成することもできます。

Vertical language switcher
垂直言語スイッチャー

これに関しては、以前のCSSを以下のコードで取り替えてください。

Vertical Language Switcher 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;
}