この記事は約 11 分で読めます。

WordPressで海外製テーマやプラグインを利用する際、日本語化対応はされているものの、デフォルトで表示される日本語の翻訳が少し微妙だったり、しっくりこないケースに遭遇した経験がある方は多いと思います。

そんな時には皆さんどう対処されているでしょうか?

プラグインのテンプレートファイルをさわるのは嫌だし(直接編集すると、どうせアップデートした時に元に戻っちゃうし・・・)、力技だけどJSで文字列入れ替えてしまうか、、、とかいろいろ試行錯誤された経験がある方も多いのではないでしょうか。

そもそもプラグインファイル内で日本語の翻訳対象箇所を文字列検索してもヒットしないので、修正する場所が見たらない・・・という経験を経て、ネット検索した結果、どうやら翻訳箇所を編集するにはプラグインのPOファイルを編集してMOファイルにコンパイルして上書きアップする必要がある、という所に辿り着いて一安心した方もそれなりに多いことかと思います。

今回はそんな海外テーマ・プラグインの翻訳ファイル編集時の手間を大幅に軽減するLoco Translateプラグインについて簡単な使い方を交えて紹介したいと思います。

Loco Translateのインストール方法

公式のプラグイン配布サイトはこちらになります。
https://ja.wordpress.org/plugins/loco-translate/
星4.9の評価が付いてますね。

プラグイン新規追加ページの右上の検索窓に「Loco Translate」と入力すると、表示されますのでこちらをインストールして有効化してください。

図1:Loco Translateプラグインを新規インストール
図1:Loco Translateプラグインを新規インストール

インストールと有効化が完了すると、管理画面サイドバーの下の方にLoco Translateのメニュー項目が現れます。

Loco Translateの機能説明

このプラグインの主な機能は翻訳を管理しているPOファイルのユーザーフレンドリーな編集画面UIの提供です。

管理画面上で翻訳を編集して保存するたびに、MOファイルへのコンパイルを自動的に行い、ページに反映される仕組みとなっています。

本記事内で頻繁に登場するPO/MOファイルについて簡単に説明しておくと、

POファイル:翻訳を編集するためのテキストファイル(実際に編集するファイル)
MOファイル:ページで読み込まれるバイナリファイル(POをコンパイルして生成)

という感じで、Loco Translate上で編集するのはPOファイル、実際にページ表示時に読み込んで使用されるのは、POファイルをコンパイルしたMOファイルという仕組みです。

翻訳編集が可能な箇所

Loco Translateでは以下箇所の翻訳を編集することが可能です。

  • テーマ翻訳ファイルの編集
    テーマの日本語訳がおかしい箇所の修正を行うことが可能。
  • プラグイン翻訳ファイルの編集
    プラグインの日本語訳がおかしい箇所の修正を行うことが可能。
  • WordPRess本体の翻訳ファイルの編集
    WordPress本体で管理しているコアファイルや管理画面上の日本語訳を編集することが可能。

各メニュー項目の説明

設定を行う前に管理画面上に表示されるLoco Translateの各メニュー項目について簡単に説明します。

  • HOME:言語設定可能なテーマやプラグインの一覧
  • Themes:言語設定可能なテーマの一覧
  • Plugins:言語設定可能なプラグインの一覧
  • WordPress:WordPress本体の翻訳項目一覧
  • Languages:インストール済みの言語一覧
  • 設定:書き出し時の設定などプラグイン設定一覧

Loco Translateの基本設定・使い方

設定を行う流れは基本的に以下の2ステップになっています。

  1. 翻訳したいプラグインの言語を選択
  2. 翻訳ファイル(PO)の編集

UIは大半が英語になっていますが、操作自体はシンプルで直感的に行えるため特に迷うことはないでしょう。

この後は基本設定と使い方を併せて説明を行っていきます。

【Step1】翻訳したいプラグインの言語を選択

HOMEもしくはPlugins一覧から翻訳を編集したいプラグインをクリックします。

図2:HOME画面
図2:HOME画面

本記事ではメルマガ・ステップメール配信を可能にする[MailPoet 3]プラグインを例に実際に翻訳を編集する流れを説明してみます。

一部イレギュラー対応が必要になるので扱う素材としてはちょうどいいと思います。

