AutoPagerizeをWordPressで WP-AutoPagerizeプラグイン

新しいバージョンを公開しました

wp-autopagerize

先日試した自分のサイトでAutoPagerizeを使うからの延長で
自分のWordPressにAutoPagerizeを手軽に導入できるプラグインを作りました。

色々と方法はあったんですけれど
とりあえずは、Pagenavi付き・jQuery使用になってます。
（上記の2点は好みが分かれそうですね…

サンプルとして実際に動作している環境のWordPressを用意しました。

トピックス

ダウンロード

プラグインファイル
wp-autopagerize.zip(22KB)

導入方法

ファイルをDL解凍後、
WordPressのプラグインフォルダにアップロードしてアクティベートしてください。

アクティベートしたら、任意のテンプレートファイルに下記のソースを貼り付けます。

以上でAutoPagerizeの機能が付属したページナビゲーションが追加されます。
ページナビゲーションも追加するのでWP-Pagenaviなどを使っている人は機能が重複します。

ページナビゲーションの一番左の四角（デフォルトで）をクリックすると
AutoPagerizeのON/OFFが切り替わります。（Cookie付き）

HTMLの構造が複雑な場合はうまく動作しないかもしれません。
その場合はコメントかメールにて教えてもらえると対処できるかもしれません。

設定

AutoPagerizeで追加する要素

追加する要素はwp_autopagerize関数の第一引数で指定します。
たとえば、div.entryを指定する場合は以下のようになります。


wp_autopagerize("div.entry",true,1,"Prev","Next");

複数指定ができます。複数の要素を指定する場合はカンマで区切るだけです。


wp_autopagerize("div.entry,div.post",true,1,"Prev","Next");

指定方法はjQueryのセレクタと同じです。

jQueryを読み込むかどうか

WP-AutoPagerizeではjQueryを使っています。
jQueryを読み込むかどうかを第二引数で指定します。

WP-AutoPagerizeを導入するWordPressで既にjQueryを使っている場合は
false を指定します。


wp_autopagerize("div.entry,div.post",false,1,"Prev","Next");

使っていない場合は true を指定します。


wp_autopagerize("div.entry,div.post",true,1,"Prev","Next");

ここは書き直す必要があるかもしれませんが
最近はjQueryもだいぶひろまってきてますので…

デフォルトの動作（AutoPagerizeを有効にするか無効にするか）

有効にしておくか無効にしておくかは、第三引数で指定します。
有効にする場合は 1 、無効にする場合は 0 を指定します。


wp_autopagerize("div.entry,div.post",true,0,"Prev","Next");

有効にしておけば、最初にON/OFFボタンをクリックしなくても
AutoPagerizeでページを読み込み追加します。

prev, nextの文字を変える場合

prevは第四引数、nextは第五引数でそれぞれ指定できます。


wp_autopagerize("div.entry,div.post",true,0,"前へ","次へ");

参考サイト

ページナビゲーション部分で以下のサイトを参考にさせていただきました。

動作環境
Windows: IE7, Firefox3, Opera9.5, Safari3, Chromeで確認

何か役に立つことがあったらシェアしてみてください

このエントリーをはてなブックマークに追加

Related Entries

