[WP]Infinite-Scrollプラグインでページ送りなしでブログ記事を無限スクロール表示する方法

WordPress
スポンサーリンク

以前にの記事で、ページをスクロールしていくとことで次のページのブログ記事をどんどん読み込んで表示させていく「無限スクロール」のプラグインを紹介させていただきました。詳しくは以下の記事を参考にしてみてください。



今回はWP-AutoPagerize同様に無限スクロールを実現できるプラグインInfinite Scrollについて、基本設定と使い方を紹介させていただきます。


Infinite Scroll のインストール

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

Infinite Scrollラグインを有効化して基本的な設定を行い、あとは任意で Loading… の画像をアップロードするだけの簡単操作で動きます。


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は未検証)。

コメント

タイトルとURLをコピーしました