自作WordPressテーマの国際化（翻訳）の方法

posted: 2014-5-5 updated: 2016-7-4 5 Comments

今回作成したWelcart用テーマをWordPress.orgの公式テーマディレクトリに登録するため、「国際化」なる手順を踏む必要がありました。

「国際化」とは、今まで日本語で作っていたテーマの様々な部分を、他の言語の人が使っても大丈夫なように、部分的にコードを入れ替える作業のことです。

テーマを日本語がわかる人向けにだけ、自分のサイト上で配布する分には、国際化の必要はもちろんありません。

ただ昨今、「無料で配布されているWordPressテーマには注意！」という声もあり（実際に変なコードが入ってたりする場合も結構あるらしい）、私としては自分の作ったWelcart用テーマを安心して利用頂きたいこともあり、WordPress.orgに申請することにしました。Welcartもそうですしね。

1. 国際化の為のコード書き換え例

1-1. 日本語表記を置き換える

例えば、アーカイブページなどで「続きを読む」という日本語のリンクを記載していたとします。

<a href="<?php the_permalink() ?>">続きを読む</a>

このままでは他の言語の人が使った場合にも日本語が出てしまいます。そこで、この日本語の部分を、後に説明する英語がベースの翻訳用文字列に置き換え、どの言語にも翻訳が可能なようにしておきます。

その上で、その翻訳用文字列に対応する日本語訳を翻訳ファイルに用意し、「テキストドメイン」の命令をfunctions.phpに記載しておけば、日本語でWordPressを使うときに自動的に日本語に置き換わる仕組みです。

詳しくは2以降で説明します。

1-2. ルート要素<html>の言語属性を国際化

通常、日本語でウェブサイトを制作する時は、ファイルの一番最初に記載する<html>タグに、以下のように主要な言語属性（この場合は日本語）を記載するようになっています。

<html lang="ja">

言語属性は音声ツールや翻訳ツールで活用されるものですが、WordPress.orgの公式テーマディレクトリを利用するのは日本語以外の人がむしろ多いので、ここを以下のように変更します。

<html <?php language_attributes(); ?>>

1-3. エンコードの種類の指定

<head>要素内に必ず記載する、エンコードの指定も国際化します。

日本語でテーマを作っている場合には、以下のように記載するのが通例です。

<meta charset="UTF-8">

WordPress3.5以降では、エンコードはUTF-8に統一されていますので、最新のWordPressを使っていれば出力される内容は同じですが、一応以下のように変えておきます。

<meta charset="<?php bloginfo('charset'); ?>">

2. テキストドメインとは？

2-1. テキストドメインとは？

1-1. で、「テキストドメイン」なるものが出てきました。私も最初は何のことやら全くわかりませんでしたが、「WordPressを翻訳可能にするための仕組み」といったところです。

その仕組みを使って、ファイルの中の文字列を、テキストドメインが働くような文字列に置き換えます。

例）「続きを読む」と日本語で書かれている以下のコードを、

<a href="<?php the_permalink() ?>">続きを読む</a>

翻訳可能なように、以下のような文字列に置き換えます。

<a href="<?php the_permalink() ?>"><?php _e('more', 'theme_name'); ?></a>

_e(‘more’, ‘theme_name’);の第１引数の「more」が元となる英語表記で、それに対応する他の言語の対訳を翻訳ファイルに記載することによって、利用者の言語に置き換わる仕組みです。第２引数の「theme_name」には、テーマ名が入ります。

テキストドメインを適用させると、使用言語が英語ならばそのまま以下のように出力されます。

<a href="<?php the_permalink() ?>">more</a>

日本語の翻訳ファイルを用意して、この部分に「続きを読む」という日本語を当てておけば、以下のように出力されます。

<a href="<?php the_permalink() ?>">続きを読む</a>

2-2. 翻訳ファイルとその設置場所

翻訳ファイルは、通常使用中テーマのlanguagesフォルダに設置します。

その中に、日本語ならja.poやja.moを置きます。詳しくは3.の手順で説明。

2-3. テキストドメインを適用させるためのコード

ただ翻訳ファイルを用意しただけでは、翻訳はされません。

functions.phpに以下の命令を書くことにより、翻訳ファイルが読み込まれるようになります。

load_theme_textdomain( 'theme_name', get_template_directory() . '/languages' );

3. 翻訳ファイルの作成方法

私が翻訳ファイル作成で日本語での情報が少なく一番わかりにくかった部分が、実際の作成方法です。

3-1. 翻訳したい部分を、全て翻訳用の文字列に入れ替える

一番最初に、翻訳するべき部分の文字列を、翻訳用の命令に置き換えます。

