无限滚动的wordpress网站
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调用它参考此链接
相关文章:
- Ajaxify Wordpress网站与社交插件
- 鼠标光标-用于wordpress网站
- 在向下滚动JS/HTML/CSS wordpress网站时替换徽标图像
- Sombody在wordpress网站中注入了一些链接.可能是什么起源?这是怎么发生的
- 在Wordpress网站的图像点击上播放随机声音
- 我想每隔10秒刷新一个wordpress网站
- 如何将javascript添加到wordpress网站
- 如何禁用右键单击WordPress网站
- 使用谷歌分析'Wordpress网站的用户ID功能
- wordpress和packery.js的集成问题,但适用于非wordpress网站
- 从手机重定向时如何留在桌面网站(wordpress)
- 如何解决wordpress网站的速度问题
- 用JS更改Wordpress网站上的按钮
- 从Wordpress网站构建Cordova应用程序需要哪些文件
- 使用 HTTP 请求对 WordPress 网站进行更改
- 在WordPress网站上获取推文
- 如何将PHP脚本插入WordPress和HTML网站
- 如何将JS添加到我的WordPress网站
- 我的谷歌地图自定义标记不会显示在我的WordPress网站中
- 鼠标悬停不工作在整个网站wordpress更新后