WordPress网站上的无限滚动

Question

I have a wordpress page that displays posts (which are hotels), currently the page just displayed all the hotels however I am now trying to write some jQuery scripting to display the hotels in an infinite scroll as the user scrolls down the page.

Currently I have the below, which does work however I'm not sure of the best way to get the required data from wordpress so that jQuery can display the hotels correctly.

<?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(); ?>

Otherwise would would be the correct way to do what I'm trying to do?

Answer 1

You need to call it via ajax refer this link