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));  
        } 
       }); 
      }); 

希望它会帮助你。