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

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

Amir
更新済み
5月 22, 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. 言語スイッチャーのオプションまで スクロールダウンし、Additional 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;
}