plugin Internationalizing JavaScript
WordPress provides a function called wp_localize_script() that enables you to pass translated text to an external fi le. You can then use the translated strings within your JavaScript
wp_localize_script( $handle, $object_name, $l10n );
Plugin will add two input buttons to the site ’ s footer. When either of the buttons is clicked, a translated message appears. The fi rst step is to create a new plugin folder called ssd - alert - box and place a new PHP fi le called ssd - alert - box.php in this folder. In the ssd - alert - box.php fi le, add your plugin information. Next, you need to load your translation using load_plugin_textdomain. At this point, you need to load your script using the wp_enqueue_script() function. After calling that function, you can localize your script using the wp_localize_script() function. Now you add a couple of fun input buttons to the footer of the site. Notice the use of the esc_attr__() function from earlier in the chapter to translate and escape the value attributes of the buttons. The last step - add a JavaScript fi le called ssd - alert - box - script.js to your plugin folder. After it ’ s created, you can add two functions for displaying the alert boxes on screen. Within the ssd - alert - box - script.js file , add the JavaScript
/** * Plugin Name: ssd Alert Box * Plugin URI: http://example.com * Description: A plugin example that places two input buttons in the blog footer that when clicked display an alert box. * Version: 0.1 */ /* Add the translation function after the plugins loaded hook. */ add_action( 'plugins_loaded', 'ssd_alert_box_load_translation' ); /** * Loads a translation file if the paged being viewed isn't in the admin. * * @since 0.1 */ function ssd_alert_box_load_translation() { /* If we're not in the admin, load any translation of our plugin. */ if ( !is_admin() ) load_plugin_textdomain( 'ssd-alert-box', false, 'ssd-alert-box/languages' ); } /* Add our script function to the print scripts action. */ add_action( 'wp_print_scripts', 'ssd_alert_box_load_script' ); /** * Loads the alert box script and localizes text strings that need translation. * * @since 0.1 */ function ssd_alert_box_load_script() { /* If we're in the WordPress admin, don't go any farther. */ if ( is_admin() ) return; /* Get script path and file name. */ $script = trailingslashit( plugins_url( 'ssd-alert-box' ) ) . 'ssd-alert-box-script.js'; /* Enqueue our script for use. */ wp_enqueue_script( 'ssd-alert-box', $script, false, 0.1 ); /* Localize text strings used in the JavaScript file. */ wp_localize_script( 'ssd-alert-box', 'ssd_alert_box_L10n', array( 'ssd_box_1' => __( 'Alert boxes are annoying!', 'ssd-alert-box' ), 'ssd_box_2' => __( 'They are really annoying!', 'ssd-alert-box' ), ) ); } /* Add our alert box buttons to the site footer. */ add_action( 'wp_footer', 'ssd_alert_box_display_buttons' ); /** * Displays two input buttons with a paragraph. Each button has an onClick() event that loads * a JavaScript alert box. * * @since 0.1 */ function ssd_alert_box_display_buttons() { /* Get the HTML for the first input button. */ $ssd_alert_box_buttons = '<input type="button" onclick="ssd_show_alert_box_1()" value="' . esc_attr__( 'Press me!', 'ssd-alert-box' ) . '" />'; /* Get the HTML for the second input button. */ $ssd_alert_box_buttons .= '<input type="button" onclick="ssd_show_alert_box_2()" value="' . esc_attr__( 'Now press me!', 'ssd-alert-box' ) . '" />'; /* Wrap the buttons in a paragraph tag. */ echo '<p>' . $ssd_alert_box_buttons . '</p>'; } //Code snippet ssd - alert - box - script.js /** * Displays an alert box with our first translated message when called. */ function ssd_show_alert_box_1() { alert( ssd_alert_box_L10n.ssd_box_1 ); } /** * Displays an alert box with our second translated message when called. */ function ssd_show_alert_box_2() { alert( ssd_alert_box_L10n.ssd_box_2 ); }
When translators create translations of your plugin, they use your plugin ’ s POT fi le to create two fi les: ssd - alert - box - $locale.mo and ssd - alert - box - $locale.po. ssd - alert - box is the $domain parameter used in the translation functions throughout the plugin. $locale is a variable that represents the language and regional dialect. Using Poedit from the “ Translating Tools ” section, you can create a POT fi le. You need to input only a few pieces of information, and Poedit does the rest for you.
//lang/ssd-alert-box.pot msgid "" msgstr "" "Project-Id-Version: Tricks localizing\n" "Report-Msgid-Bugs-To: \n" "POT-Creation-Date: 2013-06-28 23:34-0600\n" "PO-Revision-Date: 2013-06-28 23:35-0600\n" "Last-Translator: Serhii <>\n" "Language-Team: Serhii\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=UTF-8\n" "Content-Transfer-Encoding: 8bit\n" "X-Poedit-KeywordsList: _e;__;esc_attr_e;esc_attr__;esc_html_e;esc_html__;_x;_ex;esc_attr_x;esc_html_x;_n;_nx;_n_noop;_nx_noop\n" "X-Poedit-Basepath: ../\n" "X-Poedit-SearchPath-0: .\n" #: tom-alert-box.php:48 msgid "Alert boxes are annoying!" msgstr "" #: tom-alert-box.php:49 msgid "They are really annoying!" msgstr "" #: tom-alert-box.php:65 msgid "Press me!" msgstr "" #: tom-alert-box.php:68 msgid "Now press me!" msgstr ""
View profile Serhii Dymenko
Leave a Comment