Php 添加无限滚动分页

我对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 -->

编写人：日期：

我试着遵循这个，但我不知道如何在我的页面上使用它

感谢您的帮助

谢谢。

删除：

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

                the_post();

及

将请求更改为

$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>';
    }

---

希望它能帮助你

嗯，它似乎不起作用，我调试了代码的Ajax部分，看起来变量“top”永远不会改变，即使我在页面底部。我将顶部变量更改为将触发if语句的变量，但是代码的“分页时的ajax”部分似乎没有触发，即使它正在调用

$（“#pagination.next”）。单击（）
//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));       
                    }
                });
            });