也想出现在这里?联系我们

wordpress顶和踩功能的实现

  • 文章介绍
  • 升级版本
  • 评价&建议
也想出现在这里?联系我们
也想出现在这里?联系我们

顶和踩功能

为了增加wordpress的互动性,在很多时候,我们会给一篇文章添加wordpress顶和踩功能,而这样一个简单的功能,我们可以通过插件来完成,但是比较好的插件并不多,要么是收费的,要么就是死位置的,不灵活,小编在最近写的一款笑话类wordpress主题的时候,也遇到这个问题,百度了很久,终究还是小编的好基友V7V3的推荐教程完成了wordpress顶和踩功能的实现!

教程说明

1、新建数据表

首先我们必须要新建一个数据表来储存文章投票的数据,我们必须要获取用户、文章的ID、投票内容等信息。。。

恩,创建数据表的方法如下代码,放入到wordpress主题的根目录functions.php文件内

  1. /*********更新重写规则***************/    
  2. function ashu_load_theme() {     
  3.     global $pagenow;     
  4.     if ( is_admin() && 'themes.php' == $pagenow && isset( $_GET['activated'] ) )     
  5.         ashu_vote_install(); //激活主题的时候执行函数     
  6. }     
  7. add_action( 'load-themes.php', 'ashu_load_theme' );     
  8. function ashu_vote_install(){     
  9.     global $wpdb;     
  10.     //创建 _post_vote表     
  11.     $table_name = $wpdb->prefix . 'post_vote';     
  12.     if$wpdb->get_var("SHOW TABLES LIKE '$table_name'") != $table_name ) :     
  13.     $sql = " CREATE TABLE `".$wpdb->prefix."post_vote` ( 
  14.       `id` BIGINT NOT NULL AUTO_INCREMENT PRIMARY KEY ,   
  15.       `user` INT NOT NULL ,   
  16.       `post` INT NOT NULL ,   
  17.       `rating` varchar(10),   
  18.       `ip` varchar(40)   
  19.      ) ENGINE = MYISAM DEFAULT CHARSET=utf8;";     
  20.         require_once(ABSPATH . 'wp-admin/includes/upgrade.php');     
  21.         dbDelta($sql);     
  22.     endif;     
  23. }   

2、准备投票和查询函数

然后我们要准备好投票的数据函数和数据查询函数,同样将如下代码放入functions.php文件内

a、数据函数的添加
  1. /*   
  2. *添加投票函数   
  3. *$post_id 文章id   
  4. *$user_id 用户ID   
  5. *$ip 用户IP   
  6. *$rating 投票内容   
  7. */    
  8. function add_vote($post_id,$user_id='',$ip='',$rating='up'){     
  9.     global $wpdb;     
  10.     $user_id = (int)$user_id;     
  11.     $post_id = (int)$post_id;     
  12.     if(($user_id=='')&&($ip=='')){     
  13.         return "e"//返回error     
  14.     }     
  15.     //检查用户对某一文章是否已经投票票了     
  16.     if($user_id!=''){     
  17.         $check"select * from ".$wpdb->prefix."post_vote where post='$post_id' and user='$user_id'";     
  18.     }else{     
  19.         if($ip!=''){     
  20.             $check"select * from ".$wpdb->prefix."post_vote where post='$post_id' and ip='$ip'";     
  21.         }     
  22.     }     
  23.     $coo = $wpdb->get_results($check);     
  24.     //投票内容只能是up或者down     
  25.     if($rating=='up'){     
  26.         $rating='up';     
  27.     }else{     
  28.         $rating='down';     
  29.     }     
  30.     //如果不存在数据     
  31.     if(!count($coo) > 0){     
  32.         //插入数据 sql     
  33.         $s = "insert into ".$wpdb->prefix."post_vote (user,post,rating,ip) values('$user_id','$post_id','$rating','$ip')";     
  34.         $wpdb->query($s);     
  35.         return "y"//返回yes     
  36.     }else{     
  37.         return "h"//返回have     
  38.     }     
  39.     return "e";//返回error     
  40. }    
