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