WEBデザイナー

【WordPress】自作したテーマに翻訳ファイルをつけてマルチ言語対応

WordPressテーマ内に挿入されている翻訳ファイルに気づいていますか?
公式や海外のテーマではよく目にしますが、日本で作成された非公式(有料&無料)テーマでは、お目にかかることは少ないかも知れません。海外のテーマを使った時に、適切な翻訳でない場合も多いですね。
そんな時に翻訳ファイルが入っていると自分で翻訳でき助かります。

この記事は、自作したテーマ内に翻訳ファイルを挿入した時の覚書あれこれです。

WordPress 国際化/i18n

WordPressに携わる限りは、周辺の諸々も習得したいと思うのが技術者の佐賀・・・ちがぅ、性!
早速、テーマの「国際化/i18n」やってみよう!

国際化とはソフトウエア、特にここでは WordPress に対して複数言語のサポートを提供するプロセスを指します。国際化は i18n とも表記されます。これは「国際化」の原語の「Internationalization」の先頭の i と 最後の n の間に18文字あることから来ています。
プラグインやテーマを国際化すると世界中のユーザーに使ってもらうことができます。あなた自身ですべての言語の翻訳ファイルを作成する必要はありません。作成したソフトウエアを WordPress.org にアップロードすると、すべての JavaScript と PHP ファイルは自動でパースされます。
引用:WordPress「国際化」

WordPressテーマ作成時に、マルチ言語に対応させるよう予め注意する点がいくつかあります。

htmlタグのlang属性

htmlタグのlang属性が日本語固定されている場合には使用言語に合わせて出力されるよう変更しておきましょう。

上記のように記述しておくと、WordPress管理画面「設定」>「一般」>「サイトの言語」から使用言語を変更することで出力が変わります。

文字エンコーディング

WordPressはVersion3.5.0以降、”UTF-8″を常に返すようになっています。
したがって「UTF-8」と記述してしまっても問題ないようです。
ですが、海外テーマや公式テーマでは「UTF-8」と記述しているものはほとんどありませんので、やはり国際化するなら推奨コードがいいかと思います。

テキストドメインの設定/functions.php

国際化したWordPressテーマには、翻訳ファイルを格納しますので、エラーなく翻訳ファイルが読み込まれるようfunctions.phpに命令を記述します。load_theme_textdomain()関数でテーマ翻訳ファイルを読み込みます。

関数リファレンス/load theme textdomain

第一引数の$domainにはテキストドメインを入力します。第二引数の$pathには翻訳ファイルの設置場所を指定します。

このテキストドメインというワードが分かりにくく曲者だったのでメモしておきます。
簡単に言うと、テーマを識別するためのユニークな名前でしょうか。通常はテーマ名(テーマフォルダ名)を使用し、翻訳ファイルの名前としても使用されます。
※上記コードの「text_domain」部分は任意のテキストドメインを記述します。

テキストドメインの設定/スタイルシートヘッダ

スタイルシートヘッダにもテキストドメインの記述が必要です。この記述を怠ると翻訳ツールで「テーマはローカリゼーションに対応していません。」というエラーが表示されます。
また、テーマによってはドメインパスが記述されていないとエラーになり翻訳が開始されないケースもあります。
テキストドメインとドメインパスは両方記述しておくことをオススメします。

テーマ内にlanguageフォルダを設置

一般的にはテーマフォルダ直下にlanguageフォルダを作り、テーマの翻訳ファイルを格納します。
※後述していますが、Poedit PROではPOTファイル作成時にlanguageフォルダを自動生成してくれます。

languageフォルダには、POTファイル、POファイル、MOファイルの3本を格納してテーマを配布します。色々な言語に対応できるPOTファイルは必須ですが、日本向けに「ja.po」「ja.mo」も入れておくと親切ですよね。

翻訳関数の適用 __() _e()

WordPressの翻訳関数はいろいろありますが、代表的な2つの関数を用いてテーマ内の各テンプレートに記述していきましょう。

__( $text, $domain ); *アンダースコア2つ並び

第一引数$textは翻訳対象のテキストを入力します。第二引数$domainはテキストドメインを入力します。$textで翻訳された文字列を返します。
文字列をエスケープしたい場合は、esc_attr__()やesc_html__()を使います。

関数リファレンス/__()

_e( $text, $domain );

第一引数、第二引数は__()と同じです。$textで翻訳された文字列をechoを使って書き出します。戻り値はありません。※文字列を表示する時に使用。
文字列をエスケープしたい場合は、esc_attr_e()esc_html_e()を使います。

関数リファレンス/_e()

__()関数 _e()関数 違い

__()_e()も共に翻訳に使う関数ですが、_e()は翻訳した文字列を、すぐにそのまま書き出す(echoする)時に使用。
翻訳した結果を変数に代入して次の処理に渡したり、printfで整形して表示する場合など、すぐに表示しないケースでは__()を使用。
と覚えておくと用途の違いも理解できて忘れにくいでしょうか?!すぐ忘れるので自分への戒めに(汗)
実際以下のようなprintf関数をからめた記述が多いと思います。

テーマを翻訳していこう

WordPressにはgettextライブラリを利用した多言語化のメカニズムが組み込まれているので、必要な翻訳ファイルがあれば簡単に色々な言語に翻訳することが可能です。

Poedit PROが使いやすい

WordPressのプラグインやテーマを翻訳する際に役に立つのがPoeditです。

2013年には有料のProバージョンがリリースされ、「WordPressのテーマ・プラグインを翻訳」機能が追加され便利になりました。
翻訳用ファイルはテキストエディタでも作成可能ですが、Poeditを使うと手軽に作ることが出来ます。
そして、WordPressプラグインやテーマを翻訳したい場合にはなんと言っても有料版がオススメです。
当社購入時(バージョン2.3/2021年7月)で日本円3,499円(税込)でした。開発経費としては安価だと思いますし作業が捗ります。

