WordPress多言語化プラグインqTranslateの紹介

2013.9.7WordBench神戸 上村崇 @uemera

最近のオレ@uemera

uemura

フリーランスのシステムエンジニアです。西宮在住。

上村 崇

PHPフレームワーク(FuelPHP)

サーバーインフラ(Webサーバ構築など)

WordPress(プログラミングサイドの仕事)

JavaScript、jQuery

勉強会準備(WordBench等)

ネットショップ支援(CS-Cartアドオン作成、カスタマイズ)

qTranslateとは

・多言語化のためのプラグイン。　日本語のほかに英語のページを作りたいときに便利。 もちろん他の言語も可能。・フリー・動作が重い？

1つの投稿に2つの言語のタイトルを入力する欄

日本語と英語の記事入力欄をタブで切り替える

qTranslateのいいところ・1つの投稿ページで、同時に複数の言語の記事が書けるので、　管理が楽。

日本語の記事を書いたあとに、別途英語用の投稿ページを　新規作成するという手間が省けます。

・すべてのページに、 必ず日英両記事が必要なサイトを作る　場合に向いています。　例えば部分的に日本語だけのページしか必要ない場合は あまり向かないかも。

日本語

English

タイトルロゴ 言語切替

メニューバー

言語選択切替ボタンの表示

<?php echo qtrans_generateLanguageSelectCode('both'); ?>

<?php  echo  esc_url(  qtrans_convertURL(home_url('/'),  qtrans_getLanguage())  );  ?>

qtrans_getLanguage()  →  ‘ja’か  ‘en’を返します。qtrans_convertURL(  $url,  $lang  )  →  $lang用のURLを生成します。

例:qtrans_convertURL(  ‘http://example.com’,  ‘ja’  )  →  ‘http://example.com’を返すqtrans_convertURL(  ‘http://example.com’,  ‘en’  )  →  ‘http://example.com/en’を返す

URLは言語によって変わります。例えばHOMEのURLはこうなります。・日本語のサイト(デフォルト)　http://example.com/・英語のサイト(第2外国語)　http://example.com/en/現在、日本語モードで表示しているか、英語モードで表示しているかでHOMEへのリンク先URLを変えなければいけません。そのための関数があります。

多言語対応にした場合、URLはどうなる？

ロゴ画像の切替の例

<?php  if(  qtrans_getLanguage()  ==  'ja'  ){  ?>        <img  src="/logo.png"/><?php  }  else  {  ?>        <img  src="/logo_en.png"  /><?php  }  ?>

日本語ページの場合は、logo.pngを使い、英語ページの場合はlogo_en.pngを使うコードです。

qTranslateの関数一覧はこちらにあります。http://www.qianqin.de/qtranslate/forum/viewtopic.php?f=3&t=9

管理画面→外観→メニューで設定します。ナビゲーションラベル入力欄に、日本語のページの場合と、英語のページの場合の文字列を併記します。

メニューの文字列

<!-­‐-­‐:ja-­‐-­‐>メニューアイテム<!-­‐-­‐:-­‐-­‐><!-­‐-­‐:en-­‐-­‐>Menu  Item<!-­‐-­‐:-­‐-­‐>

トラブったところ1 カスタムメニューでの不具合カスタムメニューとの相性が良くない感じでした。(qTranslate Ver.2.5.34)

HOME MENU1

MENU1-­‐1

MENU2 MENU3

MENU3-­‐1

MENU4

英語ページ表示のとき、メニューの各itemはすべて英語のページにリンクして欲しいのだが、HOME、MENU3、MENU3-1は日本語のページにリンクされてしまう問題が起きた。MENU1、MENU2、MENU4は固定ページMENU3、MENU3-1はカスタム投稿タイプ。→ どうやらTOPページへのリンクと、カスタム投稿タイプへのリンクで不具合が起こるらしい。

調べてみると、リンク先URLに‘en’が入ってませんでした。

HOME MENU1

MENU1-­‐1

MENU2 MENU3

MENU3-­‐1

MENU4

HOMEへのリンク:http://example.com/

MENU1へのリンク:http://example.com/en/menu1

MENU3-1へのリンク:http://example.com/menu3-1 ←NG ‘en’が抜けている

←OK ‘en’がちゃんと入ってる

←NG ‘en’が抜けている

トラブったところ1 カスタムメニューでの不具合

1. カスタムメニュー処理に割り込みして、独自処理を入れたいため、カスタムメニューのフックを探しました。

<参考>カスタムメニューの「カスタムリンク」に target 属性を追記 | 鉄王http://www.tecking.org/archives/2651

2. functions.phpにフィルターフック処理を書きました。 TOPページへのリンクURLと、カスタム投稿タイプへのURLに　’en’を入れる処理

トラブったところ1 カスタムメニューでの不具合

追加したフィルターフックの処理add_filter('walker_nav_menu_start_el',  'qtrans_in_nav_el',  10,  4);function  qtrans_in_nav_el($item_output,  $item,  $depth,  $args){        if(  $item-­‐>menu_order  ==  1  ){    //  top  contents  のとき              if  (function_exists('qtrans_getLanguage'))  {                      if(  qtrans_getLanguage()  ==  'en'  ){                              $item_output

         =  preg_replace(  "/(href=\".+?)\"/",  "$1en/\"",  $item_output  );                      }              }        }  else  if(  $item-­‐>object  ==  'custom1'  ){  //  post_type:  custom1のとき              if  (function_exists('qtrans_getLanguage'))  {                      if(  qtrans_getLanguage()  ==  'en'  ){                              $item_output

             =  str_replace(    '/cunstom1/',  '/en/custom1/',  $item_output  );                      }              }        }        return  $item_output;}

トラブったところ2 他プラグインとの相性パンくずプラグイン”Prime Strategy Bread Crumb”を導入していましたが、qTranslateとの組み合わせでうまく動かないところがありました。

英語ページ表示のとき、HOMEへのリンクは英語のトップページにリンクして欲しいのだが、日本語のページにリンクされてしまっている。

HOME  >  REPORT

トラブったところ2 他プラグインとの相性Prime Strategy Bread Crumbプラグインに‘bread_crumb_after’というフックがあったので、これを使って追加処理をfunctions.phpに入れました。

add_filter('bread_crumb_after',  'primestrategy_bread_crumb_after',  10,  2);function  primestrategy_bread_crumb_after($output,  $args){      if  (function_exists('qtrans_getLanguage'))  {              if(  qtrans_getLanguage()  ==  "en"  ){                      $homeurlstr  =  'href="'  .  get_bloginfo(  'url'  )  .  '/"';                      $replacestr  =  'href="'  .  get_bloginfo(  'url'  )  .  '/en/"';                      $output  =  str_replace(  $homeurlstr,  $replacestr,  $output  );              }      }        return  $output;}

まとめ

・無料で使える多言語化プラグインとしては良くできているので　使う価値は十分にある。

・qTranslateの関数が用意されているので、細かい表示制御にも対応できる。

・規模の大きいサイトだとパフォーマンスが心配?

・同時に導入しているプラグインとか、カスタム投稿タイプなどで　相性問題が発生する可能性がある。ちょっとテクニカルなことを　しようと思うと問題が起こる可能性が高い。

ありがとうございました。@uemera uemura