さぁ!検索しよう!

WordPress上でjQueryプラグインのmasonry+infinitedscroll.jsを動作させる方法です。

DEMO

ライブラリの入手

各ライブラリを下記のリンクからダウンロードします。

imagesloaded.pkgd.min.js

imagesloaded.pkgd.min.jsはページを更新した際に、レイアウトが崩れないようにするために読み込みんでいます。

masonry.pkgd.min.js

infinitescroll.min.js

ライブラリを読み込む

ダウンロードしたライブラリをheader.php<head></head>内に読み込みます。

header.php

PHP

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/imagesloaded.pkgd.min.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/masonry.pkgd.min.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.infinitescroll.min.js"></script>
</head>

index.phpの用意

masonry.jsinfiniteScroll.jsは何れもindex.php内の要素に適用するため、以下のような構成のindex.phpを用意します。

index.php

PHP

<?php get_header(); ?>
<div id="content">
<?php if(have_posts()): ?>
    <?php while(have_posts()):the_post(); ?>
        <article id="post">
            <!-- 省略 -->
        </article>
    <?php endwhile; ?>
<?php else: ?>
    <p>記事はありません。</p>
<?php endif; ?>
</div>
<div id="more">
    <a href="<?php echo next_posts(0, false); ?>">
        MORE POSTS
    </a>
</div>
<?php get_footer(); ?>

masonry+infinitedscrollを動かす

footer.phpの</body>直前にmasonry,infinitescrollを実行させるスクリプトを記述します。
これでWordpress上でmasonry+infinitescrollが動作するはずです。

footer.php

PHP

<script type="text/javascript">
(function(){
    var $content = $('#content');
    $content.imagesLoaded(function(){
        $content.masonry({
            itemSelector: '#post'
        });
    });
    $content.infinitescroll({
        loading:{
            finishedMsg:'',
            msgText:'<div id="loading"><i class="fa fa-2x fa-spinner fa-spin"></i></div>'
        },
        navSelector:'#more',
        nextSelector:'#more a',
        itemSelector:'#post'

    },function(elm){
        var $newElem = $(elm).css({ opacity:0 });
        $newElem.imagesLoaded(function(){
            $newElem.animate({ opacity:1 });
            $content.masonry('appended',$newElem,true);
        });
    });
    $content.infinitescroll('unbind');
    $("#more a").click(function(){
        $content.infinitescroll('retrieve');
        return false;
    });
})();
</script>

以上で、WordPress上でmasonry+infinitedscroll.jsを動作させる方法を終わります。