立省万元!李哥教你如何使用translate.js实现WP菜单的JavaScript翻译

你是不是也在为WordPress网站加个多语言菜单而发愁?一想到那些名声在外的翻译插件,脑海里

是不是立刻浮现出每年上千元的续费账单?

是不是受够了那个一旦启用就让网站速度变慢的“庞然大物”?

是不是在面对复杂的设置界面时,感觉像是在操作一架航天飞机,而你只是想骑个自行车出门买个菜?

兄弟,我懂你。这种感觉,就像是只想拧一颗螺丝,却被迫买下整个五金店。别再忍受了!今天,李哥(LeePoet.cn)就带你彻底摆脱这种“高消费、低体验”的困境。这篇文章,将为你揭开一条“技术平权”之路。

我们不用求助于任何重型插件,不花一分钱授权费,仅凭几行简洁的JavaScript代码,就能为你的WordPress菜单实现流畅、优雅的多语言切换功能。我们要用的神器,就是轻量级前端翻译库——translate.js

学完这一招,你不仅能立刻省下未来几年上万元的插件费用,更能收获一个速度更快、完全受你掌控的网站。从此,插件更新、兼容性冲突、账单提醒,这些都与你无关。这不仅是省钱的技巧,更是一种技术的自由。跟着我的步骤,让我们一起对臃肿的翻译插件说“不”,亲手打造属于你自己的极速多语言方案!

接下来,我们将从第一步“准备translate.js库文件”开始……

1.先把translate.js上传到服务器,本地调用比https://cdn.staticfile.net/translate.js/3.18.66/translate.js速度更快。

2.安装插入代码插件,如 “Header and Footer Scripts” 或 “Insert Headers and Footers”。把translate.js的JavaScript代码放到footer或才head里。

<script src="https://www.你的域名及JS路径.cn/leepoetjs/translate.js"></script> 

<script>
translate.selectLanguageTag.languages = 'english,chinese_simplified,japanese,spanish,deutsch,french,korean';
translate.request.listener.delayExecuteTime = 500;
translate.service.use('client.edge'); //设置机器翻译服务通道
translate.listener.start(); //开启页面元素动态监控
translate.selectLanguageTag.show = false;//false隐藏选择框,true打开
translate.execute();//完成翻译初始化,进行翻译
</script>

3.通过函数文件添加需要调用的translate.js,在主题的functions.php文件中添加:

//调用翻译translate.js
function add_language_switcher_script() {
    ?>
    <script>
//添加switchToEnglish()英文函数
    function switchToEnglish() {
        if (typeof translate !== 'undefined' && typeof translate.changeLanguage === 'function') {
            translate.changeLanguage('english');
        }
    }
//添加switchToChineseSimplified()中文函数
    function switchTochinese_simplified() {
        if (typeof translate !== 'undefined' && typeof translate.changeLanguage === 'function') {
            translate.changeLanguage('chinese_simplified');
        }
    }		
    </script>
    <?php
}
add_action('wp_head', 'add_language_switcher_script');

2.进入WordPress后台 → 外观​ → 菜单,点击创建新菜单或选择现有菜单,在左侧自定义链接部分添加:

点击添加到菜单,在菜单编辑器中,点击该菜单项展开设置

  • URL:#
  • 链接文字:English或您想要的文字
  • URL字段中替换为:javascript:translate.changeLanguage(‘english’);
#导航标签字段
<li href="#" onclick="javascript:switchToEnglish(); return false;">English</li>
<li href="#" onclick="javascript:switchTochinese_simplified(); return false;">简体中文</li>

然后保存菜单。*如果需要其它语言,可以继续在主题文件functions.php里继续填加调用。

然后刷新前台基本搞定。

相关文章:translate.js:两行代码实现网页全自动多语言内容动态翻译

现在的WordPress多语言解决方案,尤其是主流插件,确实让人又爱又恨,痛苦主要集中在以下几点:

沉重的年度费用,如同“数字税”,像WPML、Polylang Premium这类插件,需要每年支付高昂的授权费来获得更新和支持。对于一个长期运营的网站来说,这成了一笔沉重的、持续的固定支出。网站不赚钱时,这笔钱尤其肉疼;网站赚钱了,又会觉得为什么我要一直为这个“基础设施”付钱?感觉就像被“套牢”了。

“全家桶”式捆绑,资源浪费严重,大型插件功能大而全,但你可能只需要其中最核心的菜单和静态内容翻译功能。它却强行塞给你一整套复杂的翻译管理系统、字符串翻译、媒体翻译等。这导致插件异常臃肿,严重拖慢网站速度,为了一个“点”的需求,背上了整个“面”的负担。

架构复杂,学习成本高,配置过程繁琐,需要在不同标签页之间来回切换,理解“字符串”、“翻译编辑器”等专业概念。对于只是想给网站加个中英文菜单的博主来说,学习成本太高,一不小心就配错了。

与主题/插件兼容性噩梦,一旦主题更新或更换,或者安装了新的插件,兼容性问题就可能出现,导致翻译失效或页面错乱。排查问题非常困难,往往需要深度技术知识。

机器翻译API的隐藏成本,一些方案鼓励你接入Google Translate或DeepL的API来自动翻译。初期感觉方便,但随着内容增长,API调用的费用会悄无声息地累积,成为一个不可预测的成本黑洞。

总结来说,当下的痛苦是:我们只是想要一个“轻量、快速、便宜、能控制”的翻译方案,尤其是针对菜单和前端静态内容。但市场给出的答案往往是“沉重、昂贵、复杂、受制于人”的庞然大物。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注