WordPressを学ぶ - 一般的なAPIの国際化

国際化とは何か、なぜ国際化が重要なのか。あなたのウェブサイトが言語の壁を越えて世界中の読者に届くように、WordPressのコードに国際化を適用する方法を教えます。

国際化とは何か？

国際化とは、他の言語に簡単に翻訳できる方法でアプリケーションを開発するプロセスのことです。国際化はしばしばi18nと略されます（iとnの間に18文字があるため）。

WordPressは、多くの言語を話す人々によって世界中で使用されています。

したがって、WordPressのテキスト文字列は、他の言語に簡単に翻訳できるようにエンコードする必要があります。

文字列が翻訳可能であることを保証するプロセスは国際化と呼ばれ、文字列を翻訳して特定の場所に適合させるプロセスはローカリゼーションと呼ばれる。

ローカリゼーションについては、このチュートリアルの範囲外ですが、一般的なAPIマニュアルのローカリゼーションのセクションで詳しく説明している。

開発者として、あなたはすべてのユーザーのためにローカライズすることができないかもしれません; しかしながら、特定のファイルを作成するために国際化関数とツールを使うことによって、翻訳者はソースコード自体に変更を加えることなく、あなたのコードをうまくローカライズすることができます。

国際化は何でもない

国際化とは、ウェブサイトのフロントエンドでコンテンツが多言語で利用できるようにすることとは異なります。これは、コンテンツが多言語化または翻訳されていることを確認することとよく呼ばれます。コンテンツはデータベースに保存されるため、サポートしたい言語ごとに完全に翻訳されたウェブサイトのコピーを用意するのがよいでしょう。これは翻訳プレスそしてポリランもしかしたらWeGlotら。プラグインで実現できる。

コードを国際化する方法

ユーザーに表示するテキスト文字列を書くときは、必ずWordPressの国際化機能で翻訳できることを確認します。多くの国際化関数が利用可能で、それぞれが国際化に関連する異なるタスクを実行します。

最も基本的な国際化関数を見てみよう：__() 機能この関数はテキスト文字列を受け取り、その文字列を翻訳したものを返します。この関数はテキスト文字列を受け取り、その文字列を翻訳したものを返す。翻訳がない場合は、元の文字列が返されます。

また、この関数と他のほとんどの国際化関数は第2引数を取ることにお気づきでしょう。このパラメーターはテキストフィールドを指定するために使われます。テキストフィールドはプラグインもしくはテーマのためのユニークな識別子です。正しい翻訳ファイルが読み込まれることを保証するために使われます。

テキストフィールドは翻訳ファイルの作成にも使用されます。最終的な翻訳ファイルは言語フォルダにコピーします。ファイル名は.moテキストフィールドの拡張子。例えば、テキスト・フィールドがマイテキストドメイン翻訳されたファイルはマイ・テキスト・ドメイン.mo.

__( 'Some Text', 'my-textdomain' ).
__( 'Some Text', 'my-textdomain' ).
__( 'Some Text', 'my-textdomain' ).

その仕組みを理解するために、例を見てみよう：

それはfunctions.phpファイルを作成すると、JavaScriptファイルはWordPressダッシュボードのコンテキストにキューイングされ、子テーマの設定ページを表示する「外観」メニューのサブメニュー項目も登録されます。

<?php
/**
 * Enqueue theme.js file in the dashboard.
 */
add_action( 'admin_enqueue_scripts', 'twentytwentythreechild_enqueue_scripts' );
function twentytwentythreechild_enqueue_scripts() {
    wp_enqueue_script(
        'twentytwentythreechild-theme-js',
        get_stylesheet_directory_uri() . '/assets/theme.js',
        array(),
        '1.0.0',
        true
    );
}
/**
 * Create a submenu item under the "Appearance" menu.
 */
add_action( 'admin_menu', 'twentytwentythreechild_add_submenu_page' );
function twentytwentythreechild_add_submenu_page() {
    add_submenu_page(
        'themes.php', 
        'Twenty Twenty Three Child', 
        'Twenty Twenty Three Child',
        'manage_options', 
        'twentytwentythreechild', 
        'twentytwentythreechild_display_page' 
    );
}
/**
 * Render the page for the submenu item.
 */
function twentytwentythreechild_display_page() {
    ?>
    <div class="wrap">
        <h1>二十二三人の子供の設定</h1>
        <p>これはTwenty Twenty Three Childテーマの設定ページです。</p>
        <button id="twentytwentythreechild-settings-button" class="button button-primary">アラート</button>
    </div>
    <?php
}
<?php
/**
 * Enqueue theme.js file in the dashboard.
 */
