wordpress网站Ajax留言评论+自定义评论字段

在WordPress中，您可以使用Ajax来实现无刷新的留言功能，并添加自定义评论字段。以下是一个简化的例子，展示了如何添加一个简单的自定义字段并通过Ajax提交。

1. 添加自定义字段到评论表单：

在主题的functions.php文件中添加以下代码来添加自定义字段：

function my_custom_comment_field($fields) {
    $fields['my_field'] = '<p class="comment-form-my-field"><label for="my_field">自定义字段</label><input id="my_field" name="my_field" type="text" value=""></p>';
    return $fields;
}
add_filter('comment_form_fields', 'my_custom_comment_field');

2. 创建Ajax处理脚本：

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

function my_ajax_comment_script() {
    wp_enqueue_script('my-ajax-comment', get_template_directory_uri() . '/js/my-ajax-comment.js', array('jquery'));
    wp_localize_script('my-ajax-comment', 'myAjax', array(
        'url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('my_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'my_ajax_comment_script');
 
add_action('wp_ajax_my_ajax_comment', 'my_ajax_comment_callback');
add_action('wp_ajax_nopriv_my_ajax_comment', 'my_ajax_comment_callback');
function my_ajax_comment_callback() {
    check_ajax_referer('my_nonce', 'nonce');
 
    $comment_data = [
        'comment_post_ID' => $_POST['post_id'],
        'comment_content' => $_POST['comment_content'],
        'comment_author' => $_POST['author'],
        'comment_author_email' => $_POST['email'],
        'comment_author_url' => $_POST['url'],
        'comment_type' => 'ajax',
        'user_id' => get_current_user_id(),
        'my_field' => $_POST['my_field']
    ];
 
    $comment_id = wp_new_comment(array_merge($_POST, $comment_data));
    do_action('set_comment_cookies', $comment_id);
 
    $comment = get_comment($comment_id);
    $data = wp_load_commentsajax_script_data($comment);
    wp_die(json_encode($data));
}

3. 创建Ajax请求的JavaScript文件：

在主题的js文件夹中创建my-ajax-comment.js文件，并添加以下代码：

jQuery(document).ready(function($) {
    $('#commentform').on('submit', function(e) {
        e.preventDefault();
        var formData = $(this).serializeArray();
        formData.push({ name: 'action', value: 'my_ajax_comment' });
 
        $.post(myAjax.url, formData, function(data) {
            $('#comments').append(data[0]);
            $('#comment_content').val('');
            $('#my_field').val('');
        });
    });
});

确保替换get_template_directory_uri() . '/js/my-ajax-comment.js'中的路径，以指向您的自定义JavaScript文件。

这个简单的例子展示了