添加一个加载更多帖子按钮

Question

我想在wordpress网站的首页添加一个简单的加载按钮，这将加载更多帖子。我使用查询和引导程序每行有1个帖子，然后是2，然后是1，依此类推。我希望显示15个帖子然后再加载更多按钮，然后当您按下按钮时，会加载更多帖子。我已经开始尝试添加此按钮，但每次尝试它都不起作用。我尝试过插件并制作自己的插件。如果有人可以帮我添加一个加载更多按钮我会非常感激。

我的front-page.php

＆＃13;

＆＃13;

<?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();

＆＃13;

＆＃13;

＆＃13;

来自多米尼克斯的答案＆＃39;答案

前page.php文件

＆＃13;

＆＃13;

<?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();

＆＃13;

＆＃13;

＆＃13;

loop.php

＆＃13;

＆＃13;

<?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++; 
}?>  
        }
?>

＆＃13;

＆＃13;

＆＃13;

的functions.php

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

JS

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以采取的一种方法是将查询移至functions.php并向wp_ajax添加操作。例如：

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

创建一个驻留在主题根目录中的loop.php。这将是您的帖子的模板，可以迭代：

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

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

将此代码放在javascript文件中。当你需要获取更多帖子时，可以对动作'load_more'进行AJAX调用：

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

这是一个非常简单的植入，您需要包含NONCE以确保安全性，并在达到最大页数时进行处理。