Own products

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

Tutorial

2013
04/17

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

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

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

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

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

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

その名も「jQuery.autopager」!

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

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

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

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

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

jQuery.autopager: Automatic paging plugin for jQuery

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

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

<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製ウェブサービスをご披露致します!

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

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

コメント一覧

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

[…] 引用元: ITキヲスク | 【WordPress】AJAXで次ページを読み込む「jQuery.autopager」をWordPressで活用する方法. […]

コメントを投稿する

お名前

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

コメント

CAPTCHA


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

Favorite feeds

    Contact

    お名前※必須

    ご連絡先メールアドレス

    お問い合わせ内容※必須

    CAPTCHA

    captcha

    Blog parts

    Affiliate