実験だったり、備忘録だったり、脳外ストレージ。

今ちょうどタイムリーに鼻血が出てきてピンチのフジカワです、こんにちは。

スクロールでどんどんコンテンツが出てくる流行のやつやりたい

最近のSNS系サービスで良く見かける動きです。スクロールして下まで行くと、どんどん時系列を遡って過去のコンテンツが表示されるやつ。あれをWordPressに実装してみましょう。
なお、導入に際して2点ほどつまづいた箇所がありました。一つは同じ内容がリピートしてしまうという点、もう一つは非表示にしているカテゴリも読み込まれてしまうという点。それらについても解決していますので、同じ部分でお悩みの方の参考になると幸いです。ではさっそく。

ざっくりとした流れ

1.プラグインをインストールして有効化。
2.設定画面で「Content Selector」「Navigation Selector」「Next Selector」「Item Selector」の4つに該当するid/classを入力する。
3.query_posts() の引数にグローバル変数の”$query_string”を追加する。
4.query_posts()に二重引用符（”）で囲んでる別の引数がある場合は頭に”&”を追記する。

==================
2013.02.18追記
スマホ用に別に用意しているテーマでも同様に動きました。index.phpの4要素のid/classをPC用のテンプレートと同じ内容にして、style.cssをそれに併せて調整すればOKです。
「PCは自動読込、スマホは読込ボタンを押してから読込させたい」など、PCとスマホで挙動を替えたい場合はエントリー内にあるjQueryプラグインの「jQuery.autopager」を使のが吉。管理画面のプラグイン設定ではなく、index.php側への記述で設定が可能です。
==================

プラグインを使いましょう

まず、WordPressに同機能を実装する方法としては
1.jQueryプラグインのjQuery.autopagerを使う
2.WordPressのプラグインを使う
の二通りの方法がありました。
今回はサクッと2のプラグインで実現します。

インストールと設定

WordPressの管理画面、プラグインのところから「Infinite Scroll」で検索してインストール→有効化すればインストールは完了。
次は設定です。幾つかオプションはありますが、とりあえず動くようにするために以下4点の必須項目だけ入れていきます。
1.Content Selector（下記2～3を括っている要素）
2.Navigation Selector（「次のエントリー一覧」に移動するリンクを括っている要素）
3.Next Selector（「次のエントリ一覧」に移動するリンク自体の要素）
4.Item Selector（ループして表示される部分の要素）
だけ入れればとりあえず動きます。言葉で説明されてもちょっと分かりにくいので、図で説明すると、

ついでにソースだと

<div id="container">
<div id="content">


<div class="post">
<h2><a href="http://blog.sugulab.com/?p=9685" rel="bookmark">新規登録で50GB無料のキャンペーン中｜オンラインストレージ「Box」</a></h2>
<div class="postmetadata">2013年2月15日 | カテゴリー: <a href="http://blog.sugulab.com/?cat=21" title="オンラインサービス の投稿をすべて表示" rel="category">オンラインサービス</a>  </div>
</div>



<div class="post">
<h2><a href="http://blog.sugulab.com/?p=9663" rel="bookmark">【解決済み】みなさんの力を貸してください｜DNSがうまく反映されない件</a></h2>
<div class="postmetadata">2013年2月10日 | カテゴリー: <a href="http://blog.sugulab.com/?cat=22" title="Webサイト運営 の投稿をすべて表示" rel="category">Webサイト運営</a>  </div>
</div>



<div class="post">
<h2><a href="http://blog.sugulab.com/?p=9520" rel="bookmark">朝起きた時の喉の痛みと鼻水を止める｜空気清浄加湿機</a></h2>
<div class="postmetadata">2013年2月7日 | カテゴリー: <a href="http://blog.sugulab.com/?cat=5" title="買っちゃったモノ の投稿をすべて表示" rel="category">買っちゃったモノ</a>  </div>
</div>



<div class="post">
<h2><a href="http://blog.sugulab.com/?p=9084" rel="bookmark">分割された.rarファイルをMacで結合・解凍するアプリ｜The Unarchiver</a></h2>
<div class="postmetadata">2012年12月14日 | カテゴリー: <a href="http://blog.sugulab.com/?cat=9" title="アプリ の投稿をすべて表示" rel="category">アプリ</a>  </div>
</div>


<div class="post">
<h2><a href="http://blog.sugulab.com/?p=9041" rel="bookmark">ページタイトルの頭にブログ名や「>>（&#187;）」が付いちゃう時の対応｜HeadSpace2</a></h2>
<div class="postmetadata">2012年12月13日 | カテゴリー: <a href="http://blog.sugulab.com/?cat=17" title="WordPress の投稿をすべて表示" rel="category">WordPress</a>  </div>
</div>


