WordPress 网站上添加 Google 翻译按钮

网站添加 Google 翻译按钮

由于谷歌国内被屏蔽的原因,只有能访问谷歌的前提下才会显示翻译按钮的

添加方:第1、添加下面代码到主题 header.php 翻译 API(translate API)

<script type="text/javascript" src="//translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit"></script>

第2、 添加 JavaScript 功能

<script type="text/javascript">

     function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'zh-CN',}, 'google_translate_element'); }

</script>

第2、在需要显示的地方添加下面代码显示翻译按钮,页脚显示就footer.php

<div id="google_translate_element"></div>

Google 翻译100多种语言

我们将第1、2的 JavaScript 代码放在 WordPress 的 wp_footer,这会把代码放在 <div class=”site-footer”> 元素之后,避免影响网站的加载速度。

隐藏 Google 翻译栏(Google Translate Bar)

当 Google 翻译功能运行时,我们会在浏览器的上方看见一横浅蓝色的 Google 翻译栏,

Google 翻译栏会占领浏览器的显示空间,我们添加以下 CSS 代码将其隐藏起来:

.goog-te-banner-frame.skiptranslate {
     display: none !important;
}

body {
     top: 0px !important;
}

评论 0