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, но я не знаю, как использовать его на моей странице.

Любая помощь с учётом,

Thanks.

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

Надеется, что это поможет.