【追記　2015年8月24日】現在AutoPagerの配布ページが404になっているようです。

カテゴリ分けを見なおした@_tenbiです。

ブログテーマを公開した時にもご紹介したのですが、今回のリニューアルで「AutoPaper」という無限スクロールプラグインを導入しました！

今回はAutoPaperの使い方と設定方法をご紹介します。

導入した経緯

元々このブログでは「Infinite Scroll」というプラグインを使って無限スクロールを実現していました。

しかしこのプラグイン、よくよく調べてみる最下部に付く度にどんどん記事を読み込んでしまう仕様だったのです(読者さんからの指摘で気づいた…)。さらに今回のリニューアルを行った後に不具合が続出。

そこでごりゅご.comで紹介されていたこのプラグインを試して見ることに。

AutoPagerをブログに導入する

まずは以下のリンクから元ファイルをダウンロードします。

解凍すると「jquery.autopager-1.0.0.min.js」と「jquery.autopager-1.0.0.js」が出てくると思うので、今使ってるテーマの中に突っ込みます。

ヘッダーにファイルへのリンクを書く

テーマの中にファイルを入れたら、HTMLからそのファイルを読み込めるように設定します。
この「AutoPaper」はjQueryで動いているので、同時にjQueryへのリンクもしておきます。

このブログではjsフォルダにautopager.jsが入ってるのでリンクもそうなってますが、そこは人によって違うと思いますので。

実際の動作を書く

リンク付けが済んだら、同じくヘッダーに動作を書いていきます。

content: には記事全体を囲むclassを書く

content:”.hentry-home”は、無限スクロールが発動した時に次のページのどの部分を読み込むかを指定してます。

たとえばこのブログは、記事部分全体を class=”hentry-home” で囲んでます。これを指定しておくと、無限スクロールが発動しても class=”hentry-home” の部分だけ読み込んでくれます。

「次のページへ」のリンクを置く

ほとんどのブログにはあるはずの「次のページへ」のリンク。
このリンクをちょっと囲むものを作って class=”ajaxLoad” を指定します。

この時「次のページへ」のリンクを content: “” で指定した範囲の中に入れてしまうと正常に動かないので要注意です。

まとめ

簡単にまとめると

• サーバにファイルを入れて
• 「次のページへ」に class=”ajaxLoad” を書いて
• autopager用の設定を書く

とこんな感じ。
導入がめちゃくちゃ簡単なので、プラグイン使うよりもこれの方がオススメです。

あと、HTMLがちょろっとしか分かってない人はWordPressの勉強もしておくと割と役立ちます。いつテーマ作りしてるか分かりませんからね！