「Infinite-Scroll」プラグインを利用して、ページ送りなしでブログ記事を表示(無限スクロール)させてみた

以前に Twitterのように、ページ遷移せずに次のページの記事を自動で読み込ませるWordPressプラグイン「WP-AutoPagerize」 の記事で、ページをスクロールしていくとことで次のページのブログ記事をどんどん読み込んで表示させていく「無限スクロール」のプラグインを紹介させていただきましたが、今回紹介させていただく Infinite Scroll も「WP-AutoPagerize」同様に、無限スクロールを実現できるプラグインです。

Infinite Scroll プラグインを有効化して基本的な設定を行い、あとは任意で Loading… の画像をアップロードするだけの簡単操作で動きますので、今回はその基本的な設定箇所などを抜粋して紹介させていただきます。

Infinite Scroll のインストール

WordPressの管理画面より Infinite-Scroll プラグインを検索して新規インストールするか、以下のサイトより直接プラグインファイルをダウンロードしてサーバにアップします。


Infinite Scroll の基本設定

まず「General」のページで手直しが必要だと思われる箇所ですが、

Scrolling Behavior」で、ページスクロール時に自動で読み込ませるかどうか??の設定を行います。デフォルトは自動(Automatic)です。
「Infinite-Scroll」プラグインを利用して、ページ送りなしでブログ記事を表示(無限スクロール)させてみた

Loading Image」で、Loading…の画像を自由に変更することが可能です。
http://www.ajaxload.info を利用するとloadingの画像を簡単に生成することができます。
「Infinite-Scroll」プラグインを利用して、ページ送りなしでブログ記事を表示(無限スクロール)させてみた

Loading Text」で、Loading…中に表示されるテキストを自由に変更することが可能です。
「Infinite-Scroll」プラグインを利用して、ページ送りなしでブログ記事を表示(無限スクロール)させてみた

Infinite Scroll のSelector 設定

続いて「Selectors」のページですが、こちらも設定が必要な箇所のみに絞って紹介させていただくと、

Content Selector」「Posts Selector」の値については、ブログによって設定値が異なると思いますので設定し直します。

Content Selector」は、twentyeleven のテーマだと <div id=”content”> なので
#content
になります。
「Infinite-Scroll」プラグインを利用して、ページ送りなしでブログ記事を表示(無限スクロール)させてみた

Posts Selector」は、twentyeleven のテーマだと <article class=”post”> なので
#content article.post
になります。
「Infinite-Scroll」プラグインを利用して、ページ送りなしでブログ記事を表示(無限スクロール)させてみた

テーマをカスタマイズしている場合、上記の値はそれぞれテーマに合わせて変更を行います。

その他「Navigation Selector」「Next Page Selector」は、テーマファイルをカスタマイズしている場合は別途値を設定してあげます必要があります。


こんな感じで表示されます。

静止画だと分かりずらいですが…スクロールしてページの下部まで来ると loadng… と表示されます。
「Infinite-Scroll」プラグインを利用して、ページ送りなしでブログ記事を表示(無限スクロール)させてみた

で、次ページの記事が読み込まれます。
「Infinite-Scroll」プラグインを利用して、ページ送りなしでブログ記事を表示(無限スクロール)させてみた

Scrolling Behavior」で「Automatic」を指定している場合は、最後の記事が読み込まれるまでloading…→記事表示→loading…を繰り返します。


Infinite Scroll の注意点

注意点ですが、特殊なレイアウトのサイトの場合は次ページ記事を表示させる際にレイアウトが崩れる可能性がありますので、テーマファイルに合わせて調整、カスタマイズが必要になると思います。

またIE対応に関してですが、WP-AutoPagerize プラグインの場合は設定面とIE での動きにクセがありましたが、Infinite-Scroll だとIE8 でも正常に動いています(※IE7、IE6は未検証)。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください