Jetpack Infinite Scroll + isotope

WordPress javascript

WordPressには様々なプラグインがありますが、かのautomatticがリリースしている「JetPack」プラグインを使って現在サイトを構築しています。
JetPackプラグインについては以下のリンク先を参照していただければと思うのですが、
（http://jetpack.me/）
最初はFacebook連携とかできればいいなーくらいに思っていたのですが、中を見てるとなかなか面白そうな機能、具体的に言うと「Infinite Scroll」機能とかあって、色々できそうな感じだったので
「せっかくだから使ってみよう」
という感じで組み込みを始めたのですが、これがどうしてなかなか偉い苦戦したので今回ここにうまくいった例を書いておこうかなと思います。

まずInfiniteScrollはテーマに対して組み込みをしないと動きません。
functions.phpに設定を書き込みますが、公式の英語があんまり読めなかった私にはなんのことやらだったため、
あれこれ試行錯誤した結果

    function initThemeSupport() {
        add_theme_support("infinite-scroll",
              array("container" => "content-list"
                   ,"type" => "scroll"
                   ,"render" => "setInfiniteScroll"
                   ,"posts_per_page" => 10
                   ,"footer"=> "footer")    
        );
    }
    
    add_action("after_setup_theme","initThemeSupport");

    function setInfiniteScroll() {
        get_template_part('content-index');
    }

initThemeSupport関数を定義して、その中にinifinite-scrollの設定をしています。
containerにはelementsを直接追加するelementのIDを入れて、renderにはコード下の方のsetInfiniteScoll関数を指定しています。
ヘルプを呼んでるとtwenty-twelveらへん前提で書かれててこの辺がサンプルとして書かれていなかったので混乱してたのですが、過去の公式テンプレート例がちゃんと書かれていて、これを参考にした感じです。
忘れずにafter_setup_themeにフックしておきます。
（これinitでもいいっぽいんだけど、どっちがいいんだろう？）
get_template_partはWordPressのレンダリングの際に指定のテンプレートを読み込んでくれる便利関数で、今回はこの中に書かれたテンプレートを使って動的に書き出すようにしました。
で、content-index.phpを作成して

if (have_posts()) : 
    while (have_posts()) : the_post(); 
        //表示処理
    end while;
end if;

といった感じでループ一式を入れておきます。
うっかり最初のifを忘れると無限ループになりますが一度は見ておくと面白いかと思います（待

これでjetpackの利用準備が整いました。
次はisotopeです。
isotopeとは、グリッドレイアウトを超絶イカす感じでやってくれるjqueryプラグインです。
公式を見てもらえばわかると思いますが、超イカしてます。
isotope
isotopeには別の「infinite scroll」との連携機能がありますが、今回はそれを使っていないので、自前でやらないといけません。
JavaScriptに以下のように設定します。

$(function() {
    var infinite_count = 0;
    $( document.body ).on( 'post-load', function () {
        infinite_count = infinite_count +1;
        var $selector = $("#infinite-view-" + infinite_count);
        var $element = $selector.find(".item");
        $("#content-list").isotope("appended",$element);
    } );
});

これはみたまんまなのでアレですが、JetPackのpost-loadイベントにひっかけてisotopeに表示処理を行わせています。
画面ソースをよくよく見てみると、取得してきたデータはinfinite-view-（連番）といった形のIDでふられてますので、
ここからdom要素を頂いて、それをisotopeにappendしていくという流れとなっております。

たったこれだけの処理なのにまる１日くらいかかってしまいました（笑
以外とjetpackはまだはやってないっぽいし、isotopeとかじゃなくてmasonryとか使ってる人ばっかな気もするしでなかなか気がつけないことが多かったです。
公式もよく読むべきだったなーと今回は反省多め。
あと英語やっぱ勉強しよう（笑