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

所属分类: CMS教程 / WordPress 阅读数: 197
收藏 0 赞 0 分享

本文实例讲述了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建站有所帮助。

更多精彩内容其他人还在看

wordpress wp_list_categories(分类的链接列表)的使用方法

用分类做为导航拦及wp_list_categories的用法,下面是具体的示例,感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

wordpress通过当前文章的ID获取文章标题内容简介的信息

wordpress通过当前文章的ID获取文章的信息用的极多,在wordpress二次开发中经常会使用到,本文将详细介绍,需要了解的朋友可以参考下
收藏 0 赞 0 分享

wordpress获取当前文章的评论数实现代码

wordpress获取当前文章的评论数,是每一个使用wordpress的朋友所疑惑不解的地方,本文将给出解决方法,可供参考
收藏 0 赞 0 分享

wordpress添加更新数据库等操作提示报错

很长时间没有动过wordpress里的布局了,当我进行添加和更新操作时,连连报错,于是搜集整理一些,拿出来和大家分享
收藏 0 赞 0 分享

WordPress高级自定义布局的内容编辑器(TinyMCE)模板

WordPress的编辑器TinyMCE是一个非常强大的工具,对于网页设计师来说,使用WordPress的编辑器TinyMCE是没什么困难的,但是对于那些不怎么了解HTML的人来说却用起来不是那么的得心应手
收藏 0 赞 0 分享

WordPress手动修改文章排列顺序摆脱按发布时间升降序排列

我们常见的WordPress站点文章排序,通常情况下是按发布时间的升序或降序方式排列,想手动修改文章的排列方式,可以随意更改文章的排列位置这种排序方式几乎可以满足我们的特殊需求了
收藏 0 赞 0 分享

wordpress如何设置文章置顶以及区分置顶文章与普通文章

很多博客都有自己的置顶文章,除了位置差异外,跟其他文章是没有任何区别的,那我们怎样才能将它们区别开来呢,本文将介绍几种方法,需要的朋友可以参考下
收藏 0 赞 0 分享

WordPress插件和主题编写时cookie应如何设置

编写WordPressc插件和主题的时候,经常需要用到cookie,但是如果你在WordPress主题文件中直接使用php的setcookie()来发送cookie,那是完全不行的,我怀疑WordPress初始化的时候已经发送了其他输出,才导致setcookie失效
收藏 0 赞 0 分享

Dreamweaver代码的格式化功能掌控html代码的格式

今天偶然发现了Dreamweaver的一个非常有用的功能,就是代码的格式化功能,我们写的html或者css代码都计较混乱,难以阅读,等到所使用的标签越来越多,嵌套越来越深,这时我们已经很难去掌控html代码的格式问题了
收藏 0 赞 0 分享

如何给wordpress创建动态的置顶文章长时间引起注意

置顶文章的作用是希望长时间引起读者注意,可以表明站点的简介、版权声明、友情链接的交换原则等;本文将介绍如何给wordpress创建动态的置顶文章,需要了解的朋友可以参考下
收藏 0 赞 0 分享
查看更多