WP-AutoPager

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


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

使用法

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

<html>

<head>

</head>

<body>

<div id="content">

<div class="post" id="post-???">エントリ内容</div>
<div class="post" id="post-???">エントリ内容</div>
<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 は、継ぎ足し表示されたページでは反映されません。

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

27 thoughts on “WP-AutoPager

  1. XTORT

    こんにちはXTORTです。

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

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

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

    返信
    1. をかもと 投稿作成者

      XTORT さん、どもです。

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

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

      すいません、このプラグインを作った頃 <!–nextpage–> タグの存在を知らなかったので、対応していませんでした。
      時間のあるときに対応させてみますね。
      気長にお待ちください。

      返信
      1. XTORT

        そうだったんですか。

        対応して頂けると個人的になんですが、非常にうれしいです。
        気長に待ってます 😛

        返信
  2. をかもと 投稿作成者

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

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

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

    返信
  3. ジャンピエール

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

    返信
  4. をかもと 投稿作成者

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

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

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

    返信
  5. ジャンピエール

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

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

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

    返信
  6. をかもと 投稿作成者

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

    お使いのテーマですと、若干設定変更が必要です。
    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>
    これで、上手く動くはず。
    試してみてください。

    返信
  7. ジャンピエール

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

    返信
  8. ピンバック: WP插件:WP-autopager|WP自?翻?插件 | 帕?的口袋

  9. ピンバック: WP-AutoPager | 亦?亦繁 wordpress blog

  10. ピンバック: WordPress 插件:?你的 blog 自?翻? at catch the digital flow

  11. をかもと 投稿作成者

    Snail さん、どもです。

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

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

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

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

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

    返信
  12. Snail

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

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

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

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

    返信
  13. をかもと 投稿作成者

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

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

    返信
  14. テルミナ

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

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

    返信
  15. をかもと 投稿作成者

    Sa.Ga さん、どもです。

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

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

    返信
  16. ピンバック: 【WordPress】「WP-AutoPager」プラグイン導入 » Telmina

  17. テルミナ

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

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

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

    という記述を、

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

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

     一応ご報告まで。

    返信
  18. をかもと 投稿作成者

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

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

    返信
  19. もんぷち

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

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

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

    返信
  20. をかもと 投稿作成者

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

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

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

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

    返信
  21. もんぷち

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

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

    返信
  22. ピンバック: WP-AutoPager < WordPress Plugin DB Japan

  23. をかもと 投稿作成者

    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 を教えていただけると助かります。

    返信
  24. masaya

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

    返信
  25. ピンバック: WP Plugins DB » Plugin Details » WP-AutoPager

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください