Wordpress：添加无限滚动分页

Question

我对 Wordpress 很陌生。我目前正在使用 FoundationPress 主题，并且正在尝试添加一个按钮，用户可以单击该按钮来加载更多帖子。

我想要的是，最初用户会看到四篇博客文章，当用户点击阅读更多按钮时，它将加载接下来的四篇文章，直到没有更多文章并且按钮消失。

我已经可以加载前四个帖子，但我很难设置一个按钮来显示接下来的四个帖子。

这是我目前所拥有的：

<section class="row blogArticleWrapper">
                <?php while ( have_posts() ) : the_post(); ?>
                <?php
                the_post();
                $blog_posts = get_posts( array(
                    'post_type' => 'blog',
                    'posts_per_page' => 4,
                    'offset' => 1,
                    'orderby' => 'date',
                    'order' => 'DESC'
                ) );
                if ( $blog_posts ):
                ?>
                <?php
                foreach ( $blog_posts as $post ):
                    setup_postdata($post);
                    ?>
                    <article class="blog-profile small-12 columns">
                        <a href="<?php the_field("news_url"); ?>" title="<?php the_title(); ?>"><span class="name"><?php the_field("news_title"); ?></span></a>
                        <p class="writtenBy">Written by: <?php the_field("news_written_by"); ?> <span class="date">Date: <?php the_field("news_date"); ?></span></p>
                    </article><!-- /.profile -->
                <?php endforeach;
                ?>
                <?php endif; ?>
                <?php endwhile; // end of the loop. ?>
</section><!-- /.row -->

我尝试关注这个guide，但我不知道如何在我的页面上使用它。

感谢您的帮助，

谢谢。

Answer 1

删除：

while ( have_posts() ) : the_post(); ?>

                the_post();

和

<?php endwhile; // end of the loop. ?>

将请求更改为

$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$blog_posts = get_posts( array(
                    'post_type' => 'blog',
                    'posts_per_page' => 4,
                    'offset' => 1,
                    'paged' => $paged,
                    'orderby' => 'date',
                    'order' => 'DESC'
                ) );

添加到functions.php

function wp_corenavi() {
        global $wp_query;
        $pages = '';
        $max = $wp_query->max_num_pages;
        if (!$current = get_query_var('paged')) $current = 1;
        $a['base'] = str_replace(999999999, '%#%', get_pagenum_link(999999999));
        $a['total'] = $max;
        $a['current'] = $current;

        $total = 1; 
        $a['mid_size'] = 3; 
        $a['end_size'] = 1;
        $a['prev_text'] = '«'; 
        $a['next_text'] = '»'; 

        if ($max > 1) echo '<div id="pagination" class="navigation column medium-12">';
        if ($total == 1 && $max > 1) $pages = '<span class="pages">' . __('Page', 'Site') . $current . ' ' . __('of', 'Site') . ' ' . $max . '</span>'."\r\n";
        echo $pages . paginate_links($a);
        if ($max > 1) echo '</div>';
    }

在endforeach;之后添加 - wp_corenavi();wp_reset_postdata();; 然后是 jQuery ajax：

//Trigger ajax at the end of page
           $(window).scroll(function(){
                    var top = $('body,html').scrollTop();
                    var height = $(window).height();
                    var docheight = $(document).height();

                    var screen = Number(docheight) - Number(height);

                    if( top >= screen ){
                        $('#pagination .next').click();
                    }
                });

            //do ajax on pagination
            $('#pagination .next').on('click',function(e){
                e.preventDefault();

                $('#pagination').remove();


                $.ajax({
                    type: "GET",
                    url: $(this).attr('href'),
                    dataType: "html",
                    success: function(out){

                        //We get blocks from next page , change selector to yours
                        result = $(out).find('.short-articles-wrapper-main .short-article');
                       //find next page pagination,change selector  to yours
                        pagination = $(out).find('.short-articles-wrapper-main #pagination');               
                       //append blocks from next page to current ,change selector to yours
                        $('.short-articles-wrapper-main').append(result);
                       //append pagination from next page to current, change selector to yours
                        $('.short-articles-wrapper-main').append(pagination.fadeIn(200));       
                    }
                });
            });

希望对您有所帮助。