Comments: 11 - Leave a comment

  1. 朱桜
    Reply

    バージョン：1.0.2.1

    上記バージョンをＤＬさせて頂きました。
    様々な新機能を盛り込んで頂き本当にありがとうございます。

    今回のバージョンではオプション設定が管理画面から行なえ、使いやすさがぐっと増しました♪

    さて。
    今回のバージョンを使用していて幾つか気になった点がありましたので、お知らせさせて頂きます。

    ・新たに読み込まれた記事レイアウトがおかしい。
    　メイン記事（class=”post-main”）の前でclass=”post”のdivが閉じられてしまっている？
    ・ページャーから任意のページを開いた後にAutoPagerizeで次のページを読み込むと、表示されるページ番号が任意のページの次の数字ではなく、「Page:2」と表示される。（ページ番号のリンクはちゃんと任意ページの次ページが指定されている）
    ・管理画面から追加要素の前にページ番号を追加するかどうかの設定ができるが、できればもう少し自由度を広げて欲しい。
    　（書式を変えられたり、区切り線を入れられたり……）
    ・Callbackの実装も管理画面の設定から追加できると嬉しい。

    以上となります。
    あれこれと要望して申し訳ございませんが、宜しくお願い致します。

    1. nori

      今はまだ調整中なのでもうちょっとお待ちくださいー。
      完成したら使い方も含め記事を書きますので。

      とりあえずいくつか。

      ＞・ページャーから任意のページを開いた後にAutoPagerizeで次のページを読み込むと、表示されるページ番号が任意のページの次の数字ではなく、「Page:2」と表示される。（ページ番号のリンクはちゃんと任意ページの次ページが指定されている）

      これはAutoPagerizeの仕様にそってますので、上記の動作であってます。

      ＞・管理画面から追加要素の前にページ番号を追加するかどうかの設定ができるが、できればもう少し自由度を広げて欲しい。
      　（書式を変えられたり、区切り線を入れられたり……）

      これはちょっと微妙ですねー。ちょっと考えます。

    2. nori

      こんばんわ :) WP-AutoPagerizeの記事を書きました。
      https://5509.me/log/wpautopagerize
      以下以前のお返事です。

      ＞・新たに読み込まれた記事レイアウトがおかしい。メイン記事（class=”post-main”）の前でclass=”post”のdivが閉じられてしまっている？

      DOMでを追加しているだけなので、一度お使いのブログのHTML構造を見直してみてください。

      ＞・ページャーから任意のページを開いた後にAutoPagerizeで次のページを読み込むと、表示されるページ番号が任意のページの次の数字ではなく、「Page:2」と表示される。（ページ番号のリンクはちゃんと任意ページの次ページが指定されている）

      これは仕様です。

      ＞・管理画面から追加要素の前にページ番号を追加するかどうかの設定ができるが、できればもう少し自由度を広げて欲しい。（書式を変えられたり、区切り線を入れられたり……）

      文字については検討しますが、区切り線等はCSSでご対応ください。

      ＞・Callbackの実装も管理画面の設定から追加できると嬉しい。

      こちらは実装したので、管理画面から入力できます。

  2. darumen
    Reply

    twitterでお知らせしましたが、あまり何度も送るのもご迷惑かと思いこちらに。
    1.0.2です。

    wp-autopagerize.phpの95行目の条件式if ( $o['customInsertPos'] != null )に、falseだった場合の処理を追加し
    var wpPageRizeCustomInsertPos = null;’ . “\n”
    を書き出すようにすると、管理画面で「要素の挿入位置」が空入力でもおそらくデフォで想定してる動きになりました。
    同様にwpPageRizePageNumberFalseのほうもfalseだった場合の処理がないとwp-autopagerize.js実行時に未定義が帰るようです。

    また、wp-autopagerize.jsの67行目からの一連の処理は、このpluginがテンプレートタグのある位置にjavascriptを書き出す仕組みなので、「要素の挿入位置」がこのテンプレートタグの後ろにある要素の場合、その要素が読み込まれる前に実行されるためnullが帰ってきてしまうようです。
    load後に実行するようにすればすぐ治るかと思います。

    もしこちらでの設定ミスや知識不足でおかしな指摘をしていたら申し訳ありません。

  3. 朱桜
    Reply

    立て続けに書き込みすみません。

    実は現在Yuga.jsを併用しているのですが。
    AutoPagerizeで読み込んだ新しいページではするするスクロールを始めとするYuga.jsの各種機能が適用されないのです。

    https://5509.me/log/autopagerizeの解説を参考にAutoPagerizeで次のページを読み込んだ後に「$.yuga.externalLink();」や「$.yuga.scroll();」などYuga.js関連のスクリプトを呼び出すようにしてみました。
    するするスクロールについては、何の問題もなく機能適用するようになりました。
    ところが、外部リンクを別ウィンドウに表示する機能は、新たにページを読み込むたびに元々表示されているページも対象にしてしまうので、外部リンク用アイコンが幾つも表示されたり、外部リンクをクリックすると幾つもウィンドウが開いてしまったり……という現象に……。
    Yuga.jsのどの部分をカスタマイズすれば、このような現象が起きなくなるでしょうか？

    申し訳ございませんが、ご教授宜しくお願い致します。

    1. nori

      この辺は仕様というか、Autopagerizeするにあたっての課題ですねー。。
      とりあえず次回アップデートで、Callbackを実装しますので、Callbackで実行してください。

      詳しくはアップデート後に記事でアナウンスしますね！

    2. 朱桜

      色々と要望すみません。
      次のアップデートを楽しみにしています。(^^)

  4. nori
    Reply

    コメントどもです :)

    確かにそうですねー。。次ページのページナビ部分に置き換えるのは全然可能なので、そっちを実装してみますね。

    1. 朱桜

      noriさま

      実装快諾ありがとうございます。

      ところで。
      AutoPagerizeのON／OFF切り替えは実装されていますけど、AutoPagerizeの機能はOFFのままで、リンクやボタンを押すことで下に次ページを継ぎ足していくTwitterのHPのようなことはカスタマイズなどで可能でしょうか？

      もし可能であるなら、どこをどう弄れば良いかご教授頂ければ幸いです。

      宜しくお願い致します。

    2. nori

      >AutoPagerizeのON／OFF切り替えは実装されていますけど、AutoPagerizeの機能はOFFのままで、リンクやボタンを押すことで下に次ページを継ぎ足していくTwitterのHPのようなことはカスタマイズなどで可能でしょうか？

      これはAPIを用意していないので現段階ではできないです。
      ソースかなり汚いですが、JSファイルをそれなりに編集する必要がありますね。

      このプラグイン自体あんまり需要がないかなと思い
      放置気味公開している分はだったのですが
      少し考えてみますね。コメントありがとうございます。

  5. 朱桜
    Reply

    こんにちは。

    AutoPagerizeとページナビゲーションが一緒になっているこのプラグイン、とても重宝しています。

    さて。
    次のページを読み込んだ後、それにあわせてページナビゲーションで表示される現在ページも変化してくれるともっと良かったのに……と思っているのですが、そういった要望を実現することは可能でしょうか？

    ページがどんどん自動的に読み込まれているのに、ページナビゲーションの現在ページはどこまでいっても１ページ目のまま。
    これではせっかくのページナビゲーションが、便利さ半減……のように感じるのです。

    もし宜しければ、改善検討をお願い致します。

    それでは。用件のみですが、今回はこの辺で。

Leave a comment

Trackbacks: 3

Trackback URL for this entry
Listed below are links to weblogs that reference
AutoPagerizeをWordPressで WP-AutoPagerizeプラグイン from 5509
  1. pingback from AutoPagerizeとsyntaxhighlighterプラグインをWordPressで使用する | みぞおち

    [...] す時間を増やしています。 色々と便利にしたいなとWP-AutoPagerizeプラグインを入れてみました。 [...]

  2. pingback from 2009/07/12今日のニュース系。 - ごみおきば

    [...] AutoPagerizeをWordPressで WP-AutoPagerizeプラグイン | 5509入れてみたけど、そもそもこのサイトで必要あるのかどうかさっぱり分からないアレ。 [...]

  3. pingback from プラグイン - wondernote.jp

    [...] ページネーション(WP-pagenavi、WP-AutoPagerize) [...]

Author

nori
nori
- UI Engineer
Location
- ,