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

Originally written: 2月 18, 2013

更新済み: 2月 18, 2013

WPMLにはドロップダウン言語リストを見せる独自の言語スイッチャーが搭載されています。非常に柔軟性のあるツールですが、これだけでは足りません。

自分の言語スイッチャーを作り、テーマに挿入することができます。以下に投稿文に利用できる言語のリストとフッター用の言語リストを追加する方法を説明します。

(その他の)言語リストを得る方法

icl_get_languages() を使い、いかなるページにも翻訳リストを表示できます。使用方法：

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

* N=0/1
* KEY=id/code/name (名前 -> translated_name), (デフォルト: id)
* DIR=asc/desc (デフォルト: asc)
* link_empty_to = str (デフォルト: 空白。 skip_missing=0 とともに使用すると、現在の要素に翻訳がない言語のカスタムリンクが使用できるようになります。 {$lang} は言語コードのプレースホルダ―として使用できます)

注:

skip_missing パラメーターは翻訳がない言語の取り扱い方法を機能に指示します。
orderby and order　の組み合わせは言語を常に同じ場所に表示するドロップダウン言語スイッチャーまたは言語スイッチャーの作成を可能にします。

この機能は一言語における入力の配列をリターンします。例えば、WordPressサイトが英語、フランス語、イタリア語で表示されていると、このようにリターンされます。

Array
(
 [0] => 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
  )

 [1] => 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
  )

 [2] => 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:現在有効な言語です。（一言語が有効です）
native_name: 母国語です。(翻訳されない言語）
translated_name: 現在有効な言語に翻訳された言語名
country_flag_url: 国旗のPNGイメージへのURL
url: 言語の翻訳へのリンク
missing: 要素の翻訳がない場合、1、存在する場合、 0。

翻訳が無い場合の対応方法

ページによっては全ての言語に翻訳されないものもあります。あなたは icl_get_languages に翻訳がない言語に何をリターンするか指示できます。

‘skip_missing=1’　の場合、これらの言語はアウトプットに表示されません。 ‘skip_missing=0’　の場合、全ての言語が表示され、翻訳がない言語がその言語のホームページにリンクバックされます。

テーマ関数に使用する方法

言語スイッチャーは好きなように作成できます。以下は人気がある二つの使用方法です。

ここで示される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);
  }
}

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

WPMLから言語リストを取ってくる – $languages = icl_get_languages(‘skip_missing=1’);
投稿文に一つ以上の言語があることをチェックする – if(1 < count($languages))
現在表示されている言語をスキップしてアウトプットを作成する – if(!$l[‘active’])

注:

このメッセージは gettextを通過します。これは他の言語の投稿文に追加するメッセージが、正しい言語で表示されるために非常に重要です： __(‘この投稿文は次の言語でも読めます：’);
使用言語名は翻訳言語名です。これにより全てのセンテンスが正しい言語で書かれることを保証します: $l[‘translated_name’]

結果は以下のとおりです。

掲載文のメッセージは他言語でも読めます。 — 投稿文のメッセージは他言語でも読めます。

このメッセージを投稿文に含むには、 single.php　からcl_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>';
    }
}

この機能は以下を行います。

翻訳された言語があれば、DIVを作成し、順序不同のリストを開始します： if(!empty($languages)){ echo ‘<div id=”footer_language_list”><ul>’;
各言語を通過し、リスト項目として追加します。
それが有効な言語でなければ、その言語のページへ行くリンクが付加されます: if(!$l[‘active’]) echo ‘<a href=”‘.$l[‘url’].'”>’;
言語の国旗を追加する： <img src=”‘.$l[‘country_flag_url’].'” alt=”‘.$l[‘language_code’].'” width=”18″ height=”12″ />
母国語と翻訳言語があれば、両方の言語名を追加します： echo icl_disp_language($l[‘native_name’], $l[‘translated_name’]);

The icl_disp_language() 関数はWPMLにより作成されます。この関数は (native_language_name, translated_language_name) という二つの引数が相違するかどうか調べます。相違すれば両方リターンします。さもなければ一回だけリターンします。

また幾つか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;
}

以下が言語スイッチャーです。

あなたのテーマに追加するためにはfooter.php ファイルにlanguages_list_footer 呼び出しを追加してください。

*注: この水平の言語スイッチャーは容易に垂直の言語スイッチャーに変更できます。CSSから表示：インライン　命令文を取り除くだけです。

国旗だけの言語セレクター

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

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 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;
}

国旗言語セレクター

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

WPML は言語情報の編集にGUI を含みます。WPML->Languagesを開き、Edit languagesをクリックします。言語名を変更し、ロケール値を編集し、他の国旗を選ぶことができます。

'skip_missing=0&orderby=name'