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样式来呈现评论表单和消息。
https/SSL证书广告优选IDC>>
推荐主题模板更多>>
推荐文章