WordPress评论ajax提交
时间 : 2023-12-06 01:05:02声明: : 文章内容来自网络,不保证准确性,请自行甄别信息有效性

最佳答案

WordPress是一个功能强大的内容管理系统,它提供了许多方便的功能和插件,其中包括评论系统。默认情况下,WordPress的评论系统是同步提交的,即用户提交评论后页面会刷新,重新加载整个页面。

然而,对于一些具有更好用户体验的网站,使用异步提交评论的方法可能更合适。这意味着当用户提交评论时,页面不会刷新,而是通过AJAX技术将评论发送到服务器并实时显示。

下面是实现WordPress评论异步提交的步骤:

1. 创建一个自定义插件或在主题的functions.php文件中添加以下代码:

```php

function enable_ajax_comments() {

wp_enqueue_script('ajax-comments', get_template_directory_uri() . '/js/ajax-comments.js', array('jquery'), false, true);

wp_localize_script('ajax-comments', 'ajax_comments', array(

'ajax_url' => admin_url('admin-ajax.php'),

'nonce' => wp_create_nonce('ajax-comments-nonce')

));

}

add_action('wp_enqueue_scripts', 'enable_ajax_comments');

2. 在主题文件夹中创建一个名为ajax-comments.js的文件,将以下代码添加到其中:

```javascript

jQuery(document).ready(function($) {

$('form.comment-form').on('submit', function(e) {

e.preventDefault();

var commentForm = $(this);

var commentData = $(commentForm).serialize() + '&action=ajax_submit_comment';

$.ajax({

type: 'POST',

url: ajax_comments.ajax_url,

data: commentData,

dataType: 'json',

beforeSend: function() {

// 在发送请求之前的一些操作,比如显示加载图标

},

success: function(response) {

if (response.success) {

// 如果评论提交成功,执行以下操作

// 比如显示成功消息,清空表单等

} else {

// 如果评论提交失败,执行以下操作

// 比如显示错误消息

}

},

error: function(xhr, status, error) {

// 如果出现错误,执行以下操作

},

complete: function() {

// 在请求完成后的一些操作,比如隐藏加载图标

}

});

return false;

});

});

3. 添加以下代码到主题的functions.php文件中:

```php

function ajax_submit_comment() {

global $wpdb;

if (!isset($_POST['comment_post_ID']) || !wp_verify_nonce($_POST['comment_nonce'], 'ajax-comments-nonce')) {

wp_send_json_error('Invalid request');

}

$comment_post_ID = absint($_POST['comment_post_ID']);

$comment_author = wp_kses_post(trim($_POST['author']));

$comment_email = wp_kses_post(trim($_POST['email']));

$comment_content = wp_kses_post(trim($_POST['comment']));

$commentdata = array(

'comment_post_ID' => $comment_post_ID,

'comment_author' => $comment_author,

'comment_author_email' => $comment_email,

'comment_content' => $comment_content,

'comment_type' => '',

'comment_parent' => 0,

'user_id' => 0,

'comment_approved' => 1,

);

$comment_id = wp_new_comment($commentdata);

if ($comment_id) {

wp_send_json_success('Comment submitted successfully');

} else {

wp_send_json_error('Failed to submit comment');

}

}

add_action('wp_ajax_ajax_submit_comment', 'ajax_submit_comment');

add_action('wp_ajax_nopriv_ajax_submit_comment', 'ajax_submit_comment');

以上步骤将会实现通过AJAX方式提交评论。用户在提交评论时,不需要刷新页面即可实时看到评论。

希望对你有帮助!

其他答案

要实现WordPress评论的Ajax提交,你需要按照以下步骤进行操作:

1. 创建一个新的WordPress主题文件或者打开你正在使用的主题文件,定位到`functions.php`文件。

2. 在`functions.php`文件中添加如下代码片段:

```php

// 注册ajax回调函数

add_action('wp_ajax_submit_comment', 'ajax_submit_comment');

add_action('wp_ajax_nopriv_submit_comment', 'ajax_submit_comment');

// Ajax回调函数

function ajax_submit_comment() {

$comment_author = wp_filter_nohtml_kses($_POST['author']);

$comment_email = wp_filter_nohtml_kses($_POST['email']);

$comment_content = wp_filter_nohtml_kses($_POST['comment']);

$comment_post_id = intval($_POST['post_id']);

// 创建评论

$commentdata = array(

'comment_post_ID' => $comment_post_id,

'comment_author' => $comment_author,

'comment_author_email' => $comment_email,

'comment_content' => $comment_content,

'comment_type' => '',

'comment_parent' => 0,

'user_id' => 0,

'comment_approved' => 1

);

// 插入评论

$comment_id = wp_new_comment($commentdata);

// 返回评论结果

if ($comment_id) {

echo json_encode(array('status' => 'success', 'message' => '评论成功!'));

} else {

echo json_encode(array('status' => 'error', 'message' => '评论失败,请稍后重试!'));

}

// 终止脚本

wp_die();

}

3. 在你的主题文件的评论表单中添加一个隐藏的字段用来传递文章ID,例如:

4. 在你的主题文件的评论表单中添加一个JavaScript函数,用来处理Ajax提交,例如:

```javascript

jQuery(document).ready(function($) {

$('#commentform').on('submit', function(e) {

e.preventDefault();

var commentform = $(this);

var author = commentform.find('#author').val();

var email = commentform.find('#email').val();

var comment = commentform.find('#comment').val();

var post_id = commentform.find('input[name="post_id"]').val();

$.ajax({

url: '<?php echo admin_url('admin-ajax.php'); ?>',

type: 'POST',

dataType: 'json',

data: {

action: 'submit_comment',

author: author,

email: email,

comment: comment,

post_id: post_id

},

success: function(response) {

if (response.status === 'success') {

alert(response.message);

location.reload();

} else {

alert(response.message);

}

}

});

});

});

现在,当用户点击评论提交按钮时,评论将通过Ajax方式提交,并根据服务器返回的结果显示适当的消息。请确保使用适当的HTML和CSS样式来呈现评论表单和消息。