WordPress サイトの AutoPagerize 対応

本日の夕方から、このサイトのサーバ移行を行ないまして、先程その作業が完了致しました。
その移行作業のついでに、AutoPagerize という便利な仕組みにも対応してみました。

AutoPagerize とは

AutoPagerize というのは、「Greasemonkey スクリプト」、または「ユーザー JavaScript (UserJS)」と呼ばれるもので、見ているサイトの表示や動作を、利用者が便利になる様に変えてくれるというものです。

AutoPagerize を使用すると、ブログや検索エンジンなどで下にスクロールするだけで「次へ」のリンクをクリックすることなく、自動的に次のページが追加されるという大変便利なものです。

AutoPagerize インストールしている場合、利用できるサイトでは、この様に右上に四角のアイコンが表示されます。

そして、下へスクロールしていくと、自動的に次のページがどんどん読み込まれてゆきます。

一度使い始めると、これが無いとネットが不便で仕方ないと思ってしまうくらい便利なツールですので、使った事のない人は、ぜひ利用してみて下さい。

AutoPagerizeの使い方

UserJS について詳しく説明すると、記事が1本以上出来てしまいますので省略して、AutoPagerize の利用法だけを簡単ですが説明します。

Firefox ユーザー

Firefox の方はグリースモンキーの使い方を参考に、グリースモンキーをインストールした後、AutoPagerizeの配布ページの右上のInstall this scriptのボタンを押してAutoPagerizeをインストールします。
Webブラウジングを快適にするAutoPagerizeも参考にどうぞ。

Opera ユーザー

Opera の方はAutoPagerizeのOpera版，oAutoPagerizeの使い方を参考にしましょう。

Safari ユーザー

Safari の方はSafariでもAutoPagerizeを参考にしましょう。

Internet Explorer ユーザー

IE の方は、AutoPagerize for IE7Proという作者のページに情報がありますが、IE7しか利用できないみたいですので、この機会にXP以上の方は IE7 を利用してみては如何でしょうか?

それ以外のブラウザをご利用の方は、それ以外のブラウザを利用するくらいなので、自分で調べられるくらいの知識をお持ちだと思われます。

WordPerss で構築されたサイトをAutoPagerize対応するには

ようやく本題です。AutoPagerize は非常に汎用性をもったスクリプトで、サイトのHTMLに、少しのセマンティクスを加えるだけで自動的に対応することが出来ます。作者のページによると、

AutoPagerizeに必要な情報をページ中のHTMLに埋め込んでおけば、
SITEINFOがなくてもAutoPagerが起動するようになります

埋め込みの形式は以下の通りです

link要素またはa要素でrel="next" (複数あった場合は、先に現れるものが選ばれます)

classでautopagerize_insert_before (複数あった場合は、先に現れるものが選ばれます)

classでautopagerize_page_element (複数指定可、指定したもの全てが挿入されます)

マークアップの例

PLAIN TEXT

HTML:

<html>

<body>

<div class="autopagerize_page_element">

<div>foo foo foo</div>

<div>foo foo foo</div>

<div>foo foo foo</div>

<div>foo foo foo</div>

<div>foo foo foo</div>

</div>

<div><a href="ap_micro2.html" rel="next">next</a></div>

<div class="autopagerize_insert_before">footer</div>

</body>

</html>

とあります。つまり、要点を纏めると、

次のページへのリンクにrel="next"を追加
繰り返す各記事のdiv要素に class="autopagerize_page_element" を追加
次の記事を読み込を開始したい位置の直後の div 要素に class="autopagerize_insert_before" を追加

という訳です。

WordPressでは、次の記事へのナビゲーションリンクの多くは next_post_link() と previous_post_link()。また、posts_nav_link()のテンプレートタグを使って実装していると思いますが、これらのタグで生成されるナビゲーションリンクに rel="next" を追加するためには、ひとつのファイルを修正するだけで可能です。

WordPress をインストールしたディレクトリの /wp-includes/link-template.php というファイルがナビゲーションリンクのテンプレートになっていますので、この中で定義されている、

425行目付近のprevious_post_link 関数と、
538行目付近のnext_posts_link 関数の部分に

PLAIN TEXT

PHP:

echo '<a rel="next" href="';

の様に追加するだけです。

WordPress ではシングル表示の場合の次の記事というのは Next (次) ではなく、Previous (以前) という扱いになっているので、post_link (posts ではない)の場合は previous_post_link が次の記事へのリンクなので注意が必要です。

ついでに、逆の関数に rel="prev"を追加しておくと、よりナビゲーションの優れたサイトになります。

autopagerize_page_element は多くのテーマでは post や entry や section というクラスが付いている部分。autopagerize_insert_before は、記事の次に来るブロック(フッターやサイドバーやナビゲーション)に追加すれば良いでしょう。

これだけで AutoPagerize に対応できますので、WordPress を使ってサイトを構築されている方は、ぜひ対応してみてはどうでしょうか?

4 Trackbacks

ブログは続けてナンボ - JACO-BASS

[...] 恐らくAutoPagerizeに関して書いた記事が効いているんでしょう。複数ブックマークされたことがキッカケになったのでしょうか、今のところ「AutoPagerize 対応」で検索すると、Yahoo!やGoogleで上位をキープしています。 [...]

2008-03-03 at 02:35
ナレッジエース

WordPressをAutoPagerizeに対応させる方法...

GreasemonkeyスクリプトのAutoPagerizeが面白かったので、このサイトでも使えるようにしてみました。

AutoPagerizeは、Googleの検索結果などでページをスクロールした際に自動的に「次のページ.....

2008-03-20 at 18:14
AutoPagerizeに対応してみた | Go for it!

[...] サイトの方の対応はWordPress サイトの AutoPagerize 対応を参考にしてリンク関数の更新、テンプレートの更新のみで簡単に対応できる。 [...]

2008-11-13 at 12:51
R405 - WordPressでAutoPagerize(導入まとめ)

[...] http://blogging.from.tv/wp/2008/05/06/177 WordPress サイトの AutoPagerize 対応 - JACO-BASS http://www.jaco-bass.com/blog/2008/02/for-autopagerize-of-wordpress-site/ Wordpress2.7の場合 [...]

2009-01-11 at 02:05

JACO-BASS » WordPress サイトの AutoPagerize 対応