多说回复可见显示站长回复及UA信息
     2016-6-1    +4°    1591  

在wordpress自带的评论系统中能够很轻松的实现回复可见功能,但是大多数人为了方便、防垃圾评论等原因使用的是多说评论插件,那么要是在多说中加入回复可见功能能不能实现了,答案是肯定的,而且这不等同于一般的回复可见,查看源代码也是不能看到隐藏的内容的!

多说回复可见显示站长回复及UA信息

下面来讲解如何实现多说回复可见、显示站长回复、及UA信息!

一、本地化embed.js

1.下载多说社会化评论框核心脚本embed.js

多说社会化评论框核心脚本embed.js文件是个多说官方提供的公用文件,如果官方渠道过于拥挤,或者服务器故障(这个已经有过了~~),就会导致页面加载过慢或者完全无法加载,如果我们将其下载下来,放到我们自己的空间,就会使加载速度有一定的提升,同时也可以对多说评论框做一些个性化调整,因为我们使用的多说评论框主体代码全部都在这里面。以下用wordpress的多说插件为例。
首先打开多说核心脚本的远程文件:

然后点击右键-另存为,将其保存下来,上传到你自己的空间里(所在目录为【wp-content/plugins/duoshuo】)。

2.编辑wordpress.php文件

在【wp-content/plugins/duoshuo】所在目录下找到wordpress.php文件,用编辑器打开,搜索embed.js,会搜到三个结果,其中有两处为网址:http://static.duoshuo.com/embed.js,将这两处网址都改为本地embed.js所在地址,即:

<?php bloginfo( 'url' ); ?>/wp-content/plugins/duoshuo/embed.js

 
然后保存上传即可。

3.检查是否本地化成功

最后刷新一下页面,然后点击鼠标右键 查看源代码-搜索embed.js,如果显示wp-content/plugins/duoshuo/embed.js,而且多说评论框区域一切正常,那么恭喜您,多说社会化评论框核心脚本embed.js本地化就完全成功了!

二、多说回复

1.编辑embed.js文件

用编辑器打开embed.js文件,搜索function r(),找到一下代码:

function r() {
        return 0 == nt.data.user_id
}

 
并将其改为:

function r() {
        document.cookie="ssk_ds_user_id=" + nt.data.user_id;
        return 0 == nt.data.user_id
 }

 
本处为登录判断函数,第三行的意思是:返回当前用户id是否为0,如果为0就是未登录的状态,如果不为0就是已经登陆多说;
所加的第二行的意思是:将当前用户id设置cookie,如果未登录,cookie值就是0,已登录cookie值就是当前用户的多说id。
这个cookie就是实现回复可见的关键所在!

2.修改functions.php文件

打开wordpress主题的functions.php文件,在最后一个?>前面加上以下代码:

