WordPress建站教程：GTranslate翻译插件交互效果修改

WordPress建站教程：GTranslate翻译插件交互效果修改

继续分享WordPress建站教程。最近的一个WordPress外贸网站建设项目使用了GTranslate这个多语言翻译插件。一般来说，这个插件不需要太多的定制设计。安装后只需添加一个简短的代码调用即可。

作者：悦然WordPress网站建设

WordPress建站教程：网站导航栏添加多语言切换功能

还有一些主题不容易添加短代码。您也可以参考上面的教程来嵌入它们。

然而，悦然最近在搭建WordPress网站时遇到的用户需求有点奇怪和苛刻。无法弹出语言切换，需要调整下拉框的宽度。GTranslate插件中的其中一种效果勉强能够满足用户的需求，如上图所示。但也有一个问题。当你点击语言切换时，它会拉长整个导航栏。

GTranslate插件自带的设置选项只能修改颜色。其他的只能通过代码修改。需要修改的包括下拉切换方式、下拉框宽度、字体大小等，最终修改代码如下：

风格>

.switcher{font-family:Arial;font-size:12pt;text-align:left;cursor:pointer;overflow:hidden;width:120px;line-height:17px;}

.switchera{文本装饰：无；显示：块；字体大小：12pt；-webkit-box-sizing：内容框；-moz-box-sizing：内容框；框大小：内容框；}

.switcheraimg{垂直对齐：中间；显示：内联；边框：0；填充：0；边距：0；不透明度：0.8；}

.switchera:hoverimg{不透明度:1;}

