wordpress网站点赞功能制作(纯代码)

我学习如何建网站过程中，我们讲到了网站如何添加“打赏”功能，今天学做网站论坛就来讲一下如何在自己的wordpress网站上制作点赞功能。效果如下图：

wordpress网站点赞功能制作步骤：

1. 下载wordpress网站点赞处理文件。然后在自己的wordpress模板的functions.php中粘贴以下函数：

   
   require_once( TEMPLATEPATH . 'function-dianzan.php');
   
   

2. 在wordpress底部模板(footer.php)中插入以下的JS调用代码。

   
   <script type="text/javascript">
   
   jQuery(function($) {
   
   $.fn.postLike = function() {
   
   var $this = $(this);
   
   if ($this.hasClass('done')) {
   
   alert("您已经赞过啦:-)");
   
   return false;
   
   }
   
   $this.addClass('done');
   
   var id = $this.data("id"),
   
   action = $this.data('action'),
   
   rateHolder = $this.children('.count'),
   
   // 获取安全nonce
   
   nonce = $this.closest('.post-like').find('.like-nonce').val();
   
   
   
   var ajax_data = {
   
   action: "bigfa_like",
   
   um_id: id,
   
   um_action: action,
   
   nonce: nonce
   
   };
   
   // 使用WP自带ajax地址，兼容子目录/HTTPS/多站点
   
   $.post(<?php echo json_encode(admin_url('admin-ajax.php')); ?>, ajax_data)
   
   .done(function(data) {
   
   $(rateHolder).html(data);
   
   })
   
   .fail(function() {
   
   alert('点赞失败，请刷新重试');
   
   $this.removeClass('done');
   
   });
   
   return false;
   
   };
   
   $(document).on("click", ".favorite", function() {
   
   $(this).postLike();
   
   });
   
   });
   
   </script>
   
   

3. 在需要显示点赞功能按钮的页面（一般为single.php）放在下面的HTML代码，用于显示点赞功能。

   
   <?php $post_id = get_the_ID(); ?>
   
   <span class="post-like">
   
   <a href="javascript:;"
   
   data-action="ding"
   
   data-id="<?php echo $post_id; ?>"
   
   class="favorite<?php if(isset($_COOKIE['bigfa_ding_'.$post_id])) echo ' done';?>">
   
   点赞
   
   <span class="count">
   
   <?php
   
   $ding_num = get_post_meta($post_id,'bigfa_ding',true);
   
   echo $ding_num ? intval($ding_num) : '0';
   
   ?>
   
   </span>
   
   </a>
   
   <!-- 生成安全验证串 -->
   
   <input type="hidden" class="like-nonce" value="<?php echo wp_create_nonce('bigfa_like_nonce'); ?>">
   
   </span>
   
   

4. 通过以上几次的操作，你就会发现自己的文章页面，已经拥有了点赞功能了。如果要改变它的样式，可以将以下的CSS样式粘贴到自己模板的style.css中。
   .post-like{text-align:center;padding:10px}
   .post-like a{ background-color:#21759B;border-radius: 3px;color: #FFFFFF;font-size: 12px;padding: 5px 10px;text-decoration: none;outline:none}
   .post-like a.done, .post-like a:hover{background-color:#eee;color:#21759B;}
   .post-like a.done{cursor:not-allowed}

这样就可以在自己建网站时制作出一个wordpress网站点赞功能了。