RSS订阅天使二次元官方粉丝团
你现在的位置:首页 / 建站 / 正文

给Wordpress添加评论投票(赞、踩)功能

1 建站 | 2015年4月20日

看到很多网站评论都有赞、踩功能,你是不是也想要?wordpress不借助任何插件也可以实现哦。

我们以relax2.0.1主题(http://www.soyep.net/616.html)为例。

首先在主题的functions.php里面的<?php 后面写入如下代码:

//评论顶踩
add_action('wp_ajax_nopriv_do_comment_rate', 'do_comment_rate');
add_action('wp_ajax_do_comment_rate', 'do_comment_rate');
function do_comment_rate(){
    if (!isset($_POST["comment_id"]) || !isset($_POST["event"])) {
        $data = array("status"=>500,"data"=>'?');
        echo json_encode($data);
    } else {
        $comment_id = $_POST["comment_id"];
        $event = $_POST["event"];
        $expire = time() + 99999999;
        $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost
        setcookie('comment_rated_'.$comment_id,$comment_id,$expire,'/',$domain,false);
        $_comment_up = get_comment_meta($comment_id,'_comment_up',true);
        $_comment_down = get_comment_meta($comment_id,'_comment_down',true);
        if ($event == "up") {
            if (!$_comment_up) {
                update_comment_meta($comment_id, '_comment_up', 1);
            } else {
                update_comment_meta($comment_id, '_comment_up', ($_comment_up + 1));
            }
        } else {
            if (!$_comment_down || $_comment_down == '' || !is_numeric($_comment_down)) {
                update_comment_meta($comment_id, '_comment_down', 1);
            } else {
                update_comment_meta($comment_id, '_comment_down', ($_comment_down + 1));
            }
        }
        $data = array();
        $_comment_up = get_comment_meta($comment_id,'_comment_up',true);
        $_comment_down = get_comment_meta($comment_id,'_comment_down',true);
        $data = array("status"=>200,"data"=>array("event"=>$event,"_comment_up"=>$_comment_up,"_comment_down"=>$_comment_down));
        echo json_encode($data);
    }
    die;
}
function comment_rate($comment_ID = 0,$echo = true){
    $_comment_up = get_comment_meta($comment_ID,'_comment_up',true) ? get_comment_meta($comment_ID,'_comment_up',true) : 0;
    $_comment_down = get_comment_meta($comment_ID,'_comment_down',true) ? get_comment_meta($comment_ID,'_comment_down',true) : 0 ;
    $done = "";
    if (isset($_COOKIE['comment_rated_'.$comment_ID])) $done = " rated";
    $content = '<span style="float:right;" class="comment--like'.$done.'" data-commentid="'.$comment_ID.'"><a href="javascript:;" data-event="up" title="赞"><i class="iconfont icon-arrowup"></i><button type="button" class="btn1" onmouseover="this.style.backgroundPosition=&#039left -16px&#039" onmouseout="this.style.backgroundPosition=&#039left top&#039" style="background-position: 0% 0%;"></button><em class="action1">'.$_comment_up.'</em></a><a href="javascript:;" data-event="down" title="踩"><i class="iconfont icon-arrowdown"></i><button type="button" class="btn2" onmouseover="this.style.backgroundPosition=&#039left -16px&#039" onmouseout="this.style.backgroundPosition=&#039left top&#039" style="background-position: 0% 0%;"></button><em class="action2">'.$_comment_down.'</em></a></span>';
    if ($echo) {
        echo $content;
    } else {
        return $content;
    }
}
add_action('delete_comment', 'delete_comment_ratings_fields');
function delete_comment_ratings_fields($comment_ID) {
    global $wpdb;
    delete_comment_meta($comment_ID, '_comment_up');
    delete_comment_meta($comment_ID, '_comment_down');
}
然后在你要调入评论里面写入代码,同样以该模版为例,在functions.php的
echo edit_comment_link(__('(编辑)'),' - ','');

后面加入


comment_rate(get_comment_ID(),true);

然后需要调用js功能。

在主题的head.php里面的</head>前加入

<script type="text/javascript" src="./js/comment.js"></script>

然后在主题的js文件夹下面新建一个comment.js(注意为UTF-8格式),内容为


jQuery(document).on("click", ".comment--like a",
function() {
    var $this = jQuery(this);
    var comment_id = $this.parent().data("commentid");
    var event = $this.data("event");
    var count = $this.children(".count");
    if ($this.parent().hasClass("rated")) {
        alert("你已经投过票了");
        return false;
    } else {
        var ajax_data = {
            action: "do_comment_rate",
            comment_id: comment_id,
            event: event
        };
        jQuery.ajax({
            url: '/wp-admin/admin-ajax.php',
            type: "POST",
            data: ajax_data,
            dataType: "json",
            success: function(data) {
                if (data.status == 200) {
                    if (event == "up") {
                        count.html(data.data._comment_up);
                    } else {
                        count.html(data.data._comment_down);
                    }
                    $this.parent().addClass("rated");
                } else {
                    console.log(data.data)
                }
            }
        });
    }
    return false;
});


这只是完成了壳,你还需要美化。


在主题的style.css最后加入


.btn1
{
	width:16px;
	height:16px;
	color:white;
	border:none;
	font-size: 1.05em;
	font-weight:800;
	font-family: Microsoft Yahei;
	background:url("./images/yes.png") no-repeat left top;
}
.btn2
{
	width:16px;
	height:16px;
	color:white;
    border:none;
	font-size: 1.05em;
	font-weight:800;
	font-family: Microsoft Yahei;
	background:url("./images/no.png") no-repeat left top;
}
.action1{  position: relative;
  padding: 0px 10px;
  display: inline-block;
  border: 1px solid #d6d6d6;
  border-radius: 2px;
  background-color: #79EF7F;
  font-size: 15px;
  margin: 0 3px;
  color: #fff;
 font-style:normal;
}
.action2{  position: relative;
  padding: 0px 10px;
  display: inline-block;
  border: 1px solid #d6d6d6;
  border-radius: 2px;
  background-color: #F75C5C;
  font-size: 15px;
  margin: 0 3px;
  color: #fff;
 font-style:normal;
}
完成,一个美化的投票就来了


推荐您阅读更多有关于“ ”的文章

请填写你的在线分享代码
上一篇:如何建ACG分享相关站点下一篇:目前最完美解决WordPress CSS错误方法- error on line 2 at column 6: XML declaration allowed only at the start

猜你喜欢

评论列表: