dogmap.jp

アクセス回数やコメント数・トラックバック数を元に各エントリをランク付けして人気エントリを表示するプラグインPopularity Contest 日本語版を導入しました。
日本語での解説はこの辺りが詳しいです。

んで、人気度をテキストで表示するだけだと寂しかったのでちょっと修正して棒グラフで表示するように変更。
棒グラフは2枚の画像ファイルとCSSで表示しています。

プラグインを有効化すると、本文の後に以下のコードが自動的に挿入されます。

<p class="akpc_pop">人気度： 20%</p>

このまんまでも良いんですが、ちょっと寂しかったので、グラフ表示させることにしました。
まずは、これを吐き出している関数 akpc_content_pop() を修正しましょう。

function akpc_content_pop($str) {
        if (is_feed() || is_admin_page() || is_page()) {
                return $str;
        }
        global $akpc, $post;
//        return $str.'<p class="akpc_pop">'.$akpc->get_post_rank($post->ID).'</p>';
        if (strstr($akpc->get_post_rank($post->ID), '%')) {
          $wk_popularity = preg_replace('/^.* (\d+)%.*$/i', '$1', $akpc->get_post_rank($post->ID));
        } else {
          $wk_popularity = 0;
        }
        return $str.'<dl class="akpc_pop"><dt>'.__('Popularity:', 'alexking.org').'</dt><dd><div style="width:'.$wk_popularity.'%;"><strong>'.$wk_popularity.'%</strong></div></dd></dl>';
}

この修正で、以下のコードを吐き出すようになります。

<dl class="akpc_pop"><dt>人気度:</dt><dd><div style="width:20%;"><strong>20%</strong></div></dd></dl>

あとは、これを棒グラフとして表示してやります。
CSSで以下のように指定すればよいですね。

/* for Popularity */
dl.akpc_pop {
 margin:0;
 padding:0;
 float:right;
 clear:both;
}

dl.akpc_pop dt {
 position:relative;
 display:block;
 float:left;
 width:123px;
 height:12px;
 margin-right:17px;
 font-size:.75em;
 text-align:right;
 line-height:12px;
}

dl.akpc_pop dd {
 position:relative;
 display:block;
 float:left;
 width:123px;
 height:12px;
 margin:0 0 15px;
 padding:0;
 background:url("percentImage.png");
}
* html dl.akpc_pop dd {
 float:none;
}

dl.akpc_pop dd div {
 position:relative;
 float:left;
 background:url("percentImage_back.png");
 height:12px;
 width:75%;
 text-align:right;
}

dl.akpc_pop dd div strong {
 position:absolute;
 font-size:0.75em;
 text-align:left;
 right:0em;
}

CSSで使った画像ファイルを置いておきます。

• percentImage.png
• percentimage_back.png

---

追記：2007年10月5日
導入するだけで簡単に棒グラフ表示するプラグイン Popularity bar graph をリリースしました。
よろしければ、そちらもお試しください。