WordPress 纯代码实现评论 Ajax 加载与翻页效果

为 WordPress 评论系统添加 Ajax 加载与翻页功能，可以显著提升用户体验，让评论浏览更加流畅。本文将介绍如何通过纯代码方式实现此效果，无需依赖插件。

最终效果如下图所示：点击“加载更多”按钮，无需刷新页面即可加载更早的评论。

准备工作

在开始之前，请确保你的 WordPress 后台评论设置已启用分页功能。路径为：后台设置 → 讨论 → 其他评论设置，勾选“分页显示评论”并设置每页显示的评论数量。

实现步骤

1. 添加“加载更多”按钮与脚本

首先，在你的主题评论模板文件（通常是 comments.php）中找到评论列表输出位置。定位到 paginate_comments_links() 函数，或找到 <ol class="comment-list"> 标签。在其后添加以下 PHP 代码：

$cpage = get_query_var('cpage') ? get_query_var('cpage') : 1;

if( $cpage > 1 ) {
    echo '<div class="comment_loadmore">加载更多评论</div>
    <script>
    var ajaxurl = '' . esc_js( admin_url('admin-ajax.php') ) . '',
        parent_post_id = ' . get_the_ID() . ',
        cpage = ' . $cpage . '
    </script>';
}

代码说明：

• $cpage 获取当前评论页码，默认为 1（最新评论页）。
• 条件 if( $cpage > 1 ) 确保只有在存在更早的评论页面时，才会输出“加载更多”按钮和必要的 JavaScript 变量。
• 我们通过 admin_url('admin-ajax.php') 安全地获取 Ajax 处理地址。

2. 编写 Ajax 加载 jQuery 脚本

将以下 jQuery 代码添加到主题的 JavaScript 文件中，或以内联脚本方式放在页面底部（确保在引入 jQuery 之后）。

jQuery(function($){
    // 加载更多按钮点击事件
    $('.comment_loadmore').click( function(){
        var button = $(this);
        // 减少当前评论页码，以加载更早的页面
        cpage--;
        $.ajax({
            url : ajaxurl,
            data : {
                'action': 'cloadmore',
                'post_id': parent_post_id, // 当前文章 ID
                'cpage' : cpage, // 要加载的评论页码
            },
            type : 'POST',
            beforeSend : function ( xhr ) {
                button.text('加载中...'); // 按钮状态反馈
            },
            success : function( data ){
                if( data ) {
                    // 将新加载的评论追加到现有列表末尾
                    $('ol.comment-list').append( data );
                    button.text('加载更多');
                    // 如果已经是第一页（最旧的评论），则移除按钮
                    if ( cpage == 1 ) {
                        button.remove();
                    }
                } else {
                    // 如果没有数据返回，也移除按钮
                    button.remove();
                }
            },
            error: function() {
                button.text('加载失败，请重试');
            }
        });
        return false;
    });
});

关键点： 代码中 cpage-- 是因为 WordPress 评论分页默认按时间倒序排列，最新评论在第一页。点击“加载更多”需要加载页码更小（即更早）的评论。

3. 创建 Ajax 请求处理函数

最后，将以下 PHP 代码添加到主题的 functions.php 文件中。这个函数负责处理前端 Ajax 请求并返回评论列表 HTML。

// 为登录用户和未登录用户注册 Ajax 处理钩子
add_action('wp_ajax_cloadmore', 'comments_loadmore_handler');
add_action('wp_ajax_nopriv_cloadmore', 'comments_loadmore_handler');

function comments_loadmore_handler() {
    // 安全检查：验证 nonce（推荐在生产环境中添加）
    // if ( ! isset( $_POST['nonce'] ) || ! wp_verify_nonce( $_POST['nonce'], 'cloadmore_nonce' ) ) {
    //     die( 'Security check failed' );
    // }

    // 获取并设置当前文章数据
    $post_id = absint( $_POST['post_id'] );
    $post = get_post( $post_id );
    if ( ! $post ) {
        die( 'Invalid post.' );
    }
    setup_postdata( $post );

    // 设置评论查询参数
    $cpage = absint( $_POST['cpage'] );
    $comments_per_page = get_option( 'comments_per_page' );

    // 输出指定页码的评论列表
    wp_list_comments( array(
        'avatar_size' => 100,
        'page' => $cpage,
        'per_page' => $comments_per_page,
        'style' => 'ol',
        'short_ping' => true,
        'reply_text' => '回复',
        'callback' => 'your_theme_comment_callback' // 请替换为你的主题实际使用的回调函数名
    ) );
    wp_reset_postdata(); // 重置文章数据
    die(); // 结束输出
}

重要提示：

• wp_ajax_{action} 和 wp_ajax_nopriv_{action} 钩子分别处理登录用户和未登录用户的请求。
• 生产环境中强烈建议添加 nonce 验证（代码中已注释示例）以防止 CSRF 攻击。
• 请将 wp_list_comments 中的 'callback' 参数值 'your_theme_comment_callback' 替换为你的主题实际使用的评论回调函数名，以确保评论样式一致。

总结

通过以上三个步骤，我们为 WordPress 评论系统实现了纯代码的 Ajax 加载与翻页功能。核心原理是利用 WordPress 原生的 admin-ajax.php 机制，前端通过 jQuery 发起请求，后端查询指定页码的评论并返回 HTML 片段。

此方法不依赖插件，性能高效，且能更好地与你的主题样式集成。你可以根据需要进一步美化“加载更多”按钮的样式，或添加加载动画等交互细节。