首页 » 博文 » Wordpress » 正文

【多说】回复显示浏览器操作系统等信息

偶然的机会看到了这篇博文实现多说回复显示浏览器操作系统等系统的博文,感觉很酷炫吧,于是我也来试试,下面是步骤跟着我一起做吧!

要实现的效果图

duoshuoxiaoguo1

embed.js本地化

embed.js是多说官方提供的公用核心脚本,如果多说服务器抽风了,那我们的评论功能岂不是要挂掉了?!,所以embed.js本地化是很有必要的吧,而且还为我们修改多说功能提供了操作的基础。

1.下载embed.js

到这个网址去下载好embed.js http://static.duoshuo.com/embed.js

2.上传到多说插件根目录

把下载好的embed.js上传到多说插件的根目录wp-content/plugins/duoshuo。

3.修改多说插件根目录的Wordpress.php文件

搜索embed.js里的下面两处

591<script src="http://static.&lt;?php echo self::DOMAIN;?&gt;/embed.js" async="async" type="text/javascript" charset="UTF-8"></script>
610    ds.src = 'http://static.duoshuo.com/embed.js';

将embed.js地址分别改为刚刚上传到多说根目录的地址,这里www.icharm.me是我的博客域名

591<script src="http://www.icharm.me/wp-content/plugins/duoshuo/embed.js" async="async" type="text/javascript" charset="UTF-8"></script>
610    ds.src = 'http://www.icharm.me/wp-content/plugins/duoshuo/embed.js';

修改embed.js

1.在embed.js的顶部添加下面代码:

//移动客户端判断开始,作用:在移动客户端显示不同样式
function sskcheckMobile(){  
    var isiPad = navigator.userAgent.match(/iPad/i) != null;  
    if(isiPad){  
        return false;  
    }  
    var isMobile=navigator.userAgent.match(/iphone|android|phone|mobile|wap|netfront|x11|java|opera mobi|opera mini|ucweb|windows ce|symbian|symbianos|series|webos|sony|blackberry|dopod|nokia|samsung|palmsource|xda|pieplus|meizu|midp|cldc|motorola|foma|docomo|up.browser|up.link|blazer|helio|hosin|huawei|novarra|coolpad|webos|techfaith|palmsource|alcatel|amoi|ktouch|nexian|ericsson|philips|sagem|wellcom|bunjalloo|maui|smartphone|iemobile|spice|bird|zte-|longcos|pantech|gionee|portalmmm|jig browser|hiptop|benq|haier|^lct|320x320|240x320|176x220/i)!= null;  
    if(isMobile){  
        return true;  
    }  
    return false;  
}  
//移动客户端判断结束
//显UA开始
function sskua(e) {
 var r = new Array;
 var outputer = '';
 if (r = e.match(/FireFox\/([^\s]+)/ig)) {
 var r1 = r[0].split("/");
 outputer = '<span class="ua_firefox"><i class="fa fa-globe"></i> Mozilla FireFox' + '|' + r1[1]
 } else if (r = e.match(/Maxthon([\d]*)\/([^\s]+)/ig)) {
 var r1 = r[0].split("/");
 outputer = '<span class="ua_maxthon"><i class="fa fa-globe"></i> Maxthon'
 } else if (r = e.match(/BIDUBrowser([\d]*)\/([^\s]+)/ig)) {
 var r1 = r[0].split("/");
 outputer = '<span class="ua_ucweb"><i class="fa fa-globe"></i> 百度浏览器' + '|' + r1[1]
 } else if (r = e.match(/UBrowser([\d]*)\/([^\s]+)/ig)) {
 var r1 = r[0].split("/");
 outputer = '<span class="ua_ucweb"><i class="fa fa-globe"></i> UCBrowser' + '|' + r1[1]
 } else if (r = e.match(/UCBrowser([\d]*)\/([^\s]+)/ig)) {
 var r1 = r[0].split("/");
 outputer = '<span class="ua_ucweb"><i class="fa fa-globe"></i> UCBrowser' + '|' + r1[1]
 } else if (r = e.match(/MetaSr/ig)) {
 outputer = '<span class="ua_sogou"><i class="fa fa-globe"></i> 搜狗浏览器'
 } else if (r = e.match(/2345Explorer/ig)) {
 outputer = '<span class="ua_2345explorer"><a style="color: #ffffff!important;" href="http://ssk.91txh.com/2345download.php?id=2" target="_blank"><i class="fa fa-globe"></i> 2345王牌浏览器</a>'
 } else if (r = e.match(/2345chrome/ig)) {
 outputer = '<span class="ua_2345chrome"><a style="color: #ffffff!important;" href="http://ssk.91txh.com/2345download.php?id=3" target="_blank"><i class="fa fa-globe"></i> 2345加速浏览器</a>'
 } else if (r = e.match(/LBBROWSER/ig)) {
 outputer = '<span class="ua_lbbrowser"><i class="fa fa-globe"></i> 猎豹安全浏览器'
 } else if (r = e.match(/MicroMessenger\/([^\s]+)/ig)) {
 var r1 = r[0].split("/");
 outputer = '<span class="ua_qq"><i class="fa fa-weixin"></i> 微信' + '|' + r1[1]/*.split('/')[0]*/
 } else if (r = e.match(/QQBrowser\/([^\s]+)/ig)) {
 var r1 = r[0].split("/");
 outputer = '<span class="ua_qq"><i class="fa fa-globe"></i> QQ浏览器' + '|' + r1[1]/*.split('/')[0]*/
 } else if (r = e.match(/QQ\/([^\s]+)/ig)) {
 var r1 = r[0].split("/");
 outputer = '<span class="ua_qq"><i class="fa fa-globe"></i> QQ浏览器' + '|' + r1[1]/*.split('/')[0]*/
 } else if (r = e.match(/MiuiBrowser\/([^\s]+)/ig)) {
 var r1 = r[0].split("/");
 outputer = '<span class="ua_mi"><i class="fa fa-globe"></i> Miui浏览器' + '|' + r1[1]/*.split('/')[0]*/
 } else if (r = e.match(/Chrome([\d]*)\/([^\s]+)/ig)) {
 var r1 = r[0].split("/");
 outputer = '<span class="ua_chrome"><i class="fa fa-globe"></i> Chrome' + '|' + r1[1]/*.split('.')[0]*/
 } else if (r = e.match(/safari\/([^\s]+)/ig)) {
 var r1 = r[0].split("/");
 outputer = '<span class="ua_apple"><i class="fa fa-globe"></i> Apple Safari' + '|' + r1[1]
 } else if (r = e.match(/Opera[\s|\/]([^\s]+)/ig)) {
 var r1 = r[0].split("/");
 outputer = '<span class="ua_opera"><i class="fa fa-globe"></i> Opera' + '|' + r[1]
 } else if (r = e.match(/Trident\/7.0/gi)) {
 outputer = '<span class="ua_ie"><i class="fa fa-globe"></i> Internet Explorer 11'
 } else if (r = e.match(/MSIE\s([^\s|;]+)/gi)) {
 outputer = '<span class="ua_ie"><i class="fa fa-globe"></i> Internet Explorer' + '|' + r[0]/*.replace('MSIE', '').split('.')[0]*/
 } else {
 outputer = '<span class="ua_other"><i class="fa fa-globe"></i> 其它浏览器'
 }
 if(sskcheckMobile()){
 Mobile='

';
 }else{
 Mobile='';
 }
 return outputer+"</span>"+Mobile ;
 }
 function sskos(e) {
 var os = '';
 if (e.match(/win/ig)) {
 if (e.match(/nt 5.1/ig)) {
 os = '<span class="os_xp"><i class="fa fa-desktop"></i> Windows XP'
 } else if (e.match(/nt 6.1/ig)) {
 os = '<span class="os_7"><i class="fa fa-desktop"></i> Windows 7'
 } else if (e.match(/nt 6.2/ig)) {
 os = '<span class="os_8"><i class="fa fa-desktop"></i> Windows 8'
 } else if (e.match(/nt 6.3/ig)) {
 os = '<span class="os_8_1"><i class="fa fa-desktop"></i> Windows 8.1'
 } else if (e.match(/nt 10.0/ig)) {
 os = '<span class="os_8_1"><i class="fa fa-desktop"></i> Windows 10'
 } else if (e.match(/nt 6.0/ig)) {
 os = '<span class="os_vista"><i class="fa fa-desktop"></i> Windows Vista'
 } else if (e.match(/nt 5/ig)) {
 os = '<span class="os_2000"><i class="fa fa-desktop"></i> Windows 2000'
 } else {
 os = '<span class="os_windows"><i class="fa fa-desktop"></i> Windows'
 }
 } else if (e.match(/android/ig)) {
 os = '<span class="os_android"><i class="fa fa-android"></i> Android'
 } else if (e.match(/ubuntu/ig)) {
 os = '<span class="os_ubuntu"><i class="fa fa-desktop"></i> Ubuntu'
 } else if (e.match(/linux/ig)) {
 os = '<span class="os_linux"><i class="fa fa-linux"></i> Linux'
 } else if (e.match(/mac/ig)) {
 os = '<span class="os_mac"><i class="fa fa-desktop"></i> Mac OS X'
 } else if (e.match(/unix/ig)) {
 os = '<span class="os_unix"><i class="fa fa-desktop"></i> Unix'
 } else if (e.match(/symbian/ig)) {
 os = '<span class="os_nokia"><i class="fa fa-mobile"></i> Nokia SymbianOS'
 } else {
 os = '<span class="os_other"><i class="fa fa-desktop"></i> 其它操作系统'
 }
 return os+"</span>" ;
 }
