给网站添加Google翻译工具条

26.14K 浏览M2插件和模版分享区google translate

给网站添加Google翻译工具条

先进入Google网站翻译器网站:

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

获取翻译工具条代码

1、输入网站名称和源语言:

其实这一步并没有什么用,不在最后获取到代码中。

2、选择译文语言、显示格式和高级选项:

译文语言一般就用默认的“所有语言”,除非你只想限定翻译指定的几种语言;

显示格式可以用内嵌,以及垂直,以便让用户自己来选择,并且在手机上可以方便选择各种语言(使用下拉菜单方式的话,在PC上可以显示所有语言,但在手机上可能因为屏幕宽度无法显示所有语言);

高级选项里面,默认的“用户所用语言不同于您网页的语言时,自动显示翻译横幅。”我建议去掉,免得总是在顶部显示翻译栏,而把开启翻译的选择权交给用户;

3、获取代码:

把屏幕上的代码复制出来,粘贴到网站源代码中就可以了。

懒得申请的可以直接复制下面这段代码

<div id="google_translate_element"></div>
<script type="text/Javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
    } 
</script>
<script type="text/Javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

其中TranslateElement方法里面包含配置信息,pageLanguage: 'en' 的意思是默认语言是英文,后面还可以添加其他配置参数。

创建模板文件

创建一个自定义主题,然后进入 app/design/frontend/<Vendor>/<Theme>/Magento_Theme 目录,没有这个目录的自己创建一个,

创建 layout文件夹,新建 default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:nOnamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="header.panel">
            <block class="MagentoFrameworkViewElementTemplate" template="Magento_Theme::google_translate.phtml" name="google_translate"/>
        </referenceContainer>
        <move element="google_translate" destination="header.panel" before="header.links"/>
    </body>
</page>

创建templates文件夹,新建 google_translate.phtml,用来放上面获取到的google翻译代码,

<div id="google_translate_element"></div>
<script type="text/Javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE         }, 'google_translate_element'); 
    }
</script> 
<script type="text/Javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

然后上传到服务器,清除页面缓存,访问网站顶部就会出现一个 Google翻译的工具条,如果需要改变位置或者修改样式,可以用css对id="google_translate_element"进行美化。

更改状态以发布
0