WordPressでMasonry＋Infinite scrollを利用する

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

• Masonry：ダウンロードはこちら
• Infinite scroll：ダウンロードはこちら

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>