国際化とは何ですか?

国際化は、ソフトウェアに複数の言語サポートを提供するプロセスであり、この場合はWordPressです。国際化は通常i18nと略され、18は最初のiと最後のnの間の文字数を表します。

プラグインやテーマにi18nサポートを提供することで、追加の言語翻訳を提供することなく、可能な限り多くのオーディエンスにリーチできます。ソフトウェアをWordPress.orgにアップロードすると、すべてのJSおよびPHPファイルが自動的に解析されます。検出された翻訳文字列は、コミュニティが翻訳できるようにtranslate.wordpress.orgに追加され、WordPressのプラグインやテーマができるだけ多くの言語で利用できるようになります。

PHPの場合、WordPressには長年確立されたプロセスがあります。詳細はプラグインの国際化方法を参照してください。WordPress 5.0のリリースにより、JavaScriptコードの翻訳に対しても同様のプロセスが導入されました。

JavaScriptでi18nを使用する方法

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

まず、スクリプトを登録する際にwp-i18nを依存関係として追加します:

  1. <?php
  2. /**
  3. * Plugin Name: Myguten Plugin
  4. * Text Domain: myguten
  5. */
  6. function myguten_block_init() {
  7. wp_register_script(
  8. 'myguten-script',
  9. plugins_url( 'block.js', __FILE__ ),
  10. array( 'wp-blocks', 'react', 'wp-i18n', 'wp-block-editor' )
  11. );
  12. register_block_type( 'myguten/simple', array(
  13. 'api_version' => 3,
  14. 'editor_script' => 'myguten-script',
  15. ) );
  16. }
  17. add_action( 'init', 'myguten_block_init' );

コード内で、i18n関数を含めることができます。最も一般的な関数は__(ダブルアンダースコア)で、単純な文字列の翻訳を提供します。以下は基本的なブロックの例です:

  1. import { __ } from '@wordpress/i18n';
  2. import { registerBlockType } from '@wordpress/blocks';
  3. import { useBlockProps } from '@wordpress/block-editor';
  4. registerBlockType( 'myguten/simple', {
  5. apiVersion: 3,
  6. title: __( 'Simple Block', 'myguten' ),
  7. category: 'widgets',
  8. edit: () => {
  9. const blockProps = useBlockProps( { style: { color: 'red' } } );
  10. return <p { ...blockProps }>{ __( 'Hello World', 'myguten' ) }</p>;
  11. },
  12. save: () => {
  13. const blockProps = useBlockProps.save( { style: { color: 'red' } } );
  14. return <p { ...blockProps }>{ __( 'Hello World', 'myguten' ) }</p>;
  15. },
  16. } );

上記の例では、関数は翻訳される文字列の最初の引数を使用します。2番目の引数は、プラグインによって指定されたテキストドメインスラッグと一致する必要があるテキストドメインです。

利用可能な一般的な関数は、これらはPHPの対応物を反映しています:

  • ( 'Hello World', 'my-text-domain' ) – 特定の文字列を翻訳します。
  • _n( '%s Comment', '%s Comments', numberOfComments, 'my-text-domain' ) – 提供された数に基づいて単数形または複数形を翻訳して取得します。
  • _x( 'Default', 'block style', 'my-text-domain' ) – 追加のコンテキストを持つ特定の文字列を翻訳します。

    注意: ユーザーに表示されるすべての文字列は、i18n関数でラップする必要があります。

コード内のすべての文字列がラップされたら、最終ステップはWordPressにJavaScriptに翻訳が含まれていることを伝えることです。これにはwp_set_script_translations()関数を使用します。

  1. <?php
  2. function myguten_set_script_translations() {
  3. wp_set_script_translations( 'myguten-script', 'myguten' );
  4. }
  5. 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ファイルを作成します:

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

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

  1. msgid ""
  2. msgstr ""
  3. "Project-Id-Version: Scratch Plugin\n"
  4. "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/scratch\n"
  5. "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
  6. "Language-Team: LANGUAGE <[email protected]>\n"
  7. "MIME-Version: 1.0\n"
  8. "Content-Type: text/plain; charset=UTF-8\n"
  9. "Content-Transfer-Encoding: 8bit\n"
  10. "POT-Creation-Date: 2019-03-08T11:26:56-08:00\n"
  11. "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
  12. "X-Generator: WP-CLI 2.1.0\n"
  13. "X-Domain: myguten\n"
  14. #. Plugin Name of the plugin
  15. msgid "Scratch Plugin"
  16. msgstr ""
  17. #: block.js:6
  18. msgid "Simple Block"
  19. msgstr ""
  20. #: block.js:13
  21. #: block.js:21
  22. msgid "Hello World"
  23. msgstr ""

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

