如何处理 WP 主题的 js 中文本的翻译

更新于 2025年4月19日 WordPress 教程

我有一个 wordpress 应用程序，当我需要回显需要翻译的内容时，我通常使用 PHP 函数<?php _e('foo', 'bar') ?> 。但是，现在我正在实现一个新功能，在我的.js文件中我有类似的东西

var confirmation = confirm("Are you sure you want to quit"); 
if(confirmation){
 ... 
}

上面代码的问题是我不能使用 PHP 函数_e()来翻译它，因为这是一个 JS 脚本。

无论如何，是否可以对 JS 中回显的文本启用翻译？

我正在研究之前由某人构建的 WP 项目。我应该只添加对存在于名为functions.js路径的 js 文件中的代码的翻译： C:User***eskeremfoo.comwp-contentthemesfooassetsscriptsfunctions.js让我们假设函数内部存在以下代码。

var confirmation = confirm("Are you sure you want to quit"); 
if(confirmation){
 ... 
}

现在的目标是使该英语句子可翻译。当单击此文件中的按钮时，将执行上述 js 代码。 C:User***eskeremfoo.comwp-contentpluginswp-jobhunttemplatesdashboardscandidatetemplates_ajax_functions.php

触发翻译的html代码很简单：

<h1> <?= _e('good morning', 'jobhunt') ?> </h1>
<div> <i class='icon-trash' onclick="askConfirmation()"> x </i> </div>

所以，脚本很简单，但翻译是我遇到一些问题的地方。

解决方案

在 wordpress 中，您必须将翻译数组传递给相应的 javascript。

例如，

如果您在 function.php 文件中使用如下所示的队列脚本，

wp_enqueue_script( $handle, $src, $deps,$ver,$in_footer );

