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

無限無限無限ーッ!

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

無限スクロールとは

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

インフィニット スクロール!というのは、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記事毎にロードするみたい。

無限スクロール地獄へようこそ!

これで貴方のサイトも無限スクロール地獄仕立て。
iPhoneとかだといちいちリンククリックするの面倒だから、なかなか便利になるかもね。

でも、うちのサイトはレスポンシブWebデザインになっていてiPhoneだとサイドバーが一番下に来てしまうから、次々とページが読み込まれてなかなかサイドバーにアクセスできなくなるね(笑) 
まぁ、個別記事のページからはアクセスできるからいいか。

[追記]なんか変

なんかカテゴリを選んで次々スクロールしているとそのうち全然関係ないカテゴリの記事まで表示されるみたい。
残念ながらこれでは使えそうにないですね。バグが取れるまで無効にしておきます。

[さらに追記]バージョンアップでまるで動かなくなった

どうしたものか。子テーマまでなんかサポートするようになったとからしいが、逆にまるで動かなくなってしまった。うーん。

[さらにさらに追記2012-12-12]

結局、他のプラグインに頼りました。「Infinite scroll」で検索して入れました。こっちの方が読み込み中のバーも出てくるし、変な動きしないし快適です。