当前位置:首页 > CMS教程 > WordPress > 列表

Wordpress实现文章支持和反对的功能

发布:smiling 来源: PHP粉丝网  添加日期:2014-03-18 13:33:19 浏览: 评论:0 

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

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

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

PHP实例代码如下:

  1. public function dolike_unlike(){  
  2.         $b = M();  
  3.         $input = new input();  
  4.         $id = $input->post('id');//过滤提交的信息。防止sql注入,之前发的代码我都补上了。  
  5.         //$id = 5524;  
  6.         $val = $_POST['data'];  
  7.         if($val==1){  
  8.         $b->query("update `wp_posts` set `like` =`like`+1 WHERE id = $id");//点击like的更新     
  9.             }else if($val==0){  
  10.             $b->query("update `wp_posts` set `unlike` =`unlike`+1 WHERE id = $id");  //dislike更新  
  11.                 }else{  
  12.                     $this->error('error');  
  13.                     }  
  14.         $list = $b->query("SELECT `like`,`unlike` FROM `wp_posts` WHERE id = $id");//获取数据  
  15.         $like = $list[0]['like'];  
  16.         $dislike = $list[0]['unlike'];  
  17.         if($like!=0 || $dislike!=0){//计算  
  18.             $elike = $like/($like+$dislike);  
  19.             $elike = substr($elike*100,0,4);  
  20.             $edislike = $dislike/($like+$dislike);  
  21.             $edislike = substr($edislike*100,0,4);  
  22.             }  
  23.         //echo $elike;  
  24.         $output = array(//组合函数待输出  
  25.             likenum=>$like,  
  26.             dislikenum=>$dislike,  
  27.             like=>$elike,  
  28.             dislike=>$edislike 
  29.         );  
  30.         //echo $list;  
  31.         //dump($output);  
  32.         $this->ajaxReturn($output,'success',1);//输出  
  33.         //echo 'ok';  
  34.         //$this->display('');  
  35.         }  

html实例代码如下:

  1. <div class="cl"></div>  
  2.                     <style>  
  3.                   .recomm{ border-bottom:4px solid #FF7523; color:#FF7523}  
  4.                   .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;}  
  5.                   .single_share_class .comm_num{ padding:12px 0 48px 0px}  
  6.                   .single_share_class .comm_num span{ font-size:10px; line-height:11px; color:#ff9853; display:block}  
  7.                   .single_share_class >span >span >span{ margin-bottom:7px !important;}  
  8.                   .single_share_class .copylink{ padding:28px 0 0 0; cursor:pointer}  
  9.                   .single_share_class .st_sharethis_large >span >span{ background:none !important}  
  10.                   .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; }  
  11.                   .dingandcai .left_like{ width:224px; float:left;height:62px; position:relative}  
  12.                   .dingandcai .left_like span,.dingandcai .right_unlike span{ position:relative; z-index:2}  
  13.                   .dingandcai .dingload{ width:78px; float:left; }  
  14.                   .dingandcai .right_unlike{ width:224px; float:left; height:62px;position:relative }  
  15.                   .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}  
  16.                   .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}  
  17.                   .allow_click,.disallow_click{cursor:pointer}  
  18.                   </style>   
  19.                   <div class="dingandcai">  
  20.                   <div class="left_like"  val="1" postid="<?php the_ID(); ?>">  
  21.                   <div class="left_con"></div><span id="like">Like</span>                     
  22.                   </div>  
  23.                   <div class="dingload">  
  24.                   <img src="/img/loading_sm.gif" />&nbsp;  
  25.                   </div>  
  26.                   <div class="right_unlike"  val="0" postid="<?php the_ID(); ?>">  
  27.                   <div class="right_con"></div>  
  28.                   <span id="dislike">Dislike</span>  
  29.                   </div>  
  30.                   </div>  
  31.                   <div class="cl"></div> 

js实例代码如下:

  1. jQuery(".dingload img").ajaxStart(function(){//ajax提示  
  2.         jQuery(this).show();  
  3.         });  
  4.     jQuery(".dingload img").ajaxStop(function(){  
  5.         jQuery(this).hide();  
  6.         });   
  7.     var pid = jQuery(".left_like").attr("postid");    
  8.     var likecookie = jQuery.cookie("like"+pid);  
  9.     if(likecookie!=pid){//判断是否点击过,如果没有点击则  
  10.             jQuery(".left_like,.right_unlike").addClass("allow_click");  
  11.             jQuery.get('/cityosweb/default.php/Shanmao/wplike_unlike',{id:pid},function(data){  
  12.                     if(data.status==1){//显示背景百分比和like dislike字样  
  13.                         jQuery(".left_like .left_con").css("width",data.data.like+"%");  
  14.                         jQuery(".right_unlike .right_con").css("width",data.data.dislike+"%");  
  15.                         }  
  16.                     },"json");  
  17.             }else{//如果已经投过票了则         
  18.                 jQuery(".left_like,.right_unlike").addClass("disallow_click");        
  19.                 jQuery.get('/cityosweb/default.php/Shanmao/wplike_unlike',{id:pid},function(data){  
  20.                     if(data.status==1){//显示背景百分比和投票数  
  21.                         //alert(data.likenum);  
  22.                         jQuery("#like").html(data.data.likenum);  
  23.                         jQuery("#dislike").html(data.data.dislikenum);  
  24.                         jQuery(".left_like .left_con").css("width",data.data.like+"%");  
  25.                         jQuery(".right_unlike .right_con").css("width",data.data.dislike+"%");  
  26.                         }  
  27.                     },"json");  
  28.                 }  
  29.     jQuery(".left_like,.right_unlike").click(function(){  
  30.         if(jQuery(this).hasClass("allow_click")){//如果有这个class才提交  
  31.             var val = jQuery(this).attr("val");  
  32.             var postid = jQuery(this).attr("postid");  
  33.             jQuery.post('/cityosweb/default.php/Shanmao/dolike_unlike',{data:val,id:postid},function(data){//点击的时候  
  34.             if(data.status==1){//成功返回处理  
  35.                         jQuery("#like").html(data.data.likenum);  
  36.                         jQuery("#dislike").html(data.data.dislikenum);  
  37.                         jQuery(".left_like .left_con").css("width",data.data.like+"%");  
  38.                         jQuery(".right_unlike .right_con").css("width",data.data.dislike+"%");  
  39.             jQuery(".left_like,.right_unlike").removeClass("allow_click").addClass("disallow_click"); 
  40.             jQuery.cookie('like'+postid,postid,{expires: 1});//提交后写入cookie,这里是用juqery.cookie插件。保存一天时间,每篇文章保存不一样的id。值随意,只要你上面好做判断。  
  41.             }else{  
  42.                 alert(data.info);  
  43.                 }  
  44.                 },"json");  
  45.         }  
  46.         });  
  47.     jQuery(".disallow_click").live("click",function(){//不允许提交时候弹出  
  48.         alert("Your vote has already been submitted!");  
  49.         }); 

Tags: Wordpress 文章支持 反对

分享到: