WordPressでAutopagerize導入

Tweet

Check

　ゴールデンウィークの宿題第2弾はAutopagerizeに対応してみました。

　Autopagerizeというのは、検索サイトのようにいくつもの項目が複数ページにまたがって表示される場合に、次のページを読み込んでしまい、まるで1枚のページのように見られる仕組み。Twitterの発言がページを途切れず延々と下に続くとか、Google検索結果が果てしなく画面下に続くとか、そんな感じの使い方です。

　使うにはブラウザやPCへの設定が必要なのでちょっと大変なのですが、ハマる人には大絶賛される人気ぶり。自分でも最近自宅のMacに設定して便利に使っています。で、せっかくなので自分のブログもAutopagerize対応にいじってみました。

　自分でも今使っているテンプレートが過去ログ見ても5エントリごとにまとめられてしまうので読みにくかったんですな。MTだと1つのカテゴリ全部読めて便利だったんですが……。テンプレートいじって全エントリ表示にしてもいいんですが、それはそれで1回の読み込みに負担かかるしフルブラウザ環境などには重すぎるので、ここはAutopagerizeで読みたい人だけまとめ読みできればいいかなと。

　前置きはこのあたりににしておいて、Autopagerizeにブログを対応させるにはこの3つの要素が必要です。

埋め込みの形式は以下の通りです
link要素またはa要素でrel=”next” (複数あった場合は、先に現れるものが選ばれます)
classでautopagerize_insert_before (複数あった場合は、先に現れるものが選ばれます)
classでautopagerize_page_element (複数指定可、指定したもの全てが挿入されます)

AutoPagerize0.0.11 – SWDYH
http://d.hatena.ne.jp/swdyh/20070701/1183239979

　1つ1つ説明すると、一番最初のrel=”next”は、次の画面に移動するリンクにつけておき、Autopagerizeの目印にします。2つ目のautopagerize_insert_beforeは、次の画面を読み込む位置を指定（これを挿入した後に次ページ以降が読み込まれて表示される）、3つ目のautopagerize_page_elementはAutopagerizeで読み込む部分がどこからどこまでかを指定しています。

　と、文字で書いても相当わかりにくいのでまずは実践。最初のrel=”next”ですが、WordPress向けの便利な解説がありました。ここは各種ブラウザでのAutopagerize導入方法も紹介されているのでオススメですよ。

WordPress をインストールしたディレクトリの /wp-includes/link-template.php というファイルがナビゲーションリンクのテンプレートになっていますので、この中で定義されている、
425行目付近のprevious_post_link 関数と、
538行目付近のnext_posts_link 関数の部分に
PLAIN TEXT
PHP:
echo ‘<a rel=”next” href=”‘;
の様に追加するだけです。

WordPress サイトの AutoPagerize 対応 – JACO-BASS
http://www.jaco-bass.com/blog/2008/02/for-autopagerize-of-wordpress-site/

　行数を探すのは大変なので、該当のファイルをダウンロードしたらprevious_post_linkとnext_posts_linkを検索。該当する記述付近のaタグに追記しませう。うちはこんなかんじです。

function previous_post_link($format=’? %link’, $link=’%title’, $in_same_cat = false, $excluded_categories = ”) {

if ( is_attachment() )
$post = & get_post($GLOBALS[‘post’]->post_parent);
else
$post = get_previous_post($in_same_cat, $excluded_categories);

if ( !$post )
return;

$title = apply_filters(‘the_title’, $post->post_title, $post);
$string = ‘<a rel=”next” href=”‘.get_permalink($post->ID).'”>’;
$link = str_replace(‘%title’, $title, $link);
$link = $pre . $string . $link . ‘</a>’;

$format = str_replace(‘%link’, $link, $format);

echo $format;
}

　これでrel=”next”は対応できたので残り2つを対応。話の流れ上、3つ目のautopagerize_page_elementを先に設定します。これは前述の通りAutopagerizeの対象となる繰り返し部分を設定しますので、うちではここにいれました。

<div id=”post”>
<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>
<div class=”content autopagerize_page_element“>
<div class=”post” id=”post-<?php the_ID(); ?>”>

　これによって、div class=”content”で括られている部分がAutopagerizeによって繰り返し表示されますよ、ということですね。ちなみに最初はdiv id=”post”に並べていたんですが、これはDOM的によろしくないというご指摘いただきましたので今の形にしました。DOMについては下記をドゾー。

Document Object Model – Wikipedia
http://ja.wikipedia.org/wiki/Document_Object_Model

　そして最期にautopagerize_insert_beforeですが、こんな感じに入れました。

<?php get_sidebar(); ?>

<div class=”autopagerize_insert_before”> </div>

<?php get_footer(); ?>

　要はサイドバーを表示した後に入れる、ということ。これ最初はサイドバーの前に入れていたんですが、画面スクロールした瞬間にサイドバーが消えちゃうんですよ……。サイドバーを表示した後に読み込むようにすると、最初の一画面のみサイドバーを表示し、以降はエントリーだけが続くというきれいな流れに。

　導入はインデックスとアーカイブのみにして、シングルポストはそのままに。シングルはそのエントリーのみを読みたいのだから、ページがだらだら続くのもなんか違うのかなあという判断です。おそらく便利に使えるのはカテゴリや月アーカイブだと思いますが、Autopagerizeをお使いの方はご要望や問題点などありましたらぜひおよせくださいませ。

Tweet

Check