add_action( 'admin_enqueue_scripts', 'twentytwentythreechild_enqueue_scripts' );
function twentytwentythreechild_enqueue_scripts() {
    wp_enqueue_script(
        'twentytwentythreechild-theme-js',
        get_stylesheet_directory_uri() . '/assets/theme.js',
        array(),
        '1.0.0',
        true
    );
}

/**
 * Create a submenu item under the "Appearance" menu.
 */
add_action( 'admin_menu', 'twentytwentythreechild_add_submenu_page' );
function twentytwentythreechild_add_submenu_page() {
    add_submenu_page(
        'themes.php', 
        'Twenty Twenty Three Child', 
        'Twenty Twenty Three Child',
        'manage_options', 
        'twentytwentythreechild', 
        'twentytwentythreechild_display_page' 
    );
}

/**
 * Render the page for the submenu item.
 */
function twentytwentythreechild_display_page() {
    ?>
    <div class="wrap">
        <h1>二十二三人の子供の設定</h1>
        <p>これはTwenty Twenty Three Childテーマの設定ページです。</p>
        <button id="twentytwentythreechild-settings-button" class="button button-primary">アラート</button>
    </div>
    <?php
}
<?php
/**
 * Enqueue theme.js file in the dashboard.
 */
add_action( 'admin_enqueue_scripts', 'twentytwentythreechild_enqueue_scripts' );
function twentytwentythreechild_enqueue_scripts() {
    wp_enqueue_script(
        'twentytwentythreechild-theme-js',
        get_stylesheet_directory_uri() . '/assets/theme.js',
        array(),
        '1.0.0',
        true
    );
}

/**
 * Create a submenu item under the "Appearance" menu.
 */
add_action( 'admin_menu', 'twentytwentythreechild_add_submenu_page' );
function twentytwentythreechild_add_submenu_page() {
    add_submenu_page(
        'themes.php', 
        'Twenty Twenty Three Child', 
        'Twenty Twenty Three Child',
        'manage_options', 
        'twentytwentythreechild', 
        'twentytwentythreechild_display_page' 
    );
}

/**
 * Render the page for the submenu item.
 */
function twentytwentythreechild_display_page() {
    ?>
    <div class="wrap">
        <h1>二十二三人の子供の設定</h1>
        <p>これはTwenty Twenty Three Childテーマの設定ページです。</p>
        <button id="twentytwentythreechild-settings-button" class="button button-primary">アラート</button>
    </div>
    <?php
}

設定ページにはボタンがあり、クリックするとアラートが表示されます。

このアラートはテーマのJavaScriptファイルで処理されます。

/**
 * ボタンにイベント・リスナーを追加する
 */
document.querySelector( '#twentythreechild-settings-button' ).addEventListener( 'click', function(){ '設定ボタンがクリックされました。
    alert( '設定ボタンがクリックされました' )；
} );
/**
 * ボタンにイベント・リスナーを追加する
 */
document.querySelector( '#twentythreechild-settings-button' ).addEventListener( 'click', function(){ '設定ボタンがクリックされました。
    alert( '設定ボタンがクリックされました' )；
} );
/**
 * ボタンにイベント・リスナーを追加する
 */
document.querySelector( '#twentythreechild-settings-button' ).addEventListener( 'click', function(){ '設定ボタンがクリックされました。
    alert( '設定ボタンがクリックされました' )；
} );

このコードでは、翻訳が必要な英語のテキスト文字列がいくつもある。

最初のステップは、PHPコード内の文字列を国際化することです。これを行うには__()関数はテキスト文字列をラップし、テキスト・フィールドを指定する。

まず、関数twentytwentythreechild_add_submenu_page().

/**
 * 外観」メニューの下に管理サブメニュー項目を作成する。
 */