[MailPoet 3]を選択後、Overviewに言語一覧が表示されるので「日本語」もしくは「Edit」をクリックします。

図3:Overview(言語一覧)
図3:Overview(言語一覧)

日本語翻訳ファイルは下の方にリストされているケースもあるので見当たらない場合はスクロールしてみましょう。
※プラグインによっては日本語翻訳ファイルがまだ用意されていないケースもありますが、ここでは翻訳ファイルがある前提で進めます。

【Step2】翻訳ファイル(PO)の編集

選択したプラグインの翻訳ファイルのトップ画面になります。

以下タイトルからも分かるようにプラグインのPOファイルを編集する画面です。
Plugins / MailPoet 3 (New) / mailpoet-ja.po

「Source text」と書かれた左側のペインが英語、「Translation」と書かれた右側のペインが日本語訳になります。

図4:Editor(修正前)
図4:Editor(修正前)

今回は作業例として、「ようこそメール」と書かれた箇所を「ステップメール」に変更する作業を行ってみたいと思います。

図5:MailPoet(テキスト修正前)
図5:MailPoet(テキスト修正前)

一覧からスクロールして修正該当箇所を見つけてもよいのですが・・・手間を省くために、検索窓に「ようこそ」と入力します。

図6:Editor(文字列検索)
図6:Editor(文字列検索)

すると「ようこそ」に該当する箇所がリスアップされるので、修正したい箇所を「ステップメール」に変更してSave(保存)します。

図7:Editor(修正後)
図7:Editor(修正後)

ちなみにSaveボタンの横にある「Sync」は翻訳テンプレートファイル(POT)と項目を同期させる機能ですが今回は使っていません。(POTを編集して、それをPOに反映させる際などに使用すると便利なのだと思われます)

その横の「Revert」は保存する前のみ有効ですが、編集した内容を元に戻すボタンです。
※保存後に元に戻したい場合はRestoreタブからリビジョン機能で戻れます。

「Fuzzy」も使うことはありませんでしたが、日本語訳にすると「曖昧な」とか「不明瞭な」という意味になりますが、これがどういう機能なのかは調べていません・・・。

先程の該当箇所を見に行くと「ステップメール」に変更されていますね。

図8:MailPoet(テキスト修正後)
図8:MailPoet(テキスト修正後)

今回は管理画面上のテキスト修正でしたが、ウェブページに出力されるテキストについても同様の手順で修正していきます。

こうした感じで対象箇所を修正していくのですが、修正箇所が多ければ多いほどこのプラグインの便利さが実感できると思います。

その他設定項目

以上で編集作業自体は完了するのですが、ここではその他設定項目についても触れておきたいと思います。

Source
SourceタブではPOファイルのソースを確認することが可能です。
直接ソースを編集することはできませんが、テキストコピーや検索窓にテキストを入力してのソース検索を行えます

図9:Source
図9:Source

File info
File infoタブではPOファイルのプロパティや参照パスなどを確認することが可能です。

図10:File info
図10:File info

Restore
Restoreタブでは修正履歴を参照して過去のリビジョンからファイルを復旧(バージョン管理)することが可能です。

図11:Restore
図11:Restore

Delete
DeleteタブはPOファイルを削除する際に使用します

翻訳ファイル編集時の注意点

ここまでの流れについては特に迷うことなく設定できると思いますが、一部イレギュラーなケースや気を付けておきたい点について触れておきたいと思います。

実際に遭遇してみないと理解しにくい少しややこしい箇所もあるので、イレギュラーが発生しない一般的なプラグインの翻訳編集を行う場合は、この章はスルーしてもらっても特に問題ありません。

読み込まれるMOファイルの優先順位

本記事で取り上げているMailPoetを例に説明しますが、プラグインの翻訳ファイル(PO/MO)の設置場所は基本的には以下のように、

  1. /wp-content/plugins/mailpoet/languages/mailpoet-ja.mo
  2. /wp-content/languages/plugins/mailpoet-ja.mo

固有のpluginsディレクトリ配下にあるケースとlanguagesディレクトリ配下に設置してある2通りのケースがあります。

読み込まれる優先順位は、1.のplugins>プラグイン名>languages/に格納されているMOファイルが存在する場合はそちらが優先され、そこにファイルが存在しない場合は、2.に格納されているファイルを読みに行きます。(この他にも読み込み時の優先順位のルールが存在しますが、ここでは割愛します)

Loco Translateで編集する場合は仮に1.と2.の両方にPOファイルが存在する場合は両方のPOファイルが編集対象としてOverviewの一覧に表示され、いずれのファイルも編集することができますが、実際にページに反映されるのは優先順位の高い1.のファイルになります。

翻訳ファイル(PO/MO)が両方のフォルダに存在するプラグインでは編集するファイルに気を付けたい所です。

【イレギュラーな事例】POファイルまでのパス設定

日本語化対応が既になされているプラグインでは翻訳ファイル(PO/MO)はデフォルトではlanguagesディレクトリ内に格納されています。
※前述の1.か2.もしくは両方のディレクトリに格納されています。

Loco Translateでは編集時に参照するPOTファイル(翻訳用のテンプレート)やPOファイルまでのパス(Domain path)の文字列を設定する箇所があり、大半の場合は初期状態では「languages」がセットされています。

図12:Domain path
図12:Domain path

これは前述の通り、翻訳ファイルはlanguagesディレクトリ配下に格納されるルールが一般的だからです。

但し中にはプラグイン固有のディレクトリ配下の翻訳用ディレクトリ名がlanguagesではないケースがあります。

本記事で取り上げたMailPoetもそのひとつで、デフォルトではlanguagesではなくlangディレクトリ配下にMOファイルが格納されていました。 (テンプレート内の環境設定ファイルには直接記述で/lang/ディレクトリが参照されるように書かれていました)

さらに厄介なことに・・・プラグイン固有のディレクトリ内では/lang/配下に翻訳ファイル(PO/MO)があるのですが、もう1点は/wp-content/plugins/mailpoet/languages/配下に翻訳ファイル(PO/MO)が設置されています。

つまりインストール時の翻訳ファイルの設置場所は以下のような感じです。

  1. /wp-content/plugins/mailpoet/lang/mailpoet-ja.mo
  2. /wp-content/languages/plugins/mailpoet-ja.mo

これによってどういった状況が発生するかというと、

  • mailpoetプラグインの翻訳は1.が優先反映される
  • Loco Transleteで編集対象となる翻訳ファイルは2.が対象となる
  • Loco Transleteで1.は編集できない(/languages/を参照して読みに行くため1.はリストから除外されている)

結果、Loco Transleteで編集した内容が実際のページに反映されない、という現象が発生しました。

そういう時に役に立つのが、プラグイン選択後トップ画面のAdvancedタブから設定を行うAdvanced configurationです。

テンプレートファイルやパス(Domain path)を任意のパスに変更することで、Loco Translate内で編集対象となる翻訳ファイル(PO)を最適化することができます。

図13:Advanced configuration
図13:Advanced configuration

ここでは初期状態で「languages」となっていた参照パスをMailPoetのテンプレに合わせて「lang」と変更しました。

これにより/plugins/mailpoet/lang/mailpoet-ja.poをLoco Translate上で編集できるようになり、実際のページに日本語翻訳の修正内容を反映することができました。

MOファイルはあるけどPOファイルが存在しないケース

これもMailPoetプラグインで該当する事例なのですが、プラグイン固有フォルダ内にビルトインされていたのはMOファイルだけで、POファイルが見当たりませんでした。

通常はPOファイルを編集・保存⇒MOファイルにコンパイルという流れになるので、POファイルがない場合は翻訳の再編集ができません。
これは日本語がおかしい場合は致命的です。 (笑)

POTファイルはあったので、そこから作ることは可能ですが・・・既に日本語化対応がされている状態のコンパイル済みMOファイルがあるのなら、再編集をすることが可能なPOファイルも同梱しておくのが親切というものだと思いますが、とにかくありませんでした。

こういったMOファイルしかビルトインされていない、というケースは他のプラグインでもよくあるケースかもしれませんが、そういった場合でもMOファイル⇒POファイルに逆コンパイルすることでPOファイルを作ることが可能です。

今回はMOファイルから逆コンパイルしてPOファイルを用意しました。

ちなみに/wp-content/languages/plugins/配下の方にはPOファイルがあったのですが、翻訳対応状況が異なっていたので、今回はプラグイン固有フォルダ内のMOから逆コンパイルしたかったのです。。。

ということでPOファイルが見当たらない場合はMOファイルから逆コンパイルして生成することが可能だということを覚えておいてください。

大事なポイントなので2度マーキングしました。

この辺りについては使用するツールと併せて後日別記事で紹介したいと思います

プラグイン更新時の上書きによるPO/MOファイル先祖帰り対策

こうして紆余曲折ありながらも何とか翻訳ファイルを編集して無事リリース!

となってからも全く油断はできません。
WP管理画面から対象プラグインの更新を行うと見事に翻訳部分も初期状態に戻ってしまいます。 (笑)

この忌まわしき先祖帰りを回避する方法は主に3つあります。

  1. フィルターフックを使って子テーマ内に設置したlanguages配下の翻訳ファイルを読みに行くようにfunctions内に記述する
  2. プラグインの更新を管理画面から行わなずに手動アップデートする&翻訳ファイル(PO/MO)は上書きしない
  3. 翻訳ファイル(PO/MO) のバージョン管理をローカルで行う

1.はミスが発生しにくいという点では最も安全かつスマートですね。

2.は簡単ですが手動ゆえに、事情を知らない人が作業すると、、、更新ファイルをマルっとアップしておきましたよー(^^) ⇒ 先祖帰り発生!なんてことがあるかもですね。(笑)
※上位ディレクトリの/languages/plugins/配下の翻訳ファイルは上書き更新されません。

3.は何でもかんでもバージョン管理第一!というウェブ制作会社が選択しそうな方法ですね。
プラグインに依存するのを嫌がる制作者も多いので、知識や技術がある場合は翻訳ファイルはローカルでバージョン管理するのもアリかもですね。

いずれの方法にも共通して言えることは、、、ローカルで管理する場合でも翻訳ファイル(PO)の修正自体はLoco Translateで行うことで修正工数は大幅に抑えられる!ということです。

Gitなどのバージョン管理システムを導入してからは、先祖帰りに遭遇する機会は減りましたが、制作側としてはなるべく聞きたくない言葉ですね。

ここで挙げた方法についても後日機会があれば別記事として取り上げたいと思います。

まとめ

国産のテーマやプラグインでも優秀なものは数多くありますが、世界的に見れば海外製テーマやプラグインの方が圧倒的に利用者・開発者ともに数が多くマーケットも大きいため、その結果ライバルが多くなり競争力も高く優秀なテーマやプラグインが生まれやすい環境にあります。

無料で提供されている海外製テーマやプラグインの中でも高品質で使い勝手のよいものは多いですが、導入のネックとなるのは日本語化対応ですよね。

ひとつずつ拾って修正していくのはけっこうな手間で、プラグイン更新の都度検証も必要になるため、運用コストがそれなりに膨らみがちです。

Loco Translateプラグインはそんな時の大きな助けとなることでしょう。

プラグイン配布の公式サイトで星4.9が付けられているのは伊達じゃなく、非常に使い勝手のよいプラグインだという印象でした。

導入コストも低く、UIも分かりやすいので、普通に日本語翻訳を編集する用途で使う分には大変便利なプラグインだと思います。

一部特殊なケースを除いて気を付けるべきは、読み込まれるMOファイルの優先順位プラグイン更新時の上書きによるPO/MOファイル先祖帰りです。

ここさえ気を付ければ問題なく便利に使っていけるでしょう。

ちなみに本プラグインとは関係ありませんが、WordPressの開発者はマット・マレンウェッグというアメリカ人らしいですね。

本記事を書く際にふと気になって経歴を調べたのですが、さすがに天才ですね。(笑)

以上、海外製テーマやプラグインの日本語翻訳ファイルの編集・管理を容易にするLoco Translateのご紹介でした。

弊社では補助金を活用したECサイト構築支援やWordPressやshopifyに関するご相談、サイト診断や運用サポートに関する内容など、幅広い業種・業態のWeb制作・ホームページに関する無料相談を承っています。オンライン相談も実施していますので、お気軽にご相談ください。
無料で相談してみる