Wordpress實現文章支持和反對功能的方法
發(fā)布時間:2014-12-24 11:43:11 作者:佚名
我要評論

這篇文章主要為大家介紹了Wordpress實現文章支持和反對功能的方法,通過添加自定義函數實現文章的支持和反對功能,是比較典型的WordPress二次開發(fā)技巧,具有一定的參考借鑒價值,需要的朋友可以參考下
本文實例講述了Wordpress實現文章支持和反對功能的方法。分享給大家供大家參考。具體分析如下:
如果你上網易或QQ網站都會看到文章頁面有很多種支持和反對的功能,我們可以發(fā)表自己的意見,那么要如何實現文章支持和反對的功能,下面我來介紹利用ajax快速實現.
我是用wp做二次開發(fā)的,當然你也可以裝插件,不過我是自己定制的了,實現代碼:
首先在數據庫表wp_posts添加兩個字段like 和unlike
PHP實例代碼如下:
復制代碼
代碼如下:public function dolike_unlike(){
$b = M();
$input = new input();
$id = $input->post('id');//過濾提交的信息。防止sql注入,之前發(fā)的代碼我都補上了。
//$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('');
}
$b = M();
$input = new input();
$id = $input->post('id');//過濾提交的信息。防止sql注入,之前發(fā)的代碼我都補上了。
//$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" />
</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>
<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" />
</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!");
});
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建站有所幫助。
相關文章
Dreamweaver CS5 中啟用 WordPress 代碼提示功能的圖文方法
使用 Dreamweaver 這樣的可視化的 IDE 工具進行編程的最大的一個好處是它的代碼提示功能,只要輸入幾個字符,IDE 工具就會智能的給出一系列可選的函數或者變量讓你輸入2012-02-02- 本文詳介如何給WordPress投稿功能添加郵件提醒功能2012-09-28
- WordPress無法在分類描述中使用圖片,本文提供一段簡短的代碼可讓WordPress的分類描述框中的HTML代碼按照你自己的方式顯示出來2014-02-26
wordpress編輯器中添加鏈接功能自動加入nofollow的方法
這篇文章主要介紹了wordpress編輯器中添加鏈接功能自動加入nofollow的方法,需要的朋友可以參考下2014-04-10- 這篇文章主要為大家介紹了WordPress添加前臺注冊功能的方法,較為詳細的分析了前臺注冊功能的完整實現過程,是進行WordPress開發(fā)非常實用的技巧,需要的朋友可以參考下2014-12-17
- 這篇文章主要為大家介紹了WordPress中添加語音搜索功能的實現方法,屬于html5 的speech功能的API,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-18
wordpress 為主題添加AJAX提交評論功能的php代碼
前幾天,為了提高評論體驗,為了減輕服務器負擔,我為主題添加了AJAX提交評論功能,現在分享一下方法。2009-11-09- 關鍵字描述:功能 管理 內容 后臺 文章 分類 頁面 文件 可以 刪除 上一次教程我們講解了使用Wordpress來撰寫你的博客。現在我們來講解 WordPress 后臺的內容管理功能。2009-06-06
- jQuery實現的仿WordPress刪除評論的特效功能,這里的刪除實則是隱藏,要完成真正的刪除需要配合ASP、PHP或其它服務器端語言,本實例幫你理解jQuery對層的控制能力和2009-04-30