wp 发布 ajax 加载更多

Question

我尝试使用 ajax 加载更多帖子。我看到在线和 stackoverflow 中有很多插件和解决方案。但对我没有任何工作。实际上我想在没有插件的情况下做到这一点。所以我可以在需要此代码的不同页面存档或不同页面模板中使用它。

这是我从 stackoverflow 的另一个问题中得到的代码。我的分数较低，所以我不能在那里发表评论。

这是我的 index.php 代码：

<?php get_header(); ?>

<div class="ajax-posts">
<?php 
    $postsPerPage = 3;
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => $postsPerPage,
    );
    $loop = new WP_Query($args);

    while ($loop->have_posts()) : $loop->the_post();
?>
<h2><?php the_title(); ?></h2>
<?php
    endwhile; 
    echo '<a id="more_posts" href="#">Load More</a>';
    wp_reset_postdata(); 
?>
</div>
<script type="text/javascript">
    var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";
    var page = 1;.
    var ppp = 3;

    $("#more_posts").on("click",function(){ 
        $("#more_posts").attr("disabled",true);
        $.post(ajaxUrl, {
            action:"more_post_ajax",
            offset: (page * ppp) + 1,
            ppp: ppp
        }).success(function(posts){
            page++;
            $(".ajax-posts").append(posts); // CHANGE THIS!
            $("#more_posts").attr("disabled",false);
        });

   });

</script>
<?php get_footer(); ?>

这是functions.php代码

<?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,
        'offset' => $offset,
    );

    $loop = new WP_Query($args);
    while ($loop->have_posts()) { $loop->the_post();
       the_title();
    }
    exit; 
}

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

我不知道为什么帖子无法加载或无法加载更多链接。我希望有人能提供帮助。

参考：https://stackoverflow.com/a/31588401/5545813

Answer 1

更好的方法是返回一个带有你的帖子标题的数组。然后在成功后显示它们。如果数组长度

$array_return = array();
$loop = new WP_Query($args);
while ($loop->have_posts()) { $loop->the_post();
$content = "<h1>" . get_the_title() . "</h1>";
$content .= "<div>" . get_the_content() . "</div>";
$content .= "<div>" . get_field("your_field") . "</div>";
$array_return[] = $content;
}
echo json_encode( $array_return );
die();

在你的 js 脚本中，

var posts = JSON.parse(posts);
for( var i = 0; i < posts.length; i++ )
    $(".ajax-posts").append(posts[i]);

if( posts.length < ur_ppp )
    $("#more_posts").fadeOut();

类似的东西