WordPressにはてなスターを

はてなスターを付けてみました。コメントやトラックバックするほどでもないけど、ちょっといいなと思った記事に星を付けて気軽に評価できるサービスです。

もっと早く付けようと思ってたんですが、デフォルトでは個別記事ページのタイトルにリンクがないと表示されないんですね。自分としては、そこにリンクがあるのは気に入らなかった(自分自身にリンクを張ることになる)のと、星を表示する位置を変えたかったので少し調べていました。

ということでリンクなしで表示する方法はないかなと考えてたんですが、どうやらツールの性格上パーマリンクがないと無理な感じです。

詳しい設置方法はこちらにありますが、とりあえずこちらのさりげない「はてなスター」などを参考に以下のようにしてみました(って、ほぼそのまんまですね)。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.EntryLoader.headerTagAndClassName = ['span','hatenastar'];
Hatena.Star.Token = 'hogehogehoge';
</script>

ヘッダの中にHatenaStar.jsとトークンへのリンクの他に、<span class=”hatenastar”>を指定する一行を追加。そして以下のコードをインデックスページ、個別ページ、アーカイブページなどの表示したいところに追加します。

<span class="hatenastar">
<a href="<?php the_permalink() ?>">はてなスター</a>
</span>

あとはスタイルシートでspan.hatenastar adisplay: noneにすればスターだけが表示されます。

タイトルにリンクを張りたくないというこだわりからこうなったんですが、結局「はてなスター」というテキストにパーマリンクを張ることになり、文書構造的にはなんかイマイチ。その点については結局大して意味なかったような気が(汗。好きな位置に表示できるようにはなりましたが、はてなスターはタイトルのすぐ右横に出るのが普通なので、あんまり離れたところに置くと気づかれないかもしれませんね。


コメント

  1. thase
    2007.12.06
    10:24

    はじめまして。こちらを参考に私もWordPressにはてなスターをつけてみました。が、気がついた点が一つあります。参考にされた元記事
    さりげない「はてなスター」http://blog.fuktommy.com/1184165578
    では、class=”dummy”をつけたaタグのみをdisplay:noneしていますが、それを省略してaタグすべてをdisplay:noneしてしまうと、せっかくつけてもらったはてなスターも消えてしまいます。

  2. yozik
    2007.12.06
    23:42

    ふおーー!
    ご指摘ありがとうございます!
    まったく反応がないしそろそろ外そうかと思っていたところですよ。
    いやまったくお恥ずかしい。
    感謝、感謝。

コメントする
コメント