Dec 18, 2013

【jQuery】最下部までスクロールしたら自動でページ送りする『autopager.js』

検索エンジンやブログのほとんどが、ページの最下部にこんなページナビゲーションを付けてますよね。


検索結果の表示であれば栞のような意味合いで有用ですが、一般のブログでは直近のエントリをいかにサクサク閲覧できるかという点で不向きな気がします。

そこで、ページ最下部までスクロールしたら自動で次ページを読み込むjQueryプラグイン『autopager』を導入してみました。




配布元はこちら。
jquery-autopager

ご利用の際はMIT Licenceに従ってソース内の著作権表記をそのままにしておくこと。


まずはjQuery本体をhead内に設置

多様なjQueryの機能を利用するために必要な親玉？をサーバに設置するか、Google Developersから引っ張ってくる必要があります。VerUPのたびに削除したりするのは面倒なので個人的には後者をお勧めします。既にバリバリjQueryを使っている方はここは飛ばしてください。
ソースを表示
印刷SyntaxHighlighterについて
1<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
2<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"/></script>
3<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"/></script>
HTMLソースのhead内に上記のコードを埋め込みます。

先々jQueryの挙動に不審を感じたら本家サイトかGoogleDevelopersでバージョンを確認してみてもいいでしょう。

続いてjquery.autopager-1.0.0.jsを設置

先ほどダウンロードしたjquery.autopager-1.0.0.zipを解凍すると同名のjsファイルが入っているので、それを任意のディレクトリにアップロードしたうえでhead内にリンクと読み出しコードを記述。場所はheadの閉じタグ直前がベターかと思われます。
ソースを表示
印刷SyntaxHighlighterについて
1<script type="text/javascript" src="ファイルをアップロードしたディレクトリの絶対パス/autopager.js"></script>
2<script type="text/javascript">
3$(window).load(function () {
4    $.autopager({
5        autoLoad: true,
6        content: '.new',
7        link: '.ajaxLoad a'
8    });
9});
10</script>

最後に、設置したいテンプレートページに以下のコードを追加

ソースを表示
印刷SyntaxHighlighterについて
1<!-- loader -->
2<div class="ajaxLoad">
3    <?php next_posts_link(''); ?>
4</div>
場所がちょっと難しいんですが、エントリ（記事）を内包するループのすぐ下に記述します。要するに次のページを読み込まなければいけないのでエントリ部分の外じゃないといけないわけです。


この通りにやってみたけど動かない！場合は　こちら　のページの「うまくいかない場合に考えられる4つの原因」をご覧ください。何かヒントになるかもです。


サイト内検索

  • Author

  • Twitter

      Follow @jay0926 ( followers)

    1. Facebook