Own products

  • 新規事業のアイディア創造機

Tutorial

【WordPress】AJAXで次ページを読み込む「jQuery.autopager」をWordPressで活用する方法

この記事の読了時間:約44

  • このエントリーをはてなブックマークに追加

ブログに限らず、よっぽどのコトが無い限り、いわゆるページネーションの「次へ」とかってボタンは押されにくいものです。

そこで最近は、ページ末尾まで行くと自動で次ページの内容がAJAX読み込まれるような仕組みも増えて来ました。

今作ってるウェブサービスでもこの仕組を導入したいっ!と思って探したら、ナイス・ガイを発見したのでシェアします!

その名も「jQuery.autopager」!

合わせて、それをWordPressでうまいこと使う方法もご紹介。

これでアナタも流行UI/UXに乗れちゃうかも!?

「jQuery.autopager」をWordPressで活用する方法

「jQuery.autopager」のインストールと使い方

まずは下記ご本家サイトから、JSファイルを頂戴致しましょー!

jQuery.autopager: Automatic paging plugin for jQuery

ダウンロードしたら、制作者の方に感謝の祈りを捧げ、そのご多幸を願いながら自サイトに設置して下さい。

※以下 2018年3月19日 追記

当件、コメントをいくつか頂いておりましたように、モノによっては動かないみたいです。
なんでも同じ名称で違うプラグインが存在してるとか。。。
ひとまず、当方環境で無事に動いてるサイトのJSへのリンクを掲載しますので、それをまるっとコピペするなり、右クリック→名前をつけてリンク先を保存、とか、よしなにお願いします。

jQuery.autopager.js

んで、基本的な使い方は下記。

<script type="text/JavaScript">
$(function(){
	$.autopager({
		content	: '.content',	// ロードしたいコンテンツ部分のセレクタ 
		link	: '#next'	// 次ページへのリンクのセレクタ
	});
});
</script>

もしスクロールでの自動読み込みじゃなく、ボタンを押したら読み込むようにしたいなら

<script type="text/JavaScript">
$(function(){
	$.autopager({
		content	: '.content',	// ロードしたいコンテンツ部分のセレクタ 
		link	: '#next',	// 次ページへのリンクのセレクタ
		autoLoad: false,	// スクロールで自動読込みするどうか
		load	: function(){	// 読み込み完了後に発生するイベント
			// "this"は読み込んだコンテンツ要素を指す
			$(this).before('<hr/>'); // 左記は例(読み込んだヤツの前に区切り線を追加))
		}
	});
	$('#next').click(function(){	// 次ページへのリンクボタンが押されたら
		$.autopager('load');	// loadしやがれぃ!
		return false;
	});
});
</script>

こんな感じになります。

「jQuery.autopager」をWordPressで使う際の注意点

基本的には header.php で jQuery.autopager.js を読み込んで、あとは上記のような記述をするだけですが、ここでちょっとポイント。

「次ページへのリンクポタン」を生成するのには next_posts_link() を使うのがセオリーですが、上記のままの記述で使っちゃうと、一番最後の記事を読み込んだ後でも「次ページへのリンクボタン」が出ちゃいます。

そんな場合は、JS側で最後のページかどうか判別してやらないけんので、上記記述の load 部分(7~10行目)を下記に差し替えてみなよ!

load: function(current, next){
	if( current.page >= <?php echo $wp_query->max_num_pages; ?> ){
		$('#next').hide();
	}
}

これで「現在のページ数がMAX以上なら #next を隠す」ってなって、理想の挙動に!ビバ☆ハレルヤ!

遂に明日、2日で作ったWordPress製ウェブサービスをご披露致します!

ギャラリーサイト第二弾!お楽しみにー (^^ゞ

  • このエントリーをはてなブックマークに追加

コメント一覧

7 Responses to [【WordPress】AJAXで次ページを読み込む「jQuery.autopager」をWordPressで活用する方法]

田中愛 より:

2018/01/18 11:18 AM

ものすごく便利なコードをコピペ出来るようにしていただきありがとうございます。

質問なのですが、次のページを読み込むとURLも変わってしまうのですが、何か制御する方法はあるのでしょうか?

無知ですみません。

smkn より:

2018/01/28 2:23 AM

>> 田中様
ご質問ありがとーございます!
早速ですが、おそらくURLが変わるのはコピペに失敗してるか、なにか導入時にミスがあったか、JavaScriptが有効になっていないか。。。
このコードは「URLが変わらないで次ページを読み込む」というコードなので、仰る挙動はなにか不具合が発生してる可能性が高いです。
いまいちど諸々確認して再チャレンジしてみてくださいっ m(_ _)m

橋本 より:

2018/03/09 8:10 PM

初めまして。
田中さまと同じく「もっと見る」をクリックすると
正しく読み込みますが、
アドレスが /page/2/ のようになってしまいます。

「もっと見る」のボタンにカーソルを合わせた時点で
確認できます。

javascriptは有効になっていて動作自体はローディング自体は問題ないのです。

何かポイントとなる箇所がありましたら
ご教授ください。
すみませんが、よろしくお願いいたします。

smkn より:

2018/03/09 9:14 PM

>> 橋本様
ご質問ありがとうございますっ!
いま確認してみたのですが、確かにマウスオーバーすると /page/2/ とステータスバーに出ますね。
WordPressではページ送りを /page/数字/ というURLで書き出すので、その仕組み自体を変えるのは難しいんじゃないかと思います。
お役に立てず申し訳ありませんですm(_ _)m

okamoju より:

2018/03/19 7:44 PM

はじめまして、こちらのコメントと同様に/page/2/ のスラッグがついてしまうので悩んでいたのですが、まさかなぁ・・・と思って正常に動作しているサイトを見つけてそこに使用してるjsを差し替えたら動きました。(jquery.autopager-1.0.0.jsと同じ名前でした。)
どこのサイトか忘れちゃいましたが、このjs結構よく使っているので見つかるかと思います。

バージョン全く同じなのにどこかが違うんでしょうね。

smkn より:

2018/03/19 11:06 PM

>> okamoju 様
ありがとーーございますっ!!
そういうことだったんですねー。。今見たら当サイトのリンク先もダメになっていたようで、皆様ご不便をおかけしました。
ひとまず当方制作のサイトでうまく挙動してるJSへのリンクに差し替えたので、これで良いのかなと。
ホントにご教示ありがとうございました!!今度ビールおごります!

ぽるたん より:

2018/12/12 7:52 AM

どうにもこうにも上手くいかなかったので
autopagerと/page/2/で検索したらこちらのページに辿り着きました。
まさかバージョン違いがあるとは思わず…
とても助かりました、管理人さまありがとうございます。

コメントを投稿する

お名前

ご連絡先メールアドレス※非公開

コメント

CAPTCHA


  • このブログのRSSを購読する
  • このブログをtwitterでつぶやく
  • このブログをFacebookで共有する
  • このブログをはてなブックマークで共有する

Contact

    お名前※必須

    ご連絡先メールアドレス

    お問い合わせ内容※必須

    CAPTCHA

    captcha

    Blog parts

    Affiliate