WP_Query +无限滚动

时间:2017-11-25 22:44:02

标签: php jquery wordpress infinite-scroll

我在使用我的全新博客模板(在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无限滚动脚本。但说实话 - 我不知道如何开始; /主要是因为互联网上没有那么多现场实例/教程...感谢任何提示

1 个答案:

答案 0 :(得分:1)

你需要调用javascript来进行infinte滚动工作。 基本上你需要有:

  1. 显示前几个帖子并加载无限滚动javascript函数的页面
  2. 挂钩wp_ajax,在您调用时提供下一个帖子数据
  3. 滚动/“点击加载更多”后,您可以使用javascript调用此方法并在底部附加已加载的帖子
  4. 重复此操作,直到所有帖子都已加载
  5. 这应该给你一个很好的起点: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 ?>>
            ...