//显UA结束

2.在embed.js里搜索下面的内容(如果搜不到的话,请搜data-qqt-account这个,应该在搜索结果的第二个)

data-qqt-account="'+(r.qqt_account||"")+'">'+u(r.name)+""),

在其后面添加下面的代码:

t+= "<span class="\&quot;ua\&quot;">" + sskua(s.agent) + "</span><span class="\&quot;ua\&quot;">" + sskos(s.agent) + "</span>",

修改主题style.css

在主题的style.css的最后添加下列样式:

/*多说UA开始*/
span.ua{
 margin: 0 1px!important;
 color:#FFFFFF!important;
 /*text-transform: Capitalize!important;
 float: right!important;
 line-height: 18px!important;*/
}
.ua_other.os_other{
 background-color: #ccc!important;
 color: #fff;
 border: 1px solid #BBB!important;
 border-radius: 4px;
}
.ua_ie{
 background-color: #428bca!important;
 border-color: #357ebd!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_firefox{
 background-color: #f0ad4e!important;
 border-color: #eea236!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_maxthon{
 background-color: #7373B9!important;
 border-color: #7373B9!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_ucweb{
 background-color: #FF740F!important;
 border-color: #d43f3a!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_sogou{
 background-color: #78ACE9!important;
 border-color: #4cae4c!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_2345explorer{
 background-color: #2478B8!important;
 border-color: #4cae4c!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_2345chrome{
 background-color: #F9D024!important;
 border-color: #4cae4c!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_mi{
 background-color: #FF4A00!important;
 border-color: #4cae4c!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_lbbrowser{
 background-color: #FC9D2E!important;
 border-color: #4cae4c!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_chrome{
 background-color: #EE6252!important;
 border-color: #4cae4c!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_qq{
 background-color: #3D88A8!important;
 border-color: #4cae4c!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_apple{
 background-color: #E95620!important;
 border-color: #4cae4c!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_opera{
 background-color: #d9534f!important;
 border-color: #d43f3a!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
 
 
.os_vista,.os_2000,.os_windows,.os_xp,.os_7,.os_8,.os_8_1 {
 background-color: #39b3d7!important;
 border-color: #46b8da!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
 
.os_android {
 background-color: #98C13D!important;
 border-color: #01B171!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.os_ubuntu{
 background-color: #DD4814!important;
 border-color: #01B171!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.os_linux {
 background-color: #3A3A3A!important;
 border-color: #1F1F1F!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.os_mac{
 background-color: #666666!important;
 border-color: #1F1F1F!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.os_unix{
 background-color: #006600!important;
 border-color: #1F1F1F!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.os_nokia{
 background-color: #014485!important;
 border-color: #1F1F1F!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
/*多说UA结束*/

好了大功告成了!

鸣谢

我的那些事

非常感谢91txh博主的分享,本文转载于”多说回复后显示浏览器及操作系统信息(Useragent)

本文共 9 个回复

  • 余聪 2017/02/12 13:11

    事实上

  • 搜索客 2015/11/07 16:23

    现在的UA不对,我昨天刚把我的更新好,电脑坏了,用手机码出来的,累抽了,所以最近是没法写教程了,以后记得经常来我站点看看有没有更新[嘻嘻]

  • 搜索客 2015/11/07 16:19

    http://www.icharm.me/page/2 被禁止访问了你造吗[偷笑]

  • 搜索客 2015/11/06 10:54

    不错不错[嘻嘻]

  • 哀差闷 博主 2015/11/05 19:20

    让我们来测试一下吧

    • 哀差闷 博主 2015/11/05 19:21

      @ 哀差闷 不错哈,已经基本成功了,但是小图标没有显示出来,这个好像和我这款主题有点关系

  • 哀差闷 博主 2015/11/05 19:12

    这是一条测试回复[嘻嘻]

发表评论