WP_Query +无限滚动

Question

我在使用我的全新博客模板（在wordpress上）时坚持不懈。我有以下查询/ PHP代码：

echo '<div id="posts-container" class="fusion-blog-layout-medium fusion-blog-infinite fusion-posts-container-infinite fusion-blog-archive fusion-clearfix">';

$args = array( 'post_type' => 'era', 'post_status' => array('publish', 'future'), 'paged' => $paged );

$custom_query = new WP_Query($args);

while($custom_query->have_posts()) : $custom_query->the_post();

$post_classes = $post_class . ' ' . $alignment_class . ' ' . $thumb_class . ' post fusion-clearfix';
ob_start();
post_class( $post_classes );
$post_classes = ob_get_clean();

echo '<article id="post-' . get_the_ID() . '" ' . $post_classes . '>';

get_template_part( 'new-slideshow' );

echo '<div class="fusion-post-content koncert post-content">';

echo ( '<h2 class="entry-title fusion-post-title" data-fontsize="18" data-lineheight="27"><a href="' . get_post_permalink( '','','true') . '">' .get_the_title() . '</a></h2>' );

if ( get_field( "data_i_miejsce_koncertu", get_the_ID() ) ) {
    echo ( '<div class="lista-koncert-podtytul">' . get_field( "data_i_miejsce_koncertu", get_the_ID() ) . '</div>' );
}

echo '<div class="fusion-post-content-container">';

do_action( 'avada_blog_post_content' );

if ( get_field( "opis", get_the_ID() ) ) {
    echo '<div class="lista-koncert-opis">' . wp_trim_words(get_field( "opis", get_the_ID() ), 60, ' [...]') . '<br><br><a href="' . get_post_permalink( '','','true') . '">Zobacz więcej &gt;</a></div>';
}

echo '</div>';
echo '</div>'; // End post-content.
echo '</article>';

endwhile;
wp_reset_postdata(); // reset the query

echo '</div>';

我想要实现的是没有定期分页（我已经从我的模板中删除了控件），但我想使用jquery无限滚动脚本。但说实话 - 我不知道如何开始; /主要是因为互联网上没有那么多现场实例/教程..感谢任何提示

Answer 1

您需要使用javascript来进行无限滚动工作。基本上你需要有：

1. 显示前几个帖子并加载无限滚动javascript函数的页面
2. 挂钩wp_ajax以在您调用时提供下一个帖子数据
3. 滚动/“点击加载更多”后，您可以使用javascript调用此方法并将加载的帖子附加到底部
4. 重复此操作，直到加载所有帖子

这应该给你一个很好的起点：https://www.billerickson.net/infinite-scroll-in-wordpress/

另外请不要在带有echo的Wordpress主题/插件中编写HTML。这更具可读性，可帮助您保持缩进：

?>

<div id="posts-container" class="fusion-blog-layout-medium fusion-blog-infinite fusion-posts-container-infinite fusion-blog-archive fusion-clearfix">
    <?php
    $args = array( 'post_type' => 'era', 'post_status' => array('publish', 'future'), 'paged' => $paged );

    $custom_query = new WP_Query($args);

    while($custom_query->have_posts()) : $custom_query->the_post();

        $post_classes = $post_class . ' ' . $alignment_class . ' ' .  $thumb_class . ' post fusion-clearfix';
        ob_start();
        post_class( $post_classes );
        $post_classes = ob_get_clean();

        ?>
        <article id="post-<?php echo get_the_ID() ?>" <?php echo $post_classes ?>>
        ...