このPOTファイルは、新しい翻訳のテンプレートとして使用できます。翻訳する言語コードを使用してファイルをコピーする必要があります。この例ではエスペラント(eo)言語を使用します:

  1. cp myguten.pot myguten-eo.po

この簡単な例では、エディタで.poファイルを編集し、すべてのmsgstrセットに翻訳を追加するだけです。より大きく、より複雑な翻訳セットの場合は、GlotPressおよびPoeditツールが役立ちます。

Language: eoパラメータも追加する必要があります。ここに完全なmyguten-eo.po翻訳ファイルがあります。

  1. # 著作権 (C) 2019
  2. # このファイルはScratch Pluginプラグインと同じライセンスの下で配布されています。
  3. msgid ""
  4. msgstr ""
  5. "Project-Id-Version: Scratch Plugin\n"
  6. "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/scratch\n"
  7. "Last-Translator: Marcus Kazmierczak \<[email protected]\>\n"
  8. "Language-Team: Esperanto \<[email protected]\>\n"
  9. "Language: eo\n"
  10. "MIME-Version: 1.0\n"
  11. "Content-Type: text/plain; charset=UTF-8\n"
  12. "Content-Transfer-Encoding: 8bit\n"
  13. "POT-Creation-Date: 2019-02-18T07:20:46-08:00\n"
  14. "PO-Revision-Date: 2019-02-18 08:16-0800\n"
  15. "X-Generator: Poedit 2.2.1\n"
  16. "X-Domain: myguten\n"
  17. #. プラグインの名前
  18. msgid "Scratch Plugin"
  19. msgstr "Scratch kromprogrameto"
  20. #: block.js:6
  21. msgid "Simple Block"
  22. msgstr "Simpla bloko"
  23. #: block.js:13 block.js:21
  24. msgid "Hello World"
  25. msgstr "Saltuon mundo"

翻訳ファイルを作成する最終ステップは、myguten-eo.poを必要なJSON形式に変換することです。これには、WP-CLIのwp i18n make-jsonコマンドを使用できます。これはWP-CLI v2.2.0以降が必要です。

  1. wp i18n make-json myguten-eo.po --no-purge

これにより、内容を含むJSONファイルmyguten-eo-[md5].jsonが生成されます:

  1. {
  2. "translation-revision-date": "2019-04-26T13:30:11-07:00",
  3. "generator": "WP-CLI/2.2.0",
  4. "source": "block.js",
  5. "domain": "messages",
  6. "locale_data": {
  7. "messages": {
  8. "": {
  9. "domain": "messages",
  10. "lang": "eo",
  11. "plural-forms": "nplurals=2; plural=(n != 1);"
  12. },
  13. "Simple Block": [ "Simpla Bloko" ],
  14. "Hello World": [ "Salunton mondo" ]
  15. }
  16. }
  17. }

翻訳ファイルを読み込む

最後の部分は、WordPressに翻訳ファイルを見つける場所を伝えることです。wp_set_script_translations関数は、翻訳を最初にチェックするパスであるオプションの3番目の引数を受け入れます。例えば:

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

WordPressは、そのパスに${domain}-${locale}-${handle}.json形式のファイルがあるかどうかをチェックします。代わりに、登録されたハンドルの代わりにファイルの相対パスのmd5ハッシュを使用することもできます。${domain}-${locale} in the form of ${domain}-${locale}-${md5}.json.

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

翻訳をテストする

WordPressのインストールをエスペラント言語に設定する必要があります。設定 > 一般に移動し、サイトの言語をエスペラントに変更します。

言語が設定されたら、新しい投稿を作成し、ブロックを追加すると、使用される翻訳が表示されます。

翻訳のフィルタリング

翻訳関数(()_x()_n()、および_nx())の出力はフィルタリング可能です。詳細についてはi18nフィルターを参照してください。