//回复可见开始
error_reporting(0);
function reply($content){
/***** ↓↓↓ 20150513 ↓↓↓ *****/
if(is_single() && preg_match('/\[hide\]([\s\S]*?)\[\/hide\]/i', $content)){
    $stats = 'hide';
/***** 将以下代码
    if(preg_match_all('/\[hide\]([\s\S]*?)\[\/hide\]/i', $content, $hide_words)){
        $stats = 'hide';  
    }
改为下面代码*****/
    preg_match_all('/\[hide\]([\s\S]*?)\[\/hide\]/i', $content, $hide_words);
/***** ↑↑↑ 20150513 ↑↑↑ *****/
//print_r($hide_words);//请看下方说明(6)
//多说部分开始
    $thread_key= get_the_ID();//多说thread_key即为当前文章id
    $short_name="";//请在引号内填入您自己的short_name,获取方法见代码下方说明(1)
    $user_id=$_COOKIE['ssk_ds_user_id'];
    $url="http://api.duoshuo.com/threads/listPosts.json?thread_key=$thread_key&short_name=$short_name";//获取当前文章第一页已通过审核的评论的接口(多说公开接口),翻页再加参数&page=1/2/3
    $str = file_get_contents($url);//获取当前文章第一页已通过审核的评论的内容
    $data = json_decode($str,true);//将第一页评论信息json格式数据转换为数组格式
    $pages=$data['cursor']['pages'];//获取当前文章的评论总页数
//用户评论审核状态判断开始  
    $i=1;//评论初始页数 第1页
    while($i<=$pages){//页数最大值为上面获取到的总页数
        $all[$i]=$url."&page=".$i;//当前文章所有多说评论的每一页网址
        $strall = file_get_contents($all[$i]);
        $dataall = json_decode($strall,true);//取当前文章多说所有评论的内容
        foreach($dataall as $k => $v){
            if(is_array($v)){
                foreach($v as $k1 => $v1){
                    if($v1['author_id'] == $user_id){
                        $zhuangtai=$v1['status'];//获取当前多说登录用户在本文的评论内容的审核状态
                        break;
                    }
                }
            }
        }
        if($zhuangtai=="approved"){
            break;//如果在第1页评论中,用户有通过审核的评论则停止判断
        }else{
            $i++;//如果第1页没有,则页数加1,再判断第2页,依次循环到评论最后一页
        }
    }
//用户评论审核状态判断结束
//获取多说 待审核 评论内容 开始
    $pendingurl="http://$short_name.duoshuo.com/api/posts/list.json?status=pending";//获取当前站点的所有待审核评论的接口(这是我自己抓的,多说官方未公开待审核接口)
    $pendingstr = file_get_contents($pendingurl);//获取待审核状态涉及到的所有内容,id、评论内容等等
    $pendingdata = json_decode($pendingstr,true);
    foreach($pendingdata as $pendingk => $pendingv){
        if(is_array($pendingv)){
            foreach($pendingv as $pendingk1 => $pendingv1){
                if(isset($pendingv1['author_id']) && $pendingv1['author_id'] == $user_id){
                    $pendingzhuangtai=$pendingv1['status'];
                    break;
                }
            }
        }
    }
//获取多说 待审核 评论内容 结束
    if($user_id=="5034959"){//请将5034959换为您自己的多说id,获取方法见代码下方说明(2)
        $stats = 'show';//如果是站长直接显示
    }elseif($zhuangtai=="approved"&$user_id!="0"){//approved表示多说评论审核已通过,并且多说ID不为0,也就是必须为登录用户,而非游客状态
        $stats = 'show';//评论审核通过则显示
    }elseif($pendingzhuangtai=="pending"){//pending表示多说评论待审核
        $stats = 'pending';//此处用来切换提示信息,如果为pending待审核则提示信息为 已评论待审核 提示内容见下方,如果不需要审核,回复直接可见,将 pending 改为 show 即可!
    }elseif($user_id=="0"){//加强游客判断,如果用户ID为0,也就是未登录
        $stats = 'hide';//则隐藏
    }else{
        $stats = 'hide';//其他状态则不显示隐藏内容
    }
//多说部分结束
    if($stats == 'pending'){//如果已经评论则提示此消息
        $hide_notice = '<p style="text-align:center;border:1px dashed #FF9A9A;padding:8px;margin:10px auto;color:#FF6666;">温馨提示:您已<a class="scroll_b" title="评论本文" style="cursor: pointer;">评论本文</a>,请耐心等待管理员审核,审核通过后<a href="javascript:window.location.reload();" title="刷新">刷新本页</a>才能查看。</p>';
    }else{//否则提示此消息
/***** ↓↓↓ 20150513 ↓↓↓ *****/
//更新了提示信息
        $hide_notice = '<p style="text-align:center;border:1px dashed #FF9A9A;padding:8px;margin:10px auto;color:#FF6666;">温馨提示:此处内容需要<a class="scroll_b" title="评论本文" style="cursor: pointer;">评论本文</a>并通过审核后,<a href="javascript:window.location.reload();" title="刷新">刷新本页</a>才能查看,所以请勿使用垃圾评论!<br>如果您曾经回复过本文,请直接点击<a href="javascript:window.location.reload();" title="刷新">刷新本页</a>!<br><span style="font-weight: bold; color: #FF0004;">游客回复后依然不可见!</span></p>';
/***** ↑↑↑ 20150513 ↑↑↑ *****/
    }
    if($stats == 'show'){//如果$stats='show'则显示隐藏内容
        $content = str_replace($hide_words[0], $hide_words[0], $content);
    }else{//否则将隐藏的内容替换为相应的提示信息
        $content = str_replace($hide_words[0], $hide_notice, $content);
    }
}
    return $content;
}
add_filter('the_content', 'reply');
function hide($atts, $content=null, $code="") {
    $return = '<div class="showhide"><h4>本文隐藏的内容</h4>';
    $return .= $content;
    $return .= '</div>';
    return $return;
}
add_shortcode('hide' , 'hide' );
//回复可见结束

 

3.添加css代码

打开主题的style.css文件,在最后面加上以下代码:

