WP-AutoPager : dogmap.jp

WP-AutoPager

Posted by をかもと at 2007年7月12日木曜日

最速の人が作った Greasemonkey スクリプト GoogleAutoPager が便利すぎて仕方が無い。
Google の検索結果ページで、「下のほうまでスクロールしたら次のページを自動でロード、現在表示中の検索結果に継ぎ足していく」と言うものだが、これが使っていて小気味良い。
で、ソースをGPLライセンスで公開していてくれてるので、Wordpress のプラグインとして利用できるようにしてみた。
どんな動きになるかは当サイトのトップページ等で確認してみてください。

管理を WordPress Plugins/JSeries に移しました。
最新版のダウンロードと使用法・修正履歴等は、そちらを参照してください。
WordPress Plugins/JSeries » WP-AutoPager

使用法

デフォルトテンプレートベースであれば、テンプレート修正無しでも、動作します。
使用するには解凍したファイルを　wp-content/plugins/wp-autopager/ ディレクトリに放り込んで、有効化すれば良いはず。
HTML の構造が以下のようになっていることを前提に造ってあります。

<html>

<head>

：

</head>

<body>

：

：

<div class="post" id="post-???">…エントリ内容…</div>

：

<div class="navigation">…ページナビゲーション…</div>

</div>

：

</body>

</html>

また class 名、ID 名は修正できるようにしておきました。
wp-autopager.php の先頭付近にある以下の記述をお使いの環境に合わせて変更してください。
→ Ver. 0.2.0 より管理画面で設定変更できるようになりました
※ class 名、ID名は大文字・小文字を判別しますので、うまく動かないときはその辺を疑ってみてください。

うまく動作すれば <div id="content" /> 要素内の <div class="post" /> 要素を取得して、<div class="navigation" /> 要素の前に次々と配置していきます。

一応、クライアントは IE6, IE7, Firefox 2.0.0.4, Opera 9.10, Safari (for Win) 3.0.2 で確認してあります。
Wordpress は 2.2.1 ME でしかテストできてないので、動作報告等いただけると非常にありがたい。

今後の拡張予定

class 名、ID名等のパラメータを管理画面で変更できるようにしたいなぁ。
→ Ver.0.2.0 で対応しました

既知の問題

lightbox.js 等、onload イベントで要素を変更する Javascript は、継ぎ足し表示されたページでは反映されません。

参考にさせていただいたサイト

投稿者 / 日付:

をかもと

2007年7月12日木曜日 22:48:50 ( 最終更新日: 2008年2月4日月曜日 11:46:56 )

カテゴリー:

WordPress

タグ:

Ajax, AutoPager, WordPress, WordPress Plugin

Tweet this:

つぶやく

コメント / TB:

Comments(21)

Trackbacks(6)

トラックバック URI:

このブログで関連すると思われる他の投稿

本日の人気記事

トラックバック & ピンバック » 表示する

2007年7月18日水曜日 1:25:21

はじめまして。
すばらしいプラグイン！
早速使わせていただきますー。
…で、すみません、質問なんですが。。。
下位ページ（下位ディレクトリに WordPress をインストールした場合）で使用するにはどうすればいいでしょうか？
ちなみにトップディレクトリにインストールした際はまったく問題なく動作しました（Camino 1.0.3, WordPress ME 2.1.2）^^！

masaya 返信 | 引用
2007年7月18日水曜日 10:02:08

masaya さん、はじめまして。

うまく動きませんか？どこかでバグってますね。
修正しますので、しばしお待ちを。

