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

WordPress 純代碼實現 AJAX點贊功能

  • 文章介紹
  • 升級版本
  • 評價&建議

wordpress網站里增加訪客互動、展示文章熱度的時候,除了閱讀數、評論數外,還有個有趣的元素,那就是贊,如QQ空間里的說說一樣,贊!

以前也發過類似的插件給大家,喜歡用插件的可以進《wordpress 點贊 插件版》,而今天介紹的就是純代碼的形式,不喜歡用插件的朋友會喜歡的方式來實現 wordpress點贊功能

下面就直接給教程吧,教程資源來自WPku

facebook-like-blueprint

將下面的代碼加入到你的functions.php

  1. add_action('wp_ajax_nopriv_bigfa_like',?'bigfa_like');
  2. add_action('wp_ajax_bigfa_like',?'bigfa_like');
  3. function?bigfa_like(){
  4. ????global?$wpdb,$post;
  5. ????$id?=?$_POST["um_id"];
  6. ????$action?=?$_POST["um_action"];
  7. ????if?(?$action?==?'ding'){
  8. ????$bigfa_raters?=?get_post_meta($id,'bigfa_ding',true);
  9. ????$expire?=?time()?+?99999999;
  10. ????$domain?=?($_SERVER['HTTP_HOST']?!=?'localhost')???$_SERVER['HTTP_HOST']?:?false;?//?make?cookies?work?with?localhost
  11. ????setcookie('bigfa_ding_'.$id,$id,$expire,'/',$domain,false);
  12. ????if?(!$bigfa_raters?||?!is_numeric($bigfa_raters))?{
  13. ????????update_post_meta($id,?'bigfa_ding',?1);
  14. ????}
  15. ????else?{
  16. ????????????update_post_meta($id,?'bigfa_ding',?($bigfa_raters?+?1));
  17. ????????}
  18. ????echo?get_post_meta($id,'bigfa_ding',true);
  19. ????}
  20. ????die;
  21. }

JS代碼

  1. $.fn.postLike?=?function()?{
  2. ????if?($(this).hasClass('done'))?{
  3. ????????return?false;
  4. ????}?else?{
  5. ????????$(this).addClass('done');
  6. ????????var?id?=?$(this).data("id"),
  7. ????????action?=?$(this).data('action'),
  8. ????????rateHolder?=?$(this).children('.count');
  9. ????????var?ajax_data?=?{
  10. ????????????action:?"bigfa_like",
  11. ????????????um_id:?id,
  12. ????????????um_action:?action
  13. ????????};
  14. ????????$.post("/wp-admin/admin-ajax.php",?ajax_data,
  15. ????????function(data)?{
  16. ????????????$(rateHolder).html(data);
  17. ????????});
  18. ????????return?false;
  19. ????}
  20. };
  21. $(document).on("click",?".favorite",
  22. function()?{
  23. ????$(this).postLike();
  24. });

在你想顯示的地方加入如下代碼,推薦加到文章內容尾部

  1. <div?class="post-like">
  2. ?????????<a?href="javascript:;"?data-action="ding"?data-id="<?php?the_ID();??>"?class="favorite<?php?if(isset($_COOKIE['bigfa_ding_'.$post->ID]))?echo?'?done';?>">喜歡?<span?class="count">
  3. ????????????<?php?if(?get_post_meta($post->ID,'bigfa_ding',true)?){
  4. ????????????????????echo?get_post_meta($post->ID,'bigfa_ding',true);
  5. ?????????????????}?else?{
  6. ????????????????????echo?'0';
  7. ?????????????????}?></span>
  8. ????????</a>
  9. ?</div>

參考css樣式

  1. .post-like{text-align:center;padding:10px}
  2. .post-like?a{?background-color:#21759B;border-radius:?3px;color:?#FFFFFF;font-size:?12px;padding:?5px?10px;text-decoration:?none;outline:none}
  3. .post-like?a.done,?.post-like?a:hover{background-color:#eee;color:#21759B;}
  4. .post-like?a.done{cursor:not-allowed}
有用343
  • 2015.03.29初次和大家見面了!

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

  1. 0樓
    zhipress:

    點擊沒有反應。。。。。。

    2017-08-26 下午 11:46 [回復]

發表評論

還能輸入240個字

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

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

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

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