/*回复可见开始*/
.showhide{overflow:hidden;border:1px dashed #FF9A9A;margin:8px 0;padding:10px;zoom:1;}.showhide h4{margin-bottom:10px;color:#F66;font-size:12px;text-align:center;}
.tip{text-align:center!important;border:1px dashed #FF9A9A;padding:8px;margin:10px auto;color:#FF6666;}
/*回复可见结束*/

 
到此多说回复可见就修改完成了!

4.说明

(1)$short_name获取方法:登录多说官网http://duoshuo.com,点击右上角后台管理,点击需要修改的对应的网站,看到地址栏网址形如:http://ssk.duoshuo.com/admin/,则您的$short_name为.duoshuo前面的字符,我的就是ssk,所以:$short_name="ssk";
(2)获取多说id,请到多说官网的个人信息中寻找。
user_id=后面的数字就是您的多说id!
(3)代码中//后面的部分为说明可删除
(4)使用方法:
【hide】这里放需要隐藏的内容,记得要把【】换为[]【/hide】
(5)如果您使用了supercache等缓存插件,请记得将有回复可见的文章设置为:禁止缓存!
(6)如果您使用本教程后,未回复依然可以看到应隐藏的内容,请将//print_r($hide_words);前面的//去掉,然后刷新文章,本功能可以看到是否已经匹配到应该隐藏的内容,如果未匹配到,现初步判断为您当前使用的主题所造成的,请联系您的主题作者帮忙查看!如果您知道具体原因,也请留言告知!

三、显示站长回复图标

用编辑器打开embed.js文件,在最顶部加上以下代码:

//管理员判断开始
function sskadmin(e) {
    var ssk = '';
    if(e.user_id==【多说id】){
        ssk = '<div style="position: absolute;margin-left:300px;"><img src="【改为你自己的图片地址】" width="【图片宽度】" height="【图片高度】"></div>'
    }
    return ssk;
}
//管理员判断结束

 
代码中的多说ID需要自己在多说官网获取,图片地址,高度,宽度自定义。填上ID的时候去掉【】。

然后搜索:

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

 
在其后面添加:

t += sskadmin(r),

 
保存后就可以上传使用了!

四、显示浏览器及操作系统信息

用编辑器打开embed.js文件,在最顶部添加如下显UA代码:

//移动客户端判断开始,作用:在移动客户端显示不同样式
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 href="http://ssk.91txh.com/2345download.php?id=2" target="_blank" style="color:#FFFFFF!important;"><i class="fa fa-globe"></i> 2345王牌浏览器</a>'
        } else if (r = e.match(/2345chrome/ig)) {
            outputer = '<span class="ua_2345chrome"><a href="http://ssk.91txh.com/2345download.php?id=3" target="_blank" style="color:#FFFFFF!important;"><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(/Edge([\d]*)\/([^\s]+)/ig)) {
            var r1 = r[0].split("/");
            outputer = '<span class="ua_ie"><i class="fa fa-globe"></i> Edge' + '|' + 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='<br><br>';
        }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结束

 
r1[1]/*.split('/')[0]*/浏览器后面接的这种代码是用来截取版本号的,例如:UCBrowser|3.0.1354.9 通过这个可以只显示 UCBrowser|3 或者 UCBrowser|3.0 ,您可以自己设定截取位置,我也不会弄所以就加了/**/把截取注释掉,让它全都显示了。。。

然后搜索:

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

 
在其后面添加:

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

 
然后在主题的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;
    padding: 1px 5px 0!important;
}
.ua_ie{
    background-color: #428bca!important;
    border-color: #357ebd!important;
    border-radius: 4px;
    padding: 1px 5px 0!important;
}
.ua_firefox{
    background-color: #f0ad4e!important;
    border-color: #eea236!important;
    border-radius: 4px;
    padding: 1px 5px 0!important;
}
.ua_maxthon{
    background-color: #7373B9!important;
    border-color: #7373B9!important;
    border-radius: 4px;
    padding: 1px 5px 0!important;
}
.ua_ucweb{
    background-color: #FF740F!important;
    border-color: #d43f3a!important;
    border-radius: 4px;
    padding: 1px 5px 0!important;
}
.ua_sogou{
    background-color: #78ACE9!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 1px 5px 0!important;
}
.ua_2345explorer{
    background-color: #2478B8!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 1px 5px 0!important;
}
.ua_2345chrome{
    background-color: #F9D024!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 1px 5px 0!important;
}
.ua_mi{
    background-color: #FF4A00!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 1px 5px 0!important;
}
.ua_lbbrowser{
    background-color: #FC9D2E!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 1px 5px 0!important;
}
.ua_chrome{
    background-color: #EE6252!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 1px 5px 0!important;
}
.ua_qq{
    background-color: #3D88A8!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 1px 5px 0!important;
}
.ua_apple{
    background-color: #E95620!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 1px 5px 0!important;
}
.ua_opera{
    background-color: #d9534f!important;
    border-color: #d43f3a!important;
    border-radius: 4px;
    padding: 1px 5px 0!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: 1px 5px 0!important;
}
.os_android {
    background-color: #98C13D!important;
    border-color: #01B171!important;
    border-radius: 4px;
    padding: 1px 5px 0!important;
}
.os_ubuntu{
    background-color: #DD4814!important;
    border-color: #01B171!important;
    border-radius: 4px;
    padding: 1px 5px 0!important;
}
.os_linux {
    background-color: #3A3A3A!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 1px 5px 0!important;
}
.os_mac{
    background-color: #666666!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 1px 5px 0!important;
}
.os_unix{
    background-color: #006600!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 1px 5px 0!important;
}
.os_nokia{
    background-color: #014485!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 1px 5px 0!important;
}
/*多说UA结束*/

 
至此,教程全部结束。感觉看看效果吧。

PS:其中用到了Font Awesome字体图标,不懂的自己百度。