rakuishi.com

[WordPress] はてブ数のテキスト表示＆記事表示プラグインへの導入例

・ WordPress

はてなブックマーク数を画像で表示させている方が、ほとんどだと思います。しかし、画像だとまだ余白がある場合でも、画像の横幅に足りなければ改行されてしまいます。

ですが、テキスト表示させると改行されますし、フォントサイズも整います。画像で表示させるより素敵な感じです。

この記事では、本ブログで使用中の記事表示プラグイン（Popular Posts, Simillar Posts, Recent Posts Plus）に、テキスト表示のはてブを導入する際の設定を書きます。

本記事は、和洋風 ◎ さん、ウェビメモさんの記事を参考にしました。ありがとうございます。

ぺたぺたコードを貼り付ける

以下のコードを「header.php」の <head></head> 内に貼り付けます。

<script type="text/javascript">
  function hatebTxt(count) {
    if (count == 0) {
      return;
    } else {
      document.write("<a href=http://b.hatena.ne.jp/entry/");
      document.write(url);
      if (count < 10) {
        document.write(" class='hatenaA'");
      } else {
        document.write(" class='hatenaB'");
      }
      document.write(" target='_blank'>");
      if (count == 1) {
        document.write(count + " user");
      } else {
        document.write(count + " users");
      }
      document.write("</a>");
    }
  }
</script>

また、「style.css」にスタイル設定を貼り付けます。ここでは、!important 宣言でスタイルを優先させていますが、競合しないのであれば必要ないです。

.hatenaA {
  background: #fff0f0 !important;
  color: #ff6666 !important;
  font-weight: bold !important;
}
.hatenaB {
  background: #ffcccc !important;
  color: #ff0808 !important;
  font-weight: bold !important;
}

各ウィジットへの導入

ここからは僕が使用している最新記事を表示させている Popular Posts、人気記事を表示させている Simillar Posts、関連記事を表示させている Recent Posts Plus に導入する際の設定を書きます。

「ダッシュボード」→「設定」→「Popular Posts」→「Output」にある「Output template」に以下のコードを貼り付けます。

<li>
  <a href="{url}" title="{title}">{title}</a>
  <script type="text/javascript">
    var url = "{url}";
  </script>
  <script src="http://api.b.st-hatena.com/entry.count?url={url}&amp;callback=hatebTxt"></script>
</li>

Recent Posts Plus

「ダッシュボード」→「外観」→「ウィジット」から「Recent Posts Plus」を任意の場所に貼り付けます。で、「Widget Output Template」に以下のコードを貼り付けます。

<li>
  <a title="{TITLE_RAW}" href="{PERMALINK}">{TITLE}</a> ({DATE[Y.m.d]})
  <script type="text/javascript">
    var url = "{PERMALINK}";
  </script>
  <script src="http://api.b.st-hatena.com/entry.count?url={PERMALINK}&amp;callback=hatebTxt"></script>
</li>

Simillar Posts

「ダッシュボード」→「設定」→「Simillar Posts」→「Output」にある「Output template」に以下のコードを貼り付けます。

<li>
  <a href="{url}" title="{title}">{title}</a>
  <script type="text/javascript">
    var url = "{url}";
  </script>
  <script src="http://api.b.st-hatena.com/entry.count?url={url}&amp;callback=hatebTxt"></script>
</li>

おわりに

いかがでしたでしょうか？　僕と同じ記事表示プラグインを使っているとぺたぺた貼るだけで簡単に実装できるはずです（汗）。

テキスト表示させると画像よりも素敵になって、ブログを覗くのが楽しくなりますね。あまり関係ないですが、僕は JavaScript を勉強したいなと思った次第です。