带有`wp.i18n`的`wp_set_script_Translations`在简单插件中不返回已翻译的字符串

时间:2020-10-28 作者:kanlukasz

Short description:

我尝试翻译JS文件中的字符串。为了测试它,我决定创建一个简单的测试插件。我有PHP和JS字符串。翻译后的PHP字符串工作正常,JS字符串不工作。

Tools and environment:

Plugin PHP file content:

<?php

/*
 * Plugin Name: Test
 * Text Domain: test
 * Domain Path: /languages
 */

/**
 * Init all
 */
function run()
{
    wp_register_script(
        \'script\',
        plugins_url(\'script.js\', __FILE__),
        array(\'wp-i18n\'),
        false,
        true
    );
    wp_enqueue_script(\'script\');

    wp_set_script_translations(\'script\', \'test\',  dirname(plugin_basename(__FILE__)) . \'/languages/\');
    load_plugin_textdomain(\'test\', false, dirname(plugin_basename(__FILE__)) . \'/languages/\');
}
add_action(\'init\', \'run\');

/**
 * Register a custom menu page.
 */
function register_my_custom_menu_page()
{
    add_menu_page(
        \'Custom Menu Title\',
        __(\'Custom Menu\', \'test\'),
        \'manage_options\',
        \'my_custom\',
        \'callback\'
    );
}
add_action(\'admin_menu\', \'register_my_custom_menu_page\');

/**
 * Display a custom menu page
 */
function callback()
{
    esc_html_e(\'Admin Page\', \'test\'); ?>
    <h1 id="h1"></h1>
<?php }

Plugin JS file content:

const { __ } = wp.i18n;

alert(__(\'js-alert\', \'test\'));

console.log(__(\'js-log\', \'test\'));

div = document.getElementById(\'h1\');
div.innerHTML += __(\'js-html\', \'test\');
Procedure for creating translation files:

使用创建POT文件wp i18n make-pot . languages/test.potcp languages/test.pot languages/test-de_DE.pomsgstr 字符串输入test-de_DE.po添加行"Language: de_DE\\n"test-de_DE.pomsgfmt languages/test-de_DE.po -o languages/test-de_DE.mowp i18n make-json languages/test-de_DE.po --no-purge --pretty-printLanguage files structure after performing the steps above:

wp-content/plugins/test/languages/test-de_DE-9a9569e9d73f33740eada95275da7f30.json
wp-content/plugins/test/languages/test-de_DE.mo
wp-content/plugins/test/languages/test-de_DE.po
wp-content/plugins/test/languages/test.pot

The content of test-de_DE.po that was used to create the MO and JSON

# Copyright (C) 2020
# This file is distributed under the same license as the Test plugin.
msgid ""
msgstr ""
"Project-Id-Version: Test\\n"
"Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/test\\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\\n"
"Language-Team: LANGUAGE <[email protected]>\\n"
"Language: de_DE\\n"
"MIME-Version: 1.0\\n"
"Content-Type: text/plain; charset=UTF-8\\n"
"Content-Transfer-Encoding: 8bit\\n"
"POT-Creation-Date: 2020-10-28T10:43:41+01:00\\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\\n"
"X-Generator: WP-CLI 2.4.0\\n"
"X-Domain: test\\n"

#. Plugin Name of the plugin
msgid "Test"
msgstr "Test DE"

#: test.php:35
msgid "Custom Menu"
msgstr "Custom Menu DE"

#: test.php:48
msgid "Admin Page"
msgstr "Admin Page DE"

#: script.js:3
msgid "js-alert"
msgstr "js-alert-de"

#: script.js:5
msgid "js-log"
msgstr "js-log-de"

#: script.js:8
msgid "js-html"
msgstr "js-html-de"

Result on my test website:

enter image description here

Additional context:

  • wp_set_script_translations 退货true 一直以来load_plugin_textdomain 退货true 一直以来,我知道我可以wp_localize_script() 但我想完全用wp.i18n
Plugin files structure:

/test
  /languages
    test-de_DE-9a9569e9d73f33740eada95275da7f30.json
    test-de_DE.mo
    test-de_DE.po
    test.pot
  scripts.js
  test.php

1 个回复
最合适的回答,由SO网友:kanlukasz 整理而成

我无话可说‍♂️

一个简单的改变

  • dirname(plugin_basename(__FILE__)) . \'/languages/\' 在…内wp_set_script_translations() 函数(第三个参数)到

    • plugin_dir_path(__FILE__) . \'languages/\'

    fixed the problem