現在、WordPressを使ってギャラリーサイトを構築しているのですが、その過程でプラグインに頼らず多言語化(日本語と英語の自動切替)の方法がわかったのでここにまとめておきます。
なぜプラグインに頼らないかというと、プラグインを使用していた場合WordPress本体がバージョンアップしたときにプラグインがうまく動かなくなる可能性があるからです。
ちょっとした箇所ならともかく、サイト全体がうまく表示されないなどということはあってはならないので、今回はWordPressの基本的な機能を使い、自力で多言語化する方法をご紹介します。
多言語化の目的
今回は、WordPressを使いギャラリーサイト(たくさんの写真素材を無料配布するサイト)を構築中です。
文章中心のブログだと多言語化しようにも翻訳など大変ですが、写真素材が中心のサイトの場合ナビゲーションなどのインターフェースさえ多言語化されていれば、日本人の方だけでなく多くの国の方にお使いいただけるのではないかと思い多言語化(日本語と英語)することにしました。
どのように表示を分けるか
一般的にWindowsやMacのブラウザは「どの言語を優先して表示するか」の設定がありますので、その設定をPHPで取得して最優先の言語を表示してあげるのが良いのではないかと思います。
例えば、↓は私のMacの「システム環境設定>言語とテキスト」の設定です。
ご覧の通り日本語優先の設定になっていますので、この場合SafariやChrome等のブラウザではページを日本語で表示してあげるのが良いと思われます。
Firefoxの場合は、ブラウザの設定(Win版はメニューの「ツール>オプション>コンテンツ>言語設定」、Mac版は「Firefox>環境設定>コンテンツ>言語設定」)から優先する言語を設定します。
Internet Explorerなんて知りませ…もとい、Microsoftのサイトに変更方法が書かれていました。
Internet Explorer の言語設定を変更する
今回はブラウザの言語設定をPHPで取得し、日本語優先の場合は日本語で、それ以外(英語優先の場合はもちろんフランス語・イタリア語・中国語などの場合)は全て英語表記にするよう設定しました。
ただ、ユーザー(ページを閲覧している方)の中には「ブラウザの設定は日本語優先になっているけど英語版を見たい」という方もいらっしゃるかもしれませんし、Googlebotなど検索エンジンのクローラーには特定の言語のページだけでなく全ての言語のページをインデックスして欲しいので、URLの最後に ?lang=ja をつけるとブラウザの言語設定にかかわらず強制的に日本語表示に、 ?lang=en をつけると強制的に英語表示になるようにしました。
ここからは、具体的にWordPressをどうカスタマイズすれば良いのかについて書きます。
ブラウザの言語設定を取得し、WordPressの言語を切り替える
この手順に進む前に、WordPress全体のバックアップを取っておいてください。
WordPressをインストールしたフォルダ直下にある wp-config.php というファイルを、UTF-8という文字コードに対応したテキストエディタ(Windowsのメモ帳は不可。以下テキストエディタと表記)で開き、以下の行を探してください。
define ('WPLANG', 'ja');
もしかしたら、’ja’ の部分が ‘en’ になっていたり、 ” のように空になっているかもしれません。
その行を、以下の内容に置き換えてください。
// 言語判定(ブラウザの言語設定とGETの両方を確認)
if (preg_match('/^ja/i', $_SERVER['HTTP_ACCEPT_LANGUAGE'])) {
$locale = "ja";
define ('WPLANG', 'ja');
if(htmlspecialchars(@$_GET["lang"] == "en")) {
$locale = "en_US";
define ('WPLANG', 'en_US');
}
} else {
$locale = "en_US";
define ('WPLANG', 'en_US');
if(htmlspecialchars(@$_GET['lang'] == "ja")) {
$locale = "ja";
define ('WPLANG', 'ja');
}
}
これで、ブラウザの設定によってWordPressの表示言語が変わるようになったはずです。
(管理画面の言語も切り替わりますのでご注意ください)
試しに、WordPressの管理画面からテーマをWordPress 3.x標準の「Twenty Ten」に変更し、ブラウザやOSの言語設定を英語優先にしたり日本語優先にした後ブラウザを再起動して表示が変わっていることをご確認ください。
また、ブラウザの言語設定に関わらず、URLの最後に ?lang=en または ?lang=ja (URLの中に、既に?がある場合は &lang=en または &lang=ja)をつけると言語が切り替わることもご確認ください。
多言語対応テーマの作成
ここまでくれば、テーマファイル(WordPressのインストールフォルダ/wp-content/themes/ThemeName/header.php など)の中に
と書けばとりあえず言語による表示切替は可能です。
でもせっかくなので、Twenty Tenと同じようにWordPress標準の多言語テーマの作成方法を書いておきます。
少々面倒な方法ですが、テーマファイルが複雑な場合や3ヶ国語以上に対応したい場合は以下のやり方の方が良いと思います。
まずは、function.php(WordPressのインストールフォルダ/wp-content/themes/ThemeName/function.php)をテキストエディタで開き、
load_theme_textdomain('themename',dirname(__FILE__));
という行を追加してください。
‘themename’ の部分をテーマ名(半角英数字のみ)に置き換えてください。
次に、テーマファイル(WordPressのインストールフォルダ/wp-content/themes/ThemeName/header.php など)の文字の箇所を
に置き換えてください。
‘themename’ は先ほど指定したテーマ名で、’Text’ は表示したい英語の文字列(日本語は別ファイルで指定)です。
多言語化ファイルの作成
最後に、多言語化ファイル(.po と .mo)を作成します。
先程の Text という文字列の日本語版を製作します。
テキストエディタで新規ファイルを作成し、
msgid "Text"
msgstr "テキスト"
と書きます。
このファイルを ja.po というファイル名で保存し、Poeditというソフトで開きます。
開いたらすぐに「保存」ボタンを押して構いません。
すると、同じフォルダに「ja.mo」というファイルができるはずです。
この「ja.mo」をWordPressのテーマフォルダ直下(WordPressのインストールフォルダ/wp-content/themes/ThemeName/ja.mo)に保存します。
すると、先ほどの
の箇所が英語優先の場合は「Text」に、日本語優先の場合は「テキスト」になっているはずです。
画像の出し分け
ロゴ画像などを日本語優先の場合と英語優先の場合で出し分けるには、予め「logo-en.png」と「logo-ja.png」のように2つの画像を製作しておき、header.phpなどテーマファイルの画像部分を
(部分は、テーマファイルまでのURLが自動的に入ります。)
のようにし、ja.poに
msgid "-en"
msgstr "-ja"
msgid "Logomark"
msgstr "ロゴマーク"
のように追記し、.moファイルをPoeditで生成してアップすれば日本語と英語の画像出し分けが可能です。
msgid “-en”
msgstr “-ja”
は、一度書いておけば色々な箇所で使い回しが可能です。
あと、ソースコードがごちゃごちゃするのが嫌な方は、標準のやり方ではありませんがいっそheader.php(日本語版)とheader-en.php(英語版)を製作しておき、テーマファイルのindex.phpに
と書いておく方法もあります。
今回のやり方は半分自己流ですが、WordPressで多言語サイトを作られている皆様はどうやって構築されていらっしゃるのでしょうか…
他にもっと良いやり方をご存じの方がいらっしゃいましたら、 @Stocker_jp まで教えて頂けると幸いです。