给网站添加Google翻译工具条

3.37K 浏览M2插件和模版分享区

给网站添加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: &#39;en&#39;}, &#39;google_translate_element&#39;);} </script> <script type="text/Javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

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

创建模板文件

创建一个自定义主题,然后进入 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: &#39;en&#39;,             layout: google.translate.TranslateElement.InlineLayout.SIMPLE         }, &#39;google_translate_element&#39;);     } </script> <script type="text/Javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

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

0