WordPress统计用户点击指定按钮次数问题求助 Part2

问题排查&修复方案 #

一、现有代码的bug列表 #

• JS部分核心错误：
  1. ajaxurl变量为空，WordPress前台默认不注入该全局变量，需要手动输出
  2. dataType错误设置为"url"，jQuery没有该响应类型，会直接触发fail回调
  3. done回调中this指向偏移，此时的this不再指向点击的a标签，无法正确获取跳转链接
• PHP部分核心错误：
  1. 接口处理完成后没有调用wp_die()，WordPress AJAX接口要求必须执行该函数结束响应，否则会返回多余内容导致请求失败
  2. 自定义字段名称存在拼写不一致问题：你定义的统计字段是download_cnt，但HTML模板中显示用的是download_count，需要统一

二、修复后的代码 #

1. 先在主题functions.php中添加ajaxurl输出逻辑，放在全局位置：

// 前台注入ajaxurl全局变量
add_action('wp_enqueue_scripts', function() {
    wp_localize_script('jquery', 'wp_ajax', [
        'ajaxurl' => admin_url('admin-ajax.php')
    ]);
});

2. 修复后的jQuery代码：

jQuery(function ($) {
    $('.download a').on("click", function(event) {
        event.preventDefault();
        const _this = $(this); // 提前存好当前点击的a标签对象
        const url_add = _this.attr('href');
        const post_id = _this.closest('.download').attr('data-id'); // 避免页面有多个下载按钮时取错ID
        const ajaxurl = wp_ajax.ajaxurl; // 调用提前注入的全局变量
        if(url_add && post_id) {
            $.ajax({
                dataType: "json",
                url: ajaxurl,
                type: 'POST',
                data:{
                    'action': 'countDL',
                    'urladd': url_add,
                    'postid': post_id
                }
            })
            .done(function(){
                window.location = url_add; // 直接调用提前存好的跳转链接
            })
            .fail(function(xhr){
                console.log(xhr);
                // 统计失败也正常跳转，避免影响用户使用
                window.location = url_add;
            })
        }
    });
});

3. 修复后的PHP AJAX处理代码：

function countDL() {
    $postid = intval($_POST['postid']); // 增加类型转换避免SQL注入风险
    $num = get_field('download_cnt', $postid, true);
    $num = $num ? intval($num) : 0;
    $num++;
    update_field('download_cnt', $num, $postid);
    wp_send_json_success(); // 返回标准JSON响应
    wp_die(); // 必须添加，结束AJAX请求流程
}
add_action('wp_ajax_nopriv_countDL','countDL');
add_action('wp_ajax_countDL','countDL');

4. 统一HTML模板中的字段调用：

<div class="download" data-id="<?php echo $postID; ?>">
    <a href="<?php the_field('download_url'); ?>">
        <i class="fa fa-download fa-fw"></i> Download
    </a>
    <?php the_field('download_cnt'); ?> <!-- 和你定义的自定义统计字段名保持一致 -->
</div>

三、最佳实践说明 #

你原本用自定义字段存储统计值的方案已经足够适配场景，不需要单独建表。如果需要优化可以补充两个逻辑：

• 限制同IP同文章24小时内点击只统计一次，避免恶意刷量
• 将统计操作改为异步非阻塞逻辑，不需要等统计请求完成再跳转，用户体验更好

内容的提问来源于stack exchange，提问作者悠木夕凪