如何通过AJAX实现点击按钮统计WordPress文章浏览量

步骤1：修改主题functions.php文件 #

保留你现有count_views函数的基础上，追加以下代码：

// 注册AJAX动作，支持登录/未登录用户调用
add_action('wp_ajax_increase_views', 'ajax_increase_views');
add_action('wp_ajax_nopriv_increase_views', 'ajax_increase_views');
function ajax_increase_views() {
    // 安全校验
    if (!wp_verify_nonce($_POST['nonce'], 'view_count_nonce') || !isset($_POST['post_id'])) {
        wp_send_json_error('非法请求');
    }
    $post_id = intval($_POST['post_id']);
    // 调用原有统计逻辑
    count_views($post_id);
    // 返回更新后的浏览量
    $count = get_post_meta($post_id, 'wpb_post_views_count', true);
    wp_send_json_success(empty($count) ? 1 : $count);
}

// 向前端注入AJAX配置参数
add_action('wp_enqueue_scripts', 'inject_view_ajax_config');
function inject_view_ajax_config() {
    // 仅在文章详情页注入参数
    if (is_singular('post')) {
        global $post;
        wp_localize_script('jquery', 'view_ajax_conf', [
            'ajax_url' => admin_url('admin-ajax.php'),
            'post_id' => $post->ID,
            'nonce' => wp_create_nonce('view_count_nonce')
        ]);
    }
}

步骤2：修改single.php文件 #

1. 删除你原有直接调用<?php count_views(get_the_ID()); ?>的代码，避免页面刷新直接统计
2. 给原有浏览量展示代码加ID，方便JS动态更新：

<li>
<i class="fa fa-eye"></i>                            
<span id="current-view-count">
<?php
$views = get_post_meta(get_the_ID(), 'wpb_post_views_count', true);
echo empty($views) ? '0' : $views;
?>
</span>                             
</li>

3. 新增触发统计的按钮（如果要绑定现有元素，跳过这一步，后面JS改对应选择器即可）：

<button id="trigger-view-count">统计浏览量</button>

步骤3：添加AJAX请求逻辑 #

将以下JS代码添加到single.php页面末尾，或者主题的自定义JS文件中：

jQuery(function($) {
    $('#trigger-view-count').on('click', function() {
        // 防止重复点击提交，不需要可删除
        if ($(this).data('submitted')) return;
        $(this).data('submitted', true);

        $.ajax({
            url: view_ajax_conf.ajax_url,
            type: 'POST',
            data: {
                action: 'increase_views',
                post_id: view_ajax_conf.post_id,
                nonce: view_ajax_conf.nonce
            },
            success: function(res) {
                if (res.success) {
                    // 更新页面浏览量显示
                    $('#current-view-count').text(res.data);
                }
            }
        });
    });
});

注意事项 #

• 如果你的主题没有默认加载jQuery，把上述JS逻辑改成原生XMLHttpRequest写法即可
• 如果需要点击其他元素触发统计，把JS里的#trigger-view-count替换为对应元素的选择器即可
• 不需要防重复点击的话，删除对应判断逻辑即可

内容的提问来源于stack exchange，提问作者Rajot Das