给网站添加Google翻译工具条

26.21K 浏览M2插件和模版分享区google translate
0 Comments

给网站添加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