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

文章中心7个月前发布 admin
61 0 0

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

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

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

作者:悦然WordPress网站建设

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

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

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

然而,悦然最近在搭建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(‘(^

© 版权声明

相关文章