以前もかいたことがあるのですが、以前の方法では読み込み中のローディング表示にずれが生じていましたので変更しました。
また、自動ではなく手動で読み込むようにしてみました。
functions.php
リンクボタンに特定のクラスを追加
add_filter('next_posts_link_attributes', 'posts_link_attributes'); add_filter('previous_posts_link_attributes', 'posts_link_attributes'); function posts_link_attributes() { return 'class="navigation btn btn-default btn-lg"'; }
テンプレートのループ内
<div class="row thumbContainer"> <?php while ($search_rooms->have_posts()) { $search_rooms->the_post(); get_template_part('content', get_post_format()); //コンテンツを外部テンプレートに記述しています。直接読み込みたい場合はここに記述して下さい。 } ?> <div id="loading" class="loadingBox" style="display: none;"><div class="container"><div class="text-center alert mb0"><i class="fa fa-spinner fa-spin"></i></div></div></div> <?php next_posts_link('もっと見る'); ?> </div>
Javascript
<script type="text/javascript"> $(function(){ var $container = $('.thumbContainer'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector: '.thumb-item', columnWidth: '.thumb-item', transitionDuration: "0.2s" }); }); $container.infinitescroll({ navSelector : '.navigation', nextSelector : '.navigation', itemSelector : '.thumb-item', errorCallback: function () {$('#loading').hide(); }, animate:true, extraScrollPx: 100, loading: { finishedMsg: '<div class="loadingBox"><div class="container"><div class="text-center alert alert-success">すべてを表示しました。</div></div></div> ', msgText: '', img: '' } }, // trigger Masonry as a callback function( newElements ) { var $newElems = $( newElements ).css({ opacity: 0 }); $newElems.imagesLoaded(function(){ $('#loading').hide(); $newElems.animate({ opacity: 1 }); $container.masonry( 'appended', $newElems, true ); $(".navigation").appendTo(".thumbContainer").delay(1000).fadeIn(600); $('.navigation').wrap('<div class="text-center loadingBox">'); }); }); $container.infinitescroll('unbind'); // 初期化 $(".navigation").click(function(){ $('#loading').css("display", "block"); $container.infinitescroll('retrieve'); return false; }); }); </script>
参考:【jQuery】無限スクロール[Infinite Scroll]を極限までカスタマイズ。
WordPress + jQuery Mobile で Infinite Scroll を使ってみる