加载更多按钮，将加载更多帖子

Question

I've been trying to add a load more button to my front page for a few months now. For my front page I have a query that shows my latest posts, 15 per page. I want a simple load more button that will start after the first 15 posts and appears after every 15 posts. I would think this is pretty simple to do, but I just can not figure out for the life of me how to set it up. If anyone could help I would be extremely appreciative.

front-page.php

 <?php /* * Template Name: */ get_header(); get_template_part ('inc/carousel'); $the_query = new WP_Query( [ 'posts_per_page' => 15, 'paged' => get_query_var('paged', 1) ] ); if ( $the_query->have_posts() ) { ?> <div id="ajax"> <?php $i = 0; $j = 0; while ( $the_query->have_posts() ) { $the_query->the_post(); if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?> <div class="row"> <article <?php post_class( 'col-sm-12 col-md-12' ); ?>> <div class="large-front-container"> <?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?> </div> <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div> <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> <div class="front-page-post-info"> <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> <?php get_template_part( 'front-shop-the-post' ); ?> <?php get_template_part( 'share-buttons' ); ?> <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> </div> </article> </div> <?php } else { // Small posts ?> <?php if($j % 2 === 0) echo '<div class="row">'; ?> <article <?php post_class( 'col-sm-6 col-md-6' ); ?>> <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?> <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div> <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> <div class="front-page-post-info"> <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> <?php get_template_part( 'front-shop-the-post' ); ?> <?php get_template_part( 'share-buttons' ); ?> <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> </div> </article> <?php $j++; if($j % 2 === 0) echo '</div>'; ?> <?php } $i++; }?> </div> <?php if(get_query_var('paged') < $the_query->max_num_pages) { ?> <?php } } elseif (!get_query_var('paged') || get_query_var('paged') == '1') { echo '<p>Sorry, no posts matched your criteria.</p>'; } get_footer(); 

Answer 1

I'm not going to go into a huge amount of depth but you're going to need a button something like this at the bottom of your post <div id="load-more">Load More< /div>

You'll then need some javascript / jQuery to watch for when that button is pressed

$('#load-more').on('click', function() {
   console.debug("Load More button pressed");
});

From there you're going to need to make a little php script to get the next 15 posts. You will then need to call this from the javascript. I don't write WP code very often but it might look a little something like this

$lastPostId = $_GET['lastid']; // this will need to be passed from the javascript at a later point.
$posts = [];
$the_query = new WP_Query([ 
    'posts_per_page' => 15, 
    'paged' => get_query_var('paged', $lastPostId) 
]); 

if ( $the_query->have_posts() ) {
    while ( $the_query->have_posts() ) { 
        $the_query->the_post(); 
        $posts[] = ""// See comment bellow
    }
}
$response = ["posts" => $posts];
echo json_encode($response);

From here you'll need to figure out how you want to pass your post's data back to the javascript. You have 2 options here. You can render the html view inside of the response or parse the data into a json like format and return that back to your javascript.

From here we're going to need to handle the response from your php script.

Note: it's up to you to figure out how you're going to handle getting the last id part. Logically you can just add a data-id to each post container and then use jquery to get the last-child's data-id

$('#load-more').on('click', function() {
   var lastId = 15;
   // Now we make the query and handle it
   $.get("myabovephpscript.php", {lastid: lastId}, function( data ) {
       // for this example I'm going to to assume you've prebuilt the
       // html so we're going to append it to the page.
       for( let i = 0; i < data.posts.length; i ++ ) {
           $( '#postsContainer' ).append( data.posts[i].postData );
       }
   });
});

and we're done. All you have to do is fill in the blanks and tidy it all up. Small disclaimer. I've not tested this at all. I've just written these types of systems to many times.