如何在JavaScript中加载翻译？

时间：2019-12-31 作者：Marko

我正在努力为我的简单插件加载JavaScript翻译。翻译适用于PHP，但不适用于JS。问题是什么，如何调试？

我已经在我的插件方法中加载了文本域，这一切正常。我的文本域是instantsearch, 我的语言区域设置为hr

load_plugin_textdomain(\'instantsearch\', FALSE, basename( dirname( __FILE__ ) ) . \'/languages/\'); // returns true
var_dump(__(\'No results\', \'instantsearch\')); // This shows correct translation for my language

我已经生成了。带有WP CLI的json文件

wp i18n make-json languages/

这给了我一个新文件/myplugin/languages/instantsearch-hr-hash.json. 我的JS文件是assets/instant-search.js 我在某处读到，我需要手动重命名该哈希。我只是复制了该文件两次，并将其重命名为以下名称，只是为了尝试一下，所以这3个文件中的某些内容应该可以正常工作：）

instantsearch-hr-47626afcca1bc179bc9eedb6abdc01ff.json
instantsearch-hr-instant-search.json
instantsearch-hr-instantsearch.json

我已经注册了翻译脚本

wp_register_script(\'instant-search\', plugins_url(\'assets/instant-search.js\', __FILE__), array(\'jquery\', \'wp-i18n\'), false, true);
wp_enqueue_script(\'instant-search\');
wp_set_script_translations(\'instant-search\', \'instantsearch\', plugins_url(\'languages\', __FILE__));

在最上面的脚本中，我尝试了这个方法，但它不像PHP那样提供翻译，它只显示英文默认字符串

console.log(wp.i18n.__(\'No results\', \'instantsearch\'));

这里是json的示例

{"translation-revision-date":"2019-12-31 13:41+0100","generator":"WP-CLI\\/2.4.0","source":"assets\\/instant-search.js","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","lang":"hr","plural-forms":"nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<12 || n%100>14) ? 1 : 2);"},"No results":["Nema prona\\u0111enih rezultata"]}}}

我知道我可以用wp_localize_script() 将字符串从PHP移动到JS，但从WP 5移动。*我们应该能做到

3 个回复

SO网友:Josiah Sprague

我也遇到了同样的问题，我就是这样解决的：

首先，生成的JSON文件有一些错误。你需要在上面写的地方更新messages 使用您的文本域。有三个地方需要改变。我还必须改变lang 属性为带破折号的小写。以下是我更改的字段：

{
  "domain": "my-text-domain",
  "locale_data": {
    "my-text-domain": { // Instead of "messages"
      "": {
        "domain": "my-text-domain",
        "lang": "es-es"
      },
      ...
    }
  }
}

其次，具有md5哈希的文件名往往具有错误的md5哈希，因此最好将文件重命名为{domain}-{locale}-{script-name}.json, 所以我的my-text-domain-es_ES-my-script-name.js.

三是wp_set_script_translations 函数需要使用正确的路径调用，并连接到正确的挂钩。这是我必须做的，因为我正在本地化管理端脚本：

function enqueue_scripts() {
    wp_set_script_translations( \'script-name\', \'my-text-domain\', plugin_dir_path( dirname(__FILE__) ) . \'languages\' );
}
add_action( \'admin_enqueue_scripts\', \'enqueue_scripts\' );

尝试回显plugin_dir_path( dirname(__FILE__) ) . \'languages\' 以确保获得翻译文件所在的路径。

一旦我整理好所有这些小细节，我的翻译就开始工作了，所以我希望这对其他人有所帮助！

SO网友:Kostiantyn Petlia

我把它留在这里。也许它会帮助别人。我也有同样的问题。我做了所有的步骤，看起来都很有效，但在JS中__(\'Hello world\', \'textdomain\'); 不起作用。

关于JSON文件，有很多建议，例如使用“nl”而不是“nl\\u nl”，等等。对于今天（2020.08.06），您不应该以任何方式更改JSON文件，除非其名称为custom_dir/{domain}-{locale}-{handle}.json.

基本步骤：

PHP代码：

load_theme_textdomain( \'textdomain\', get_template_directory() . \'/languages\' );
// ...
wp_enqueue_script( \'scripts\', asset_url( \'js/app.js\' ), [ \'jquery\', \'wp-i18n\' ], null, true );
wp_set_script_translations( \'scripts\', \'textdomain\', get_template_directory() .\'/languages/js\' );

我使用Poedit应用程序创建（&L）；翻译nl_NL.po 文件

使用WP-CLI I生成wp i18n make-json ./languages ./languages/js --no-purge --pretty-print 一个json文件，我将其重命名为./languages/js/textdomain-nl_NL-scripts.json.

The essential thing:作者的错误是plugins_url(\'languages\', __FILE__) 在里面wp_set_script_translations();. 我的错误很简单get_template_directory_uri() 而不是get_template_directory(). 但函数要求；$path 包含翻译文件的目录的完整文件路径；。

您所需的一切都放在这里：https://developer.wordpress.org/block-editor/developers/internationalization/.

SO网友:kanlukasz

内部wp_set_script_translations 函数，您使用plugins_url(\'languages\', __FILE__) 这不是正确的路径。

您应该使用plugin_dir_path(__FILE__) . \'languages/\'

小码农CODE

如何在JavaScript中加载翻译？

相关推荐

在URL中插入“javascript：id(0)；”