五藤隆介(goryugo) 
jQuery Summit Notes Photo by Robert Banh
モバイルからのアクセスがすごい増えてたってのを受けて、モバイルページを色々と研究しております。
最近は細かいところを色々ちょこちょこと変えたりもしてるんですが、とりあえずやりたかったのがMacお宝鑑定団 blog（羅針盤）みたいな感じの「ページ遷移無しでの過去記事読み込み」
なんか難しい感じがしたんですが、jQuery使ったらわりと簡単にできたので、やり方をご紹介いたします。
jQuery.autopagerを使う
今現在、モバイル用のごりゅご.comトップページに実装してあるんですが、こんな感じの機能です
使ったのは、jQuery.autopagerというやつ。実際のデモとかソースのダウンロードとかもここからできます
jQuery.autopager: Automatic paging plugin for jQuery
以下、自分が行った手順。
ヘッダでjQueryとautopagerを読み込む
まずは上記URLからjQuery.autopagerをダウンロードしてきて、Wordpressのヘッダ部分で読み込むようにする。（jqueryはGoogleのものを使用。2行目は自分のサーバにアップロードしたautopagerのURLに変更する）
[html]
<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js’></script>
<script type=’text/javascript’ src=’autopager.js’></script>
[/html]
autopager用の設定はこんな感じ。これも、ヘッダに置いとく。
[js]
jQuery(function() {
$.autopager({
autoLoad: false,
content: ‘#content’,
link: ‘.ajaxLoad a’,
});
$(‘.ajaxLoad a’).click(function() {
$.autopager(‘load’);
return false;
});
});
[/js]
javascript部分とWordpressHTMLのclass,idを合わせる
上記ソースで、Wordpressでどんな感じにautopagerを動作させるのか、って設定を書きます。
autoLoad:falseで、ページの下の方に行った時に自動で読み込んだりしないように設定。
content:”#content” は次のページのどの部分を読み込みたいのか、IDやclassで指定する。（ごりゅご.comの記事一覧部分は、div id=”content”で囲まれてる）
autopagerで動作させたいリンクの部分に class=”ajaxLoad”を指定
大抵のWordpressテンプレートならば、記事部分だけがclassとかidで囲まれていると思いますが、その辺りはテンプレートいじったことあれば、だいたいわかるのではないかと思います。
記事一覧部分だけを囲むものがない場合には、そこを手動でちゃんと設定してやればきちんと動きます。（最初「次へ」まで含めた部分のidを指定してて変なことになった）
まとめ
簡単にまとめると、
- jQuery.autopagerをサーバに入れて
- 「記事部分」と「次へリンク」にclass,idを割り振る
- ちょこっとautopager用の設定を書く
だいたいこんな3ステップで完了。
この手のアニメーションだとか動くやつだとか、はまってしまうと本来の目的を見失うことになりかねないので、その辺りに気をつけつつ、でもなんか面白いからもうちょい色々と手を加えていきたいなーと思います。
jQueryはじめてまともに触ったけど、こいつはすごいわかりやすくてイイですね。
このレベルのことならば、jQueryよりもたぶんWordpressの構造を知ることの方が難しい気がするんで、先にWordpressのいじり方を知っておくと良いのではないかと思います。
