主页上的自定义帖子类型的“加载更多”按钮

Question

I have a custom post type called videos and on my home page I want to display three posts at a time with a "load more" button below that when clicked will load the next 12 posts directly below. My code in my front-page.php is:

<?php
    $args2 = array(
      'post_type'      => 'videos',
      'posts_per_page' => '3',
      'offset' => '1'
    );
 ?>
      <div class="triple site-content">
      <h1>Featured Issues</h1>
  <?php $query = new WP_query ( $args2 );
    if ( $query->have_posts() ) { ?>
      <?php while ( $query->have_posts() ) : $query->the_post(); ?>
    <div class="col-sm-4" id="<?php echo( basename(get_permalink()) ); ?>">
      <?php global $post; 
      $gethref = $post->post_name; ?>
          <a href="/<?php echo $gethref ?>"><img 
          src="https://img.youtube.com/vi/<?php the_field('video_id'); ?
          >/hqdefault.jpg" alt="<?php the_title(); ?>" class="stills"/></a>
          <span class="subTitles"><?php the_title(); ?></span>
    </div>

  <?php endwhile; } ?>

I'm not sure how to go about tackling this issue. I have tried a few options I've researched online but nothing is seeming to work.

Answer 1

This is a variant of an effect called infinite scroll. That name is more usually used to describe when the additional page load is triggered by scrolling to the bottom of the page, but it's actually the same thing being triggered by different events.

It's not something you can do with PHP - it uses Javascript and requires you to already have a working conventional pagination system, so the first thing to do is make sure that's working as expected, so you can navigate between the pages of search results. The part of the page that contains the paginated items must also be wrapped in a div you can easily access.

Then, you write some Javascript to do the following:

• On the trigger event, prevent the default behaviour from occurring and make an AJAX request to fetch the next page
• When you receive the response, retrieve the HTML inside the div containing the paginated items
• Append the paginated items to the existing ones and update the pagination to point to the next page

This means that if for any reason a client cannot execute Javascript the site remains usable, although these days that probably only affects search engines, and not all of them.

It's not that hard to roll your own implementation for this, but there's a few out there already. The one that seems to be most popular is this one, which also has a Wordpress plugin.