Skip Navigation
ホーム » ドキュメンテーション » スタートガイド » 言語設定 » カスタム言語スイッチャー

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

Amir
更新済み
3月 19, 2020

WPMLのicl_get_languages API 呼び出しを使用して、自分のカスタム言語スイッチャーを作成することができます。 このチュートリアルでは、icl_get_languages の完全詳細とこれにより作成するカスタム言語スイッチャーの例をご紹介します。

簡単な概要：

  1. icl_get_languages呼び出しを使用して、現在表示中のページの翻訳リストを得る
  2. 言語スイッチャーをレンダリングするには自分のPHP機能を書きます。
  3. テーマに自分の言語スイッチャーを配置します

（その他）の言語リストを取得

icl_get_languages()を使用すれば、いかなるページの翻訳リストも取得することができます。 WPML 3.2以降をご使用の場合、同様の機能を持つフックフィルター、 wpml_active_languagesの使用をおすすめします。

使用：

icl_get_languages('skip_missing=N&orderby=KEY&order=DIR&link_empty_to=str')

* N=0/1
* KEY=id/code/name/custom (name -> translated_name), (default: id)
* DIR=asc/desc (default: asc)
* link_empty_to = str （デフォルト：空、skip_missing=0とともに機能し、現在の要素に翻訳のない言語のカスタムリンクの使用を可能にします。{%lang} は言語コードのプレースホルダーとして使用できます。）

注：

  • skip_missing パラメータは翻訳のない言語の取り扱い方法を関数に指示します。
  • orderbyと order の組み合わせは、言語が常に同じ位置で表示されるドロップダウンの言語スイッチャーまたは言語スイッチャーの作成を可能にします。
  • custom 順序はWordPress管理のWPML » 言語 » 言語スイッチャーオプションで定義できます。

関数は言語別のエントリーを含む配列を戻します。 例えば、英語、フランス語、イタリア語を実行するWordPressサイトでは、以下が戻されます。

Array
(
 [en] => Array
 (
 [id] => 1
 [active] => 1
 [native_name] => English
 [missing] => 0
 [translated_name] => English
 [language_code] => en
 [country_flag_url] => http://yourdomain/wpmlpath/res/flags/en.png
 [url] => http://yourdomain/about
 )

 [fr] => Array
 (
 [id] => 4
 [active] => 0
 [native_name] => Français
 [missing] => 0
 [translated_name] => French
 [language_code] => fr
 [country_flag_url] => http://yourdomain/wpmlpath/res/flags/fr.png
 [url] => http://yourdomain/fr/a-propos
 )

 [it] => Array
 (
 [id] => 27
 [active] => 0
 [native_name] => Italiano
 [missing] => 0
 [translated_name] => Italian
 [language_code] => it
 [country_flag_url] => http://yourdomain/wpmlpath/res/flags/it.png
 [url] => http://yourdomain/it/circa
 )
)

各言語はそれ自体のパラメータの配列を持ち、テーマ関数はそれを使用して言語セレクターを作成します。

  • id: 内部の参照id
  • active: これは現在有効な言語です（1言語が有効です）
  • native_name: 言語のネィティブ名（決して翻訳しません）
  • translated_name: 現在有効な言語に翻訳される言語名
  • country_flag_url: 国旗のPNG画像へのURL
  • url: その言語での翻訳へのリンク
  • 紛失: 要素に翻訳がなければ１、あれば0。

紛失している翻訳の取扱い

ページには全ての言語に翻訳されないものもあります。 icl_get_languages に翻訳のない言語に 何を戻すか 指示できます。

‘skip_missing=1’の場合、これらの言語は出力に表示されません。 ‘skip_missing=0’の場合、全ての言語が表示され、翻訳のない言語はその言語のホームページに戻されます。

テーマ関数の使用方法

どのような言語スイッチャーも構築できます。 ここでは人気の高いスイッチャーを2つご紹介します。

ここで示されるPHP関数は functions.php ファイル（テーマフォルダーの中）に入れられ、プラグインには追加されません。

この投稿は以下の言語でも閲覧できます…

