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动态加载有所帮助。请注意,以上代码仅供参考,具体实现可能需要根据你的主题和需求进行调整和修改。