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

更新于 2022年1月13日 wordpress教程

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

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

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

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

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

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

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

现在的目标是使该英语句子可翻译。 当单击此文件中的按钮时,将执行上述 js 代码。 C:Usersmeskeremfoo.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;

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

wordpress智能自动摘要插件:wpaewordpress智能自动摘要插件:wpae

目前wordpress的摘要大多数由主题提供。
一直以来没有一款插件可以智能提取正文的关键内容作为摘要,于是自己动手做了一个,命名为wpae(wordpress auto excerpt)。

蜂集采集器,一款全自动的wordpress采集插件蜂集采集器,一款全自动的wordpress采集插件

imwprobot(蜂集)是一款wordpress采集插件。
有什么功能1. 全自动无人值守,支持定时采集2. 可自动同步目标站的更新3. AI自动关键词、自动摘要生成4. 直接发布到wordpress,不需要额外的接口支持5. 正文图片和缩略图均可本地化6. 每个任务中的文章图片均可设置独立水印7. 采集到的内容均支持正则和css选择器替换可以采集哪些站1. 新闻资讯站2. 文章范文站3. BBS论坛4. 博客站点5. 资源站、下载站支持哪些采集规则1. 正则表达式2. XPath规则3. JQuery选择器(CSS选择器)代理支持1. HTTP代理 2. Socks5代理 哪些主机可以运行没有环境限制,虚拟主机都可以运行蜂集特色

wordpress如何禁用wp-jsonwordpress如何禁用wp-json

wp-json可以很方便获取wordpress的内容,但也让采集变得容易起来,很容易被恶意抓取。
imwpf可以很方便关闭关闭wp-json接口并且不影响后台使用,并且其他更强大的优化功能,推荐使用。

wordpress站长工具箱插件imwpf,必装插件wordpress站长工具箱插件imwpf,必装插件

为了让wordpress更好用,我们开发了一款wp工具箱插件。
imwpf提供 免登录发布接口、优化工具箱(定时任务开关,修订版开关,wp-json开关,缩略图开关)、防垃圾评论、后台文章分类标签ID显示、百度推送、收录快捷查看 功能,并且还在持续增加中。

wordpress自定义url路由于自定义载入模板wordpress自定义url路由于自定义载入模板

wordpress强大的hook能够让我们去自定义路由,在使用框架的时候一般路由是写在一个配置文件中,wordpress作为一个cms系统,自然是不能这么干,实际上,wordpress路由规则是写在数据库中,自定义路由其实就是修改这个数据库的值。
默认这个tpl_page查询是不会加入到$GLOBALS[‘wp_query’]中的query_var变量中,默认wordpress的public_query_vars有这么一些

WordPress怎么增加文章排序方式WordPress怎么增加文章排序方式

WordPress怎么增加文章排序方式?
实现过程也比较简单,一个是构造链接,另外一个是使用query_posts来改变一下主循环就可以了。
$orderby, ‘order’ =>

wordpress关注微信公众号查看隐藏内容插件:北冥wordpress关注微信公众号查看隐藏内容插件:北冥

北冥插件是imwpweb开发的一款关注可复制、可查看隐藏内容的插件,想要为公众号涨粉不可错过哦~

想要流量私域化,成本最低的方式就是让用户关注你的公众号,手段就是通过关注可以查看隐藏内容,复制内容。

wordpress如何在一个页面显示所有文章wordpress如何在一个页面显示所有文章

让WordPress一个页面显示全部分类的文章

cat=’ . $cat->
php echo $cat->
a href=”<
$cats = get_categories(array(‘include’ =>

好看 (0) 很好看 (0) 非常好看 (0)
赞赏

微信赞赏支付宝赞赏