【WordPress】自作したテーマに翻訳ファイルをつける/世界各国で使って貰えるように!

Poedit3では、MacOS11(BigSur)を完全サポートしたり、Appleシリコン(M1)Macではネイティブに動作すると公式サイトでアナウンスされています。

Poedit 3 Released

Poedit Version history

Poeditのダウンロード

翻訳エディタ「Poedit」無料版ダウンロードはこちら。

翻訳エディタ「Poedit PRO」有料版ダウンロードはこちら。

翻訳に必要な3つのファイル

まずは、翻訳ファイルの種類と役割について抑えていきましょう。翻訳ファイルには「.pot」「.mo」「.po」の3つのファイルがあります。

  • POTファイル(Portable Object Template)
    翻訳テンプレートファイル。
    翻訳元の文章(翻訳可能な文字列)をリスト化したファイルで「.po」の元になるテキストファイル。
    Poeditでは「WordPressのテーマ・プラグインを翻訳」機能があるので、自動でリスト化してくれる。
  • POファイル(Portable Object)
    編集用翻訳ファイル。
    英語など多言語で書かれたPOTファイルに翻訳文を記入したファイル。
    Poeditで、このPOファイルを作成したり編集したりする。
  • MOファイル(Machine Object)
    読込専用翻訳ファイル(WordPressが参照するファイル)
    「.po」からgettextにより作成されコンピュータが効率よく読み込める形式に変換されている。
    Poeditでは、「.po」が保存されるタイミングで自動的に作成(更新)される。

Poedit翻訳手順

ソフトをダウンロード・インストールしても、そこからがハテナの連続だと思います。わたしがそうでした(汗)

手順01:Poedit PROを起動

「WordPressのテーマ・プラグインを翻訳」をクリック

【WordPress】自作したテーマに翻訳ファイルをつける/世界各国で使って貰えるように!

手順02:POTファイル作成

スクリーンショットに書いてある通りですが、翻訳したいテーマフォルダを(1)のエリアへドラッグアンドドロップし、「POTファイルを作成」にチェックを入れて「次へ」。
「次へ」ボタンをクリックするとPOTファイル(未保存)が表示され、同時にテーマ内にlanguageフォルダが自動生成されていました。
テーマ内の翻訳するべき文字列は、Poeditが自動でリスト化してくれています。
また、先にテーマ内にlanguageフォルダを作っておいてもいいですが、上記したように自動生成されるようなのでとても便利です!至れり尽くせり、ありがたや〜!

【WordPress】自作したテーマに翻訳ファイルをつける/世界各国で使って貰えるように!

手順03:POTファイルからPOファイルを作成

POTファイルを保存後、「翻訳プロジェクトを新規作成する」をクリックします。すると、翻訳言語のダイアログボックスが出現しますので「日本語」を選択します。※「日本語(日本)」という項目もありますが、こちらを選択するとうまく翻訳出来ませんでした。

【WordPress】自作したテーマに翻訳ファイルをつける/世界各国で使って貰えるように!
【WordPress】自作したテーマに翻訳ファイルをつける/世界各国で使って貰えるように!

手順04:POファイルを編集(翻訳)

翻訳言語を選択後にPOファイル(未保存)が表示されますので翻訳して行きましょう。
リストから翻訳する文字列を選択し、対話エリアに翻訳文を入力します。
すべて翻訳出来たらファイルを保存します。同時に、POファイルをコンパイルしたMOファイルが自動で保存されました。

【WordPress】自作したテーマに翻訳ファイルをつける/世界各国で使って貰えるように!

MOファイルが自動保存されるには理由がありました。Poedit PROの「設定」>「一般」で、「保存する際にはMOファイルを自動コンパイル」にデフォルトでチェックが入っていたからですね。
不要の場合には、ココで変えられるようです。

【WordPress】自作したテーマに翻訳ファイルをつける/世界各国で使って貰えるように!

Poedit PROの事前翻訳機能が有能

やはり、3,499円(税込)出しただけのことはある!と思わせる便利な機能が「事前翻訳」です。

【WordPress】自作したテーマに翻訳ファイルをつける/世界各国で使って貰えるように!

「オンライン提案を使用」にチェックを入れることで自動翻訳が可能になりました。あっという間にあらかた翻訳できてしまします。

【WordPress】自作したテーマに翻訳ファイルをつける/世界各国で使って貰えるように!

オレンジ文字部分が要確認なので、ちょっとおかしい翻訳の場合には、そこだけ修正すればいいのでかなりの工数削減です。また右サイドバーには翻訳提案がいくつか表示されているので参考にもなります!

【WordPress】自作したテーマに翻訳ファイルをつける/世界各国で使って貰えるように!

総括・雑感

WordPress「国際化/i18n」は、ハードルが高いと思っていましたが、翻訳ツール有料版Poedit PROを使うことで、大幅な工数削減が可能であると実感しました。

こういった細かい作業は、有料であってもツールの機能を大いに借りてサクッと進めることが重要です。有効化したプラグインや管理画面の日本語化など、様々なところで有意義に使っていけそうです。

関連リンク

Web制作に関連する面白い記事です。こちらも是非お読みください!

原みのり

この記事を書いた人

原みのり

OL→フリーアナウンサー→Webデザイナー→起業。色々やったがコツコツと地味な作業を積み上げるのが性に合ってるとつくづく思う今日このごろ。長くWeb業界にいるがSNSに置いていかれている感満載。最近はじめた猫のインスタも更新頻度が低いにゃ!

関連記事

TOP