Wordpress: Add Infinite Scrolling Paginierung

Question

Ich bin sehr neu in der Wordpress. Ich verwende momentan das FoundationPress-Thema und versuche, eine Schaltfläche hinzuzufügen, auf die der Benutzer klicken kann, um weitere Posts zu laden.

Was ich will ist, dass der Benutzer zunächst vier Blog-Posts sehen wird und wenn der Benutzer auf den Read More Button klickt, werden die nächsten vier geladen, bis es keine Posts mehr gibt und die Schaltfläche verschwindet.

Ich bin bis zu dem Punkt gekommen, wo ich die ersten vier Posts laden kann, aber es fällt mir schwer, eine Schaltfläche einzurichten, um die nächsten vier Posts anzuzeigen. Diese

ist das, was ich bisher:

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

Ich habe versucht, im Anschluss an diesen guide, aber ich weiß nicht, wie es auf meiner Seite zu verwenden.

Jede Hilfe ist willkommen,

Danke.

Answer 1

Entfernen:

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

       the_post(); 

und

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

ändern Anfrage

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

Add

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

functions.php

Hinzufügen nach endforeach; - wp_corenavi();wp_reset_postdata();; Dann 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));  
        } 
       }); 
      }); 

Hoffe, es wird Ihnen helfen.