你必须通过在 wp_localize_script() 中使用他的句柄来添加从函数文件到特定 js 的翻译；

  e.g. wp_enqueue_script( 'your-handle', $src, $deps,$ver,$in_footer );

  $translation_array = array('messagekey' => __('Are you sure you want to quit', foo');                             );
  wp_localize_script('your-handle', 'langvars', $translation_array);

在你的情况下

wp_enqueue_script( 'cs_functions_js', plugins_url('/assets/scripts/functions.js', __FILE__ ), '', '', true );

just add below code after above code.

$translation_array = array('messagekey' => __('Are you sure you want to quit', foo');                                );
  wp_localize_script('cs_functions_js', 'langvars', $translation_array);

然后你可以在 js 中访问翻译，例如，

var confirmboxmessage = langvars.messagekey;
var confirmation = confirm(langvars.messagekey);

您应该使用wp_localize_script函数，正是出于这个原因，它被添加到 WordPress 中。

尝试这样的事情：

wp_localize_script( $handle, $name, $data );

例子

<?php

// Register the script
wp_register_script( 'some_handle', '<ENTER YOUR SCRIPT PATH HERE>' );

// Localize the script with new data
$translation_array = array(
    'some_string' => __( 'Some string to translate', 'plugin-domain' ),
    'a_value' => '10'
);
wp_localize_script( 'some_handle', 'object_name', $translation_array );

// Enqueued script with localized data.
wp_enqueue_script( 'some_handle' );

您可以按如下方式访问 JavaScript 中的变量：

<script>
// alerts 'Some string to translate'
alert( object_name.some_string);
</script>

注意：结果 JavaScript 调用中的数据将作为文本传递。如果您尝试传递整数，则需要调用 JavaScript parseInt() 函数。

<script>
// Call a function that needs an int.
FinalZoom = map.getBoundsZoomLevel( bounds ) - parseInt( object_name.a_value, 10 ); 
</script>

如果我正确理解了问题，那么您有一个由第三方插件或主题排队的脚本，并且您希望在不修改原始脚本的情况下本地化window.confirm框。

/wp-content/plugins/jobhunt-client-translations/jobhunt-client-translations.php

<?php
/*
Plugin Name: Jobhunt Translations
Author: John Doe
*/

add_action( 'wp_enqueue_scripts', function() {

    wp_enqueue_script( 'translations', plugins_url( '/translations.js', __FILE__ ) );

    // change the translations domain from 'default' to match yours
    // you can also add other translations here in format "message" => "translated message"
    wp_localize_script( 'translations', 'DialogMessages', [ 'Are you sure you want to quit' => __( 'Are you sure you want to quit', 'default' ) ] );

});

/wp-content/plugins/jobhunt-client-translations/translations.js

(function( original ) {
    window.confirm = function( message ) {
        message = DialogMessages[message] || message;
        return original.call( this, message );
    };
})(window.confirm);

在/wp-content/plugins/目录中创建新文件夹jobhunt-client-translations ，将这两个文件放入其中，并激活插件。它将简单地覆盖默认的window.confirm对话框而不更改任何原始第三方文件，并且不修改对话框的默认行为，除了消息将被翻译。

代码已经过测试并且可以正常工作。

也许这会有所帮助

function addScript() {
    wp_enqueue_script( 'functions', get_template_directory_uri() . 'fooassetsscriptsfunctions.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'addScript' );

制作一个简单的 PHP 脚本，您的 JS 可以通过 AJAX 调用，它只是翻译通过 HTTP GET 发送的字符串（或多个字符串）并将其作为响应主体（可能使用 json_encode()）回显。

然后你可以创建一个 JS 函数来进行 AJAX 调用，所以调用它就像调用一个 JS 函数一样简单

var confirmTxt = jstranslate('Are you sure you want to quit?');

并以 JQuery 为例：

function jstranslate(string)
{
    translations = $.get('/my-ajax-translate-url',{string: string}, function(e){
        return e.text; // console.log e to double check what to return, this is from memory
    });
}

在 PHP 中

// require_once() your _e() function.
$text = _e($_GET['string'], 'jobhunt');
header('Content-Type: application/json');
echo json_encode(array('text' => $text));
exit;

你可能还喜欢下面这些文章

Auditor：WordPress 文章内容安全审核插件

本插件可以识别文章中的敏感信息，如果文章存在敏感信息，文章将会自动移动到安全的敏感隔离区，禁止任何形式的前台访问。

WordPress小说主题wpnovo，支持多语言、付费阅读、VIP会员功能的精美小说模板

//demo.imwpweb.com/wpnovo/多设备支持主题支持PC和移动端界面，独立设置，互不干扰。移动端首页(右)图：小说页面PC端和移动端的展示付费订阅主题支持付费订阅功能，支持付费单章订阅、整本小说订阅模式。

WordPress自动内链插件 WPKAL ，网站全自动增加锚链接必备插件

什么是内链内链，顾名思义就是在同一网站域名下的内容页面之间的互相链接（自己网站的内容链接到自己网站的内部页面，也称之为站内链接）。自动内链工作原理简单来说，我们设定一些词表以及词表对应的链接，比如词是wordpress插件，链接是http

WordPress 敏感词违禁词屏蔽插件 WPWJC 介绍与下载

这款插件的核心功能就是一点：找出文章中的违禁词、敏感词等措辞不当的词语，替换成你设置的更合适的词或者直接替换“*”号。请注意，需要同时下载站长工具箱和违禁词屏蔽插件，安装插件时也需要两个插件同时安装。

WordPress 文章自动配图、缩略图插件 WPAC 介绍与下载

2、自动生成的图片并非真实在磁盘中的图片，而是动态生成的，如果保存到磁盘会占用大量空间，这个空间没必要浪费，因此修改主题代码，直接将缩略图的地址改为wpac自动生成的缩略图地址是一个非常好的方案。

WordPress 相关文章插件 wprec

wprec利用相似度算法计算每篇文章之间的相似度，找到与当前文章最相似的一些文章，展现在文章底部作为相关文章。我们知道，相关推荐插件推荐的原理是根据当前文章的特征（文章的高权重标签），从文章库中召回相关文章，再根据相关性评分，最后选出To

如何处理 WP 主题的 js 中文本的翻译

解决方案

产品中心

服务支持

关于我们