b、数据查询函数的添加
  1. /*    
  2. *获取文章投票数据    
  3. *$post_id 文章ID    
  4. *$vote 投票内容    
  5. */     
  6. function get_post_vote($post_id,$vote='up'){     
  7.     global $wpdb;     
  8.     $post_id = (int)$post_id;     
  9.     if($vote == 'up'){     
  10.         $vote='up';     
  11.     }else{     
  12.         $vote='down';     
  13.     }     
  14.     //查询数据sql     
  15.     $sql = "select count(*) from ".$wpdb->prefix."post_vote where post='$post_id' and rating='$vote'";     
  16.     $coo = $wpdb->get_var($sql);     
  17.     if($coo)     
  18.     return $coo//返回数据     
  19.     else     
  20.     return 0;     
  21. }   

3、整理前台的html和js调用

将上面的函数的创建后,后面我们就要输出wordpress顶和踩功能的前台代码了!

a、前台函数输出
  1. <span class="vote_up" id="<?php echo 'vote_up'.$post->ID;?>">     
  2.     <a href="javascript:void(0);" rel="<?php echo 'up_',$post->ID;?>">     
  3.     <span id="<?php echo 'vup'.$post->ID;?>">     
  4.         <?php echo get_post_vote($post->ID,'up');?>     
  5.     </span>     
  6.     </a>     
  7. 顶</span>     
  8.     
  9. <span class="vote_down" id="<?php echo 'vote_down'.$post->ID;?>">     
  10.     <a href="javascript:void(0);" rel="<?php echo 'down_'.$post->ID;?>">     
  11.     <span id="<?php echo 'vdown'.$post->ID;?>">     
  12.         <?php echo get_post_vote($post->ID,'down');?>     
  13.     </span>     
  14.     </a>踩    
  15. </span>  

将上面的代码放到我们需要显示wordpress顶和踩功能的地方,通过上面的函数代码得出了下面输出的html,大家适量的修改即可!

b、前台函数输出
  1. <span class="vote_up" id="vote_up44">    
  2.     <a href="javascript:void(0);" title="值得" rel="up_44">    
  3.     <span id="vup44">    
  4.         0     
  5.     </span>    
  6.     </a>    
  7. 顶</span>    
  8. <span class="vote_down" id="vote_down44">    
  9.     <a href="javascript:void(0);" title="不值" rel="down_44">    
  10.     <span id="vdown44">    
  11.         1     
  12.     </span>    
  13.     </a>踩     
  14. </span>  
c、js的调用

在wordpress主题文件的footer.php里加入

  1. <script src="<?php echo get_template_directory_uri();?>/js/jquery-1.7.2.min.js"></script>     
  2. <script type="text/javascript">var ajax_url = '<?php echo admin_url(); ?>admin-ajax.php';</script>    
  3. <script src="<?php echo get_template_directory_uri();?>/js/ding.js"></script>   

