实现wordpress无刷新Ajax评论翻页效果

使用Ajax实现WordPress评论翻页效果

在博客中,评论是非常重要的一环,而评论的翻页功能也是必不可少的。本文将介绍如何使用Ajax实现WordPress评论的翻页效果,省去每次翻页都需要刷新页面的麻烦。

步骤一:准备工作

首先,你需要添加一个新的模板文件,用于显示评论翻页后的内容。这个模板文件的名字可以自己定义,这里假设文件名为“ajax-comments.php”。

在这个模板文件中,你需要使用与“comments.php”相同的方式显示评论列表。另外,你还需要添加一个翻页的按钮,用于加载下一页的评论。这个按钮应该使用JavaScript来触发下一页评论的加载(我们稍后会讲到具体实现方法)。

步骤二:创建JavaScript文件

接下来,你需要创建一个名为“ajax-comments.js”的JavaScript文件。在这个文件中,你需要编写用于触发下一页评论加载的JavaScript代码。代码应该类似于下面这样:


jQuery(document).ready(function($) {
    var pageNumber = 1;

    $(document).on('click', '.ajax-comments-btn', function(event) {
        event.preventDefault();
        ++pageNumber;
        var postId = $(this).attr('data-post-id');
        var ajaxUrl = $(this).attr('href');
        $.ajax({
            url: ajaxUrl,
            type: 'post',
            dataType: 'html',
            data: {
                action: 'ajaxComments',
                pageNumber: pageNumber,
                postId: postId
            },
            success: function(data) {
                $('.comment-list').append(data);
                if (pageNumber == commentPages) {
                    $('.ajax-comments-btn').hide();
                }
            }
        });
    });
});

这段代码定义了一个点击事件,在用户点击“下一页”按钮时触发。它使用了jQuery的AJAX工具将评论下一页的内容获取并添加到页面上。

步骤三:编写WordPress插件代码

  1. 创建一个新的WordPress插件,将它的代码放在“functions.php”文件中
  2. 在插件中添加下面这段代码来注册“ajaxComments”函数:

function ajax_comments_load_more() {
    $postId = $_POST['postId'];
    $pageNumber = $_POST['pageNumber'];
    $commentsPerPage = get_option('comments_per_page');
    $offset = ($pageNumber - 1) * $commentsPerPage;
    $args = array(
        'post_id' => $postId,
        'status' => 'approve',
        'number' => $commentsPerPage,
        'offset' => $offset
    );
    $comments = get_comments($args);
    foreach($comments as $comment) {
        ?>
        
  • comment_content; ?>
  • <?php } wp_die(); } add_action('wp_ajax_nopriv_ajaxComments', 'ajax_comments_load_more'); add_action('wp_ajax_ajaxComments', 'ajax_comments_load_more');

    步骤四:最后步骤

    在“comments.php”文件中,你需要将原有的评论列表替换为下面的代码:

    
    
    1. 显示旧评论的代码
    2. <div class="comment-list"></div> -- 这里是新的评论列表,用于显示翻页后的评论</div>
    3. <div> <a class="ajax-comments-btn" data-post-id="<?php echo $post->ID; ?>" href="<?php%20echo%20site_url('/wp-admin/admin-ajax.php');%20?>">下一页</a> </div> -- 这里是“下一页”按钮的HTML代码

    现在,你已经成功地实现了WordPress评论的无刷新翻页效果。如果你还有任何问题,可以在下面的评论区留言,我将尽力为你解答。

    晓白博客网版权所有,原文地址https://www.xbnb.cn/5098
    © 版权声明
    THE END
    喜欢就支持一下吧
    点赞0 分享
    评论 抢沙发

    请登录后发表评论

      请登录后查看评论内容