.switcher.selected{背景:#fff线性渐变(180deg,#effefef0%,#fff70%);位置:相对;z-index:9999;}

.switcher.selecteda{边框：1pxsolid#ccc;颜色：#666;填充：3px5px;宽度：107px;}

.switcher.selecteda:after{高度:24px;显示:内联块;位置:绝对;右:10px;宽度:15px;背景位置:50%;背景大小:11px;背景图像:url(“数据:image/svgxml;utf8,”);背景重复:无重复;内容:””!重要;过渡:all.2s;}

.switcher.selecteda.open:after{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);}

.switcher.selecteda：悬停{背景：#fff}

.switcher.option{位置：固定；z-index：9998；左边框：1pxsolid#ccc；右边框：1pxsolid#ccc；下边框：1pxsolid#ccc；背景颜色：#eee；显示：无；宽度：117px；最大高度：198px；-webkit-box-sizing：内容框；-moz-box-sizing：内容框；框大小：内容框；溢出-y：自动；overflow-x:隐藏;}

.switcher.optiona{颜色：#000;填充：3px5px;字体大小：10px;}

.switcher.optiona:hover{背景:#fff;}

.switcher.optiona.selected{背景：#fff;}

#selectedlangname{float:none;}

.lname{float:none!important;margin:0;}

.switcher.option::-webkit-scrollbar-track{-webkit-box-shadow:inset003pxrgba(0,0,0,0.3);边框半径:5px;背景颜色:#f5f5f5;}

.switcher.option::-webkit-scrollbar{宽度:5px;}

.switcher.option::-webkit-scrollbar-thumb{border-radius:5px;-webkit-box-shadow:inset003pxrgba(0,0,0,.3);background-color:#888;}

风格>

divclass”switchernotranslate”>

divclass“已选择”>

ahref”#”onclick”returnfalse;”>imgsrc”//yr.yueranseo.top/wp-content/plugins/gtranslate/flags/svg/en.svg”height”24″width”24″alt”en”/>英语a>

分区>

divclass”选项”>

ahref”#”onclick”doGTranslate(‘en|ar’);jQuery(‘div.switcherdiv.selecteda’).html(jQuery(this).html());returnfalse;”title”阿拉伯语”class”nturl”>imgdata-gt-lazy-src”//yr.yueranseo.top/wp-content/plugins/gtranslate/flags/svg/ar.svg”height”24″width”24″alt”ar”/>Arabica>ahref”#”onclick”doGTranslate(‘en|en’);jQuery(‘div.switcherdiv.selecteda’).html(jQuery(this).html());returnfalse;”title”English”class”nturlselected”>imgdata-gt-lazy-src”//yr.yueranseo.top/wp-content/plugins/gtranslate/flags/svg/en.svg”height”24″width”24″alt”en”/>Englisha>ahref”#”onclick”doGTranslate(‘en|fr’);jQuery(‘div.switcherdiv.selecteda’).html(jQuery(this).html());returnfalse;”title”French”class”nturl”>imgdata-gt-lazy-src”//yr.yueranseo.top/wp-content/plugins/gtranslate/flags/svg/fr.svg”height”24″width”24″alt”fr”/>Frencha>ahref”#”onclick”doGTranslate(‘en|pt’);jQuery(‘div.switcherdiv.selecteda’).html(jQuery(this).html());returnfalse;”title”Portug使用”class”nturl”>imgdata-gt-lazy-src”//yr.yueranseo.top/wp-content/plugins/gtranslate/flags/svg/pt.svg”height”24″width”24″alt”pt”/>Portuguesea>ahref”#”onclick”doGTranslate(‘en|es’);jQuery(‘div.switcherdiv.selecteda’).html(jQuery(this).html());returnfalse;”title”西班牙语”类”nturl”>imgdata-gt-lazy-src”//yr.yueranseo.top/wp-content/plugins/gtranslate/flags/svg/es.svg”高度”24″宽度”24″alt”es”/>西班牙语>div>

分区>

脚本>

(函数gtjQueryready(){

if(!window.jQuery||!jQuery.fn.click)returnsetTimeout(gtjqueryready,20);

jQuery(‘.switcher.selected’).click(function(){jQuery(‘.switcher.optionaimg’).each(function(){if(!jQuery(this)[0].hasAttribute(‘src’))jQuery(this).attr(‘src’,jQuery(this).attr(‘data-gt-lazy-src’))});if(!(jQuery(‘.switcher.option’).is(‘:可见’))){jQuery(‘.switcher.option’).stop(true,true).delay(100).slideDown(500);jQuery(‘.switcher.selecteda’).toggleClass(‘open’)}});

jQuery(‘.switcher.option’).bind(‘mousewheel’,function(e){varoptionsjQuery(‘.switcher.option’);if(options.is(‘:visible’))options.scrollTop(options.scrollTop()-e.originalEvent.wheelDelta/10);returnfalse;});

jQuery(‘body’).not(‘.switcher’).click(function(e){if(jQuery(‘.switcher.option’).is(‘:visible’)e.target!jQuery(‘.switcher.option’).get(0)){jQuery(‘.switcher.option’).stop(true,true).delay(100).slideUp(500);jQuery(‘.switcher.selecteda’).toggleClass(‘打开’）}}）;

})();

脚本>

样式>#goog-gt-tt{display:none!important;}.goog-te-banner-frame{display:none!important;}.goog-te-menu-value:hover{文字装饰:none!important;}.goog-text-highlight{背景颜色:transparent!important;box-shadow:none!important;}body{top:0!important;}#googletranslateelement2{display:none!important;}样式>

除”googletranslateelement2″>div>

脚本>functiongoogleTranslateElementInit2(){newgoogle.translate.TranslateElement({pageLanguage:’en’,autoDisplay:false},’googletranslateelement2′);}if(!window.gttranslatescript){window.gttranslatescriptdocument.createElement(‘script’);gttranslatescript.src’https://translate.google.com/translatea/element.js?cbgoogleTranslateElementInit2′;document.body.appendChild(gttranslatescript);}脚本>

脚本>

functionGTranslateGetCurrentLang(){varkeyValuedocument[‘cookie’].match(‘(^