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

Question

我一直试图添加一个加载更多按钮到我的头版几个月了。对于我的首页，我有一个查询，显示我的最新帖子，每页15。我想要一个简单的加载更多按钮，它会在前15个帖子后开始，并在每15个帖子后出现。我认为这样做很简单，但我无法弄清楚如何设置它的生活。如果有人能帮助我，我会非常感激。

前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

我不打算进入一个巨大的深度的量，但你会需要一个按钮，像这样在底部您的文章 <div id="load-more">Load More< /div>

然后，您会需要一些JavaScript/jQuery来观看当按下此按钮

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

从那里你将需要做一个小小的PHP脚本来获得接下来的15个职位。然后你需要从javascript调用它。我不写代码WP非常频繁，但它可能看起来有点像这样

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

从这里，你需要弄清楚要如何通过你的文章的数据传回的JavaScript。你在这里有两个选项。您可以在响应内部呈现html视图，或将数据解析为json格式并将其返回给您的javascript。

从这里我们将需要处理您的PHP脚本的响应。

注意：这取决于你如何处理获得最后的id部分。从逻辑上讲，你可以再补充一个data-id到每个岗位容器中，然后使用jQuery来获取最后孩子的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); 
     } 
    }); 
}); 

，我们就大功告成了。你所要做的就是填空，整理一下。小的免责声明。我还没有测试过。我刚刚写了这些类型的系统很多次。