WordPressなどのブログで記事を自動読み込み!「jQuery.autopager」の設定方法

Web jQuery

jQuery.autopager

手間いらず。ぴあろ(@iPIARO)です。

スクロールしていくと随時情報を読込みしていく機能。
TwitterやFacebookなどでもお馴染みですね!

この自動読み込みをjQueryで実装できるプラグイン「jQuery.autopager」をブログに導入する方法をご紹介!

スポンサーリンク

プラグインのダウンロード

プラグイン本体を公式サイトからダウンロードしてきましょう!
ダウンロードする際は圧縮版がおすすめ!

http://lagoscript.org/jquery/autopager/download

ブログでjQueryの初期設定を行っていない方はこちらの作業を行って下さい。

プラグインの導入

ダウンロードしてきたファイルをサーバーの任意の場所へ格納したら、そのファイルを読み込みするようにします。
読み込みの記述はjQuery本体読み込みよりあとに記述します。

<head>
・
・
//jQueryの本体読み込み
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
//jquery.autopagerの読み込み
<script type="text/javascript" src="格納したパス名/jquery.autopager-1.0.0.min.js"></script> 
</head>

使い方

以下の処理をファイルに記述もしくはjsファイルとして読み込む。

5行目の「autoLoad」は「true」を設定。
6行目の「content」には自動読み込みしたいコンテンツのセレクタを指定。
7行目の「link」には次へページリンクのaタグのセレクタを指定。

正しく設定できていればスクロールすると自動読み込みされるようになります!

//自動読み込み処理
<script type="text/JavaScript">
$(function(){
	$.autopager({
		autoLoad: true,         // 自動読み込みするかどうか
		content	: '#entry',	// 自動読み込みしたいコンテンツ部分のセレクタ 
		link	: '#next'	// 次ページへのリンクのセレクタ
	});
});
</script>

使用例

例えば以下の様な構成のサイトを例にした場合を元に使用例をご説明します。。
「content」に指定するセレクタは記事の部分になるので、5行目divタグの「#entry」となります。

「link」には14行目にあるWordPressの関数「next_posts_link」を使って次へページヘのリンクを生成し、そのaタグを指定します。
#autoload a」となります。

12行目の「if(1<$wp_query->max_num_pages){・・・・}」は一番最初のページまで自動読み込みした場合に、次へページリンクを表示させないようにしているものです。
次へ進むページがないのに、次へページリンクが表示されてしまうのは不格好なので入れておくといいかもしれません。

<html>
<head></head>
<body>
  <div id="content">
    <div id="entry">
      <ul>
        <li>記事表示</li>
        <li>記事表示</li>
        <li>記事表示</li>
      </ul>
      <?php
       if(1<$wp_query->max_num_pages){
       ?>
         <div id="autoload"><?php next_posts_link('次の投稿を読み込む'); ?></div>
       <?php 
         }
      ?>
    </div>
    <div id="sidebar"></div>
 </div>
</body>
</html>

最後に

以上「jQuery.autopager」の設定方法でした。
HTMLの知識が多少必要ですが、プラグインの読み込み、自動読み込みするセレクタの指定だけで完成です!

あとはパソコン、スマートフォンでサイトを開いてスクロールしてみて下さい。
意図した範囲が自動読み込みされていれば設定終了です!

スポンサーリンク
feedlyでフォロー!
follow us in feedly
Twitterをフォロー!
この記事が気に入ったら「いいね!」
最新情報をお届けします!
アプリアン!のLINE公式アカウント登録
LINE@の公式アカウントもよろしくお願いします!
「LINEアプリ起動→設定画面→友だち追加→QRコード」で読み込んで下さい!