WordPress博客增加Google Translate翻译功能

本文同步自（最佳显示效果请点击）：https://zohead.com/archives/wordpress-google-translate/

之前给 WordPress 博客上安装了 QTranslate 博客以支持多语言，目前本博客已支持中文和英文的了，实际使用时博客作者是需要分别针对中文和英文及其它所需要的语言分别进行翻译处理的，对于笔者这种比较懒的人，除非是老外会看的一些文章，一般也懒的翻译成英文，因此考虑在 WordPress 博客里加上直接使用 Google Translate 进行翻译的处理。

通过查看 Google Translate 提供的接口，我们可以在 WordPress 的仪表盘中的 外观 - 小工具 设置界面中拖动一个 “文本” 类型的小工具到对应的小工具区域中去，小工具标题为 “翻译”，“文本” 类型的小工具可以实现在博客页面的小工具区域中添加自己需要的 HTML 代码，还是比较好用的。

增加的 HTML 代码如下：

<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: document.documentElement.lang
  }, 'google_translate_element');
}
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

注意上面代码中的 pageLanguage 表示 WordPress 博客当前的实际语言代码，之前网上看得代码都是写死的，这里我们使用 document.documentElement.lang 动态获取博客当前实际的语言（使用 QTranslate 切换语言时也能正常工作）。

修改保存之后访问主界面就可以看到小工具区域里多了一个 “翻译” 的区域，访客可以直接选择需要翻译到的语言，Google Translate 可以自动翻译当前页面内容为指定语言，实在是非常方便。

接着考虑到有些博主可能像我一样用到了 QTranslate 插件来实现博客多语言，这样就需要修改小工具的标题在不同语言下的显示问题，这时只要把标题改为下面的形式就又可以支持多语言了：

[:zh]翻译[:en]Translate

上面的形式中将中文和英文字符串写在一起，这样 WordPress 页面在显示时会自动根据当前语言选择应该用的字符串。

另外 Google Translate 界面的样式也是可以定制的，详细请参考 Google Translate 网站翻译页面：

http://translate.google.com/manager/website/