无限滚动的wordpress网站

Infinite scroll on wordpress site

本文关键字:网站 wordpress 滚动 无限      更新时间:2023-09-26

我有一个wordpress页面显示的帖子(这是酒店),目前的页面只是显示所有的酒店,但我现在正试图写一些jQuery脚本显示酒店在无限滚动,因为用户向下滚动页面

目前我有以下,它确实工作,但我不确定从wordpress获得所需数据的最佳方式,以便jQuery可以正确显示酒店

<?php get_header(); ?>
<?php
$offset = 2;
$destination_slug = get_query_var('destination');
$term = get_term_by('slug', $destination_slug, 'destination');
$hotels = get_posts(array(
    'post_type' => 'hotels',
    'posts_per_page' => $offset,
    'tax_query' => array(
        array(
            'taxonomy' => 'destination',
            'field' => 'term_id',
            'terms' => $term->term_id
        )
    ))
);
$completeList = get_posts(array(
    'post_type' => 'hotels',
    'tax_query' => array(
        array(
            'taxonomy' => 'destination',
            'field' => 'term_id',
            'terms' => $term->term_id
        )
    ))
);
?>

<div class="pure-g">
    <div class="page-content">
       <?php the_field('hotel_description',$term); ?> 
    </div>
</div>
<div class="hotel-listing">
<?php if ( $hotels ) {
    foreach ( $hotels as $post ) :
        setup_postdata( $post ); ?>
            <div class="row pure-g nopadding member">
                                <div class="pure-u-1 pure-u-md-1-2 block1">
                                    <?php
                                    $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
                                    <div class="grid-item-style" style="background:url('<?php echo $feat_image; ?>');">
                                        <div class="tour-title">
                                        </div>
                                    </div>
                                </div>
                                 <div class="pure-u-1 pure-u-md-1-2 block2">
                                    <div class="inner">
                                        <div class="inner-text">
                                            <div class="hotel-count">
                                                  <?php $connected = new WP_Query( array(
                                                    'connected_type'  => 'hotels_to_tours',
                                                    'connected_items' => $post->ID,
                                                ) );
                                                echo $connected->found_posts; ?> Tours
                                            </div> 
                                            <div class="grid-title">
                                                  <?php the_title(); ?>
                                            </div>
                                            <div class="tour-shortinfo">
                                               <?php the_field('short_info'); ?>
                                            </div>
                                            <a href="<?php the_permalink(); ?>">
                                                <button class="tour">
                                                    Read More
                                                </button>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
    <?php
    endforeach; 
    wp_reset_postdata();
}
?>
<script>
    var posts = JSON.parse('<?php echo json_encode($completeList); ?>'); 
    console.log(posts);
    var offset = <?php echo $offset?>;
    $(window).scroll(function() {
        if($(window).scrollTop() >= $('.hotel-listing').offset().top + $('.hotel-listing').outerHeight() - window.innerHeight) {
            console.log("hotel end");
            if (offset < posts.length){
                var html = '<div class="row pure-g nopadding member"> <div class="pure-u-1 pure-u-md-1-2 block1">';
                //html += <div class="grid-item-style" style="background:url('<?php echo $feat_image; ?>');"><div class="tour-title"></div></div>
                html += '</div><div class="pure-u-1 pure-u-md-1-2 block2"><div class="inner"><div class="inner-text"><div class="hotel-count">';
                //html+<?php $connected = new WP_Query( array('connected_type'  => 'hotels_to_tours','connected_items' => $post->ID,) );echo $connected->found_posts; ?> Tours
                html += '</div><div class="grid-title">';
                html += posts[offset].post_title;
                html += '</div><div class="tour-shortinfo">';
                //html +=  <?php the_field('short_info'); ?>
                html += '</div>';
                //html += <a href="<?php the_permalink(); ?>">
                html += '<button class="tour">Read More</button></a></div></div></div></div>';
                $( ".hotel-listing" ).append(html );
                offset++;
            }
        }
    }); 
</script>
</div>
<?php get_footer(); ?>

否则会是正确的方式去做我想做的事情吗?

您需要通过ajax调用它参考此链接