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

Web・ブログのこと jQuery
スポンサーリンク

jQuery.autopager

手間いらず。カズヤ(@kazumiso_s)です。

スクロールしていくと随時情報を読込みしていく機能。
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の知識が多少必要ですが、プラグインの読み込み、自動読み込みするセレクタの指定だけで完成です!

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

スポンサーリンク

この記事は私が書きました。

管理人:カズヤ(@kazumiso_s)

31歳、横浜市在住の2児の父。本業はシステムエンジニアで目標は今の会社で取締役になること。「毎日に価値を見出す」ことを信念に置き、未来に役立つ情報を発信しています。「好酸球性副鼻腔炎」という難病かもしれない?嗅覚障害持ち。最近生まれて初めて坊主にした。詳細なプロフィールはこちらから

この記事をシェアはこちらから。

フォローして頂けるとブログの更新情報をお届けできます。

この記事が気に入ったら「いいね!」
最新情報をお届けします。

もう1記事いかがですか。