各投稿の下(または上）に他の言語でも読めることを示す文を入れるとします。 この関数は既存の翻訳された投稿のみを返し、翻訳がない場合、何も出力しません。

function icl_post_languages(){
 $languages = icl_get_languages('skip_missing=1');
 if(1 < count($languages)){
 echo __('This post is also available in: ');
 foreach($languages as $l){
 if(!$l['active']) $langs[] = '<a href="'.$l['url'].'">'.$l['translated_name'].'</a>';
 }
 echo join(', ', $langs);
 }
}

この関数は以下を実行します。

  1. 言語リストをWPML – $languages = icl_get_languages(‘skip_missing=1’); から取得します。
  2. この投稿に1つ以上の言語が存在するかを確認します – if(1 < count($languages))
  3. 出力を作成し、現在表示中の言語をスキップします – if(!$l[‘active’])

注：

  1. このメッセージはgettextを通されます。 これは他の言語の投稿にこのメッセージを付加し、正しい言語を表示するために非常に重要です: __(‘This post is also available in: ‘);
  2. 使用される言語名は翻訳された言語（ターゲット言語）名です。 これにより、全てのセンテンスが正しい言語で書かれていることを保証します：$l[‘translated_name’]

これがその結果です：

他の言語で利用できる投稿についてのメッセージ
他の言語で利用できる投稿についてのメッセージ

このメッセージを投稿に含むには、呼び出しを single.phpから icl_post_languages() に追加します。

フッター用の言語名リストと国旗

ページの一番上に言語セレクターがない場合でも、フッターに言語名リストと国旗を追加することをおすすめします。 多くの人々はページの一番下を見てサイトの内容を把握しようとするため、目立つ言語スイッチャーを配置すれば外国人の閲覧者を助けることができます。

function languages_list_footer(){
 $languages = icl_get_languages('skip_missing=0&orderby=code');
 if(!empty($languages)){
 echo '<div id="footer_language_list"><ul>';
 foreach($languages as $l){
 echo '<li>';
 if($l['country_flag_url']){
 if(!$l['active']) echo '<a href="'.$l['url'].'">';
 echo '<img src="'.$l['country_flag_url'].'" height="12" alt="'.$l['language_code'].'" width="18" />';
 if(!$l['active']) echo '</a>';
 }
 if(!$l['active']) echo '<a href="'.$l['url'].'">';
 echo icl_disp_language($l['native_name'], $l['translated_name']);
 if(!$l['active']) echo '</a>';
 echo '</li>';
 }
 echo '</ul></div>';
 }
}

この関数は以下を行います。

  1. 翻訳言語がなければ、DIVを作成し、順不同のリストを始めてください：if(!empty($languages)){ echo ‘<div id=”footer_language_list”><ul>’;
  2. 言語をリスト項目として追加します。
  3. 有効な言語でなければ、その言語のページをリンクできます：if(!$l[‘active’]) echo ‘<a href=”‘.$l[‘url’].'”>’;
  4. 言語の国旗を追加します：<img src=”‘.$l[‘country_flag_url’].'” alt=”‘.$l[‘language_code’].'” width=”18″ height=”12″ />
  5. 異なる場合、ネィティブ言語名と翻訳言語名を追加します：echo icl_disp_language($l[‘native_name’], $l[‘translated_name’]);

icl_disp_language() function がWPMLにより作成されます。 これは2つの因数 (native_language_name, translated_language_name) が異なるかどうかをチェックします。 異なる場合、両方を返し、さもなければ1回だけ返します。

この言語リストにスタイルをつけるためにCSSも追加します。 CSSはフッターの中心に言語リストを配置し、フォーマットを追加します。

#footer_language_list{
 margin-bottom: 25px;
 text-align: center;
}

#footer_language_list ul{
 list-style: none;
 margin:0;
 padding:0;
}

#footer_language_list ul li img{
 margin-right:5px;
}

#footer_language_list ul li{
 display:inline;
 margin:0 5px 0 5px;
 padding:0;
}

#footer_language_list ul li a, #footer_language_list ul li a:visited{
 color: #fff;
 text-decoration:underline;
}

#footer_language_list ul li a:hover, #footer_language_list ul li a:active{
 color: #fff;
}

これが言語スイッチャーです：

言語フッター
言語フッター

