我创建了一个自定义WP-Query,可以通过AJAX在单击按钮时加载更多帖子。一切正常。现在,如果要发布的帖子少于或恰好有四个,我想隐藏该按钮。如果所有帖子都已加载AJAX,则该按钮也应该消失。
如果有人可以帮助我,我将非常感激!预先谢谢你。
我的PHP:
<div class="masonry category-single-magazin__inner entry-content">
<?php $args = array('category_name' => 'magazin', 'posts_per_page' => '4', 'paged' => 1, 'orderby'=> 'date', 'order' => 'DESC'); $custom_query = new WP_Query( $args ); while($custom_query->have_posts()) : $custom_query->the_post(); ?>
<article class="object <?php if ( get_field( 'beitragsfarbe' ) == 1 ) { echo 'object--blue'; } else { echo 'object--yellow'; } ?>" id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink(); ?>">
<div class="lazy object__inner" data-src="<?php echo get_the_post_thumbnail_url(); ?>">
<div class="overline">
<h6>
<?php $posttags = get_the_tags(); if ($posttags) { foreach($posttags as $tag) { echo $tag->name . ' '; }}?>
</h6>
</div>
<div class="object__inner__text content-no-margin">
<h4>
<?php the_title(); ?>
</h4>
<p class="textlink" href="<?php the_permalink(); ?>">Mehr erfahren</p>
</div>
</div>
</a>
</article>
<?php endwhile ?>
</div>
<button class="load-more reload-masonry button-full button-full--yellow">
<div class="button-full__inner">Mehr anzeigen</div>
</button>
<script type="text/javascript">
jQuery(document).ready(function() {
var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
var page = 2;
var pageNumber = <?php echo count_cat_post('magazin')/4; ?>;
$('.load-more').on('click', function() {
var data = {
'action': 'load_posts_by_ajax',
'page': page,
'security': '<?php echo wp_create_nonce("load_more_posts"); ?>',
};
$.post(ajaxurl, data, function(response) {
$('.masonry').append(response);
page++;
});
});
if (page == (parseInt(pageNumber) - 1)) {
$('.load-more').hide();
}
});
</script>
我的functions.php:
function load_posts_by_ajax_callback() {
check_ajax_referer('load_more_posts', 'security');
$paged = $_POST['page'];
$args = array(
'category_name' => 'magazin',
'posts_per_page' => '4',
'paged' => $paged,
'orderby'=> 'date',
'order' => 'DESC'
);
$custom_query = new WP_Query( $args ); while ( $custom_query->have_posts() ) : $custom_query->the_post() ?>
<article class="object <?php if ( get_field( 'beitragsfarbe' ) == 1 ) { echo 'object--blue'; } else { echo 'object--yellow'; } ?>" id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink(); ?>">
<div class="lazy-ajax object__inner" style="background-image:url('<?php echo get_the_post_thumbnail_url(); ?>')">
<div class="overline"><h6><?php $posttags = get_the_tags(); if ($posttags) { foreach($posttags as $tag) { echo $tag->name . ' '; }}?></h6></div>
<div class="object__inner__text content-no-margin">
<h4><?php the_title(); ?></h4>
<p class="textlink" href="<?php the_permalink(); ?>">Mehr erfahren</p>
</div>
</div>
</a>
</article>
<?php endwhile ?>
<?php wp_die();}
答案 0 :(得分:0)
我不会编写完整的代码,但这是可能的解决方案。首先,您需要知道帖子的页面数,您可以使用以下Wordpress函数获得帖子的总数
<?php
$count_posts = wp_count_posts();
/*this function only works with post type is post .
if you using for categories first you need to find how many
post are there in that categories.*/
?>
如果将count_post总数除以每页的帖子数,则将获得页面总数。
现在,您可以像这样在javascript中对其进行检查。
var pageNumber = <?php echo (wp_count_posts()/4); ?>
//make sure pageNumber is number not string can use javascript parseInt function
jQuery(document).ready(function() {
if(page==(parseInt(pageNumber)-1)){
//send ajax request to get last page post but hide the button
}
});
我希望这会对您有所帮助。让我知道是否有任何不清楚的地方。
答案 1 :(得分:0)
由我自己解决。尽管感谢您为我提供解决方案的指导! 我为此创建了一个函数,其中jQuery计算了可见的帖子:
function hideButton(){
var poststotal = <?php echo count_cat_post('magazin'); ?>;
var postsvisible = $('.masonry > article').length;
if (poststotal == postsvisible) {
$('.load-more').addClass('hidden');
}
};