jQuery.autopagerをWordPressで利用して、ajaxで追加記事を読み込み、その後別のjsを動かす使い方

jQuery.autopagerとは

jQuery.autopager は、例えば記事の一覧で5件表示されている時に、5件目までスクロールしたらその先のさらに次の5件が自動的に読み込まれる、というようなことを可能にするjQueryのプラグインです。

Twitterみたいな感じです。

以下のような使い方ができます。

• 記事のリストをスクロールに従って次々と読み込む
• ひとつの記事を途中まで表示しておいて、あるところまでスクロールしたらその続きを読みこませる
• スクロールじゃなくて、クリックで読み込み、という使い方もOK

ダウンロードやドキュメント

jQuery.autopager: Automatic paging plugin for jQueryで、プラグインをダウンロードしたり、ドキュメントを読んだりすることができます。デモもあります。

今回、僕がやりたかったこと

スマートフォンの専用テーマをWordPressで作成していて、トップページやアーカイブページではとりあえず最新順に3件表示させて、ユーザが希望する場合にはその下に3件ずつ読み込むということをやりました。

新たな3件の取得・表示は、スクロールではなくクリックで行なってもらいます。

この仕様（クリックでさらに読み込み）だと、ユーザが希望すれば、ページを遷移させることなくその場で最新の記事を見てもらうことができますし、希望しない場合には長々とした記事のリストを見せなくて済みます。

同時に、たとえば、

1. ロゴ
2. 「○○カテゴリの記事一覧」という表示
3. 最新の記事のリスト
4. カテゴリの一覧
5. 人気記事の一覧

という風に、こちらが見せたいものを見せたい順番で表示させることができます。

使い方

ダウンロード

上記サイトから、プラグインをダウンロードしてきてサーバにあげる。

functions.php

jQuery, ダウンロードしてきたpager.js, jQuery.autopagerを実際に動かす方法を決めるためのgeneral.jsを読み込みます。

ここでは、wp_enqueue_script のススメなどを参考に、functions.phpに以下の記述をしました。

// jQuery を Google から
// あと他の js も読み込み
function load_cdn() {
    if ( !is_admin() ) {
        wp_deregister_script('jquery');
        wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', array(), '0911');
        wp_enqueue_script('pager', get_template_directory_uri() . '/j/pager.js', array('jquery'), '0913');
        wp_enqueue_script('general', get_template_directory_uri() . '/j/general.js', array('pager'), date('YmdHis', filemtime(get_stylesheet_directory() . '/j/general.js')));
    }
}
add_action('init', 'load_cdn');

jQueryはGoogleのCDNに変更しています。(5,6行目)
今回のサーバでは、キャッシュが残ってとても大変だったので、ブラウザのキャッシュファイルをコントロールするを参考に変更時間を後ろにくっつけています。(8行目)
最後のファイル名がgeneral.jsなのは他にも色々書いてあるから。(9行目)

index.php

index.phpのループは以下のようになっています。

<div class="entryList">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<article>
		<a href="http://twitter.com/share" class="twitter-share-button"
		data-url="<?php the_permalink() ?>"
		data-text="RT @example ＜?php the_title(); ?＞"
		data-lang="ja"
		data-count="vertical">ツイート</a>
		<h1 class="entryTitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
		<img src="<?php echo getImgUrl( $post->ID ); ?>" width="100%" />
	</article>
	<?php if ( !$paged ) { ?>
		<div class="adSenseSmall">
			// adsense の広告タグ
		</div>		
	<?php }
endwhile;
else:
endif; ?>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<span class="twScript"></span>
</div><!-- // .entryList -->

<div class="ajaxLoad">
	<?php next_posts_link('続きを見る'); ?>
</div>

トップページでの最新各記事は、Twitterのボタンとタイトル、サムネイルのイメージからなります。

ちなみにこのように一覧にTwitterのツイートボタンをツイート数付きで表示することはよくあると思うのですが、jsのタグは一度だけ読み込まれれば動きますので、ループの外に出しておくとよいと思います（20行目）。

12行目から16行目までのif文は、2ページ目から取得してきた場合には広告を表示させたくないために入れています。そうしないとAdsenseが1ページに何度も表示されてしまいます。

26行目に、next_posts_link()があり、これが通常であれば次ページ（古い記事）ヘのリンクとして働きます。

general.js

オプションを指定したりするファイル。

jQuery(function() {
	$.autopager({
		autoLoad: false,
		content: '.entryList',
		link: '.ajaxLoad a',
		load: function() {
			$(this).find(".twScript").append("<script src=\"http://platform.twitter.com/widgets.js\" type=\"text/javascript\"></script>");
		}
	});
	$('.ajaxLoad a').click(function() {
		$.autopager('load');
		return false;
	});
});

autoLoadをfalseにするとスクロールで自動ロードされるのを止められます。
contentは、通常であれば表示されるはずだったページの中のどこの部分を取得するのかを指定します。
linkで、リンク先を指定しています。
loadは、ロードが終わった時のコールバック関数をしている箇所で、ここで、span.twScriptにTwitterのjsを差し込んでいます。getScriptのほうがいいよ、というアドバイスを頂いたのですがうまく動かなかったのでこれにしています。なんでだろ。

10行目からのところで、クリックされた時にロードをさせています。

苦労したのは、次ページの取得をした際にその中に含まれるTwitterのjsが動いてくれない、というところでした。

お礼とビビっていること

jQuery.autopagerを教えてくれた@khoshinoさん、
js部分のアドバイスを頂いた@hissyNCさん、理解の助けになってくれた@yuka2pyさん、ありがとうございました！

助けてもらったFacebookでのスレッドはこちらです。
https://www.facebook.com/shinichi.nishikawa/posts/415742105154372

この後ビビっているのは、nginxのプロキシキャッシュを使うので、次のページがPCから取得されないようにしないといけないこと。大丈夫だといいなぁ。なんとかします。