添加加载更多帖子按钮

Question

I want to add a simple load more button to the front page of my wordpress site that will load more posts. I'm using a query and bootstrap to have 1 post per line, and then 2, and then 1, and so on. I want 15 posts to be displayed and then a load more button, and then when you press the button 15 more posts are loaded. I've started to try to add this button, but every time I try it does not work. I have tried plugins and making my own. If anyone can help me add in a load more button I would be extremely appreciative.

my 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) { } } elseif (!get_query_var('paged') || get_query_var('paged') == '1') { echo '<p>Sorry, no posts matched your criteria.</p>'; } get_footer(); 

EDITS FROM DOMINIQUE'S ANSWER

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) { ?> <button id=load-more>load more</button> <?php } } elseif (!get_query_var('paged') || get_query_var('paged') == '1') { echo '<p>Sorry, no posts matched your criteria.</p>'; } get_footer(); 

loop.php

 <?php if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); <?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++; }?> } ?> 

functions.php

 //LOAD MORE add_action( 'wp_ajax_load_more', 'load_more' ); function load_more() { if ( isset($_POST['action']) && $_POST['action'] === 'load_more' ){ $loopFile = $_POST['loop_file']; $paged = $_POST['page_no']; $posts_per_page = $_POST['posts_per_page']; $args = array('paged' => $paged, 'post_type' => 'post', 'posts_per_page' => $posts_per_page); $query = new WP_Query($args); get_template_part( $loopFile ); } wp_reset_query(); exit; } 

js

  // AJAX to grab more posts, wrap with a vanilla javascript or // jQuery click event function. function loadMorePosts(pageNumber, postsPerPage) { var query = 'action=load_more&page_no=' + pageNumber + '&loop_file=loop&posts_per_page=' + postsPerPage; jQuery.ajax({ url: '/wp-admin/admin-ajax.php', type: 'post', data: query, success: function(response){ // handle response } }); } 

Answer 1

One approach you can take is to move your query to functions.php and add an action to wp_ajax. For example:

  add_action( 'wp_ajax_load_more', 'load_more' );

  function load_more() {
    if ( isset($_POST['action']) && $_POST['action'] === 'load_more' ){
      $loopFile        = $_POST['loop_file'];
      $paged           = $_POST['page_no'];
      $posts_per_page  = $_POST['posts_per_page'];

      $args = array('paged' => $paged,
                    'post_type' => 'post',
                    'posts_per_page' => $posts_per_page);

      $query = new WP_Query($args);

      get_template_part( $loopFile );
    }

    wp_reset_query();

    exit;
   }

Create a loop.php that resides in the root of your theme. This will be a template for your posts that can be iterated over:

<?php if ( $query->have_posts() ) {

        while ( $query->have_posts() ) {
          $query->the_post();
            // populate your post template here
            echo   '<h2>' . get_the_title() .'</h2>';    
        }
?>

Place this code in a javascript file. When you need to grab more posts make an AJAX call to the action 'load_more':

  // AJAX to grab more posts, wrap with a vanilla javascript or
  // jQuery click event function.
  function loadMorePosts(pageNumber, postsPerPage) {
    var query = 'action=load_more&page_no=' + pageNumber + 
        '&loop_file=loop&posts_per_page=' + postsPerPage;

    $.ajax({
        url: '/wp-admin/admin-ajax.php',
        type: 'post',
        data: query,
        success: function(response){
            // handle response
        }
    });
}

This is a very simple implantation, you will want to include a NONCE for security and handle when max number of pages has been reached.