首页 > SEO优化 > wordpress顶和踩功能的实现

wordpress顶和踩功能的实现

时间:2023年10月20日 分类:SEO优化 浏览量:59

顶和踩功能

为了增加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。。。大家尝试吧!

觉得文章有用就打赏一下文章作者

微信扫一扫打赏

标签: