28 7月 2016

【使い方メモ：qTranslate X】WordPressサイトを多言語化するプラグイン

Posted in 便利ツール for WEB制作, 制作メモ On 7月 28, 2016

WordPressで多言語化案件がいくつか続きそうなのでメモメモ。
多言語化プラグインはいくつかありますが、qTranslate Xがいちばん簡単手軽かなと思いました。

言語を追加する

「qTranslate X」
（Wordpressの「プラグイン」→「新規追加」→ qTranslate Xで検索）で、インストール＆有効化！

サイドバーの「設定」→「言語」→言語管理（qTranslate 設定）で、まずは言語追加。
「デフォルト言語・順番」にあらかじめ日本語・英語が設定されているので、これ以外の言語の場合、「言語」タブから選択します。

「言語」の一覧にすらない言語の場合、たとえば韓国語などは、フォームから「言語を追加」します。

以下、韓国語の場合

①言語コード

言語コード：ko
└入力したい言語の2文字の ISO 言語コードを↓ここから探して入力（アルファベット2文字）
https://www.w3.org/WAI/ER/IG/ert/iso639.htm#2letter

②国旗

国旗：プルダウンから選択
└日本語でJaとJpがあるように、韓国語もKoとKrがあるようで、この場合kr.pngになります。

③言語名

言語名：한국
└サイトに表示される言語名

④ロケール

ロケール：ko_KR
└PHP と WordPress ロケールを↓このあたりから探して入力
https://gist.github.com/jacobbubu/1836273

⑤Locale at front-end

ヘッダーに記述する”hreflang”の指定です。”hreflang”については↓こちら
https://support.google.com/webmasters/answer/189077?hl=ja
特に指定がない場合は、”hreflang”には①の言語コードが入ります。

⑥日付フォーマット

⑦時刻フォーマット

└どちらも任意

⑧利用不可のメッセージ

利用不可のメッセージ：죄송합니다,이 내용은 지금 %LANG :뿐입니다.
└投稿が韓国語で利用できない場合に表示されるメッセージ。
　%LANG　には「利用できる言語」が入るので、
「このページは %LANG のみです」とか、ただ「ご利用できません」とか入れる感じ。

以上を入力したら、「言語を追加」
これで、日本語・英語・韓国語の多言語サイトになりました。

テーマに言語選択ボタンを追加

よくある、ヘッダーの右上にある言語選択ボタンは下記コード

//テキストの場合
<?php echo qtranxf_generateLanguageSelectCode('text'); ?>
//画像＆テキストの場合
<?php echo qtranxf_generateLanguageSelectCode('both'); ?>
//画像のみの場合
<?php echo qtranxf_generateLanguageSelectCode('image'); ?>
//プルダウンの場合
<?php echo qtranxf_generateLanguageSelectCode('dropdown'); ?>

オリジナルの国旗など独自に設定にする場合は、’text’にしておいてCSSで調整します。
‘text’では以下のコードが出力されます。

<ul class="language-chooser language-chooser-text qtranxs_language_chooser" id="qtranslate-chooser">
<li class="lang-ja active"><a href="http://xxxxxx/ja/" hreflang="ja" title="日本語 (ja)" class="qtranxs_text qtranxs_text_ja"><span>日本語</span></a></li>
<li class="lang-en"><a href="http://xxxxx/en/" hreflang="en" title="English (en)" class="qtranxs_text qtranxs_text_en"><span>English</span></a></li>
<li class="lang-ko"><a href="http://xxxxx/ko/" hreflang="ko" title="한국 (ko)" class="qtranxs_text qtranxs_text_ko"><span>한국</span></a></li>
</ul>

CSS例

#qtranslate-chooser li {float: left;}
#qtranslate-chooser li a span {display:block;text-indent:-9999px;width:18px;height:12px;}
#qtranslate-chooser li.lang-ja a span {background:url(画像パス) 0 0 no-repeat;}
#qtranslate-chooser li.lang-en a span {background:url(画像パス) 0 0 no-repeat;}
#qtranslate-chooser li.lang-ko a span {background:url(画像パス) 0 0 no-repeat;}

条件分岐でメニューや画像等を出力

投稿・カテゴリ・ページともに管理画面でタブを選択することで多言語入力できます。

ヘッダーやメニュー、フッターなどをウィジェットやテンプレートタグで出力していれば、言語選択ボタンで言語が変わりますが、往々にして、「英語版はメニューを減らす」とか「中国語版はフッター記述を別にする」とかいうケース、ロゴだけ画像、べた書きのメニュー…といったケースは、phpの条件分岐で出力します。

<?php if(qtranxf_getLanguage()=='en'): ?>
　英語だった場合
<?php elseif(qtranxf_getLanguage() == 'ko'):?>
　韓国語だった場合
<?php else:?>
　それ以外
<?php endif;?>

↑このソースだと結構ごちゃごちゃするので、
↓menu-en.phpなど別ファイルを作ってインクルードするとスッキリ

<?php if (qtranxf_getLanguage() == 'en') {
     include(TEMPLATEPATH.'/menu-en.php'); //英語版のメニュー
} elseif (qtranxf_getLanguage() == 'ko') {
     include(TEMPLATEPATH.'/menu-ko.php'); //韓国語版のメニュー
} else { ?>
　それ以外（インクルードでもなんでも）
<?php }?>

あと、ソースはそのまんまでいいけど、日本語以外の言語の時はちょっとデザインを変える…の場合、bodyタグにクラスを出力します。
こちらはfunction.phpに記述。

function body_class_lang( $classes ) {
  $classes[] = esc_attr( qtranxf_getLanguage() );
  return $classes;
}
add_filter( 'body_class', 'body_class_lang' );

この設定で、bodyタグに class=”en” 等が出力されます。

end.

※2018/10/16 追記

■PHPに直接多言語を記述する場合

→ _e() を使います。

<?php _e("[:ja]日本語の記述[:en]英語の記述[:]"); ?>

■親カテゴリ、親ページなど取得するとき

例）固定ページで親ページ名を取得

$parent_id = $post->post_parent;
$parent_title = get_post($parent_id)->post_title;

→ <?php echo $parent_title; ?> では [:ja]〜[:en]〜[:] がそのまま吐き出されるので、
　<?php _e( $parent_title ); ?> にする。

それだよ