本篇教程要實現的內容為文章定踩功能，或者說 「喜歡」「不喜歡」 。

應用例項：

實現步驟：

本例項以上圖所示喜歡和不喜歡為例。

一、新建資料表

新建資料表，將文章投票資料儲存在新的資料表中，我們需要記錄使用者 ID，文章 ID，投票內容，使用者 ip，新資料表如下：

實現新建資料表程式碼如下，將程式碼新增進主題的 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. }  

二、準備投票和查詢函式

準備資料庫操作函式，包括新增資料函式和查詢資料，將如下函式程式碼也新增到主題的 functions.php 檔案 (或自定)：

1 、新增資料函式

  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. }  

2 、查詢投票資料函式

比如查詢某文章點選 up 的資料，則使用 get_post_vote(1,'up');

  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. }  

三、準備前臺 html 和 js

建立好了新的資料表，也準備好了實現投票功能的函式，接下來看前臺的 html 和 js 。

1 、網頁前臺顯示資料，將下面的程式碼放在輸出文章的迴圈內，即常說的 loop 中。

  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>  

上面程式碼將會輸出一個如下的 html 結構

  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>  

四、 js 程式碼
本篇教程中和上一篇一樣，我們同樣使用 jquery 發起 ajax 請求，所以首先在網頁頭部載入 jquery 程式碼，我在主題底部檔案 footer.php 中載入 jqeury 。我將 jquery-1.7.2.min.js 放在了主題資料夾的 js 資料夾裡面，所以用 get_template_directory_uri() 函式來輸出主題的 url

  1. <script src="<?php echo get_template_directory_uri();?>/js/jquery-1.7.2.min.js"></script>   

然後我將發起 ajax 請求程式碼也放在了主題裡面 js 資料夾中的 ashu.js 檔案，所以再加上一個

其中輸出了 ajax 請求的地址：www.ashuwp.com/wp-admin/admin-ajax.php

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

ashu.js 檔案中的程式碼

  1. /**     
  2.  * by ashu.     
  3.  * URI: http://www.ashuwp.com     
  4.  */   
  5.   
  6. /**   
  7.  * 獲取 Cookie   
  8.  *name  cookie 名稱   
  9.  */   
  10. function getCookie(name) {   
  11.     var start = document.cookie.indexOf( name + "=" );   
  12.     var len = start + name.length + 1;   
  13.   
  14.     if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) )   
  15.         return null;   
  16.   
  17.     if ( start == -1 )   
  18.         return null;   
  19.   
  20.     var end = document.cookie.indexOf( ';', len );   
  21.   
  22.     if ( end == -1 )   
  23.         end = document.cookie.length;   
  24.     return unescape( document.cookie.substring( len, end ) );   
  25. }   
  26. function ashu_isCookieEnable() {   
  27.     var today = new Date();   
  28.     today.setTime( today.getTime() );   
  29.     var expires_date = new Date( today.getTime() + (1000 * 60) );   
  30.   
  31.     document.cookie = 'ashu_cookie_test=test;expires=' + expires_date.toGMTString() + ';path=/';   
  32.     var cookieEnable = (getCookie('ashu_cookie_test') == 'test') ?  true : false;   
  33.     //document.cookie = 'ludou_cookie_test=;expires=Fri, 3 Aug 2001 20:47:11 UTC;path=/';   
  34.     return cookieEnable;   
  35. }   
  36.     
  37. jQuery(document).ready(function($) {   
  38.     var ashu_token = 1;   
  39.     $('.vote_up a').click(function(){   
  40.         //檢查瀏覽器是否啟用 cookie 功能   
  41.         if( !ashu_isCookieEnable() ) {   
  42.             alert("很抱歉，您不能給本文投票！");   
  43.             return;   
  44.         }   
  45.         if( ashu_token != 1 ) {   
  46.             alert("您的滑鼠點得也太快了吧？！");   
  47.             return false;   
  48.         }   
  49.         ashu_token = 0;   
  50.         //獲取投票 a 標籤中的 rel 值   
  51.         var full_info = $(this).attr( 'rel' );   
  52.         var arr_param = full_info.split( '_' ); //以字元"_"分割   
  53.         //發起 ajax   
  54.         $.ajax({   
  55.             url:ajax_url, //ajax 地址   
  56.             type:'POST',   
  57.             //請求的引數包括 action   rating  postid 三項   
  58.             data:'action=vote_post&rating=' + arr_param[ 0 ] + '&postid=' + arr_param[ 1 ],   
  59.             //返回資料   
  60.             success:function(results){   
  61.                 if(results=='n'){   
  62.                     alert('評價失敗');   
  63.                     ashu_token = 1;   
  64.   
  65.                 }   
  66.                 if (results=='y'){   
  67.                     //如果成功，給前臺資料加 1   
  68.                     var upd_vd = 'vup' + arr_param[ 1 ];   
  69.                     $('#'+upd_vd).text(parseInt($("#"+upd_vd).text())+1);   
  70.                     ashu_token = 1;   
  71.                        
  72.                 }   
  73.                 if (results=='h'){   
  74.                     ashu_token = 1;   
  75.                     alert('已經發表過評價了');   
  76.                 }   
  77.                 if (results=='e'){   
  78.                     ashu_token = 1;   
  79.                     alert('評價失敗');   
  80.                 }   
  81.             }   
  82.         });   
  83.     });   
  84.        
  85.     $('.vote_down a').click(function(){   
  86.         if( !ashu_isCookieEnable() ) {   
  87.             alert("很抱歉，您不能給本文投票！");   
  88.             return;   
  89.         }   
  90.         if(ashu_token != 1) {   
  91.             alert("您的滑鼠點得也太快了吧？！");   
  92.             return false;   
  93.         }   
  94.         ashu_token = 0;   
  95.   
  96.         var full_info = $(this).attr( 'rel' );   
  97.         var arr_param = full_info.split( '_' );   
  98.         $.ajax({   
  99.             url:ajax_url,   
  100.             type:'POST',   
  101.             data:'action=vote_post&rating=' + arr_param[ 0 ] + '&postid=' + arr_param[ 1 ],   
  102.             success:function(results){   
  103.                 if(results=='n'){   
  104.                     alert('評價失敗');   
  105.                     ashu_token = 1;   
  106.                 }   
  107.                 if (results=='y'){   
  108.                     var upd_vd = 'vdown' + arr_param[ 1 ];   
  109.                     $("#"+upd_vd).text(parseInt($("#"+upd_vd).text())+1);   
  110.                     ashu_token = 1;   
  111.                 }   
  112.                 if (results=='h'){   
  113.                     ashu_token = 1;   
  114.                     alert('已經發表過評價了');   
  115.                 }   
  116.                 if (results=='e'){   
  117.                     ashu_token = 1;   
  118.                     alert('發生未知錯誤');   
  119.                 }   
  120.             }   
  121.         });   
  122.     });   
  123. });  

五、後臺 php 處理程式碼。

在前面的教程中，我們的 ajax 請求地址直接是網站頁碼地址，但是本篇教程中，我們的 ajax 請求地址是類似：www.ashuwp.com/wp-admin/admin-ajax.php

使用這個地址來處理 ajax 請求，請一定記得請求中需要有 action 引數，然後我們只需要在 functions.php 檔案 (或自定) 中新增下馬程式碼，即可處理我們的請求，注意執行完請求輸出內容之後，新增 die 函式結束：

  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. }  

六、結束
本票教程並非實現定踩或喜歡功能的最佳選擇，只是提供一個 ajax 的簡單示例...