僕のこのブログはWordPressで運用していますが、以前は、はてなダイアリーでブログを付けていました。

ついさっき、こんなブログを書いたところ(LEDシリコンアサラトが届いた!)、はてなスターを付けたいと言ってくれた人がいたので、対応してみました。

はてなスターの設置方法は「はてなスターをブログに設置するには」というサイトに設置方法が載っていて、ほぼそのとおりだったのですが、HTMLの構造的な問題でちと苦戦しました。

外部ブログにはてなスターを設置する場合、HTML構造がはてなスターに合っていれば、簡単に設置できるようですが、僕のようにWordPressでデザインテーマを他から引っ張ってきた人間にはちと面倒があります。

まず、参照リンク先にある説明のとおり、JavaScriptを読み込むように、head部を編集しました。
$ vi /[Documentルート]/wp-content/themes/grey-matter/header.php
ヘッダ部(<head>~</head>)の最下部に以下を追記。
※順番が大事です。からなず最初にHatenaStar.jsを読み込むようにして下さい。

<script src="http://s.hatena.ne.jp/js/HatenaStar.js" type="text/javascript"></script>
<script type="text/javascript">
Hatena.Star.Token = '**********************';
</script>
Hatena.Star.SiteConfig = {
  entryNodes: {
    'div.content2': [ ←content2というクラスで繰り返される、
      { uri: 'h1 a',title: 'h1',container: 'h1'}  ←h1タグに対してHatena Starを設置する。
    ]
  }
};

僕が使っていたテーマでは、classで繰り返し表示されるようになっていなかったので、「index.php」と「single.php」の記事タイトルとなるh1タグをdiv.content2で囲いました。※ちゃんとコードなりなんなりを読める人ならもっと楽な方法があるかもしれませんね。

そして、Hatena Starの追加ボタンなどを表示させるためには、そのタグにリンクが貼られていないとだめらしいので、single.phpのh1タグの部分に対して、

<h1><?php the_title(); ?></h1>
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Permanent link to this post','grey_matter'); ?>"><?php the_title(); ?></a></h1>

という変更を加えて対応しました!

とりいそぎ自分用メモ的なです。