jQueryを使ってWordPressの追加記事をページ遷移無しで読み込む

(当サイトは、Amazonなどのアフィリエイトを利用しています)

jQuery Summit NotesjQuery Summit Notes Photo by Robert Banh

モバイルからのアクセスがすごい増えてたってのを受けて、モバイルページを色々と研究しております。

最近は細かいところを色々ちょこちょこと変えたりもしてるんですが、とりあえずやりたかったのがMacお宝鑑定団 blog(羅針盤)みたいな感じの「ページ遷移無しでの過去記事読み込み」

なんか難しい感じがしたんですが、jQuery使ったらわりと簡単にできたので、やり方をご紹介いたします。

jQuery.autopagerを使う

今現在、モバイル用のごりゅご.comトップページに実装してあるんですが、こんな感じの機能です

IMG 0443

使ったのは、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を動作させるのか、って設定を書きます。

autopagerの設定

autoLoad:falseで、ページの下の方に行った時に自動で読み込んだりしないように設定。

content:”#content” は次のページのどの部分を読み込みたいのか、IDやclassで指定する。(ごりゅご.comの記事一覧部分は、div id=”content”で囲まれてる)

IMG 0444

autopagerで動作させたいリンクの部分に class=”ajaxLoad”を指定

IMG 0443 1

大抵のWordpressテンプレートならば、記事部分だけがclassとかidで囲まれていると思いますが、その辺りはテンプレートいじったことあれば、だいたいわかるのではないかと思います。

記事一覧部分だけを囲むものがない場合には、そこを手動でちゃんと設定してやればきちんと動きます。(最初「次へ」まで含めた部分のidを指定してて変なことになった)

まとめ

簡単にまとめると、

  • jQuery.autopagerをサーバに入れて
  • 「記事部分」と「次へリンク」にclass,idを割り振る
  • ちょこっとautopager用の設定を書く

だいたいこんな3ステップで完了。

この手のアニメーションだとか動くやつだとか、はまってしまうと本来の目的を見失うことになりかねないので、その辺りに気をつけつつ、でもなんか面白いからもうちょい色々と手を加えていきたいなーと思います。

jQueryはじめてまともに触ったけど、こいつはすごいわかりやすくてイイですね。

このレベルのことならば、jQueryよりもたぶんWordpressの構造を知ることの方が難しい気がするんで、先にWordpressのいじり方を知っておくと良いのではないかと思います。

この記事を書いた人

五藤隆介(goryugo)

「仕事効率化」「ライフログ」「家族Hack」「デジタル情報共有」みたいなことを書いてます。

面白い本について語るPodcast「ブックカタリスト」も始めました

iPad Workers

月額15ドル/年額120ドルで月1回のiPadオンラインセミナー
受講&iPad活用のヒントになる情報をお届けします。iPad Meetup(Zoom座談会)も開催します。
ライスワークやライフワークにiPadを活用したい人におすすめのコミュニティです。