php - 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. Hook wp_ajax 以在您调用时提供下一篇帖子数据
3. 滚动/“点击加载更多”后，您可以使用 JavaScript 调用此函数，并将加载的帖子附加到底部
4. 重复此操作，直到加载所有帖子

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

另外，请不要在 WordPress 主题/插件中使用 echo 编写 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 ?>>
        ...