ところで、どこまで動作します？
・画面最下部までスクロールした際にページナビゲーションが　「Loading…」に置き換わるか？
・ページのソースの <head>…</head> 内に以下の記述があるか？
<script type=”text/javascript” src=”http://〜/wp-content/plugins/wp-autopager/wp-autopager.php?js” charset=”UTF-8″></script>
・ページのソースの最下部近くに以下のような記述があるか？
<script type=”text/javascript”>autopager(“http://〜/page/”,2,9);</script>

あと、試されたサイトの URL を教えていただけると助かります。

をかもと返信 | 引用
2007年7月24日火曜日 1:20:02

はじめまして。
うわさを聞いてやってきました。このプラグインをぜひ使ってみようと、なんとか無事動作させることができました。
WebサーバがWindows環境なもので、メモ帳で、2バイト文字を含んだテンプレートをUTF-8形式のファイルで保存すると、
AutoPagerが、画面の真下まで行かなくても、次の記事をどんどん先読みしていってしまうようなのです。
テンプレートから2バイト文字を取り外すと、うまくいきます。　ちなみに（header.php、sidebar.phpです）

ひょっとしたら、PHPのマルチバイトの設定が悪いのかも。。

もんぷち返信 | 引用
2007年7月24日火曜日 10:15:10

もんぷちさん、はじめまして。

AutoPagerが、画面の真下まで行かなくても、次の記事をどんどん先読みしていってしまうようなのです。

多分 PHP じゃ無くてクライアント由来の問題ですね。
Javascript の中でマウス位置を監視している関数があるんですが、そいつが上手く動いてないようです。

多少修正しました。最新バージョンは WP-AutoPager 0.1.6 になります。
これで試してみてもらっても良いですか？

をかもと返信 | 引用
2007年7月27日金曜日 0:42:43

迅速な対応ありがとうございました。
おかげさまで無事動作いたしました。とても感謝しています！

メモ帳でUTF-8形式で保存すると、BOMと呼ばれる識別コードが挿入されてしまうらしく、
JavaScriptやPHPにとって、誤動作の原因となることがWebを調べて分かりまして、
EmEditorなどのエディタを使って、UTF-8（BOM無し）で保存することで解決しました。
私の扱い方が悪かったようです。

ご対応ありがとうございました＾＾

もんぷち返信 | 引用
2007年7月27日金曜日 12:52:55

もんぷちさん、どもです。

こちらこそ、ありがとうございました。
様々な環境でのテストは一人ではしきれないので、不具合報告や動作確認は助かります (^^;;

をかもと返信 | 引用
2007年7月28日土曜日 18:22:33

　先ほど、ヴァージョン0.1.6をダウンロードさせていただきました。
　自分のところでは「Sandbox」テーマを改造したものを使用しておりますが、このテーマのように、div要素に複数のclassが設定されておりそのうちのひとつに「post」があるようなケースの場合、ダウンロードしてきたままの状態では正常に動作しないようです。

　私のところでは、「wp-autopager.php」166行目の

if(div[i].className == ""){

という記述を、

if(div[i].className.indexOf("") >= 0){

のように書き換えたところ、動作するようになりました。

　一応ご報告まで。

テルミナ返信 | 引用
2007年7月28日土曜日 19:41:45

Sa.Ga さん、どもです。

おぉ〜 Class 名は複数指定できることを失念していました。
と言うわけで修正しましたので、更新してください。

ご指摘ありがとうございました m(_ _)m

をかもと返信 | 引用
2007年7月28日土曜日 20:18:48

　私のところにもコメントいただきましてありがとうございます。
　環境の報告を忘れておりましたが、自分のブログで使用しておりますWordPressは、本家版の2.2.1です。
　サーヴァはXREA です。

　この環境で、0.1.7が期待通りに動作することを確認できました。ありがとうございました。

テルミナ返信 | 引用
2007年7月28日土曜日 20:58:28

Sa.Ga さん、どもです。
ご指摘の方法でも良いのですが、indexOf() だと “post” と “posthogehoge” を区別ができないので、多少修正させていただきました。
# 具体的には ClassName をスペースで分割して配列に取り込んだ後、配列内に指定の文字があるか確認

環境報告もありがとうございます m(_ _)m
クライアントは、VMWarePlayer 上で、IE6, IE7, Firefox, Opera, Safari を動作させて確認することができるのですが、サーバは確認しきれないので助かります。
まぁ今回のプラグインは JavaScript メインなんで、サーバは PHP 4, 5 だけ確認すれば良いかとは思ってたんですが中々…
しかも、私は PC-UNIX は FreeBSD 一筋だったもので Apache は、まだしも Win の IIS なんかは得手では無くって (^^;;;

をかもと返信 | 引用
2007年8月6日月曜日 18:36:52

私のところでも設置してみたところ、ばっちり動作しました。

欲を言えば、もう少し早めに読みに行ってくれるといいなぁと思いました。
例えば、最終記事の最初が表示されたあたりで読みに行ってくれると、先読みしているのを意識しなくなると思います。

それとうちではLightboxを入れているのですが、これを有効にするのは技術的に無理なのでしょうか？
今のところLightboxが無効になってしまうという理由で、家ではプラグインを停止している状態です。
これでLightboxさえ上手く動いてくれれば、完璧！って感じなんですが、、、。

すいません、使わせて貰う身分で、勝手なことばかりm(__)m

Snail 返信 | 引用
2007年8月8日水曜日 10:21:35

Snail さん、どもです。

欲を言えば、もう少し早めに読みに行ってくれるといいなぁと思いました。

22行目の「$ap_remain = 500;」って記述が、先読みを開始するページ最下端からの相対位置(ピクセル)なので、この数値を大きくすれば、早めに先読みを開始するようになります。
色々と変えてみてベストな位置を探してみてください。
この辺のオプション設定も、次バージョンではダッシュボードからできるようにしようと思ってます。

それとうちではLightboxを入れているのですが、これを有効にするのは技術的に無理なのでしょうか？

Lightbox 系の適用の実装は次のバージョンで対応させる予定です。
window.onload イベントで動作しているファンクションを新しくレンダリングした DOM にも適用してしまえば良いだけなんですが、いまちょっと忙しくって (^^;;;

とりあえず Lightbox Ver.2 であれば、wp-autopager.php の 183行目の「next_page++;」の後ろに「initLightbox();」って書いてやれば動くような気がします。
# うちでは Lightbox Ver.1 を使ってるので、ちょっと試してませんが (^^;;;

をかもと返信 | 引用
2008年2月2日土曜日 13:58:26

　ヘッダーとの手前にスクリプトは入っていますが、ローディングのアイコンが動き出して止まってもページはそのままです。
サーバーはサクラでPHP4、MySQL4で動いています。
テンプレートVicunaと合わないのかなあ。

ジャンピエール返信 | 引用
2008年2月3日日曜日 23:52:09

ジャンピエールさん、はじめまして。

お使いのテーマですと、若干設定変更が必要です。
wp-Autopager の設定画面で
　Content ID: main
　Post Class: section
　Navigation Class: navigation
としてください。

次にテーマテンプレートの「メインインデックスのテンプレート」の下記の部分を修正してみてください。
　<?php paging_link('next_label=Older Entries&prev_label=Newer Entries&indent=2') ?>
　　↓
　<div class="navigation"><?php paging_link('next_label=Older Entries&prev_label=Newer Entries&indent=2') ?></div>
これで、上手く動くはず。
試してみてください。

をかもと返信 | 引用
2008年2月4日月曜日 9:55:38

　サイトチェックしていただきましてありがとうございます。
ローディングのアイコンがメインのほうに移動しただけで、動作しませんでした。
各記事の頭にある

でclass名とid名が異なっているせいなのでしょうか？
id名と記事番号の間に「-」も無いですし。

このテーマは本体とCSSが別になっているというちょっと特殊な形式です。
お手数おかけいたします。

ジャンピエール返信 | 引用
2008年2月4日月曜日 10:42:02

ジャンピエールさん、どもです。

wp-autopager の設定画面で
Post Class: section entry
と設定されていませんか？

クラス名が複数指定されている場合は、片方だけでオッケです。
Post Class: section
に設定してみてください。

をかもと返信 | 引用
2008年2月4日月曜日 12:05:18

最初「section」にした時にうまくいかなかったので「section entry」にしてみたのですが、今「section」に戻したらうまく稼動しました。
ありがとうございます！！
このプラグインは便利で、ぜひ使ってみたいものだったので助かりました。
先読み込みは「1000」で使っています。

ジャンピエール返信 | 引用
2008年2月4日月曜日 12:24:04

うまく動作したようで、良かったです。

このプラグインは便利で、ぜひ使ってみたいものだったので助かりました。

そう言っていただけると作者冥利に尽きます。

をかもと返信 | 引用
2009年3月26日木曜日 18:14:36

こんにちはXTORTです。

個別ページの＜!–nextpage–＞の扱いに困っていまして、こちらのpluginを利用できないか試してみたんですが、個別ページには対応していないんですね。

ページ自体をつなげると、「rel=”next”の意味が違ってくるから」とかそういう理由からくる物なのでしょうか？
でも、＜!–nextpage–＞だったら別に構わない気がするし・・・

時間があるときにでもレスつけて頂けるとうれしいです。

XTORT 返信 | 引用
- 2009年3月26日木曜日 18:19:20
  
  XTORT さん、どもです。
  
  個別ページの＜!–nextpage–＞の扱いに困っていまして、こちらのpluginを利用できないか試してみたんですが、個別ページには対応していないんですね。
  
  ページ自体をつなげると、「rel=”next”の意味が違ってくるから」とかそういう理由からくる物なのでしょうか？
  でも、＜!–nextpage–＞だったら別に構わない気がするし・・・
  
  すいません、このプラグインを作った頃 <!–nextpage–> タグの存在を知らなかったので、対応していませんでした。
  時間のあるときに対応させてみますね。
  気長にお待ちください。
  
  をかもと返信 | 引用
  - 2009年3月26日木曜日 19:20:44
    
    そうだったんですか。
    
    対応して頂けると個人的になんですが、非常にうれしいです。
    気長に待ってます :P
    
    XTORT 返信 | 引用