WordPressでMasonry+Infinite scrollを利用する

harada 380views 更新:2015年6月25日

Masonryでブロックをパズルのようにならべ、Infinite scrollで無限スクロールを実装しようとしたところ、ブロックが重なってしまったり、一方のjQueryプラグインが動作しなかったりと手こずったので覚書をしておきます。

functions.phpで該当のスクリプトを読み込みます。

jQuery本体の後に読み込まれるようにしています。

function my_scripts() {
    if ( !is_admin() ) {
        $dir = get_stylesheet_directory_uri();
        wp_enqueue_script('jquery-masonry', $dir . '/common/js/masonry.pkgd.min.js', array('jquery'));
        wp_enqueue_script('jquery-imagesloaded', $dir . '/common/js/imagesloaded.pkgd.min.js', array('jquery'));
        wp_enqueue_script('jquery-infinite', $dir . '/common/js/jquery.infinitescroll.min.js', array('jquery'));
          }
}
add_action( 'wp_enqueue_scripts', 'my_scripts', 50 );

Javascript

<script type="text/javascript">
    $(function(){
        var $container = $('.mainContainer');//投稿を囲うクラスやIDを指定します。
        $container.imagesLoaded(function(){
            $container.masonry({
                itemSelector: '.item',//投稿に適用されているクラスやIDを指定します。
                columnWidth: '.item',//masonryのオプションです。
                transitionDuration: 0
            });
        });

        $container.infinitescroll({
                navSelector  : '.pagination',//ページャーを囲うクラスやIDを指定します。
                nextSelector : '.nextpostslink',//「次の記事」へのリンクを示すクラスなどを指定します。
                itemSelector : '.item',//投稿に適用されているクラスやIDを指定します。
                loading: {
                    finishedMsg: '',
                    msgText: '<div class="col-md-12 text-center"><i class="fa fa-spinner fa-spin"></i></div>',//ローディング時のテキストを指定します。
                    img: ''
                }
            },
            function( newElements ) {
                var $newElems = $( newElements ).css({ opacity: 0 });
                $newElems.imagesLoaded(function(){
                    $newElems.animate({ opacity: 1 });
                    $container.masonry( 'appended', $newElems, true );
                });
            }
        );

    });
</script>

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません