一、后端PHP处理逻辑 #

将以下代码添加到主题的functions.php文件中，或使用代码片段插件管理：

// 处理按钮点击计数的AJAX动作
function increment_button_clicks() {
    // 验证安全凭证
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'button_click_nonce')) {
        wp_send_json_error('无效的安全验证');
    }

    // 接收并验证文章ID
    $post_id = isset($_POST['post_id']) ? intval($_POST['post_id']) : 0;
    $meta_key = 'button_clicks'; // 替换为你在JetEngine创建的元字段键名

    if (!$post_id || !get_post($post_id)) {
        wp_send_json_error('无效的文章ID');
    }

    // 读取当前计数并递增
    $clicks = get_post_meta($post_id, $meta_key, true);
    $clicks = empty($clicks) ? 1 : intval($clicks) + 1;
    update_post_meta($post_id, $meta_key, $clicks);

    wp_send_json_success(['clicks' => $clicks]);
}
// 注册登录/未登录用户均可调用的AJAX动作
add_action('wp_ajax_increment_button_clicks', 'increment_button_clicks');
add_action('wp_ajax_nopriv_increment_button_clicks', 'increment_button_clicks');

// 向前端输出安全凭证
function output_button_click_nonce() {
    if (is_single()) {
        echo '<script>var buttonClickNonce = "' . wp_create_nonce('button_click_nonce') . '";</script>';
    }
}
add_action('wp_footer', 'output_button_click_nonce');

二、前端jQuery点击事件处理 #

将以下代码添加到Elementor的「自定义JS」区域，或主题的自定义脚本字段中：

jQuery(document).ready(function($) {
    // 监听目标按钮点击
    $('.track-click-btn').on('click', function(e) {
        var $btn = $(this);
        // 防止短时间重复点击
        if ($btn.hasClass('processing')) return;
        $btn.addClass('processing');

        // 获取当前文章ID
        var postId = $btn.data('post-id') || $('body').data('post-id');

        $.ajax({
            url: ajaxurl, // WordPress内置AJAX地址
            type: 'POST',
            data: {
                action: 'increment_button_clicks',
                nonce: buttonClickNonce,
                post_id: postId
            },
            success: function(response) {
                if (response.success) {
                    // 可选：实时更新页面上的计数显示（取消下方注释并添加对应元素）
                    // $('.click-count').text(response.data.clicks);
                    console.log('点击计数已更新：' + response.data.clicks);
                } else {
                    console.error('更新失败：' + response.data);
                }
                $btn.removeClass('processing');
            },
            error: function() {
                console.error('请求失败');
                $btn.removeClass('processing');
            }
        });
    });

    // 自动给按钮绑定当前文章ID
    $('.track-click-btn').each(function() {
        var $this = $(this);
        if (!$this.data('post-id')) {
            $this.data('post-id', $('body').data('post-id'));
        }
    });
});

三、Elementor按钮配置步骤 #

1. 打开Elementor编辑器，选中需要统计的按钮
2. 进入「高级」选项卡，在「CSS类」输入框中填写 track-click-btn
3. （可选）若需手动指定文章ID，在「自定义属性」中添加：data-post-id="目标文章ID"

四、关键注意事项 #

• 提前在JetEngine中创建数字类型的元字段，键名需与PHP代码中的$meta_key（示例为button_clicks）完全一致
• 若需要在页面显示实时计数，可添加一个文本元素并赋予click-count类，同时取消JS中对应注释，前端初始计数可通过get_post_meta(get_the_ID(), 'button_clicks', true)输出

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