代码之家 › 专栏 › 技术社区 › mhuber

wordpress ajax隐藏加载更多按钮

wordpress ajax html php javascript

mhuber · 技术社区 · 7 年前

我已经创建了一个自定义的wp查询,可以使用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>

我的函数.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();}

2 回复 | 直到 7 年前

Santosh Sapkota 7 年前

我不会写完整的代码,但这里是可能的解决方案。首先你需要知道有多少页的文章,你可以通过使用下面的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.*/
 ?>

如果你用每页的文章数除以总计数,你将得到总页数。

现在您可以像这样简单地在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 
     }
});

我希望这对你有帮助。如果有什么不清楚的,请告诉我。

mhuber 7 年前

我自己解决的。虽然谢谢你指导我解决问题! 我用jquery创建了一个函数来计算可见的帖子:

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