也想出現在這里?聯系我們

wordpress頂和踩功能的實現

2013.11.05 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。。。大家嘗試吧!

有用57
  • 2013.11.05初次和大家見面了!

已擁有7人對該主題的建議

  1. 0樓
    頂和踩:

    求助:我網站頂和踩在IE瀏覽器可以用,在版本高的瀏覽器就不能用了, ?? 獵豹安全瀏覽器,百度瀏覽器,等等多不能用。能幫看看嗎?

    2015-05-19 下午 5:23 [回復]
  2. 0樓
    leo:

    貌似不可以,求解

    2015-03-31 下午 2:28 [回復]
  3. 0樓
    易淘金:

    能否做成插件 這樣更簡單?

    2014-12-02 上午 9:41 [回復]
  4. 0樓
    雷富:

    試試能不能學會。

    2014-01-17 下午 6:34 [回復]
  5. 0樓
    于尼瑪:

    學習了

    2014-01-11 下午 8:20 [回復]
  6. 呵呵,這個挺有用的,不過我會把那個踩的去掉~

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

發表評論

還能輸入240個字

Hi, 歡迎加入Wordpress技術交流群,帶你裝逼帶你飛!

我要入群
也想出現在這里?聯系我們
wordpress加速

我來推薦一個更牛逼的給你看看?

  • 猛戳我吧
夫妇野外交换HD高清版,免费A片在线观看,亚洲精品国产自在现线,中国老妇人60OLDMANTV