ウェビメモ

wordpress

和洋風の｢カッチョイイはてブ数表示｣をあなたのwordpressに実装しよう！

こんにちは、霙です！
突然ですが、公式のはてなブックマーク数ってテキスト表示が変じゃあないですか？？
よーく見てみましょう。fontサイズ、それで良いんですか？？

いつもtwitterで仲良くしてくださっている和洋風のするぷさんが、素晴らしいjavascriptを発表されていましたので、せっかくですから皆さんもカッチョイイ表示にカスタマイズしちゃいましょう！！

ウィジェットの「最近の投稿」に実装してみよう！

今回参考にしたのはするぷさんが書かれた以下の記事。

何やら、はてブ件数取得 API を使って数を読み込み→表示してくれるらしいですね。MovableType、WordPress、Chrome KeyConfig用３パターンのどシンプルなコードを掲載してくれています:)

わたしはこれをWordPressのウィジェットに実装させたかったので、上記記事に書かれているコードを少し変える必要がありました。（するぷさんに聞きながらやりました）
ウィジェットに実装するには以下の３ステップでおｋです。

①header.phpにコードを追加

まずは上記記事の「headに突っ込むJavaScriptコード」および「headに突っ込むCSSコード」をそのままあなたのheader.phpに突っ込んでください。

②default-widgets.phpを書き換える

wp-includes/default-widgets.phpの547行目付近を見てください。
（2.7以前の場合はwp-includes/widgets.php）

<ul>
<?php  while ($r->have_posts()) : $r->the_post(); ?>
<li><a href="<?php the_permalink() ?>" title="<?php echo esc_attr(get_the_title() ? get_the_title() : get_the_ID()); ?>"><?php if ( get_the_title() ) the_title(); else the_ID(); ?></a></li>
<?php endwhile; ?>
</ul>

こんな感じの表示があるので、 ＜li＞～＜/li＞ の部分を下記のコードと差し替えちゃいましょう。

<li><script type="text/javascript">var url = "<?php the_permalink() ?>";</script><a href="<?php the_permalink() ?>"><?php the_title(); ?></a>  
<script src="http://api.b.st-hatena.com/entry.count?url=<?php the_permalink() ?>&callback=hatebTxt"></script></li>

③完成！

はいこれだけ！

fontサイズが直前の文章と同一なのがわかりますか？？公式のブックマーク数のようにガタガタっとなったりしません！すっきりキレイ！！

さいごに

設定にもよると思いますが、文字色が赤くならなかったりアンダーラインが引かれなかったりする方は各自でCSSを書き換えてくださいね。
はてブ数の表示にまでこだわって、あなたのWordPressをより素敵なサイトにしちゃいましょう♪

和洋風するぷさん、本当にありがとうございました！！！
以上、霙でした！

Ranking