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

我们已经完成了。你所要做的就是填补空白并整理一切。小免责声明。我根本没有测试过这个。我刚刚写过很多次这些类型的系统。

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

1 个答案: