我在首页添加了一个加载更多按钮。该按钮将在每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) { ?>
<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();
的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;
}
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++;
}?>
}
?>
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
}
});
}
EDITED JS
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
}
});
}
jQuery(document).ready(function() {
jQuery('#load-more').on('click', function(){
loadMorePosts(pageNumber, postsPerPage)
})
})
答案 0 :(得分:0)
我认为这里的问题是你没有将loadMorePosts函数附加到按钮上的事件监听器。由于您的按钮的ID为“load-more”,因此您可以执行以下操作:
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
}
});
}
$('#load-more').on('click', function(){
loadMorePosts(pageNumber, postsPerPage)
})
一些警告。我不知道你是如何检索pageNumber和postsPerPage值的。
这个答案假设您在html加载完成后加载脚本。如果不是这样,您需要执行以下操作:
$(document).ready(function() {
$('#load-more').on('click', function(){
loadMorePosts(pageNumber, postsPerPage)
})
})