如何在自定义 WP_Query Ajax 上实现分页

Posted 2023-03-10

【中文标题】如何在自定义 WP_Query Ajax 上实现分页

【英文标题】：How to implement pagination on a custom WP_Query Ajax

【发布时间】：2015-06-18 04:15:02

【问题描述】：

我想使用 Ajax 在自定义循环中对我的 WordPress 帖子进行分页，所以当我点击加载时，会出现更多按钮帖子。

我的代码：

<?php 
    $postsPerPage = 3;
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => $postsPerPage,
        'cat' => 1
    );
    $loop = new WP_Query($args);

    while ($loop->have_posts()) : $loop->the_post();
?>
<h1><?php the_title(); ?></h1>
<p>
    <?php the_content(); ?>
</p>
<?php
    endwhile; 
    echo '<a href="#">Load More</a>';
    wp_reset_postdata(); 
?>

此代码不分页。有没有更好的方法来做到这一点？

【参考方案1】：

Load More 按钮需要向服务器发送ajax 请求，返回的数据可以使用 jQuery 或纯 javascript 添加到现有内容中。假设您使用 jQuery，这将是起始代码。

自定义 Ajax 处理程序（客户端）

<a href="#">Load More</a>

改为：

<a id="more_posts" href="#">Load More</a>

Javascript: - 把它放在文件的底部。

//</script type="text/javascript">

    var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";
    var page = 1; // What page we are on.
    var ppp = 3; // Post per page

    $("#more_posts").on("click",function() // When btn is pressed.
        $("#more_posts").attr("disabled",true); // Disable the button, temp.
        $.post(ajaxUrl, 
            action:"more_post_ajax",
            offset: (page * ppp) + 1,
            ppp: ppp
        ).success(function(posts)
            page++;
            $(".name_of_posts_class").append(posts); // CHANGE THIS!
            $("#more_posts").attr("disabled",false);
        );

   );

//</script>

自定义 Ajax 处理程序（服务器端） PHP - 将其放入 functions.php 文件中。

function more_post_ajax()
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];
    header("Content-Type: text/html");

    $args = array(
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'cat' => 1,
        'offset' => $offset,
    );

    $loop = new WP_Query($args);
    while ($loop->have_posts())  $loop->the_post(); 
       the_content();
    

    exit; 


add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax'); 
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

【讨论】：

你还需要更改$(".name_of_posts_class").append(posts); // CHANGE THIS!这一行吗？什么是帖子类

这是您的预览帖子的存储位置，例如"posts-container" (post-1,post-2....) 现在你将添加 (post-11, post-12..)

只需使用paged 而不是offset。

如果使用以前的按钮，偏移也会增加复杂性。正如rkb所说，最好使用$args['paged']来确定查询哪个页面。

第一个sn-p中jQuery代码中引用的admin-ajax.php文件是什么。这再也不会被引用了