ajax wordpress 评论
时间 : 2023-12-06 00:44:02声明: : 文章内容来自网络,不保证准确性,请自行甄别信息有效性
最佳答案
在WordPress中使用Ajax来处理评论可以提升用户体验和网站性能。通过使用Ajax,可以实现让用户在不刷新页面的情况下提交评论并即时显示评论内容。
下面是一个简单的示例代码,演示了如何使用Ajax来处理WordPress评论:
1. 首先,在主题的functions.php文件中添加以下代码来引入WordPress自带的Ajax功能:
```php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
function my_theme_enqueue_scripts() {
wp_enqueue_script( 'my-ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery'), '1.0', true );
wp_localize_script( 'my-ajax-script', 'ajax_params', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
这段代码会加载名为my-ajax-script.js的JavaScript文件,并将ajax_url参数传递给该文件,以便在JavaScript中使用。
2. 创建一个名为my-ajax-script.js的新文件,并在其中添加以下代码:
```javascript
jQuery(document).ready(function($) {
$('#commentform').on('submit', function(e) {
e.preventDefault();
var form = $(this);
var formData = form.serialize();
$.ajax({
type: 'POST',
url: ajax_params.ajax_url,
data: formData + '&action=submit_comment',
success: function(response) {
// 清空评论表单
form.find('input[type=text], textarea').val('');
// 显示新评论
$('#comments').prepend(response);
}
});
});
});
这段代码会对提交按钮的点击事件进行监听,当用户提交评论时,使用Ajax来发送评论数据到服务器。服务器将对评论进行处理,并将处理结果返回。如果评论成功,则将返回的评论内容插入到页面中。
3. 最后,在主题的functions.php文件中添加以下代码,以处理评论的提交:
```php
add_action( 'wp_ajax_nopriv_submit_comment', 'submit_comment' );
add_action( 'wp_ajax_submit_comment', 'submit_comment' );
function submit_comment() {
// 获取评论数据
$commentdata = array(
'comment_post_ID' => $_POST['comment_post_ID'],
'comment_author' => $_POST['author'],
'comment_author_email' => $_POST['email'],
'comment_author_url' => $_POST['url'],
'comment_content' => $_POST['comment'],
'comment_type' => '',
'comment_parent' => 0,
'user_ID' => get_current_user_id(),
);
// 提交评论
$comment_id = wp_new_comment( $commentdata );
// 获取新评论的HTML
$comment = get_comment( $comment_id );
$comment_html = get_comment_html( $comment );
// 将新评论的HTML返回给前端
echo $comment_html;
exit;
}
这段代码会创建一个名为submit_comment的Ajax处理函数。该函数会接收前端传递过来的评论数据,并使用wp_new_comment()函数来创建一个新的评论。然后,它会使用get_comment_html()函数获取新评论的HTML,并将其返回给前端。
通过以上的代码,你可以在WordPress中使用Ajax来处理评论,提升用户体验和网站性能。当用户提交评论时,评论会被立即显示,而无需刷新页面。这对于增加用户参与度和提高网站的互动性非常有用。
其他答案
Ajax(Asynchronous JavaScript and XML)是一种用于在不重新加载整个网页的情况下进行数据交换和更新的技术。在WordPress中,使用Ajax可以通过在不刷新页面的情况下加载评论并实时更新。
实现Ajax评论的步骤如下:
1. 引入jQuery库:WordPress默认已经集成了jQuery库,无需再次引入。
2. 编写JavaScript代码:在主题的JavaScript文件中,添加以下代码来处理Ajax评论请求和更新页面:
```javascript
// 发送Ajax请求
jQuery('#commentform').on('submit', function(event) {
event.preventDefault();
var form = jQuery(this);
var formData = form.serialize();
jQuery.ajax({
type: 'POST',
url: ajax_object.ajax_url,
data: formData + '&action=ajax_post_comment',
dataType: 'json',
success: function(response) {
if(response.success) {
// 更新评论区域
jQuery('#comments').append(response.html);
// 清空评论表单
form.trigger('reset');
} else {
// 处理错误情况
alert(response.message);
}
}
});
});
// 处理回复评论的Ajax请求
jQuery(document).on('click', '.comment-reply-link', function(event) {
event.preventDefault();
var parentID = jQuery(this).data('commentid');
jQuery('#comment_parent').val(parentID);
});
3. 创建Ajax处理函数:在主题的functions.php文件中,添加以下代码来处理Ajax评论请求:
```php
add_action('wp_ajax_nopriv_ajax_post_comment', 'ajax_post_comment');
add_action('wp_ajax_ajax_post_comment', 'ajax_post_comment');
function ajax_post_comment() {
// 验证表单数据
// ...
// 创建评论
$commentdata = array(
'comment_post_ID' => $_POST['comment_post_ID'],
'comment_author' => $_POST['author'],
'comment_author_email' => $_POST['email'],
'comment_content' => $_POST['comment'],
'comment_parent' => $_POST['comment_parent'],
);
$comment_id = wp_new_comment($commentdata);
if($comment_id) {
// 获取新创建的评论的HTML代码
ob_start();
wp_list_comments(array('callback' => 'mytheme_comment', 'max_depth' => 3, 'paged' => get_query_var('cpage')));
$comments_html = ob_get_clean();
$response = array(
'success' => true,
'html' => $comments_html,
);
} else {
$response = array(
'success' => false,
'message' => '评论创建失败,请稍后重试。',
);
}
// 返回JSON响应
wp_send_json($response);
}
4. 更新评论显示:在主题的comments.php文件中,修改评论的显示方式,并添加自定义评论回调函数(mytheme_comment)。
```php
function mytheme_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment;
?>
<li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
<div class="comment-body">
<?php printf(__('By %s', 'textdomain'), get_comment_author_link()); ?>
<?php comment_text(); ?>
<div class="comment-reply-link" data-commentid="<?php comment_ID(); ?>">
<?php comment_reply_link(array_merge($args, array('depth' => $depth, 'max_depth' => $args['max_depth']))); ?>
</div>
</div>
</li>
<?php
}
这样就可以实现在WordPress中使用Ajax评论了。用户在评论表单中提交评论后,页面中的评论区域会实时更新,而不需要刷新整个页面。同时,用户可以回复其他评论,回复的内容也会实时显示在页面中。这样可以提升用户体验,提高站点的交互性。
https/SSL证书广告优选IDC>>
推荐主题模板更多>>
推荐文章