星期六 , 2020-10-24
首页 > WordPress教程 > 如何实现WordPress AJAX文章投票功能

如何实现WordPress AJAX文章投票功能

很多资讯网站和门户的文章页面底部都有“顶”、“踩”或“喜欢”、“不喜欢”等类型的文章投票功能,你是否也想给自己的WordPress网站也折腾个投票功能呢?看着眼馋吧,没关系,本文就教您如何实现WordPress文章投票功能。关于这个功能的教程和插件大部分都是只用cookies和JS跟踪记录用户点击情况就了事的,不过也有些插件能实现的比较好。本文所讲述的方法是基于免插件实现AJAX文章投票功能。以下是具体方法,代码内容较多:

1、在数据库表wp_posts添加两个自定义字段like和unlike,名称你可以自定义,本文仅示例。

2、添加以下PHP代码到主题function.php文件中保存。

/*
AJAX文章投票功能
代码来源: www.wpzhinan.com/jiaocheng/1494.html
*/
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('');
}

3、将以下HTML前端代码插入你想要显示文章投票功能的地方,一般都是插入到single.php文件内的content下面即可,具体视自身需要而定。

Like
 
Dislike

4、添加文章投票功能CSS样式表代码到主题style.css文件,具体样式可自定义修改,以下代码仅供参考。

/*
文章投票功能样式表
代码来源: www.wpzhinan.com/jiaocheng/1494.html
*/
.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} 

5、添加以下AJAX JS代码,以下JS代码可以插入主题主JS文件,也可新建一个JS文件并在主题头部引入该文件地址。

/*
文章投票功能JS代码
代码来源: www.wpzhinan.com/jiaocheng/1494.html
*/
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 AJAX文章投票功能就已实现了。代码内容较多,以上已按步骤作了简要说明。从此,你就不用再眼馋别人的文章投票功能了。本方法适合有一定代码基础的WordPress用户,初级用户还是找个插件装了算了。希望本文对你有所帮助!

本文地址:http://www.wpzhinan.com/jiaocheng/1494.html
版权申明:除部分代码外,本站内容均为原创,转载请注明来源,违者必究侵权责任!

相关推荐

WP_Image_Editor_Imagick 指令注入漏洞修复方法

Imagick组件爆出了超级漏洞,危害等级极高,直接导致大量使用Imagick组件的网站均 ...