Infinite-Scrollは、WordPressのトップページやカテゴリの記事一覧をAJAXを利用して無限スクロールに変更できるプラグインです。

通常のWebサイトの場合は、ページ閲覧中に記事一覧の最下部に達したら、次のページへのリンクが表示され、リンクをクリックしないとページが遷移しません。しかし、このプラグインを利用すると、ページ最下部に達したら、自動的に次のページを読み込んで表示します。つまり、次のページへのリンクをクリックする必要がなくなります。画面全体が再読み込みされることもありません。

このプラグインは、記事数が多いWebサイトで利用すると、ページ一覧がサクサク表示されるので、場合によっては便利です。

はじめに

このプラグインが優れている点

  1. トップページやカテゴリの記事一覧を無限スクロールに変更できる。
  2. 次のページへのリンクをクリックする必要がなくなる。
  3. 自動的に次のページが読み込まれるので、なんとなく先進的な印象を与えることができる?

無限スクロールの動作見本

下記のサイトは、無限スクロールを実際にサイトに組み込んでいます。ページの最下部までスクロールすると、無限スクロール機能が動作します。実際の動作例としてご覧下さい。

参考サイト(英語)

Dazed Digital

Aurgasm.us

使用上の注意点

注意

Infinite-Scrollを利用するには、注意が必要な点があります。

無限スクロール機能を組み込む記事一覧の下部にAdSense等の広告を掲載していると、広告が動的にスクロール移動してしまう(フローティング ボックス風になる)ので、AdSense プログラム ポリシーに違反してしまう恐れがあります。無限スクロールの機能を組み込む部分の下部には、AdSense等の広告を配置しないように注意して下さい。

インストール方法

管理画面から検索してインストールして下さい。もしくは、WordPress.org からダウンロードし、アップロードしてインストールして下さい。

  1. WordPress管理画面 > プラグイン > 新規追加 >「Infinite-Scroll」で検索
  2. WordPress.org からダウンロード

管理画面の設定

Infinite-Scrollを利用するには、あなたが使用しているテーマのCSS構造をプラグインに指定する必要があります。CSSのidやclassの指定が正しくないと動作しませんのでご注意下さい。下記に設定例をまとめていますので参考にして下さい。

管理画面の場所

管理画面は下記の場所にあります。

WordPress管理画面 > 設定 > Infinite-Scroll

管理画面の見本

下記画像は、WordPressに標準でインストールされているテーマ「Twenty Ten、Twenty Eleven、Twenty Twelve」の3つのテーマを利用している場合の設定例です。「Twenty Ten、Twenty Eleven、Twenty Twelve」を利用している場合は、プラグインの設定を変更しなくても、初期設定そのままで動作します。

infinite-scroll

WordPressの標準テーマの場合

WordPressに標準でインストールされているテーマ「Twenty Ten、Twenty Eleven、Twenty Twelve」の3つのテーマは、プラグインをインストールして有効にするだけで、設定を変更しなくても動作します。それ以外のテーマを利用している場合は、この画面にCSSのid又はclassの名前を指定しましょう。

もし、無限スクロールが動作しない場合は、この部分の設定が間違っている可能性があります。

BlogPress(TCD010)テーマの場合の例

参考までに、当サイトでも使用している「BlogPress(TCD010)」のテーマの場合の設定例を紹介します。他のテーマを利用している場合も同様に、CSS構造を指定します。

無限スクロールで読み込む記事は、<div class=”post_list clearfix”>のボックスで囲んであります。その中の「post_list」を指定します。これが記事1件分のデータです。

infinite-scroll-tcd010

<div class="page_navi clearfix"> // ページナビのボックス
  <ul class='page-numbers'>
  <li><span class='page-numbers current'>1</span></li>
  <li><a class='page-numbers' href='/page/2'>2</a></li>
  <li><a class='page-numbers' href='/page/3'>3</a></li>
  <li><a class='page-numbers' href='/page/4'>4</a></li>
  <li><a class='page-numbers' href='/page/5'>5</a></li>
  <li><a class='page-numbers' href='/page/6'>6</a></li>
  <li><span class="page-numbers dots">&hellip;</span></li>
  <li><a class='page-numbers' href='/page/68'>68</a></li>
  <li><a class="next page-numbers" href="/page/2">&raquo;</a></li> // 次ページのリンク
  </ul>
</div>

設定する内容をまとめると、下記3箇所の値を変更します。

Navigation Selector
ナビゲーションのボックス
.page_navi
Next Selector
次ページのリンク
.page_navi a.next
Item Selector
記事1件のボックス
.post_list

その他の設定は、変更しなくても利用できます。文言やローディング画像などは、必要に応じて変更して下さい。

まとめ

Infinite-Scrollは、WordPressのトップページやカテゴリの記事一覧を無限スクロールに変更できます。Webサイトの記事数が多い場合は、このプラグインを利用すると、ページ閲覧がスムーズになる場合があります。必要に応じて利用しましょう。

ただ、Webサイトによっては、このプラグインを利用することによって、デメリットが生じる場合もあります。例えば、記事一覧が自動的に読み込まれるようになるので、ページ全体が再読み込みされる回数が少なくなります。当然、サイトのPV数も少なくなり、広告の表示回数も減ります。ご利用は計画的に。

スポンサーリンク