Wordpress AJAX隐藏加载更多按钮

Question

我创建了一个自定义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();}

Answer 1

我不会编写完整的代码，但这是可能的解决方案。 首先，您需要知道有多少页的帖子，您可以使用以下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 
     }
});

我希望这能帮到您。 让我知道是否有任何不清楚的地方。

Answer 2

由我自己解决。 尽管感谢您为我提供解决方案的指导！ 我为此创建了一个函数，其中jQuery计算了可见的帖子：

function hideButton(){
    var poststotal = <?php echo count_cat_post('magazin'); ?>;
    var postsvisible = $('.masonry > article').length;
    if (poststotal == postsvisible) {
        $('.load-more').addClass('hidden');
    }
};