WordPressをAutoPagerizeに対応させる方法

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

AutoPagerizeは、Googleの検索結果などでページをスクロールした際に自動的に「次のページ」を読み込み、同じブラウザ内で継ぎ足して表示してくれるGreasemonkeyスクリプトです。

今更ながらGreasemonkeyを導入するに当たっては以下のページが大変参考になりました。超絶便利なGreasemonkeyスクリプトの使い方が分かりやすく紹介されています。

知らないと損する!Webを素早く閲覧できる便利ツール「Minibuffer + AutoPagerize + LDRize」

んで本題。AutoPagerizeに対応させるための定義は、SITEINFOと呼ばれるフォーマットを専用のWiki(?)に書き込む方法と、サイト側でマークアップを追加する方法があるようです。(SITEINFOの方は大手サイト向けなのかな?よくわかりません)

とりあえず個人サイトのレベルで対応しやすいのは後者のマークアップを追加する方法で、やり方は以下の作者さんのページが参考になります。

AutoPagerize0.0.11 - SWDYH

このサイト(ナレッジエース)はWordPressで作っているのですが、意外と簡単に対応させることが出来ました。(ただしHTML＋CSSの知識は必要です)

WordPress側で追加するもの

前後ページリンクのrel属性

WordPress2.0.xの場合はwp-includes/template-functions-links.php内の「function next_posts_link」と「function previous_posts_link」で前後のページへのリンクを生成しているので、ここに「rel=”next”」を埋め込みます。(AutoPagerizeでは使われませんが「rel=”prev”」も入れます)

WordPress2.2.xの場合はファイル名がlink-template.phpです。どちらも変更箇所は殆ど同じと思いますが、ここでは2.0.x系で紹介します。

function next_posts_link($label='Next Page »', $max_page=0) {
    global $paged, $result, $request, $posts_per_page, $wpdb, $max_num_pages;
    ～～中略～～
    if ( (! is_single()) && (empty($paged) || $nextpage <= $max_page) ) {
        echo '<a href="';
        next_posts($max_page);
        echo '" rel="next">'. preg_replace('/&([^#])(?![a-z]{1,8};)/', '&$1', $label) .'</a>';
    }
}
～中略～
function previous_posts_link($label='« Previous Page') {
    global $paged;
    if ( (!is_single()) && ($paged > 1) ) {
        echo '<a href="';
        previous_posts();
        echo '" rel="prev">'. preg_replace('/&([^#])(?![a-z]{1,8};)/', '&$1', $label) .'</a>';
    }
}

ごちゃごちゃしていますが、ここで書くべきは「rel=”next”」と「rel=”prev”」の2カ所だけ。

a要素のrel属性はリンクの関係性を示すもので、これ自体はmicroformatsでもなんでもないHTMLの仕様として定義されています。検索エンジンロボットにクロールさせないためのrel=”nofollow”などでも使われてますね。

なお、ここでrel属性を指定しているのはインデックスページやアーカイブページに表示される前後ページへのリンクです。個別記事ページにおける前後ページへのリンクではないのでご注意ください。

繰り返したい部分と、それを挿入する区切り位置のclass属性

「class=”autopagerize_page_element”」と「class=”autopagerize_insert_before”」はテーマファイルに追加します。場所は使用しているテーマにもよりますが、私の場合はindex.phpのコンテンツ要素部分内にそれぞれdivで追加しました。

意味構造を持たないdiv要素が増えて気持ち悪いのですが、フロートの都合などで今はこうしています。

表示スタイルの調整

AutoPagerizeで表示されるページの区切りは以下のようなタグになっていました。

<hr/>
<p>page:<a class="autopagerize_link" href="http://次のページのアドレス">2</a></p>

標準のままだとあまり目立たず区切りが分かりづらいので、hrを画像にしてみます。

div#content hr {
    border:none;
    margin-top:12px;
    height:20px;
    background:#002244 url(http://blog.blueblack.net/wp-content/uploads/AutoPagerizeHr.jpg) no-repeat 50% 50%;
}

「div#content」の部分はお使いのテーマに併せて修正するか、必要なければ消してしまってください。

hr要素を画像化

これでちょっと見やすくなりました。

rel=”next”属性を指定する際の注意点

さて、以上の方法でインデックスページやアーカイブページ、検索ページなどについてはAutoPagerizeが使えるようになります。

こうなると、できれば個別の記事ページも対応させたいと思うかも知れませんが、その際にはちょっと注意していただきたいことがあります。

AutoPagerizeが使用するrel=”next”という属性は、「順序が定められた一覧の文書中での、次の文書へのリンク」を示します。

一般的にブログの個別記事において「次の記事」は新しい日付の記事を意味しますので、AutoPagerizeで下方へスクロールした際に「前の記事」を表示したくても、古い記事のURLに対してrel=”next”を指定することは望ましくありません。(と、私は思います)

ページのナビゲーションとして右矢印でリンクが表示されているような場所以外では、このような意味構造との不適合が起こりかねないのでご注意ください。(このため当サイトでも個別記事はAutoPagerizeに対応していません)

参考ページ

知らないと損する!Webを素早く閲覧できる便利ツール「Minibuffer + AutoPagerize + LDRize」 - 佐藤伸吾のフィジカル/ユビキタスコンピューティングblog
Greasemonkeyがよく分からんという方は、こちらを参考にお試しください。LDRizeやMinibufferBCも便利です。
AutoPagerize0.0.11 - SWDYH
コメント欄でotsuneさんが指摘されているとおり、汎用的なマークアップのためにはrel=”prev”も入れるべきです。
Shishimushi - サイトを AutoPagerize に対応した
最初にサイト側でAutoPagerizeに対応できると知ったのは、こちらのページからでした。こちらでは割り切って「前のページ」のリンクにrel=”next”を設定されています。個人的にはこのように不適当と思われるマークアップが蔓延するのは怖いのですが。

LDRize専用のmicroformatsについて | 3.14
詳しくは知らないのですが、LDRizeでも同じようにサイト側で対応する方法があるよう(？)です。こちらの記事では、特定の機能だけのために特別なHTMLの要素を追加するのは良くないよねという話(だと思う)が書かれています。私も同じような気持ち悪さを感じているので、これに同意します。 GRDDLでメタデータを取得するLDRize | 3.14
こちらは上の記事の続き。GRDDLを使い、HTML自体には余分なマークアップをせずに対応させるための方法(模索中？)について解説されています。なじみのない人には意味不明かも知れませんが、個人的には非常に興味深いです。(私も詳しくはありませんが一応GRDDLについての記事を書いたことがあったりします)

昔から言われていたように、キラーアプリが登場することでじわじわとセマンティック・ウェブの波が来てるかもよ、と。

(※ちなみに、ページの表示がおかしくなっていたいら教えてください)

追記＠2008-03-20

勢いで記事を書き終えてから「WordPress AutoPagerize」で検索したら、案の定すでに丁寧な解説記事がありました。併せて参考にしてください。

WordPress サイトの AutoPagerize 対応 - JACO-BASS
WordPress ME 2.2.3をAutoPagerizeのMicroformatsに対応させた - あいぷらぷら；

ナレッジエース