<div class="post">
<h2><a href="http://blog.sugulab.com/?p=9027" rel="bookmark">若い人も客になればいい｜第46回衆議院議員総選挙</a></h2>
<div class="postmetadata">2012年12月13日 | カテゴリー: <a href="http://blog.sugulab.com/?cat=2" title="日々之戯言 の投稿をすべて表示" rel="category">日々之戯言</a>  </div>
</div>


<div class="navigation">
<div class="alignleft"><a href="http://blog.sugulab.com/?paged=2" >&laquo; 古いエントリー</a></div>
<div class="alignright"></div>
</div>


<!-- end #content --></div>



<div id="sidebars">

サイドバーの中身（略）


<!-- end #sidebars --></div>
<!-- end #container --></div>

こんな感じになっているので、自分のサイトのソースを見ながら上記参考部分に該当するidとclassを入力しましょう。
僕の場合だと以下のようになります。

入力が完了したら下の方にある”Save Options”をクリックして、設定を保存しておきましょう。

ありゃ？同じのがエンドレスに出てくる

これでよし、と。
うきうきしながらブログをリロード。

下までスクロールすると、ローディングバーが動き始めました。
おぉ、いいじゃん、いいじゃん！読み込まれてるっぽい！今どきっぽい！

おー！きたー！読み込みキター！
ん？
なんか、同じコンテンツ読み込んでないか？

僕の場合、トップページではコンテンツは表示せずにタイトルのみを25個づつ表示させているのですが、その次に自動読み込みされる25個も最初と同じ25個のエントリーが読み込まれています。
これはまずい。エンドレスで同じコンテンツを訴求しても意味がありません。

$query_stringが必要

で、調べてみるとありました。困った時のWordPress Codex。
テンプレートタグ/query posts – WordPress Codex 日本語版

query_posts() は テンプレート ファイル内で WordPress ループ が始まる前に記述します。wp_query オブジェクトは与えられた引数から新しい SQL クエリを作ります。このとき、WordPress は（ページ番号やカテゴリーのような）URL から得られた引数を無視します。もしその情報が必要なら、query_posts() の引数としてグローバル変数の $query_string を与えます。

はいなるほど。では引数をちゃんと拾ってもらえるように$query_stringを追加しましょう。

<?php query_posts('cat=-3') ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<div class=&quot;post&quot;>
以下略

を

<?php global $query_string; ?>
<?php query_posts($query_string . 'cat=-3') ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>


<div class=&quot;post&quot;>
以下略

これでOK!（実はOKではない。）

ありゃ？非表示にしてるカテゴリも出てきちゃうぞ？

よし、これでOKだと思い再びリロード。

はいきたっ！ちゃんと違うコンテンツが読み込まれましたー。
ん？
非表示にしてるはずのカテゴリのエントリー（「脳の表面（tweetまとめ）200x/x/x」）も読み込まれちゃってます。実はカテゴリーの一つをトップページでは読み込まないようにしているんですね。

<?php query_posts($query_string . 'cat=-3') ?>

この’cat=-3′というのがその指定で、「カテゴリーIDが3のエントリーは読み込まない」ようにしています。
のはずなのですが、何故かもりもり読み込んでいます。

引用符で括っているquery_posts()の引数には”&”を追記すればOK

というわけでまたcodexに戻ります。先ほどの$query_stringのくだりを少し読み進めると

この形式（注：引数に$query_stringを使う形式）で query_posts() を使う場合は、二重引用符で囲んだ引数をアンド記号（&）で始めてください。

って書いてある。しかもさっき読んだところの2～3行下に。良い子の皆さんは限られた時間を有効活用するためにも資料にはちゃんと目を通しましょう、という学びまで得ることができましたね。
さっと修正。

<?php global $query_string; ?>
<?php query_posts($query_string . 'cat=-3') ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>


<div class=&quot;post&quot;>
以下略

↓

<?php global $query_string; ?>
<?php query_posts($query_string . '&amp;cat=-3') ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>


<div class=&quot;post&quot;>
以下略

できたできた

はい、今度こそOK。望みどおりの挙動になりました。一応キャプを。長いのですいませんね。

これで本当にOKです。

反省と備考

反省が一つ。
キャプチャが縦長でダレましたね。
スクロールお疲れ様でした。

備考も一つ。
モバイル版に別のテーマを当てている場合、そっちにはこの機能が反映されていない場合があります。僕のが実際にそうです。モバイル用テーマのCSSのid/classを今回設定したものに揃えてあげると動くのかも。これからやってみます。鼻血も止まりました。