最近我在将自己的HTML模板改造成WordPress主题时，遇到了一个需求：为博客文章添加点赞功能。经过一番研究和调试，最终成功实现了一个稳定可靠的点赞系统。在这篇文章中，我将分享完整的实现过程和代码。
功能需求
在文章页面显示点赞按钮和当前点赞数
用户点击后实时更新点赞数，无需刷新页面
防止用户重复点赞
点赞数据持久化存储
在WordPress后台可查看每篇文章的点赞数
技术实现
1. 前端HTML结构
在文章模板的适当位置（通常是文章内容下方或侧边栏）添加点赞按钮的HTML代码：
<div class="diggit">
<a href="javascript:void(0);" class="like-button" data-post-id="<?php echo get_the_ID(); ?>">
很赞哦！
(<b id="diggnum">
<?php
$likes = get_post_meta(get_the_ID(), 'post_likes', true);
echo $likes ? $likes : '0';
?>
</b>)
</a>
</div>
2. WordPress后端处理
在主题的functions.php文件中添加以下代码：
// 初始化点赞系统
function add_post_likes_system() {
// 为文章类型添加点赞元字段
register_meta('post', 'post_likes', array(
'type' => 'integer',
'single' => true,
'default' => 0,
'show_in_rest' => true,
));
}
add_action('init', 'add_post_likes_system');
// 处理点赞的AJAX请求
function handle_post_like() {
// 安全检查
if (!isset($_POST['post_id']) || !is_numeric($_POST['post_id'])) {
wp_send_json_error('无效的参数');
}
$post_id = intval($_POST['post_id']);
// 验证文章存在
if (!get_post($post_id)) {
wp_send_json_error('文章不存在');
}
// 获取当前点赞数
$current_likes = get_post_meta($post_id, 'post_likes', true);
$current_likes = $current_likes ? intval($current_likes) : 0;
// 增加点赞数
$new_likes = $current_likes + 1;
update_post_meta($post_id, 'post_likes', $new_likes);
// 返回新的点赞数
wp_send_json_success(array(
'likes' => $new_likes,
'message' => '点赞成功！'
));
wp_die(); // WordPress AJAX必须调用此函数
}
// 为登录和非登录用户都注册AJAX处理
add_action('wp_ajax_handle_post_like', 'handle_post_like');
add_action('wp_ajax_nopriv_handle_post_like', 'handle_post_like');
// 在后台文章列表显示点赞数列
function add_likes_column($columns) {
$columns['likes'] = '点赞数';
return $columns;
}
add_filter('manage_posts_columns', 'add_likes_column');
function show_likes_column($column_name, $post_id) {
if ($column_name === 'likes') {
$likes = get_post_meta($post_id, 'post_likes', true);
echo $likes ? $likes : '0';
}
}
add_action('manage_posts_custom_column', 'show_likes_column', 10, 2);
3. 前端JavaScript交互
在主题的JavaScript文件中添加点赞功能：
$(document).ready(function() {
// WordPress点赞功能
$(document).on('click', '.diggit a.like-button', function(e) {
e.preventDefault();
var $button = $(this);
var postId = $button.data('post-id');
var $countElement = $('#diggnum');
// 检查是否已经点赞
if ($button.hasClass('liked')) {
return;
}
// 发送AJAX请求
$.ajax({
url: ajax_object.ajax_url,
type: 'POST',
data: {
action: 'handle_post_like',
post_id: postId
},
success: function(response) {
if (response.success) {
// 更新点赞数显示
$countElement.text(response.data.likes);
// 标记为已点赞
$button.addClass('liked');
// 禁用按钮
$button.css({
'opacity': '0.7',
'pointer-events': 'none'
});
}
},
error: function() {
alert('点赞失败，请重试！');
}
});
});
});
4. 关键配置
在header.php文件的标签前添加以下代码，确保JavaScript能获取到WordPress的AJAX URL：
<script type="text/javascript">
var ajax_object = {
ajax_url: '<?php echo admin_url('admin-ajax.php'); ?>'
};
</script>
实现过程中的关键点
1. 数据存储
使用WordPress的update_post_meta和get_post_meta函数来存储和获取每篇文章的点赞数，数据存储在wp_postmeta表中。
2. AJAX处理
WordPress提供了标准的AJAX处理机制，通过admin-ajax.php文件处理前端请求，需要正确设置action参数。
3. 安全性考虑
验证POST参数的有效性
检查文章是否存在
使用WordPress内置的非ce机制（本文简化版未使用，生产环境建议添加）
4. 用户体验
即时反馈：点击后立即更新数字
防止重复点击：通过CSS类禁用已点赞的按钮
错误处理：网络异常时给出提示
样式美化（可选）
可以添加一些CSS样式来美化点赞按钮：
.diggit {
margin: 20px 0;
text-align: center;
}
.diggit a.like-button {
display: inline-block;
padding: 8px 16px;
background: #f0f0f0;
border-radius: 4px;
text-decoration: none;
color: #333;
transition: all 0.3s ease;
}
.diggit a.like-button:hover {
background: #e0e0e0;
transform: translateY(-2px);
}
.diggit a.like-button.liked {
background: #ff4757;
color: white;
cursor: not-allowed;
}
可能遇到的问题及解决方案
1. 点赞数不更新
检查浏览器控制台是否有JavaScript错误
确认ajax_object.ajax_url是否正确输出
验证WordPress的AJAX处理函数是否正确挂载
2. 重复点赞问题
当前实现通过前端CSS类防止重复点赞，但用户刷新页面后可以再次点赞。如需更严格的限制，可以考虑：
使用Cookie记录用户点赞状态
基于IP地址记录（需在服务器端实现）
3. 缓存问题
如果使用了缓存插件，可能需要配置排除点赞相关的AJAX请求，或使用片段缓存。
总结
通过这个完整的实现，我们为WordPress主题添加了一个功能完善的点赞系统。这个方案具有以下优点：
前后端分离：使用AJAX实现无刷新操作
数据持久化：点赞数存储在数据库中
易于扩展：可以轻松添加更多功能，如点赞排行榜
管理方便：在WordPress后台可直接查看点赞数
这个点赞系统已经在我自己的博客中稳定运行，希望能对需要类似功能的开发者有所帮助。如果你有任何问题或改进建议，欢迎在评论区留言讨论。