add_action( 'admin_menu', 'twentytwentythreechild_add_submenu_page' ); function twentytwentythreechild_add_submenu_page() { { add_submenu_page()
関数twentythreechild_add_submenu_page() { { add_submenu_page()
    add_submenu_page(
        'themes.php', // 親スラッグ
        __( 'Twenty Twenty Three Child', 'twentytwentythreechild' ), // ページタイトル
        __( 'Twenty Twenty Three Child', 'twentytwentythreechild' ), // メニュータイトル
        'manage_options', // ケーパビリティ
        'twentytwentythreechild', // スラッグ
        'twentytwentythreechild_display_page' // コールバック
    );
}
/**
 * 外観」メニューの下に管理サブメニュー項目を作成する。
 */
add_action( 'admin_menu', 'twentytwentythreechild_add_submenu_page' ); function twentytwentythreechild_add_submenu_page() { { add_submenu_page()
関数twentythreechild_add_submenu_page() { { add_submenu_page()
    add_submenu_page(
        'themes.php', // 親スラッグ
        __( 'Twenty Twenty Three Child', 'twentytwentythreechild' ), // ページタイトル
        __( 'Twenty Twenty Three Child', 'twentytwentythreechild' ), // メニュータイトル
        'manage_options', // ケーパビリティ
        'twentytwentythreechild', // スラッグ
        'twentytwentythreechild_display_page' // コールバック
    );
}
/**
 * 外観」メニューの下に管理サブメニュー項目を作成する。
 */
add_action( 'admin_menu', 'twentytwentythreechild_add_submenu_page' ); function twentytwentythreechild_add_submenu_page() { { add_submenu_page()
関数twentythreechild_add_submenu_page() { { add_submenu_page()
    add_submenu_page(
        'themes.php', // 親スラッグ
        __( 'Twenty Twenty Three Child', 'twentytwentythreechild' ), // ページタイトル
        __( 'Twenty Twenty Three Child', 'twentytwentythreechild' ), // メニュータイトル
        'manage_options', // ケーパビリティ
        'twentytwentythreechild', // スラッグ
        'twentytwentythreechild_display_page' // コールバック
    );
}

同じことをテキスト文字列で行うことができる。twentytwentythreechild_display_page().

/**
 * サブメニューのページをレンダリングする。
 */
function twentytwentythreechild_display_page() { ?
    ?>
    <div class="wrap">
        <h1><?php echo __( 'Twenty Twenty Three Child Settings', 'twentytwentythreechild' ); ?></h1>
        <p><?php echo __( 'This is a settings page for the Twenty Twenty Three Child theme', '__' ); ?></p>
        <button id="twentytwentythreechild-settings-button" class="button button-primary"><?php echo __( 'Alert', 'twentytwentythreechild' ); ?></button>
    </div>
    <?php
}
/**
 * サブメニューのページをレンダリングする。
 */
function twentytwentythreechild_display_page() { ?
    ?>
    <div class="wrap">
        <h1><?php echo __( 'Twenty Twenty Three Child Settings', 'twentytwentythreechild' ); ?></h1>
        <p><?php echo __( 'This is a settings page for the Twenty Twenty Three Child theme', '__' ); ?></p>
        <button id="twentytwentythreechild-settings-button" class="button button-primary"><?php echo __( 'Alert', 'twentytwentythreechild' ); ?></button>
    </div>
    <?php
}
/**
 * サブメニューのページをレンダリングする。
 */
function twentytwentythreechild_display_page() { ?
    ?&gt;
    <div class="wrap">
        <h1><?php echo __( 'Twenty Twenty Three Child Settings', 'twentytwentythreechild' ); ?></h1>
        <p><?php echo __( 'This is a settings page for the Twenty Twenty Three Child theme', '__' ); ?></p>
        <button id="twentytwentythreechild-settings-button" class="button button-primary"><?php echo __( 'Alert', 'twentytwentythreechild' ); ?></button>
    </div>
    <?php
}

WordPressには、翻訳可能な文字列を返す省略記法関数もあります。この関数は_e()関数を使用する。この関数は文字列を翻訳して返します。この関数を使えば、コードを簡単にすることができます。

function twentytwentythreechild_display_page() { ?
    ?>{ ?
    <div class="wrap">
        <h1><?php _e( 'Twenty Twenty Three Child Settings', 'twentytwentythreechild' ); ?></h1>
        <p><?php _e( 'This is a settings page for the Twenty Twenty Three Child theme', '__' ); ?></p>
        <button id="twentytwentythreechild-settings-button" class="button button-primary"><?php _e( 'Alert', 'twentytwentythreechild' ); ?></button>
    </div>
    <?php
}
function twentytwentythreechild_display_page() { ?
    ?>{ ?
    <div class="wrap">
        <h1><?php _e( 'Twenty Twenty Three Child Settings', 'twentytwentythreechild' ); ?></h1>
        <p><?php _e( 'This is a settings page for the Twenty Twenty Three Child theme', '__' ); ?></p>
        <button id="twentytwentythreechild-settings-button" class="button button-primary"><?php _e( 'Alert', 'twentytwentythreechild' ); ?></button>
    </div>
    <?php
}
function twentytwentythreechild_display_page() { ?
    ?&gt;{ ?
    <div class="wrap">
        <h1><?php _e( 'Twenty Twenty Three Child Settings', 'twentytwentythreechild' ); ?></h1>
        <p><?php _e( 'This is a settings page for the Twenty Twenty Three Child theme', '__' ); ?></p>
        <button id="twentytwentythreechild-settings-button" class="button button-primary"><?php _e( 'Alert', 'twentytwentythreechild' ); ?></button>
    </div>
    <?php
}

次に、JavaScriptファイル内の文字列を国際化する必要があります。これを行うには、PHPで使われるものと似た国際化メソッドがあります。__()この関数に相当するJavaScriptは、WordPressフロントエンドのwp.i18nオブジェクトで利用可能です。この関数を使用できるようにするには、あなたのtwentytwentythreechild_enqueue_scripts()関数を使ってwp-i18nパッケージを依存関係とする。これによりwp-i18nパッケージをロードしwp.i18nオブジェクトが利用可能になると、JavaScriptコードがロードされる。

/**
 * ダッシュボードのtheme.jsファイルをエンキューする。
 */
add_action( 'admin_enqueue_scripts', 'twentytwentythreechild_enqueue_scripts' ); }.
関数twentytwentythreechild_enqueue_scripts() {
    wp_enqueue_scripts(
        'twentytwentythreechild-theme-js'、
        get_stylesheet_directory_uri() . '/assets/theme.js'、
        array( 'wp-i18n' )、
        '1.0.0',
        true
    );
}
/**
 * ダッシュボードのtheme.jsファイルをエンキューする。
 */
add_action( 'admin_enqueue_scripts', 'twentytwentythreechild_enqueue_scripts' ); }.
関数twentytwentythreechild_enqueue_scripts() {
    wp_enqueue_scripts(
        'twentytwentythreechild-theme-js'、
        get_stylesheet_directory_uri() . '/assets/theme.js'、
        array( 'wp-i18n' )、
        '1.0.0',
        true
    );
}
/**
 * ダッシュボードのtheme.jsファイルをエンキューする。
 */
add_action( 'admin_enqueue_scripts', 'twentytwentythreechild_enqueue_scripts' ); }.
関数twentytwentythreechild_enqueue_scripts() {
    wp_enqueue_scripts(
        'twentytwentythreechild-theme-js'、
        get_stylesheet_directory_uri() . '/assets/theme.js'、
        array( 'wp-i18n' )、
        '1.0.0',
        true
    );
}

次に、翻訳するスクリプトをwp_set_script_translations関数.この関数はスクリプトハンドルとテキストフィールドを引数にとります。これはスクリプトの翻訳をロードします。

wp_set_script_translations( 'twentytwentythreechild-theme-js', 'twentytwentythreechild' )；
wp_set_script_translations( 'twentytwentythreechild-theme-js', 'twentytwentythreechild' )；
wp_set_script_translations( 'twentytwentythreechild-theme-js', 'twentytwentythreechild' )；

これが完了したら__()関数を使用して、JavaScript ファイル内のテキスト文字列を翻訳することができます。

/**
 * ボタンにイベント・リスナーを追加する
 */
document.querySelector( '#twentythreechild-settings-button' ).addEventListener( 'click', function(){ ); ** **ボタンにイベントリスナーを追加します。
    alert( __( '設定ボタンがクリックされました', 'twentytwentythreechild' ) );；
} );
/**
 * ボタンにイベント・リスナーを追加する
 */
document.querySelector( '#twentythreechild-settings-button' ).addEventListener( 'click', function(){ ); ** **ボタンにイベントリスナーを追加します。
    alert( __( '設定ボタンがクリックされました', 'twentytwentythreechild' ) );；
} );
/**
 * ボタンにイベント・リスナーを追加する
 */
document.querySelector( '#twentythreechild-settings-button' ).addEventListener( 'click', function(){ ); ** **ボタンにイベントリスナーを追加します。
    alert( __( '設定ボタンがクリックされました', 'twentytwentythreechild' ) );；
} );

国際化機能のテスト方法

国際化関数を使うようにコードを設定したら、POTファイルを生成することでテストできます。これは翻訳者が翻訳ファイルを作成するために使うファイルです。翻訳ファイルを作成するためにWP CLIPOTファイルを作成する。

wp i18n make-pot path/to/your/plugin/or/theme
wp i18n make-pot path/to/your/plugin/or/theme
wp i18n make-pot path/to/your/plugin/or/theme

これは、プラグインやテーマのコードをスキャンして翻訳可能な文字列を探し、POTファイルに入れます。

国際化ガイド

コードを国際化する際には、ベストプラクティスに従うことが重要です。

WordPress Developer ResourcesのGeneral APIセクションのInternationalisationの下に、Internationalisation Guidelinesのページがあるので、よく理解しておくといいだろう。

さらに、WordPress Theme Directoryにテーマを投稿する予定がある場合は、Theme Reviewer's Handbookの言語と国際化の部分である。

これは、プラグインやテーマのコードをスキャンして翻訳可能な文字列を探し、POTファイルに入れます。

国際化ガイド

コードを国際化する際には、ベストプラクティスに従うことが重要です。

WordPress Developer ResourcesのGeneral APIセクションのInternationalisationの下に、Internationalisation Guidelinesのページがあるので、よく理解しておくといいだろう。

さらに、WordPress Theme Directoryにテーマを投稿する予定がある場合は、Theme Reviewer's Handbookの言語と国際化の部分である。