読者です 読者をやめる 読者になる 読者になる

東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

【jQuery】infinite scrollの使い方

jQuery

ページングをクリックしなくても、スクロールすれば自動で次のページのコンテンツが出てくる、いわゆる「無限スクロール」をWordPressサイトで実装することができるプラグイン「Infinite Scroll」。

とりあえず今回はワードプレスプラグインのものを使用。


wordpressのarchiveで使った。

①まず、1記事ずつスクロールしたら表示させたかったので、

querypostを設定していつも通り記事ループ。

<div class="container">
<?php query_posts('posts_per_page=1&' . $query_string); ?>	
<?php if(have_posts()): while(have_posts()): the_post(); ?>


<article class="article_works">
  <h2><?php the_title(); ?></h2>
</article><!--article_works-->
  
<?php endwhile; // end of the loop. ?>
<?php else: ?>
<p>投稿されたものがありません。</p>
<?php endif; ?>
<?php get_template_part('pagenation'); ?>
</div><!-- container -->

②管理画面でinfinite scroll セレクタ設定

f:id:miukro:20170303234318p:plain


③ローディングのcssは以下のセレクタ

#infscr-loading{
    text-align: center;  
    margin: auto;
}

④infinite scrollで表示した中のスクリプトは無効されているので必ずコールバックで呼び出すこと。

lightboxとか。。。



【参考URL】
http://www.webdesignleaves.com/wp/wordpress/452/