Infinite Scroll(無限スクロール)を有効にしてみた

WordPressのJetpackで追加されたInfinite Scroll(英語)を使ってみた。

1 無限スクロールとは
2 有効化ァァーーッ
3 オプションを指定
4 無限スクロール地獄へようこそ!
5 [追記]なんか変
6 [さらに追記]バージョンアップでまるで動かなくなった
7 [さらにさらに追記2012-12-12]

無限スクロールとは

なんか、無限とか名前つくだけで恐怖を覚えるのは私だけでしょうか(笑)
いつまでスクロールしても抜け出せない・・みたいな。

インフィニットスクロール!というのは、TwitterのWebサイトみたいに画面をスクロールすると、次のページを次々読み込んで無限に延々とページを表示してくれる機能のことみたいです。

ブログだと「前の記事」とか「Older Post」とかリンクを押すと過去の記事にどんどん辿っていけるでしょ。
いちいちそういうリンク押さなくても次々と記事を表示するから、見る側の負担が少なくていくらでもページを辿らせてしまうという恐ろしい機能なわけですよ!(笑)

有効化ァァーーッ

英語力のなさからさっぱりオプション指定とかが意味不明だったのですが、試しながらなんとなくわかったのでここに書いておきますよ。

まずはJetPackの設定からInfinite Scroolを有効化します。

これだけではなーんも変わりません。めんどうですが、テーマのfunction.phpに追記が必要です。

自分はTwenty Eleven Child with Sidebar Supportを使っているので、こいつのfunction.phpに以下を追加しました。

add_theme_support( 'infinite-scroll', array(
 'container' => 'content',
 'footer' => 'page',
 'type' => 'scroll',
 'footer_widgets' => array('sidebar-3','sidebar-4','sidebar-5'),
 //'footer_widgets' => false,
 'wrapper' => true,
 'render' => false,
 'posts_per_page' => false
) );

オプションを指定

さっき追加したところのtypeとかはオプションになるのですが、実はいまいちわかっていません。
標準のテーマだとcontinerとfooterは上に書いた指定でいけるみたいです。idを指定するとあるがhtmlの中にないんだよな・・・。

typeはscrollかclickを指定するのですが、clickを指定すると冒頭の画像のように「Load more posts」というリンクが表示されて押さない限り次のページは表示されません。scrollにすると、次々と次のページが読み込まれるようになります。

footer_widgetsが戸惑いました。
どうやらここにフッターに使っているサイドバーID(ややこしい)を指定しておくと、フッターにウィジットを表示していない場合はtypeがscrollタイプになり、ウィジットを表示している場合は自動的に「Load more posts」が表示されるclickタイプになるようです。
スクロールタイプにするとフッターにいつまで経ってもアクセスできないから、そこをインテリジェントに切り替えてくれる機能みたいです。
たぶん、今後開発されるテーマはこのような設定が最初からされている状態になるのでしょう。

Twenty Elevenテーマだとフッターは’sidebar-3′,’sidebar-4′,’sidebar-5’の三つのようなので、そのように指定しました。
sidebar-footer.phpにそれらしい値が書いてあったので試してみたらビンゴでした。

wrapperの指定はよくわかりません。フッタをinfinite-footerというタグで囲むかどうかってことなのかな。

renderはたぶんレンダリングを標準以外の仕組みでやりたいときだと思う。だんだん怪しくなってきた(笑)

posts_per_pageは何ページずつ読み込むかの指定みたい。デフォルトだと7記事毎にロードするみたい。