给wordpress添加全站自动翻译功能

工作目的

现在很多网站都支持自动翻译,其中添加自动翻译有诸多好处,很多人也想为自己的wordpress添加自动翻译功能。可以为多语言用户增加用户体验,可以吸引外流等等。做外贸站更是必备产品。以前我曾经介绍过在wordpress中用jetpack为自己博客添加自动翻译功能,但是由于jetpack托管于wordpress官方,直接被和谐掉了,并且功能虽然强大,但是吃内存吃的多,加载了40多个js,严重影响网站加载速度,改善不了用户体验。虽然我手动修改了部分JS文件,并且加载了cdn,但是对于我这种强迫症晚期患者,我还是直接放弃抵抗了。直接把jekpack干掉了。同样的网站自动翻译功能也没有了。
原文链接:https://shikey.com/2019/01/28/solve-the-problem-that-the-jetpack-google-translation-plug-in-cant-be-used.html
当时本来想将里面的功能移植出来,其实我看了两个PHP文件和JS文件,内容基本上就是插件标注类的,核心其实还是google翻译。我采用的方法比较简单,利用谷歌翻译提供的JS直接加载的。请往下看

《给wordpress添加全站自动翻译功能》

另外给自己博客Url添加自动翻译功能请看这这里:https://shikey.com/2019/01/23/automatically-convert-wp_slug-into-english-url.html

已经失效

申请地址:https://translate.google.com/manager/website/?hl=zh-CN

目前在线申请已经关闭,但是我在blogger上看到某些人的wiget还是有效的,同时jetpack也可以继续使用。

目前有效

添加小工具

打开wordpress后台,如果用的不是wordpress,下面的代码也是可以用的,请自行调节。
点击-主题-小工具-自定义小工具,添加自定义HTML

《给wordpress添加全站自动翻译功能》

内嵌代码

在添加的小工具中插入以下代码,保存并调整好显示的位置即可。

<div id='google_translate_element'></div>
<script>
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({
        pageLanguage: 'zh',
        autoDisplay: 'true',
        layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
      }, 'google_translate_element');
    }
  </script>
<script src='//translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit'></script>

《给wordpress添加全站自动翻译功能》

说明蓝色字体zh为默认语言设置不设置其实我测试过都是可以的。英文为en,美国英语为us,日语为jp等等,具体请百度。

蓝色字体“translate.google.cn”为大陆地址,若你的博客主对象为外网,请改成“translate.google.com”,为什么这样设置,我想国内不会有人看不懂中文吧。不过我这个人有强迫症,不喜欢看到js未加载,不要学我。高手或者其他患者可以做个cdn自动判定,我不会。

效果预览

《给wordpress添加全站自动翻译功能》

《给wordpress添加全站自动翻译功能》 

  1. 山涧小石说道:

    有人反映:其中还有俩个google的地址无法加载。
    我不准备修复了,给一个思路,将所有加载的js合并,之后找个cdn加速缓存。例如jetpack可以有这功能我不修复原因有2:
    1、国外访问:国外访问估计都可以访问google源吧。那么加载也没任何问题。
    2、国内访问:国内访问估计都会中文吧,那么要翻译又有何意义呢。

回复 山涧小石 取消回复