几个月来我一直在尝试在我的首页添加加载更多按钮。对于我的首页,我有一个显示我最新帖子的查询,每页 15 条。我想要一个简单的加载更多按钮,该按钮将在前 15 个帖子之后启动,并在每 15 个帖子之后出现。我认为这很简单,但我就是无法弄清楚如何设置它。如果有人可以提供帮助,我将非常感激。
首页.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();
最佳答案
我不会深入探讨,但您需要在帖子底部添加一个类似这样的按钮
<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 View ,或者将数据解析为类似 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 );
}
});
});
我们就完成了。您所要做的就是填写空白并整理所有内容。小免责声明。我根本没有测试过这个。我刚刚多次编写过这些类型的系统。
关于javascript - 加载更多按钮将加载更多帖子,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45129267/