国際化

国際化とは何か ?

国際化とはソフトウエア、特にここでは WordPress に対して複数言語のサポートを提供するプロセスを指します。国際化は i18n とも表記されます。これは「国際化」の原語の「Internationalization」の先頭の i と 最後の n の間に18文字あることから来ています。

プラグインやテーマを国際化することで世界中のユーザーに使ってもらうことができます。あなた自身がすべての言語の翻訳ファイルを作成する必要はありません。作成したソフトウエアを WordPress.org にアップロードすると、すべての JavaScript と PHP ファイルが自動でパースされ、見つかった翻訳文字列は translate.wordpress.org に追加され、コミュニティが翻訳できるようになります。結果、多くの言語でプラグインやテーマを利用することができます。

PHP に対して WordPress には歴史ある確立したプロセスがあります。How to Internationalize Your Plugin を参照してください。WordPress 5.0 のリリースに際しては JavaScript コードの翻訳にも同様のプロセスが導入されました。

JavaScript での国際化

WordPress 5.0 では wp-i18n JavaScript パッケージが導入され、PHP 同様、翻訳可能な文字列の追加に必要な関数が提供されました。

まずはじめにスクリプトを登録する際、依存性に wp-i18n を追加します。

<?php
/**
 * Plugin Name: Simple Block
 * Text Domain: myguten
 */
function myguten_simple_block_init() {
    wp_register_script(
        'myguten-script',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-i18n' )
    );	

    register_block_type( 'myguten/simple-block', array(
        'editor_script' => 'myguten-script',
    ) );
}
add_action( 'init', 'myguten_simple_block_init' );

これでコードに国際化関数を加えられます。もっともよく使われる関数が単純な文字列の翻訳を返す __ (下線2個) です。以下は基本的な静的ブロックの例です。ファイル名を block.js とします。

ES5

const { __ } = wp.i18n;
const el = wp.element.createElement;
const { registerBlockType } = wp.blocks;

registerBlockType( 'myguten/simple', {
    title: __( 'Simple Block', 'myguten' ),
    category: 'widgets',

    edit: () => {
        return el(
            'p',
            { style: { color: 'red' } },
            __( 'Hello World', 'myguten' )
        );
    },

    save: () => {
        return el(
            'p',
            { style: { color: 'red' } },
            __( 'Hello World', 'myguten' )
        );
    },
} );

ESNext の場合は npm init @wordpress/block --namespace myguten simple-block を実行し、src/index/js に次のコードを記入してください。

ESNext

import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';

registerBlockType('myguten/simple-block', {
    title: __('Simple Block', 'myguten'),
    category: 'widgets',

    edit: ({ className }) => {
        return (
            <p className={className} >
                {__('Hello World', 'myguten')}
            </p>
        )
    },

    save: ({ className }) => {
        return (
            <p className={className} >
                {__('Hello World', 'myguten')}
            </p>
        )
    },
});

上の例で関数は最初の引数に翻訳対象の文字列を取ります。2番めの引数はテキストドメインです。プラグインで指定したテキストドメインのスラッグに合致する必要があります。

利用可能な一般的な関数を挙げます。これらは PHP 関数のミラーです。

  • __( 'Hello World', 'my-text-domain' ) – 指定した文字列を翻訳します。
  • _n( '%s Comment', '%s Comments', numberOfComments, 'my-text-domain' ) – 与えた数値により単数形か複数形の翻訳を返します。
  • _x( 'Default', 'block style', 'my-text-domain' ) – 追加のコンテキストにより指定した文字列を翻訳します。

注意: ユーザーに表示されるすべての文字列は国際化関数でラップしてください。

コードのすべての文字列を国際化関数でラップしたら、最後に WordPress に対して JavaScript に翻訳が含まれることを伝えます。wp_set_script_translations() 関数を使用します。

<?php
  function myguten_set_script_translations() {
    wp_set_script_translations( 'myguten-script', 'myguten' );
  }
add_action( 'init', 'myguten_set_script_translations' );

プラグインの JavaScript 翻訳にあたって必要な作業はすべてです。

スクリプトの翻訳を設定すると WordPress は自動的に translate.wordpress.org で翻訳ファイルの存在を確認し、プラグインの実行前に wp.i18n へロードします。プラグインの作者が translate.wordpress.org にて翻訳用のインフラを準備する必要はありません。グローバルコミュニティと多数のアクティブなロケールにまかせてください。詳細については WordPress の翻訳 を参照してください。

自分で翻訳を提供する場合

プラグイン作者が対象の言語に対して十分なスキルをもつ場合には、自身で翻訳を作成し、リリースすることも可能です。

翻訳ファイルの作成

