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

Wordpress

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

jQuery Summit Notes Photo by Robert Banh モバイルからのアクセスがすごい増えてた […]

最終更新日:2013年1月11日
ツイートする
ブックマークする
Evernoteへ送る
あとで読む

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のいじり方を知っておくと良いのではないかと思います。