wordpress网站点赞功能制作(纯代码)
我学习如何建网站过程中，我们讲到了网站如何添加“打赏”功能，今天学做网站论坛就来讲一下如何在自己的wordpress网站上制作点赞功能。效果如下图：
wordpress网站点赞功能制作步骤：
- 下载wordpress网站点赞处理文件。然后在自己的wordpress模板的functions.php中粘贴以下函数：
require_once( TEMPLATEPATH . 'function-dianzan.php');
- 在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> - 在需要显示点赞功能按钮的页面（一般为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> - 通过以上几次的操作，你就会发现自己的文章页面，已经拥有了点赞功能了。如果要改变它的样式，可以将以下的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网站点赞功能了。
