-
WordPress纯代码实现AJAX点赞功能
- 时间：2025-04-01 01:30:46 来源： 人气：1
在WordPress网站中，增加访客互动和展示文章热度是非常重要的。除了常见的阅读数和评论数之外，点赞功能也是一个非常有趣的元素，就像QQ空间中的“赞”一样，能够让用户更好地参与互动。 网上有许多现成的点赞插件可供下载，但使用插件可能并不是最理想的选择。对于主题开发者来说，如果将点赞功能集成到代码中，不仅可以让主题更加简洁，还能避免用户需要单独安装插件的麻烦。接下来，我们将详细介绍如何通过代码实现这一功能。 首先，您需要将以下PHP代码添加到您的主题函数文件（functions.php）中：
复制代码
add_action('wp_ajax_nopriv_bigfa_like', 'bigfa_like');
add_action('wp_ajax_bigfa_like', 'bigfa_like');
function bigfa_like(){
global $wpdb,$post;
$id = $_POST@["um_id"];
$action = $_POST@["um_action"];
if ( $action == 'ding'){
$bigfa_raters = get_post_meta($id,'bigfa_ding',true);
$expire = time() + 99999999;
$domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false;
setcookie('bigfa_ding_'.$id,$id,$expire,'/',$domain,false);
if (!$bigfa_raters || !is_numeric($bigfa_raters)) {
update_post_meta($id, 'bigfa_ding', 1);
} else {
update_post_meta($id, 'bigfa_ding', ($bigfa_raters + 1));
}
echo get_post_meta($id,'bigfa_ding',true);
}
die;
}
标签 接下来，您需要在主题中加入相应的JavaScript代码，以便处理前端的点赞操作：
复制代码
$.fn.postLike = function() {
if ($(this).hasClass('done')) {
return false;
} else {
$(this).addClass('done');
var id = $(this).data("id"),
action = $(this).data('action'),
rateHolder = $(this).children('.count');
var ajax_data = {
action: "bigfa_like",
um_id: id,
um_action: action
};
$.post("/wp-admin/admin-ajax.php", ajax_data, function(data) {
$(rateHolder).html(data);
});
return false;
}
};
$(document).on("click", ".favorite", function() {
$(this).postLike();
});
标签 最后，在您希望显示点赞按钮的地方，例如文章内容的尾部，插入以下HTML代码：
复制代码
<div class="post-like">
<a class="favoriteID])) echo ' done';?>" data-action="ding" data-id="">
喜欢
<span class="count">
ID,'bigfa_ding',true) ){
echo get_post_meta($post->ID,'bigfa_ding',true);
} else {
echo '0';
}?>
</span>
</a>
</div>
标签 为了确保点赞按钮的样式美观，您可以参考以下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网站添加点赞功能了。希望这个教程对您有所帮助！
相关文章
-
WordPress 是一个功能强大的内容管理系统，它允许用户通过简单的操作来自定义网站的外观和功能。在 WordPress 模板系统中，页面模板（page.php）是一个非常重要的组成部分。除了默认的页面模板外，我们还可以创建自定义页面模板，以满足不同设计需求。下面，我们将详细介绍如何为 WordP...2025-04-01 -
优化WordPress网站以加速百度收录是许多站长关注的重点。以下是一篇经过改写、符合SEO规范的文章，包含代码展示和格式调整。 --- 在构建完一个WordPress站点后，站长们通常最期待的就是让搜索引擎尽快收录自己的网站。对于国内用户而言，提交链接至百度是一个关键步骤。那么，如何无插件实现...2025-04-01
-
WordPress密码重置提示“您的重设链接无效，请请求新链接”
在使用WordPress进行网站建设时，用户注册功能是一个非常重要的组成部分。然而，在实际操作中，可能会遇到一些问题，比如密码重设链接格式错误的情况。本文将详细介绍如何解决这一问题，确保您的网站能够正常运行。 最近在对某个网站进行改版时，新增了用户注册功能。在测试过程中，我们发现当...2025-04-01 -
WordPress升级时遇到504 Gateway Time-out及“另一更新正在进行”的解决办法
在使用WordPress进行后台在线升级时，您可能会遇到服务器返回“504 Gateway Time-out”的错误提示。 这通常发生在基于Nginx环境的服务器上，尤其是国内的服务器。 当出现这种情况时，有些人可能会尝试修改Nginx的一些默认配置来解决这个问题。 这种做法并没有错，如果修改后能...2025-04-01