テーマに追加するには、呼び出しを以下に追加します。 languages_list_footerを footer.php ファイルに追加します。

* 注: この水平言語スイッチャーは垂直言語スイッチャーに簡単に変換できます。. CSSから display: inline ステートメントを取り除くだけです。

国旗のみの言語セレクター

現在のページの翻訳にリンクされる国旗を表示するシンプルな関数です。

Language selector with flags only 
function language_selector_flags(){
    $languages = icl_get_languages('skip_missing=0&orderby=code');
    if(!empty($languages)){
        foreach($languages as $l){
            if(!$l['active']) echo '<a class="wpml-ls-item" href="'.$l['url'].'">';
            echo '<img src="'.$l['country_flag_url'].'" height="12" alt="'.$l['language_code'].'" width="18" />';
            if(!$l['active']) echo '</a>';
        }
    }
}

この関数の出力は別々にスタイルを付けます。 例えば、関数をdivブロックに配置し、imgタグ用にカスタムスタイルを定義します。

<div id="flags_language_selector"><?php language_selector_flags(); ?></div >

CSS：

#flags_language_selector img{
 margin:1px;
 border:1px solid #333;
}
国旗の言語セレクター

無効な言語のみを表示する言語スイッチャー

この記事のコード例は以下の特性を持つ言語スイッチャーの作成に使用できます：

  • 水平表示
  • 特定メニューへの添付
  • 国旗とネィティブ名の使用
  • 無効言語のみの表示

このコードをテーマの functions.phpファイルに追加します。 さらに良いソリューションは、テーマの子テーマのfunctions.phpに追加することです。

このコードはデフォルトにより、theme_location == ‘primary’を持つデフォルトWordPressテーマ(Twenty Sixteen, Twenty Fifteenなど) と順調に機能します。

これは現在の言語が英語の時のTwenty Sixteen テーマの中の言語スイッチャーです。
現在の言語が英語の時のTwenty Sixteenテーマにおける結果です。

コードをテーマに対し機能させる

他のテーマは他のテーマロケーションを使用するかもしれません。 コードがテーマに対し機能しない場合、機能させるために以下のステップに従ってください。

  1. 行のコメントアウトを解除する 上述のコードを含む行の始めでダブルスラッシュ (//) を取り除きます。
  2. サイトのフロントエンドを閲覧します。 [theme_location] => my-theme-locationのようなテーマロケーションが見えます。
  3. 必要なメニューロケーション、例、 my-theme-locationを選択し、行を変更します：
if ( $languages && $args->theme_location == 'primary') {

から以下へ：

if ( $languages && $args->theme_location == 'my-theme-location') {

正しいロケーションが何かわからない場合、メニューロケーションを1つずつ試すことができます。

  1. 最初のステップで実行した変更を元に戻し、行を元のコード状態に戻します。

コード

// Filter wp_nav_menu() to add additional links and other output
// Show only other language in language switcher
// Use the new filter: https://wpml.org/wpml-hook/wpml_active_languages/ 
add_filter('wp_nav_menu_items', 'new_nav_menu_items', 10, 2);
function new_nav_menu_items($items, $args) {
 // uncomment this to find your theme's menu location
 //echo "args:<pre>"; print_r($args); echo "</pre>";

 // get languages
 $languages = apply_filters( 'wpml_active_languages', NULL, 'skip_missing=0' );

 // add $args->theme_location == 'primary-menu' in the conditional if we want to specify the menu location.

 if ( $languages && $args->theme_location == 'primary') {

 if(!empty($languages)){

 foreach($languages as $l){
 if(!$l['active']){
 // flag with native name
 $items = $items . '
<li class="menu-item"><a href="' . $l['url'] . '"><img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18" /> ' . $l['native_name'] . '</a></li>

';
 //only flag
 //$items = $items . '
<li class="menu-item menu-item-language"><a href="' . $l['url'] . '"><img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18" /></a></li>

';
 }
 }
 }
 }

 return $items;
}

国旗を取り替え、言語名を変更する

WPMLは言語情報を編集するGUIを含みます。 WPML->言語を開き、言語の編集をクリックします。 言語名を変更し、ロケール値を編集し、他の国旗を選びます。

'skip_missing=0&orderby=name'