翻訳を使う場合、_e()と__()（アンダーバー2つ）の2通りの基本的な記述方法があります。

出力させる場合・・・_e(‘hello’, ‘theme_name’)
取得する場合・・・__(‘hello’, ‘theme_name’)

_e()は、実際にHTMLとして画面上にその文字列を出力させたい場合、例えば先ほどの「続きを読む」に該当する部分などで利用します。PHPで言えばechoを含んだ命令です。

__()は、HTMLとしては出力せず、データとして取得する場合に使います。例えば、functions.phpの中のウィジェットのタイトルの指定などで、以下のように使います。PHPで言えばreturnの命令です。

register_sidebar( array(
 'id' => 'column1',
 'name' => __( 'Sidebar', 'theme_name' ),
 )
 );

また、文章によっては英語と日本語では書き方が違う場合があります。例えば以下のような場合です。

日本語「『○○』に関する記事は見つかりませんでした。」
英語「Your search for ○○ did not yield any results.」

この場合は、PHPのsprintf関数と%sを使って、以下のようにします。予め、検索語句を$searchという変数に置き換えておき、その変数が%sとして文章に代入されるようにしておきます。

<?php $search = get_search_query(); ?>
 <p><?php echo sprintf(__('Your search for "%s" did not yield any results.', 'thene_name'), $search ); ?></p>

後の作業で日本語訳を当てるときに、「『%s』に関する記事は見つかりませんでした。」としておけばOKです。

（参考）WordPress で多言語化（2ヶ国語）（Web Design Leaves）

3-2. 翻訳ファイルを用意する

翻訳を当てるための文字列入れ替え作業が終わったら、次に翻訳ファイルを用意します。翻訳ファイルの編集のために、poeditというソフトを用意・インストールします。

次に、テーマ内にlanguagesフォルダを作成して、poeditを起動させます。ここからの設定がかなりキモです。私は何度も躓きました。

（参考）プラグイン日本語化に挑戦！（パソコン教室Pasonal）

［ファイル］＞［新規カタログ］をクリックして、以下のように設定を行います。

「翻訳の設定」タブ

プロジェクトの名前とバージョン	任意
翻訳チーム	任意
翻訳チームのメードアドレス	任意
言語	Japanese
文字符号化法	UTF-8（推奨）
ソースコードの文字符号化法	UTF-8（推奨）
複数形	nplurals=1; plural=0;

上記は日本語の場合です。日本語以外の場合、複数形の書き方はこちらのリストに書かれています。

「ソースの検索」タブ

ベースのパス	.
パス	..

「パス」の部分は、左から2番目のアイコン（新規項目）から追加します。入力した後必ずenterを押さないと、きちんと登録されず後でエラーが起きる可能性があるので注意。

「ソース中のキーワード」タブ

「_e」と「__（アンダーバー2つ）」を登録。こちらも左から2番目のアイコン（新規項目）から追加します。入力した後必ずenterを押して、登録を確定させて下さい。デフォルトで入力されているものは消去して構いません。

ここまで入力して「OK」をクリックすると、「名前をつけて保存」画面になるので、日本語の場合は「ja.po」と名前をつけ、languagesフォルダ内に保存します。

保存を行うと、自動的にテーマフォルダ内のファイルの中から翻訳用文字列【_e()や__()】の読み込みが始まります。「カタログの設定」がうまく行っていないと、ここでエラーが出ますので、その場合は［カタログ］＞［設定］からやり直してみて下さい。

無事に読み込みが終わると↓の画面が出ます。必ず「OK」をクリックしましょう。

あとは、画面左下の「翻訳」欄に、対訳を入れていけばOKです。

保存すると自動的にja.moファイルが作られ、実際にはそれが読み込まれる仕組みになっています（.poファイルは人間の編集用らしい）。

4. 翻訳の確認

翻訳が完了したら、functions.phpにテキストドメインを導入するコードを書いて、動作確認しましょう。

load_theme_textdomain( 'your_theme', get_template_directory() . '/languages' );

うまく翻訳ファイルが読み込まれれば、先ほど入力した翻訳用文字列が日本語になって出てくるはずです。

WordPress.orgの公式テーマディレクトリに申請する前には、Theme Checkプラグインも試すことになると思います。ここでも問題があればエラー表示をしてくれるので、翻訳以外の項目も確認しましょう。

お疲れ様でした！

Author: Mamekko（まめ子）

WelcartのECサイト運営担当の30代♀。プログラミングよりはWebデザインが好き。

Twitterをフォロー Feedlyで購読

Welcart カスタマイズブログ