ページングをクリックしなくても、スクロールすれば自動で次のページのコンテンツが出てくる、いわゆる「無限スクロール」をWordPressサイトで実装することができるプラグイン「Infinite Scroll」をご紹介します。

「Infinite Scroll」の特徴

ローディング画像

無限スクロールするだけなので、機能としてはとてもシンプルです。

  • サイトの下までスクロールすると、次のページが表示される
  • ローディング中の画像・テキストを任意で設定可能
  • 有効化後、各セレクタを設定すると利用できる

「Infinite Scroll」ダウンロード

下記からプラグインをダウンロードできます。wp-content/pluginsディレクトリにアップして有効化して下さい。プラグインの詳細なインストール方法につきましてはこちらのページからご覧頂けます。

Infinite Scroll

必ずしなければいけない設定

基本設定

Infinite Scrollの必ず行う設定

  • Content Selector：すべての記事を囲っている要素
  • Navigation Selector：「次の一覧」に移動するリンクを括っている要素（ナビ全体）
  • Next Selector：「次のエントリ一覧」に移動するリンク自体の要素
  • Item Selector：ループして表示される部分の要素(投稿)

※注：1)セレクターの設定 id=”#”、class=”.”を記述
※注：2)先頭に固定ページを指定している場合は、ローディング後も表示されます。（何故かローディング2回につき1回ですが）

「BlogPress（TCD010）」の場合

例えば、弊社開発のテーマ「BlogPress」ですと、以下の値を入れればOKです。図も載せておきますので、何かの参考になれば幸いです。

ちなみに、セレクターを調べる時はFirebugを使った方がわかりやすいです。当方はそうしました。

BlogPressでの例

  • Content Selector：#content
  • Navigation Selector：.page_navi
  • Next Selector：.page-numbers a:first
  • Item Selector：.post_list

お好みで変更する項目

  • Callback：コールバック用のコード。新しいページがそれぞれロードされた後呼ばれるコード
  • Loading Message：Loading中に表示されるメッセージ。Loading…　→　任意の文字（読み込み中…等）
  • Finished Message：最終ページ表示時に表示されるメッセージ(一瞬表示されます)。No additional posts.　→　任意の文字
  • Loading Image：Loading中に表示されるイメージ。ajax-loader.gif→任意のイメージ。ローディング画像はLoader GeneratorやPreloadersなどのジェネレータで簡単に作れます。
  • Behavior：自動スクロール切り替え。default→ ON
  • Debug：デバッグモードのON/OFF。ONにするとJavascript Console にログが出ます。正常に動作しない場合に使用（通常OFF)
  • Finished Message：最終ページ表示時に表示されるメッセージ(一瞬表示されます)。No additional posts.　→　任意の文字

このようにカスタマイズせずにプラグインだけで実装出来るのは便利ですね。但し、トップページ、アーカイブページ両方を無限スクロール対応するなら、セレクターは統一しておく必要がありますね。あとは、デザインによってはレイアウトが崩れることがありますので、その時には別途編集が必要になります。