php - wordpressでAjaxスタイルの「もっと読み込む」ボタンを作成しようとしています

Question

wordpress と isotope を使用して、個々の投稿を isotope スタイルのタイルとして表示するアーカイブ ページを作成しました。

次のようになります: http://i.imgur.com/t1jtWce.png

それを生成するコードは、同位体のグリッド システムで構成されています。

$(document).ready(function () {
    var $container = $('.showcase');
        $container.isotope({
        itemSelector      : '.item',
        masonry           : {gutterWidth: 0, columnWidth: 1}
    });  
});

コンテンツを生成するための wordpress/php 呼び出し:

<div class="showcase">
    <? $project = new WP_Query( array( 'post_type' => 'project', 'posts_per_page' => 10, 'order' => 'DEC' ) ); while ( $project->have_posts() ) : $project->the_post();?>
        <div class="item">
            ~the bits and pieces that make up each post tile~
        </div>
    <? endwhile; wp_reset_postdata(); ?>
</div>

私はそれを少し短縮/ブランド解除しましたが、必要に応じてより多くの情報を提供できます.

posts_per_page は現在 10 に設定されていますが、これで問題ありません... 私の目標は、追加のタイルを作成できる [さらに読み込む] ボタンを用意することです。

これは簡単で汚いデモ アニメーションです: http://i.imgur.com/D0JCSKN.gif

ページの更新を必要とせずにこれを行う方法を見つけたいと思います。同位体の組み込みの css 変換でアニメーション化できる場合は、ボーナス ポイントです。

私はアイソトープと無限スクロールプラグインがこのようなものを処理できると信じていますが、それをWordpressのphpループに結び付ける方法がわかりません.

誰かがアドバイスを提供できるなら、私はそれを非常に感謝します. ありがとう ：）