翻訳ファイルは JED 1.x JSON フォーマットでなければなりません。

JED 翻訳ファイルを作成するには、まずテキストから文字列を抽出する必要があります。一般にすべての言語ファイルはプラグインの languages ディレクトリにあります。WP-CLI の場合、プラグインディレクトリで以下のコマンドを実行すると .pot ファイルを作成できます。

mkdir languages
wp i18n make-pot ./ languages/myguten.pot

プロジェクトからのすべての翻訳可能文字列を含むファイル myguten.pot が生成されます。

# Copyright (C) 2020 
# This file is distributed under the same license as the Simple Block plugin.
msgid ""
msgstr ""
"Project-Id-Version: Simple Block\n"
"Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/simple-block\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"POT-Creation-Date: 2020-05-04T10:48:26+00:00\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"X-Generator: WP-CLI 2.4.0\n"
"X-Domain: myguten\n"

#. Plugin Name of the plugin
#: block.js:6
msgid "Simple Block"
msgstr ""

#: block.js:13
#: block.js:21
msgid "Hello World"
msgstr ""

ここで msgid は翻訳される文字列で msgstr は実際の翻訳です。POT ファイルでは msgstr は常に空です。

この POT ファイルを新しい翻訳のテンプレートとして使ることができます。翻訳予定の言語コードを使用して ファイルをコピー してください。この例では日本語 (ja) を使用します。

cp myguten.pot myguten-ja.po

この簡単な例であればエディターで .po ファイルを編集し、すべての msgstr に対して翻訳を追加できますが、もっと大量で複雑な翻訳用にGlotPress や Poedit などの支援ツールがあります。

また Language: ja パラメータを追加する必要があります。完全な myguten-ja.po 翻訳ファイルは以下のようになります。

# Copyright (C) 2020 
# This file is distributed under the same license as the Simple Block plugin.
msgid ""
msgstr ""
"Project-Id-Version: Simple Block\n"
"Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/simple-block\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n"
"Language: ja\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"POT-Creation-Date: 2020-05-04T10:48:26+00:00\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"X-Generator: WP-CLI 2.4.0\n"
"X-Domain: myguten\n"

#. Plugin Name of the plugin
#: block.js:6
msgid "Simple Block"
msgstr "シンプルブロック"

#: block.js:13
#: block.js:21
msgid "Hello World"
msgstr "こんにちは"

翻訳ファイルを作成する最後のステップは myguten-ja.po から必要な JSON フォーマットへの変換です。これには WP-CLI の wp i18n make-json コマンドを使うことができます。ただし WP-CLI v2.2.0 以上が必要です。

wp i18n make-json myguten-ja.po --no-purge

以下の内容で JSON ファイル myguten-ja-[md5].json が生成されます。

{
    "translation-revision-date": "YEAR-MO-DA HO:MI+ZONE",
    "generator": "WP-CLI\/2.4.0",
    "source": "block.js",
    "domain": "messages",
    "locale_data": {
        "messages": {
            "": {
                "domain": "messages",
                "lang": "ja",
                "plural-forms": "nplurals=2; plural=(n != 1);"
            },
            "Simple Block": [
                "\u30b7\u30f3\u30d7\u30eb\u30d6\u30ed\u30c3\u30af"
            ],
            "Hello World": [
                "\u3053\u3093\u306b\u3061\u306f"
            ]
        }
    }
}

翻訳ファイルのロード

最後に WordPress に対して翻訳ファイルがどこにあるかを伝えます。wp_set_script_translations 関数はオプションで第3引数を取り、翻訳ファイルを最初に探す場所を指定できます。例えば

<?php
function myguten_set_script_translations() {
    wp_set_script_translations( 'myguten-script', 'myguten', plugin_dir_path( __FILE__ ) . 'languages' );
}
add_action( 'init', 'myguten_set_script_translations' );

WordPress は指定されたパスで ${domain}-${locale}-${handle}.json 形式のファイルを翻訳元として調べます。代替として登録ハンドルの代わりにファイルの相対パス ${domain}-${locale} の md5 ハッシュを ${domain}-${locale}-${md5}.json の形式で使うこともできます。

make-json を使用すると自動的にファイルを md5 ハッシュで名前付けするため、そのままで準備が終わります。ファイルの名前を変更して代わりにハンドルを使うこともできます。この場合ファイル名は myguten-ja-myguten-script.json となります。

翻訳のテスト

WordPress の導入環境を日本語にする必要があります。設定 > 一般に移動し、サイトの言語を日本語に変更してください。

言語を設定したら、新規投稿を作成し、ブロックを追加し、翻訳が使われていることを確認します。

最終更新日: