如何使Gutenberg块翻译工作？

编程问答 2022-08-16

问题描述

我刚刚构建了一个Gutenberg块，我想将其翻译成其他语言。我正在用葡萄牙语使用wordpress，并做了葡萄牙语翻译。我遵循了文档https://developer.wordpress.org/block-editor/developers/internationalization/中提供的所有步骤，但仍然无法使用。

我的插件称为spoiler-alert。

我已经在.pot文件夹中创建了一个名为spoileralert.pot的{​​{1}}文件。然后，我生成了md5文件，甚至使用脚本处理程序用我的所有字符串创建了一个新文件。我的语言文件夹结构如下：

/spoiler-alert/languages

这是我的PHP文件languages - spoileralert.pot - spoileralert-pt_BR.po - spoileralert-pt_BR-<HASH-CODE-1>.json - spoileralert-pt_BR-<HASH-CODE-2>.json - spoileralert-pt_BR-<HASH-CODE-3>.json - spoileralert-pt_BR-spoileralert.json ：

spoiler-alert.PHP

在我的function spoiler_alert_spoiler_alert_block_init() { $dir = dirname( __FILE__ ); $script_asset_path = "$dir/build/index.asset.PHP"; if ( ! file_exists( $script_asset_path ) ) { throw new Error( 'You need to run `npm start` or `npm run build` for the "spoiler-alert/spoiler-alert" block first.' ); } $index_js = 'build/index.js'; $script_asset = require( $script_asset_path ); wp_register_script( 'spoiler-alert-spoiler-alert-block-editor',plugins_url( $index_js,__FILE__ ),$script_asset['dependencies'],$script_asset['version'] ); $editor_css = 'build/index.css'; wp_register_style( 'spoiler-alert-spoiler-alert-block-editor',plugins_url( $editor_css,array(),filemtime( "$dir/$editor_css" ) ); $style_css = 'build/style-index.css'; wp_register_style( 'spoiler-alert-spoiler-alert-block',plugins_url( $style_css,filemtime( "$dir/$style_css" ) ); register_block_type( 'spoiler-alert/spoiler-alert',array( 'editor_script' => 'spoiler-alert-spoiler-alert-block-editor','editor_style' => 'spoiler-alert-spoiler-alert-block-editor','style' => 'spoiler-alert-spoiler-alert-block',) ); wp_set_script_translations( 'spoileralert','spoiler-alert',plugin_dir_path( __FILE__ ) . '/languages' ); } add_action( 'init','spoiler_alert_spoiler_alert_block_init' ); 文件中，我使用以下语言导入了翻译包：.js

我正在使用类似import { __ } from '@wordpress/i18n';

的翻译

如何使翻译正确显示？

解决方法

已经有一段时间了，但它可能对您或其他人仍然有用。我只是复制并粘贴我已经回答过的内容 here。

这个过程我已经经历过很多次了，所以我 100% 确定这可以正常工作。仔细完成每一个步骤，您应该设法解决您可能遇到的任何问题;)

翻译终于得到了适当的开发和记录：https://developer.wordpress.org/block-editor/developers/internationalization/

基本上，您需要：

  1. 使用 wp-i18n 包来定义项目中哪些是可翻译的字符串。
  2. 编译您的代码（wp i18n make-pot 将在您编译的代码中搜索翻译字符串，而不是在您的源代码中）。
  3. 使用 WP-CLI (wp i18n make-pot) 创建 .pot 文件，就像我们一直使用的 WP 主题和插件一样。
  4. 根据我们之前创建的 .po 生成 .pot 文件并翻译其内容。
  5. 再次使用 WP-CLI (wp i18n make-json) 将我们的 .po 文件转换为所需的 JSON 格式。
  6. 使用 wp_set_script_translations PHP 函数加载翻译文件。
wordpresswordpresswordpress-gutenberg