さんまがおいしい季節だねー(´・ω・`)

WordPress テーマを AutoPagerize に対応させる

JavaScript,WordPress — タグ: , , , — さくら @ 2009/08/06 3:17

さくらです、こんばんわ☆彡
この☆の横のミの逆みたいな字ってどうやったら IME から入力できるのかしら…いつもコピペしてんだけどw

ということで何がということなのか本人も全くもって不明だけど、試しに WordPress のテンプレ作った際に AutoPagerize に対応させてみたのでそのやり方メモっときます。以下のやり方で既存のテンプレも AutoPagerize 対応できるはずです。

ちなみに AutoPagerize ってのは 次へ リンクを自動で展開してくれる GreaseMonkey スクリプトです。詳しくはウノウラボの Webブラウジングを快適にするAutoPagerize って記事見てもらった方が分かりやすいと思うけど。

HTML を AutoPagerize 対応するために必要な修正内容は作者様のブログにて説明されているとおり、

  1. AutoPagerize するリンクの <a> タグに rel=”next” を付ける
  2. AutoPagerize が読み込んだページを展開する先の要素に class=”autopagerize_page_element” を付ける

の二点です。HTML だけの話ですと難しいことは全くありませんが、WordPress テーマっていうかテンプレートっていうかの場合、これらを修正するために以下の変更を行う必要が(通常)あります。

  1. next_posts_link() または get_next_posts_link() が返す <a> タグに rel=”next” を追加するために next_posts_link_attributes フィルタにフックを指定する
  2. index.php のコンテントを読み込むメインループの親要素に class=”autopagerize_page_element” を付ける

では実際のやり方について説明します。

next_posts_link_attributes フィルタにフックを指定する

なんで rel=”next” を付けるために next_posts_link_attributes フィルタにフックを指定しないといけないかって言うと、WordPress テーマではトップページとかカテゴリページの前のエントリへのリンクを普通 next_posts_link() か get_next_posts_link() 関数を使って取得してるからなの。

以下は WordPress のデフォルト(kubrick)の index.php からコピペしたテーマの一部(インデントは変えてます)なんだけど、next_posts_link() が次のページへのリンクを表示してる部分になってるのね。

<div class="navigation">
  <div class="alignleft">
    <?php next_posts_link(__('&laquo; Older Entries', 'kubrick')) ?>
  </div>
  <div class="alignright">
    <?php previous_posts_link(__('Newer Entries &lraquo;', 'kubrick')) ?>
  </div>
</div>

で next_posts_link() を外すと次のページへのリンクを表示できなくなっちゃうから、テーマのこの辺を直接修正して rel=”next” を追加することはできないって訳。なんで next_posts_link() 関数で呼んでる get_next_posts_link() 関数が <a> タグの属性をセットするのに使う next_posts_link_attributes フィルタに自前の関数を用意してあげないといけないの。

用意する関数はだいたいこんな感じ。これをテーマディレクトリの functions.php に追加してね。テーマディレクトリに functions.php が無かったら、新しく作ったら良いわよ。(WordPress はテーマディレクトリにある functions.php ってファイルを特別扱いするから、新しく作るときはこのファイル名で作らないと意味ないわよ。)

function my_auto_pagerize_rel_filter($content) {
    return "{$content} rel=\"next\"";
}
add_filter('next_posts_link_attributes', 'my_auto_pagerize_rel_filter');

add_filter を呼び出さないとフィルタが追加されないから、単に関数を作るだけじゃなくて上のコードを丸まんまコピペしてね。もし functions.php に init フックが設定されていたら、上の add_filter はそのフックから呼び出すようにした方が良いわ。具体的には

function theme_init() {
    // ...
}
add_action('init', 'theme_init');

みたいな感じで add_action(‘init’, …) が呼び出されていたらそのフック関数の中で上の add_filter が実行されるようにしてね。

どちらの場合もフィルタがちゃんとセットされたら、rel=”next” が <a> タグに追加されるはずなので、ここまでファイルを編集したら一旦ブラウザから動作確認した方が良いと思うわ。

メインループの親要素に class=”autopagerize_page_element” を付ける

rel=”next” の修正が終わったら、AutoPagerize が読み込んだページを追加する先の要素に class=”autopagerize_page_element” を追加するの。WordPress のデフォルト(kubrick)のテーマだと、index.php に以下の部分があるから、

<?php get_header(); ?>

        <div id="content" class="narrowcolumn">

        <?php if (have_posts()) : ?>

                <?php while (have_posts()) : the_post(); ?>

id=”content” の <div> タグの class 属性を class=”narrowcolumn autopagerize_page_element” に変えたら良いわ。メインループは普通、have_posts() を条件に the_content() を囲んでるループになってると思うんで、上と違うようならその辺基準に探してね。HTML 読めればだいたい分かると思うんでこれ以上の細かい説明はしないわね。

ちなみに個別記事用の single.php は AutoPagerize とあんまり相性良くなさそうなの。そっちも同じように直せない訳じゃないんだけど、そんな感じなのでここでは説明しないわね。ヤりたい人は、ガンバってww

ついでに書いとくと、AutoPagerize 対応させるためのプラグイン書こうかと思ったんだけど、autopagerize_page_element を足す先をテーマを全く修正せずにプラグインから指定できないっぽかったのでとりあえず断念しますた。

ぐりもんオン!

両方とも終わったら、AutoPagerize を有効にしてブログ開いたら、勝手に次ページを読み込むようになるの。いっちょアガリね!

ただこれ問題がありまして、AutoPagerize で読み込まれたページはそのままだとアクセス解析してくれないのね。アクセス解析用の <script> タグの位置とか調整したらちゃんと計上してくれるのかもしれないけど、まあその辺ちゃんとしたい人にはあんまりお薦めできません。

ちなみに今さくらが使ってるテーマ、自分で作ったやつなんだけど、AutoPagerize にも対応してるの。今日の記事は、それ作ってる途中に分かったやり方まとめただけなんだけどねw もうちょっと調整したら wordpress.org にうpする予定なのでこうご期待!!

…つーほどの話でもないかww

ていうか、ブログのカレンダー見たら前の記事から一週間ぐらい空いちゃいそうだったので無理やり書いた記事だったりしてwww

さくら

5件のコメント »

  1. [...] 17:45 WordPress テーマを AutoPagerize に対応させる | ゆっくり…して…イってネ! sakuratan.biz/archives/1094 [...]

    ピンバック by Taraco-sell’s 2DIE | Fly,Fly,TSUCHINOKO — 2009 年 8 月 20 日 @ 23:51
  2. [...] テーマを AutoPagerize に対応させる | ゆっくり…して…イってネ! http://sakuratan.biz/archives/1094 [...]

    ピンバック by TaracoTweet on 2009-08-22 | Fly,Fly,TSUCHINOKO — 2009 年 8 月 22 日 @ 00:34
  3. [...] りすると、アレ? うまくいかないなぁ、と思ってしまうわけですが、よく探していくと、とても細かく説明されているページがありました。   WordPress テーマを AutoPagerize に対応させる [...]

    ピンバック by wordpress2.7にautopagerize | GONT-PRESS — 2010 年 1 月 4 日 @ 22:14
  4. Wow, this article is fastidious, my younger sister is analyzing these things, so I am going to
    convey her.

    コメント by plastic optical fiber — 2014 年 5 月 6 日 @ 04:50
  5. I have fun with, lead to I found exactly what I was looking for.
    You’ve ended my four day lengthy hunt! God Bless you man. Have a great day.
    Bye

    コメント by forex fury review — 2015 年 12 月 31 日 @ 20:00

この投稿へのコメントの RSS フィード。 TrackBack URI

コメントする

Copyright © 2017 さくらたんどっとびーず | powered by WordPress with Barecity