Learning WordPress - General API Internationalization

What internationalization is and why it's so critical. Teaches you how to apply internationalization to your WordPress code so that your website crosses the language barrier and reaches a global audience.

What is internationalization?

Internationalization is the process of developing applications in a way that can be easily translated into other languages. Internationalization is often abbreviated as i18n (because there are 18 letters between the letters i and n).

WordPress is used by multilingual people all over the world.

Therefore, any text strings in WordPress need to be encoded so that they can be easily translated into other languages.

The process of ensuring that a text string is translatable is called internationalization, while the process of translating the string and adapting it to a specific location is called localization.

Although localization is beyond the scope of this tutorial, you can find out more about it in the General API Manual'sThe Localization section reads more about it.

As a developer, you may not be able to localize for all users; however, by using i18n functions and tools to create specific files, translators can successfully localize your code without modifying the source code itself.

Internationalization is nothing.

Internationalization is different from making sure your content is available in multiple languages on the front end of your website. This is often referred to as making sure your content is multilingual or translated. Since content is stored in a database, it's a good idea to have a fully translated copy of your website for each language you want to support. This can be done using theTranslatePress,PolylangmaybeWeGlot et al.plugin to do so.

How to Internationalize Your Code

Whenever you find yourself writing a text string to be displayed to the user, you should use theWordPress i18n Functionsto make sure it can be translated. There are a number of i18n functions available, each performing a different task related to internationalization.

Let's look at the most basic i18n function:__() functionThis function takes a text string and returns a translated version of that string. This function takes a text string and returns a translated version of that string. If no translation is available, the original string is returned.

You will also notice that this function and most other i18n functions take a second argument. This parameter is used to specify the text field. The text field is a unique identifier for your plugin or theme. It is used to ensure that the correct translation file is loaded.

The text field is also used to create translation files. The final translation file is stored in thelanguagesfolder of your plugin or theme. The filename is the name of the folder with the.moextension for a text field. For example, if your text field ismy-textdomainthen the translated file will bemy-textdomain.moThe

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

To understand how it works, let's look at an example:

at thatfunctions.phpfile, the JavaScript file is queued in the context of the WordPress dashboard, and it also registers a submenu item in the Appearance menu that presents the child theme settings page.

<?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>Twenty Twenty Three Child Settings</h1>
        <p>This is a settings page for the Twenty Twenty Three Child theme</p>
        <button id="twentytwentythreechild-settings-button" class="button button-primary">Alert</button>
    </div>
    <?php
}

The Settings page contains a button that, when clicked, displays an alert.

This alert is handled in the theme's JavaScript file.

/**
 * Add event listener to the button
 */
document.querySelector( '#twentytwentythreechild-settings-button' ).addEventListener( 'click', function(){
    alert( 'Settings button clicked' );
} );

In this code, you have a number of English text strings that need to be translated.

The first step is to internationalize the text strings in your PHP code. To do this, you can add the__()function wraps a text string and specifies the text field.

First update the text string in the functiontwentytwentythreechild_add_submenu_page()The

/**
 * Create an admin submenu item under the "Appearance" menu.
 */
add_action( 'admin_menu', 'twentytwentythreechild_add_submenu_page' ); function twentytwentythreechild_add_submenu_page() { { add_add_submenu_page()
function twentytwentythreechild_add_submenu_page() {
    add_submenu_page(
        'themes.php', // parent slug
        __( 'Twenty Twenty Three Child', 'twentytwentythreechild' ), // page title
        __( 'Twenty Twenty Three Child', 'twentytwentythreechild' ), // menu title
        'manage_options', // capability
        'twentytwentythreechild', // slug
        'twentytwentythreechild_display_page' // callback
    );
}

You can perform the same operation on the text string in the functiontwentytwentythreechild_display_page()The

/**
 * Render the page for the submenu item.
 */
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
}

WordPress also includes a shorthand function to bring back translatable strings. This function is the_e()function. It both translates and returns the string. You can use this function to simplify your code.

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
}

Next, you need to internationalize the text strings in your JavaScript file. To do this, there is an internationalization program that works with the PHP__()The JavaScript equivalent of the function is available in the wp.i18n object on the WordPress frontend. To make sure you can use this function, you'll need to update yourtwentytwentythreechild_enqueue_scripts()function to request that thewp-i18npackage as a dependency. This will ensure that only thewp-i18nLoad the package andwp.i18nJavaScript code is loaded when the object is available.

/**
 * Enqueue theme.js file in the dashboard.
 */
add_action( 'admin_enqueue_scripts', 'twentytwentythreechild_enqueue_scripts' ); function twentytwentythreechild_enqueue_scripts(); }
function twentytwentythreechild_enqueue_scripts() {
    wp_enqueue_script(
        'twentytwentythreechild-theme-js',
        get_stylesheet_directory_uri() . '/assets/theme.js',
        array( 'wp-i18n' ),
        '1.0.0',
        true
    );
}

Then, you need to call the script to be translated with thewp_set_script_translationsfunction (math.). This function takes a script handle and a text field as arguments. This will load the translation of the script.

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

Once this is done, you can use the__()function to translate text strings in JavaScript files.

/**
 * Add event listener to the button
 */
document.querySelector( '#twentytwentythreechild-settings-button' ).addEventListener( 'click', function(){
    alert( __( 'Settings button clicked', 'twentytwentythreechild' ) );;
} );

How to Test Your Internationalization Features

Once you have set up your code to use the i18n functions, you can test it by generating a POT file. This is the file that translators use to create translation files. You can use theWP CLIGenerate a POT file.

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

This will scan the code in the plugin or theme for any translatable strings and put them into the POT file.

Internationalization Guide

It is important to follow best practices when internationalizing your code.

Under Internationalization in the General API section of the WordPress Developer Resources, there is a page on Internationalization Guidelines, so just familiarize yourself with it.

Additionally, if you plan to submit a theme to the WordPress Theme Directory, you should read the Theme Reviewer's Handbook regarding theLanguage and internationalizationThe part of the

This will scan the code in the plugin or theme for any translatable strings and put them into the POT file.

Internationalization Guide

It is important to follow best practices when internationalizing your code.

Under Internationalization in the General API section of the WordPress Developer Resources, there is a page on Internationalization Guidelines, so just familiarize yourself with it.

Additionally, if you plan to submit a theme to the WordPress Theme Directory, you should read the Theme Reviewer's Handbook regarding theLanguage and internationalizationThe part of the

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off