Post on 20-Jun-2015
description
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