Wordpress實現文章支持和反對的功能

2024-09-07 00:50:01

字體：大中小

來源：轉載

供稿：網友

如果你上網易或QQ網站都會看到文章頁面有很多種支持和反對的功能,我們可以發表自己的意見,那么要如何實現文章支持和反對的功能,下面我來介紹利用ajax快速實現.

我是用wp做二次開發的,當然你也可以裝插件,不過我是自己定制的了,實現代碼：

首先在數據庫表wp_posts添加兩個字段like 和un like

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" /> 

                  </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!");

        });