[转]WordPress非插件实现文章AJAX点赞功能

流年
流年
管理员
320
文章
407.8千
浏览
31,4738字数 894阅读2分58秒

有不少工具都提供这个功能，如百度喜欢，还有一些插件，虽然插件提供了丰富的自定义功能，但其实我们都是不需要的，我们只是需要最简单的赞功能。简单的几行代码就可以实现。

实现原理

通过自定义字段保存赞数量，通过cookies来禁止重复赞。

实现方法

下面的代码加入到你的 functions.php 中

 

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

JS代码

 

  1. <script type="text/javascript">  
  2. $.fn.postLike = function() {  
  3.    if ($(this).hasClass('done')) {  
  4.       alert('您已赞过该文章');  
  5.       return false;  
  6.    } else {  
  7.       $(this).addClass('done');  
  8.       var id = $(this).data("id"),  
  9.       action = $(this).data('action'),  
  10.       rateHolder = $(this).children('.count');  
  11.       var ajax_data = {  
  12.          action: "zm_like",  
  13.          um_id: id,  
  14.          um_action: action  
  15.       };  
  16.       $.post("/wp-admin/admin-ajax.php", ajax_data,  
  17.       function(data) {  
  18.          $(rateHolder).html(data);  
  19.       });  
  20.       return false;  
  21.    }  
  22. };  
  23. $(document).on("click", ".specsZan",  
  24.    function() {  
  25.       $(this).postLike();  
  26. });  
  27. </script>  

在你想显示的地方加入如下代码，推荐加到文章内容尾部

  1. <span class="like">  
  2.    
  3.       <a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" title="我赞" class="favorite<?php if(isset($_COOKIE['zm_like_'.$post->ID])) echo ' done';?>"><i class="icon-zan"></i>赞 <i class="count">  
  4.    
  5.          <?php if( get_post_meta($post->ID,'zm_like',true) ){  
  6.    
  7.          echo get_post_meta($post->ID,'zm_like',true);  
  8.    
  9.       } else {  
  10.    
  11.          echo '0';  
  12.    
  13.       }?></i>  
  14.    
  15.      </a>  
  16.    
  17. </span>  

参考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}  

博客最后更新：2015-11-22
流年
  • 本文由 流年 发表于2015年9月13日 21:35:03
  • 除非特殊声明，本站文章均为原创，需要转载，请留言说明！
博客个性化字体

加载中...

评论  3  访客  1  作者  2
    • 流年
      流年
      地球人 3F
      回复

      测试

      • boke112导航
        boke112导航 4
        广西南宁市 2F
        回复

        曾经折腾过，但是测试的时候总是不成功，不知道是否跟我是在本地测试有关

        • 流年
          流年
          地球人 1F
          回复

          经测试OK

        匿名

        发表评论

        匿名网友
        :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
        确定

        拖动滑块以完成验证