WordPress评论ajax动态加载
时间 : 2023-12-06 18:14:02声明: : 文章内容来自网络,不保证准确性,请自行甄别信息有效性
最佳答案
如果你想在WordPress中使用ajax动态加载评论,你可以按照以下几个步骤进行操作:
1. 首先,在你的主题的 functions.php 文件中添加以下代码,以启用WordPress的ajax功能:
```php
add_action('wp_enqueue_scripts', 'enqueue_ajax_scripts');
function enqueue_ajax_scripts() {
wp_enqueue_script('ajax-comment', get_template_directory_uri() . '/js/ajax-comment.js', array('jquery'), '1.0', true);
wp_localize_script( 'ajax-comment', 'ajaxcomment', array(
'ajax_url' => admin_url('admin-ajax.php')
));
}
这段代码的作用是将ajax-comment.js文件添加到前台页面,并将ajax_url传递给JavaScript变量ajaxcomment.ajax_url。
2. 接下来,在你的主题目录下创建一个名为js的文件夹,并在其中创建一个名为ajax-comment.js的文件。
3. 在ajax-comment.js文件中添加以下代码:
```js
jQuery(document).ready(function($) {
$('#commentform').submit(function() {
var form = $(this);
var formData = form.serialize();
var submitButton = form.find('input[type="submit"]');
// 禁用提交按钮
submitButton.prop('disabled', true);
// 发送ajax请求
$.ajax({
type: 'POST',
url: ajaxcomment.ajax_url,
data: formData + "&action=ajax_comment",
success: function(response) {
// 处理ajax返回的数据
if (response.success) {
// 清空评论表单
form.find('textarea[name="comment"]').val('');
form.find('input[name="author"]').val('');
form.find('input[name="email"]').val('');
form.find('input[name="url"]').val('');
// 在评论列表中添加新评论
if ($('#comments').length > 0) {
$('#comments').prepend($(response.data.comment_html).fadeIn('slow'));
} else {
// 如果没有评论列表,则刷新页面
location.reload();
}
}
// 启用提交按钮
submitButton.prop('disabled', false);
}
});
return false;
});
});
这段代码做了以下几个事情:
- 当提交按钮被点击时,禁用提交按钮,以防止用户重复点击。
- 将表单数据序列化并发送到服务器端的ajax_comment函数。
- 处理服务器端返回的数据,如果评论添加成功,则清空表单并将新评论插入到评论列表中;如果评论列表不存在,则刷新页面。
- 最后,启用提交按钮。
4. 在你的主题的 comments.php 文件中找到评论输出的部分,并确保评论表单的id为commentform:
现在,当用户提交评论时,评论将会通过ajax方式动态加载到页面中,无需刷新页面。
请注意,由于每个主题的结构和文件名可能会有所不同,请根据你自己的主题进行相应的更改。另外,在使用ajax前,请确保你的主题支持WordPress的评论系统,以及已经加载了jQuery库。
其他答案
要实现WordPress评论的Ajax动态加载,首先需要了解Ajax的基本原理和WordPress评论系统的结构。以下是一个实现该功能的简单步骤:
步骤1:在主题的函数文件(functions.php)中添加必要的代码。
在函数文件中添加一个用于处理Ajax请求的函数。这个函数将接收并处理来自前端的Ajax请求,并返回评论列表的HTML代码。
```php
// Enqueue the script that will handle the Ajax request
function enqueue_ajax_comment_script() {
wp_enqueue_script( 'ajax-comment-script', get_template_directory_uri() . '/js/ajax-comment.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_ajax_comment_script' );
// Add an Ajax endpoint for handling the comment submission
function add_ajax_comment_endpoint() {
add_rewrite_endpoint( 'ajax-comments', EP_COMMENTS );
}
add_action( 'init', 'add_ajax_comment_endpoint' );
// Handle the Ajax request and return the comment list
function ajax_handle_comment_request() {
// Check if it's an Ajax request
if ( isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) && strtolower( $_SERVER['HTTP_X_REQUESTED_WITH'] ) == 'xmlhttprequest' ) {
// Get the post ID
$post_id = $_GET['post_id'];
// Get the comments
$comments = get_comments( array( 'post_id' => $post_id ) );
// Process the comments and generate the HTML
$output = '';
if ( $comments ) {
foreach ( $comments as $comment ) {
$output .= '<li><span class="comment-author">' . $comment->comment_author . '</span>: ' . $comment->comment_content . '</li>';
}
} else {
$output = '<li class="no-comments">No comments yet.</li>';
}
// Return the HTML
echo $output;
}
// Don't forget to exit!
exit;
}
add_action( 'wp_ajax_ajax_handle_comment_request', 'ajax_handle_comment_request' );
add_action( 'wp_ajax_nopriv_ajax_handle_comment_request', 'ajax_handle_comment_request' );
步骤2:创建前端JavaScript文件(ajax-comment.js)来处理Ajax请求并更新评论列表。
在主题文件夹中创建一个名为ajax-comment.js的JavaScript文件,并使用以下代码:
```javascript
jQuery(document).ready(function($) {
$('#commentform').submit(function(e) {
// Prevent the default form submission
e.preventDefault();
// Get the form data
var formData = $(this).serialize();
// Submit the form via Ajax
$.ajax({
type: 'POST',
url: '/wp-admin/admin-ajax.php',
data: formData + '&action=ajax_handle_comment_request',
success: function(response) {
// Update the comment list with the new comments
$('.comment-list').html(response);
// Clear the comment form
$('#comment').val('');
}
});
});
});
步骤3:在评论模板中添加对应的HTML和CSS代码。
在你的主题评论模板(例如comments.php)中,添加一个带有class为comment-list的HTML元素,这个元素将用于显示评论列表。
步骤4:在需要加载评论的地方添加相应的链接或按钮。
在你希望加载评论的地方(例如文章页面),添加一个链接或按钮来触发Ajax请求。
Load comments
这样,当用户点击“Load comments”链接时,将会触发Ajax请求并且评论列表将会被动态加载。
希望这些步骤对于你实现WordPress评论的Ajax动态加载有所帮助。请注意,以上代码仅供参考,具体实现可能需要根据你的主题和需求进行调整和修改。
https/SSL证书广告优选IDC>>
推荐主题模板更多>>
推荐文章