[英]Inserting google ads between posts in a wordpress site with infinite scroll
[英]Infinite scroll on wordpress site
我有一個顯示帖子(酒店)的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調用它,請參考此鏈接
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.