洛杉矶MC机房 高速低价18元起

DIYVM

WordPress实现文章支持和反对功能的方法

提示:如果官网是英文页面,建议使用谷歌浏览器能同步翻译页面。点击下载【谷歌浏览器最新绿色便携版】
注意:部分文章发布时间较长,可能存在未知因素,购买时建议在本站搜索商家名称,先充分了解商家动态。
交流:唯一投稿邮箱:hostvps@88.com。

本文实例讲述了Wordpress实现文章支持和反对功能的方法。分享给大家供大家参考。具体分析如下:

如果你上网易或QQ网站都会看到文章页面有很多种支持和反对的功能,我们可以发表自己的意见,那么要如何实现文章支持和反对的功能,下面我来介绍利用ajax快速实现.

我是用wp做二次开发的,当然你也可以装插件,不过我是自己定制的了,实现代码:

首先在数据库表wp_posts添加两个字段like 和unlike

PHP实例代码如下:
 

复制代码

代码如下:

public function dolike_unlike(){ 
$b = M(); 
$input = new input(); 
$id = $input->post('id');//过滤提交的信息。防止sql注入,之前发的代码我都补上了。 
//$id = 5524; 
$val = $_POST['data']; 
if($val==1){ 
$b->query("update `wp_posts` set `like` =`like`+1 WHERE id = $id");//点击like的更新 
}else if($val==0){ 
$b->query("update `wp_posts` set `unlike` =`unlike`+1 WHERE id = $id"); //dislike更新 
}else{ 
$this->error('error'); 

$list = $b->query("SELECT `like`,`unlike` FROM `wp_posts` WHERE id = $id");//获取数据 
$like = $list[0]['like']; 
$dislike = $list[0]['unlike']; 
if($like!=0 || $dislike!=0){//计算 
$elike = $like/($like+$dislike); 
$elike = substr($elike*100,0,4); 
$edislike = $dislike/($like+$dislike); 
$edislike = substr($edislike*100,0,4); 

//echo $elike; 
$output = array(//组合函数待输出 
likenum=>$like, 
dislikenum=>$dislike, 
like=>$elike, 
dislike=>$edislike 
); 
//echo $list; 
//dump($output); 
$this->ajaxReturn($output,'success',1);//输出 
//echo 'ok'; 
//$this->display(''); 
}


html实例代码如下:

复制代码

代码如下:

<div class="cl"></div> 
<style> 
.recomm{ border-bottom:4px solid #FF7523; color:#FF7523} 
.single_share_class{ position:absolute; left:-95px; top:80px; width:75px; height:328px; text-align:center; background:url(/img/single_page_share.png) no-repeat;} 
.single_share_class .comm_num{ padding:12px 0 48px 0px} 
.single_share_class .comm_num span{ font-size:10px; line-height:11px; color:#ff9853; display:block} 
.single_share_class >span >span >span{ margin-bottom:7px !important;} 
.single_share_class .copylink{ padding:28px 0 0 0; cursor:pointer} 
.single_share_class .st_sharethis_large >span >span{ background:none !important} 
.dingandcai{ width:526px; height:62px; background:url(/img/likeandunlike.jpg) no-repeat; margin:20px 0;line-height:62px; text-align:center; font-size:24px; text-shadow:1px 1px 1px #000; } 
.dingandcai .left_like{ width:224px; float:left;height:62px; position:relative} 
.dingandcai .left_like span,.dingandcai .right_unlike span{ position:relative; z-index:2} 
.dingandcai .dingload{ width:78px; float:left; } 
.dingandcai .right_unlike{ width:224px; float:left; height:62px;position:relative } 
.dingandcai .left_like .left_con{ background:url(/img/likeandunlike.jpg) 0px -63px no-repeat; width:50%; height:62px;position:absolute;top:0;left:0; z-index:1} 
.dingandcai .right_unlike .right_con{ background:url(/img/likeandunlike.jpg) -302px -63px no-repeat; width:50%; height:62px;position:absolute;top:0;left:0; z-index:1} 
.allow_click,.disallow_click{cursor:pointer} 
</style> 
<div class="dingandcai"> 
<div class="left_like" val="1" postid="<?php the_ID(); ?>"> 
<div class="left_con"></div><span id="like">Like</span> 
</div> 
<div class="dingload"> 
<img src="/img/loading_sm.gif" />&nbsp; 
</div> 
<div class="right_unlike" val="0" postid="<?php the_ID(); ?>"> 
<div class="right_con"></div> 
<span id="dislike">Dislike</span> 
</div> 
</div> 
<div class="cl"></div>


js实例代码如下:

复制代码

代码如下:

jQuery(".dingload img").ajaxStart(function(){//ajax提示 
jQuery(this).show(); 
}); 
jQuery(".dingload img").ajaxStop(function(){ 
jQuery(this).hide(); 
}); 
var pid = jQuery(".left_like").attr("postid"); 
var likecookie = jQuery.cookie("like"+pid); 
if(likecookie!=pid){//判断是否点击过,如果没有点击则 
jQuery(".left_like,.right_unlike").addClass("allow_click"); 
jQuery.get('/cityosweb/default.php/Shanmao/wplike_unlike',{id:pid},function(data){ 
if(data.status==1){//显示背景百分比和like dislike字样 
jQuery(".left_like .left_con").css("width",data.data.like+"%"); 
jQuery(".right_unlike .right_con").css("width",data.data.dislike+"%"); 

},"json"); 
}else{//如果已经投过票了则 
jQuery(".left_like,.right_unlike").addClass("disallow_click"); 
jQuery.get('/cityosweb/default.php/Shanmao/wplike_unlike',{id:pid},function(data){ 
if(data.status==1){//显示背景百分比和投票数 
//alert(data.likenum); 
jQuery("#like").html(data.data.likenum); 
jQuery("#dislike").html(data.data.dislikenum); 
jQuery(".left_like .left_con").css("width",data.data.like+"%"); 
jQuery(".right_unlike .right_con").css("width",data.data.dislike+"%"); 

},"json"); 

jQuery(".left_like,.right_unlike").click(function(){ 
if(jQuery(this).hasClass("allow_click")){//如果有这个class才提交 
var val = jQuery(this).attr("val"); 
var postid = jQuery(this).attr("postid"); 
jQuery.post('/cityosweb/default.php/Shanmao/dolike_unlike',{data:val,id:postid},function(data){//点击的时候 
if(data.status==1){//成功返回处理 
jQuery("#like").html(data.data.likenum); 
jQuery("#dislike").html(data.data.dislikenum); 
jQuery(".left_like .left_con").css("width",data.data.like+"%"); 
jQuery(".right_unlike .right_con").css("width",data.data.dislike+"%"); 
jQuery(".left_like,.right_unlike").removeClass("allow_click").addClass("disallow_click"); 
jQuery.cookie('like'+postid,postid,{expires: 1});//提交后写入cookie,这里是用juqery.cookie插件。保存一天时间,每篇文章保存不一样的id。值随意,只要你上面好做判断。 
}else{ 
alert(data.info); 

},"json"); 

}); 
jQuery(".disallow_click").live("click",function(){//不允许提交时候弹出 
alert("Your vote has already been submitted!"); 
});

 

希望本文所述对大家的WordPress建站有所帮助。

About 贝壳

【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

本文链接:贝壳主机网 » WordPress实现文章支持和反对功能的方法

分享到: 生成海报
香港/美国/国内高速VPS
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活