WordPress点赞功能

要实现文章点赞功能,并避免同一内容多次点赞的情况,我们可以使用WordPress的post_meta来存储点赞数,并使用Cookie来追踪已点赞的内容。

以下是实现这个功能的步骤:

第一步:添加点赞按钮和处理逻辑

在你的文章模板文件(例如single.php)中,找到你想要放置点赞按钮的位置。

使用以下代码添加点赞按钮:

<button class="like-button" data-post-id="<?php the_ID(); ?>">点赞</button>

在主题的functions.php文件中添加以下代码来处理点赞请求:

function handle_like_request() {
    if (isset($_POST['post_id'])) {
        $post_id = intval($_POST['post_id']);
        $liked_posts = isset($_COOKIE['liked_posts']) ? unserialize($_COOKIE['liked_posts']) : array();
        if (!in_array($post_id, $liked_posts)) {
            // 点赞数加1
            $likes = get_post_meta($post_id, 'like', true);
            $likes = $likes ? $likes + 1 : 1;
            update_post_meta($post_id, 'like', $likes);

            // 将已点赞的文章ID添加到Cookie中
            $liked_posts[] = $post_id;
            setcookie('liked_posts', serialize($liked_posts), time()+3600, '/');

            echo $likes; // 返回点赞数
        } else {
            echo 'already_liked'; // 如果已经点赞过,则返回标识符
        }
    }
    wp_die();
}
add_action('wp_ajax_handle_like_request', 'handle_like_request');
add_action('wp_ajax_nopriv_handle_like_request', 'handle_like_request');

第二步:创建JavaScript代码

在主题的JavaScript文件中,添加以下代码来处理点赞按钮的点击事件:

jQuery(document).ready(function($) {
    $('.like-button').on('click', function() {
        var post_id = $(this).data('post-id');
        var button = $(this);
        
        $.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'POST',
            data: {
                action: 'handle_like_request',
                post_id: post_id
            },
            success: function(response) {
                if (response === 'already_liked') {
                    alert('你已经点过赞了!');
                } else {
                    button.text('已赞');
                    alert('点赞成功!总点赞数:' + response);
                }
            }
        });
    });
});

以上代码将处理点赞按钮的点击事件,并通过AJAX请求将点赞数据传递到服务器进行处理。

现在,当用户点击点赞按钮时,点赞数将增加,并且在同一篇文章上多次点击点赞按钮将被阻止。

发表回复