其中,jquery-1.7.2.min.js可以到网上下载,或者大家的主题里已经提供,那么就不需要调用,下面我们在主题文件夹的js文件下新建个ding.js,没有的创建一下,下面是ding.js的内容:

  1. /**      
  2.  * ding 
  3.     
  4.  */     
  5.        
  6. function getCookie(name) {     
  7.     var start = document.cookie.indexOf( name + "=" );     
  8.     var len = start + name.length + 1;     
  9.     
  10.     if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) )     
  11.         return null;     
  12.     
  13.     if ( start == -1 )     
  14.         return null;     
  15.     
  16.     var end = document.cookie.indexOf( ';', len );     
  17.     
  18.     if ( end == -1 )     
  19.         end = document.cookie.length;     
  20.     return unescape( document.cookie.substring( len, end ) );     
  21. }     
  22. function ashu_isCookieEnable() {     
  23.     var today = new Date();     
  24.     today.setTime( today.getTime() );     
  25.     var expires_date = new Date( today.getTime() + (1000 * 60) );     
  26.     
  27.     document.cookie = 'ashu_cookie_test=test;expires=' + expires_date.toGMTString() + ';path=/';     
  28.     var cookieEnable = (getCookie('ashu_cookie_test') == 'test') ?  true : false;     
  29.     //document.cookie = 'ludou_cookie_test=;expires=Fri, 3 Aug 2001 20:47:11 UTC;path=/';     
  30.     return cookieEnable;     
  31. }     
  32.       
  33. jQuery(document).ready(function($) {     
  34.     var ashu_token = 1;     
  35.     $('.vote_up a').click(function(){     
  36.         //检查浏览器是否启用cookie功能     
  37.         if( !ashu_isCookieEnable() ) {     
  38.             alert("很抱歉,您不能给本文投票!");     
  39.             return;     
  40.         }     
  41.         if( ashu_token != 1 ) {     
  42.             alert("您的鼠标点得也太快了吧?!");     
  43.             return false;     
  44.         }     
  45.         ashu_token = 0;     
  46.         //获取投票a标签中的rel值     
  47.         var full_info = $(this).attr( 'rel' );     
  48.         var arr_param = full_info.split( '_' ); //以字符"_"分割     
  49.         //发起ajax     
  50.         $.ajax({     
  51.             url:ajax_url, //ajax地址     
  52.             type:'POST',     
  53.             //请求的参数包括action   rating  postid三项     
  54.             data:'action=vote_post&rating=' + arr_param[ 0 ] + '&postid=' + arr_param[ 1 ],     
  55.             //返回数据     
  56.             success:function(results){     
  57.                 if(results=='n'){     
  58.                     alert('评价失败');     
  59.                     ashu_token = 1;     
  60.     
  61.                 }     
  62.                 if (results=='y'){     
  63.                     //如果成功,给前台数据加1     
  64.                     var upd_vd = 'vup' + arr_param[ 1 ];     
  65.                     $('#'+upd_vd).text(parseInt($("#"+upd_vd).text())+1);     
  66.                     ashu_token = 1;     
  67.                          
  68.                 }     
  69.                 if (results=='h'){     
  70.                     ashu_token = 1;     
  71.                     alert('已经发表过评价了');     
  72.                 }     
  73.                 if (results=='e'){     
  74.                     ashu_token = 1;     
  75.                     alert('评价失败');     
  76.                 }     
  77.             }     
  78.         });     
  79.     });     
  80.          
  81.     $('.vote_down a').click(function(){     
  82.         if( !ashu_isCookieEnable() ) {     
  83.             alert("很抱歉,您不能给本文投票!");     
  84.             return;     
  85.         }     
  86.         if(ashu_token != 1) {     
  87.             alert("您的鼠标点得也太快了吧?!");     
  88.             return false;     
  89.         }     
  90.         ashu_token = 0;     
  91.     
  92.         var full_info = $(this).attr( 'rel' );     
  93.         var arr_param = full_info.split( '_' );     
  94.         $.ajax({     
  95.             url:ajax_url,     
  96.             type:'POST',     
  97.             data:'action=vote_post&rating=' + arr_param[ 0 ] + '&postid=' + arr_param[ 1 ],     
  98.             success:function(results){     
  99.                 if(results=='n'){     
  100.                     alert('评价失败');     
  101.                     ashu_token = 1;     
  102.                 }     
  103.                 if (results=='y'){     
  104.                     var upd_vd = 'vdown' + arr_param[ 1 ];     
  105.                     $("#"+upd_vd).text(parseInt($("#"+upd_vd).text())+1);     
  106.                     ashu_token = 1;     
  107.                 }     
  108.                 if (results=='h'){     
  109.                     ashu_token = 1;     
  110.                     alert('已经发表过评价了');     
  111.                 }     
  112.                 if (results=='e'){     
  113.                     ashu_token = 1;     
  114.                     alert('发生未知错误');     
  115.                 }     
  116.             }     
  117.         });     
  118.     });     
  119. });    

