阅读量:0
要实现WordPress网站模板纯代码的AJAX点赞功能，你需要以下步骤：，，1. 在主题的functions.php文件中，添加一个处理AJAX请求的函数。，2. 在主题的JavaScript文件中，编写一个发送AJAX请求的函数。，3. 在主题的页面模板中，添加一个触发AJAX请求的按钮。，，下面是具体的实现代码：，，1. 在主题的functions.php文件中，添加以下代码：，，``
php，add_action('wp_ajax_like_post', 'like_post');，add_action('wp_ajax_nopriv_like_post', 'like_post');，，function like_post() {， $post_id = intval($_POST['post_id']);， $current_user = wp_get_current_user();， $user_id = $current_user->ID;， $meta_key = 'likes';，， // 获取当前点赞数， $current_likes = get_post_meta($post_id, $meta_key, true);， if ($current_likes === '') {， $current_likes = 0;， }，， // 检查用户是否已经点过赞， $user_liked = get_user_meta($user_id, 'liked_posts', true);， if ($user_liked !== '' && in_array($post_id, $user_liked)) {， echo json_encode(array('status' => 'already_liked', 'likes' => $current_likes));， die();， } else {， // 更新点赞数和用户点赞记录， update_post_meta($post_id, $meta_key, $current_likes + 1);， if ($user_liked !== '') {， $user_liked[] = $post_id;， } else {， $user_liked = array($post_id);， }， update_user_meta($user_id, 'liked_posts', $user_liked);， echo json_encode(array('status' => 'liked', 'likes' => $current_likes + 1));， die();， }，}，`，，2. 在主题的JavaScript文件中，添加以下代码：，，`javascript，function likePost(postId) {， var data = {， action: 'like_post',， post_id: postId,， security: ''， };，， jQuery.post(ajaxurl, data, function(response) {， if (response.status === 'already_liked') {， alert('您已经点过赞了！');， } else {， jQuery('#post-' + postId + ' .likes').text(response.likes);， }， }, 'json');，}，`，，3. 在主题的页面模板中，添加一个触发AJAX请求的按钮：，，``html，WordPress网站模板纯代码实现 AJAX点赞功能
准备工作
1、确保已安装并启用AJAX插件
2、在主题的 functions.php 文件中添加自定义动作和过滤器
3、创建或修改主题的 JavaScript 文件以处理前端逻辑
4、更新主题的 CSS 样式表以美化点赞按钮
步骤详解
1. 在functions.php 中添加动作和过滤器
我们需要在functions.php 文件中添加必要的动作和过滤器，这些函数将处理来自前端的请求以及与数据库的交互。
// 注册一个新的路由 add_action( 'wp_ajax_nopriv_like_post', 'like_post' ); add_action( 'wp_ajax_like_post', 'like_post' ); // 定义处理函数 function like_post() { $post_id = intval( $_POST['post_id'] ); $user_id = get_current_user_id(); // 验证用户是否已经喜欢过该帖子 $has_liked = get_user_meta( $user_id, 'liked_posts', true ); if ( ! is_array( $has_liked ) ) { $has_liked = array(); } if ( in_array( $post_id, $has_liked ) ) { echo json_encode( array( 'status' => 'already_liked' ) ); die(); // 确保没有其他输出 } else { $has_liked[] = $post_id; update_user_meta( $user_id, 'liked_posts', $has_liked ); echo json_encode( array( 'status' => 'liked' ) ); die(); // 确保没有其他输出 } }2. 创建或修改main.js 文件
我们需要在前端处理用户的点击事件，并通过 AJAX 发送请求到服务器。
jQuery(document).ready(function($) { $('.like-button').on('click', function() { var post_id = $(this).data('post-id'); $.ajax({ url: ajaxurl, // ajaxurl 是 WordPress 提供的本地化对象 type: 'POST', data: { action: 'like_post', post_id: post_id, nonce: myAjax.nonce // 安全令牌 }, success: function(response) { var response = JSON.parse(response); if (response.status === 'liked') { $('#like-count-' + post_id).text(function(i, val) { return parseInt(val, 10) + 1; }); $(this).find('.like-button').text('Unlike'); } else if (response.status === 'already_liked') { alert('You have already liked this post!'); } } }); }); });3. 更新style.css 文件
我们可以通过 CSS 来美化点赞按钮和显示点赞数。
.like-button { cursor: pointer; padding: 5px 10px; background-color: #0073aa; color: white; border: none; border-radius: 5px; } .like-count { margin-left: 10px; font-weight: bold; }示例代码整合
以下是一个完整的示例，包括 HTML、JavaScript 和 PHP 代码的整合：
HTML（single.php）
<div class="post"> <p>Post content...</p> <button class="like-button" data-post-id="<?php the_ID(); ?>">Like</button> <span id="like-count-<?php the_ID(); ?>"><?php echo get_post_meta(get_the_ID(), 'likes', true); ?></span> </div>
JavaScript (main.js)
jQuery(document).ready(function($) { $('.like-button').on('click', function() { var post_id = $(this).data('post-id'); $.ajax({ url: ajaxurl, // ajaxurl 是 WordPress 提供的本地化对象 type: 'POST', data: { action: 'like_post', post_id: post_id, nonce: myAjax.nonce // 安全令牌 }, success: function(response) { var response = JSON.parse(response); if (response.status === 'liked') { $('#like-count-' + post_id).text(function(i, val) { return parseInt(val, 10) + 1; }); $(this).find('.like-button').text('Unlike'); } else if (response.status === 'already_liked') { alert('You have already liked this post!'); } } }); }); });PHP (functions.php)
// 注册一个新的路由 add_action( 'wp_ajax_nopriv_like_post', 'like_post' ); add_action( 'wp_ajax_like_post', 'like_post' ); // 定义处理函数 function like_post() { $post_id = intval( $_POST['post_id'] ); $user_id = get_current_user_id(); // 验证用户是否已经喜欢过该帖子 $has_liked = get_user_meta( $user_id, 'liked_posts', true ); if ( ! is_array( $has_liked ) ) { $has_liked = array(); } if ( in_array( $post_id, $has_liked ) ) { echo json_encode( array( 'status' => 'already_liked' ) ); die(); // 确保没有其他输出 } else { $has_liked[] = $post_id; update_user_meta( $user_id, 'liked_posts', $has_liked ); echo json_encode( array( 'status' => 'liked' ) ); die(); // 确保没有其他输出 } }相关问题与解答
问题1：为什么需要使用get_current_user_id()？
答：get_current_user_id() 用于获取当前登录用户的 ID，在点赞功能中，我们需要知道是哪个用户对某篇文章进行了点赞，因此需要通过这个函数获取用户的 ID，以便将点赞信息存储在数据库中，如果用户未登录，该函数将返回 0。
问题2：如何防止用户重复点赞？
答：为了防止用户重复点赞，我们在like_post 函数中检查用户是否已经对该文章进行过点赞，这是通过从用户元数据中获取一个数组，该数组包含用户已经点赞过的所有文章 ID，如果当前文章的 ID 已经在数组中，说明用户已经点赞过，因此我们不会再次记录点赞，如果没有，则将该文章的 ID 添加到数组中，并更新用户元数据。
小伙伴们，上文介绍了“WordPress网站模板纯代码实现 AJAX点赞功能”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
