Skip Navigation
ホーム » ドキュメンテーション » Getting Started Guide » 言語設定 » 言語スイッチャーオプション » カスタム言語スイッチャー

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

Amir
更新済み
8月 12, 2021

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

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

浮遊言語スイッチャーを使用するサイト

これら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 → 言語を開きます。
  2. 言語スイッチャーオプションまでスクロールして、 Additional CSSセクションを展開します。

またはAppearance → Customizeを開き、 Additional 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 → 言語を開きます。
  2. カスタム言語スイッチャー までスクロールして、Enable（有効）をクリックします。
  3. カスタマイズボタンをクリックします。
  4. 言語スイッチャーに含むものには、国旗を選択し、他のオプションを外します。
  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;
}