4、最终后台的php处理

将代码放到functions.php完成处理ajax请求,

  1. /*    
  2. *wp的ajax都可以通过请求中的action参数来执行对应的钩子    
  3. *示例中我们的action参数值是vote_post    
  4. *所以我们可以直接用下面两个钩子来执行动作    
  5. */     
  6. add_action("wp_ajax_vote_post""add_votes_options");     
  7. add_action("wp_ajax_nopriv_vote_post""add_votes_options");     
  8. function add_votes_options() {     
  9.     
  10. if( isset($_POST['action']) && ($_POST['action'] == 'vote_post') ){     
  11.     $postid = (int)$_POST['postid'];     
  12.     if( !$postid ){     
  13.         echo 'e'; //输出error     
  14.         die(0);     
  15.     }     
  16.     //cookie中是否已经存在投票数据     
  17.     $voted = $_COOKIE["smzdm_voted_".$postid];     
  18.     if$voted ){     
  19.         echo 'h'; //输出have     
  20.         die(0);     
  21.     }     
  22.     $ip = $_SERVER['REMOTE_ADDR'];//ip     
  23.     $rating = $_POST['rating']; //投票内容     
  24.     //判断用户是否登录     
  25.     if(  is_user_logged_in() ){     
  26.         global $wpdb$current_user;     
  27.         get_currentuserinfo();     
  28.         $uid = $current_user->ID;     
  29.     }else{     
  30.         $uid='';     
  31.     }     
  32.     if($rating=='up'){     
  33.         $rating='up';     
  34.     }else{     
  35.         $rating='down';     
  36.     }     
  37.     //添加数据     
  38.     $voted = add_vote($postid,$uid,$ip,$rating);     
  39.     if($voted=='y'){     
  40.         //设置cookie     
  41.         setcookie("ashu_voted_" . $postid,$rating, time() + 3000000, '/');     
  42.         echo 'y';//输出yes     
  43.         die(0);     
  44.     }     
  45.     if($voted=='h'){     
  46.         //设置cookie     
  47.         setcookie("ashu_voted_" . $postid,$rating, time() + 3000000, '/');     
  48.         echo 'h';     
  49.         die(0);     
  50.     }     
  51.     if($voted=='e'){     
  52.         echo 'n';//输出no     
  53.         die(0);     
  54.     }     
  55. }else{     
  56.     echo 'e';//输出eroor     
  57. }     
  58. die(0);     
  59. }  

到这里,教程算是结束了,要提醒大家的是,功能集成到主题后,需要将主题重新安装后,数据表才会被添加!OK。。。大家尝试吧!

22
  • 2013.11.05初次和大家见面了!

已拥有7人对该主题的建议

  1. 6楼
    顶和踩:

    求助:我网站顶和踩在IE浏览器可以用,在版本高的浏览器就不能用了, 😥 猎豹安全浏览器,百度浏览器,等等多不能用。能帮看看吗?

    2015-05-19 下午 5:23 [回复]
  2. 5楼
    leo:

    貌似不可以,求解

    2015-03-31 下午 2:28 [回复]
  3. 4楼
    易淘金:

    能否做成插件 这样更简单?

    2014-12-02 上午 9:41 [回复]
  4. 地板
    雷富:

    试试能不能学会。

    2014-01-17 下午 6:34 [回复]
  5. 板凳
    于尼玛:

    学习了

    2014-01-11 下午 8:20 [回复]
  6. 沙发
    诸葛小觉:

    呵呵,这个挺有用的,不过我会把那个踩的去掉~

    2013-11-09 下午 1:54 [回复]

发表评论

还能输入240个字

Hi, 欢迎加入Wordpress技术交流群,带你装逼带你飞!

我要入群
也想出现在这里?联系我们
wordpress主题推荐
也想出现在这里?联系我们
wordpress主题站推荐
也想出现在这里?联系我们
wordpress主题站推荐
也想出现在这里?联系我们

我来推荐一个更牛逼的给你看看?

  • 猛戳我吧