はてなダイアリーでお絵描き
2008/02/1
27歳になってしまった記念として、最近お絵描き機能も追加されたはてなダイアリーに、もう少し普通の日記ぽいことを書き始めてみました。
ちゃんと書くときはこっちに、はてダには話すように書いてみようと思います。（最近あんまり書けてないけど。。）
WordPress にはてなスター設置
2007/07/30
今さらの感はありますが、話題の[はてなスター](http://s.hatena.ne.jp/)設置しました。WordPress への設置にあたって少々調整した部分もありますので、一応エントリ。
まず、一般的に、はてなスターを設置するには、ブログが出力する HTML の`head`要素内に以下のような JavaScript を含めます。
すると、リンクを含む`h3`要素を、記事のパーマリンクとタイトルだと検出して自動的にはてなスター機能を付与します。`h3`要素以外をタイトルとしたい場合には以下のような記述を加えます。
Hatena.Star.headerTagAndClassName = [‘h2′,’entry-title’];
これで、リンクを含む、クラス名が`entry-title`の`h2`要素がタイトルとして検出されます。
ここで、このブログに設置するにあたって調整した部分を紹介します。
#### 1. WordPress のテーマファイルを編集せずに設置したい
`head` 要素に JavaScript を含めるには、WordPress のテーマファイルのヘッダ部分に直接 JavaScript の記述を追加してしまうのが手っ取り早いのですが、僕は結構頻繁にテーマファイルを変更するので、できればテーマファイルを編集したくありません。
テーマによらずヘッダを出力するには、そんなプラグインを作ってしまえばよいということで、プラグイン化しました。テーマファイルいじればいいじゃん、と思いもしますが、まあこれも勉強ということで。使いたい人は[こちら](/works/wp-simple-hatenastar)からどうぞ。
追記：さっき気付いたのですが、普通にヘッダを出力すると、WordPress のプレビュー機能が動かなくなってしまいました。おそらく、未公開の記事に対してはてなスターの処理が走ると、どこかで処理が停止してしまうのではないかと。対策として、プレビュー画面の場合（ `is_preview()` が `true` の場合）はヘッダを出力しないようにしました。
### 2. 記事のタイトルの抽出方法を変更したい
上述したように、リンクを含む`h3`要素が記事タイトルとして検出されますが、このブログでは記事のタイトルは`h2`要素に含まれる上、パーマリンク先の記事単独ページではタイトルがリンクになっていません。対策としては、
1. ブログのテーマファイルを変更してタイトルをリンクにする
1. はてなスターの記事検出メソッドを上書きする
の二つが考えられます。ここは「自分のブログを変更してたまるか」という意地で、二つ目の対策を取ります。
記事検出メソッドは の `Hatena.Star.EntryLoader.loadEntries` なので、オリジナルを参考にして、以下のような記述をヘッダに含めました。
[source:js]Hatena.Star.EntryLoader.headerTagAndClassName = [‘h2′,’entry-title’];
Hatena.Star.EntryLoader.loadEntries = function() {
var entries = [];
var c = Hatena.Star.EntryLoader;
var headers = c.getHeaders();
for (var i = 0; i < headers.length; i++) {
var header = headers[i];
var a = header.getElementsByTagName(‘a’)[0];
if (!a) var uri = document.location.href;
else var uri = a.href;
var title = ”;
var cns = header.childNodes;
title = c.scrapeTitle(header);
var cc = c.createCommentContainer();
header.appendChild(cc);
var sc = c.createStarContainer();
header.appendChild(sc);
entries.push({
uri: uri,
title: title,
star_container: sc,
comment_container: cc
});
}
return entries;
}
[/source]
オリジナルから変更したのは以下の二点です。
1. `Hatena.Star.EntryLoader.headerTagAndClassName = [‘h2′,’entry-title’];`を追加し、`entry-title`クラスの`h2`要素をタイトルとして検出するように指定しました。
2. for ループ中で`if (!a) var uri = document.location.href;`とし、`h2.entry-title` 要素の中にリンクが含まれていない場合、ドキュメントの URL をパーマリンクとするようにしました。
これでテーマファイルを変更することなく、記事検出できるようになりました。でもこれ、テーマを変更すると書き直しだな。。。
以上で見事設置できましたが、結構手間がかかりました。
### 参考にさせていただいた情報
[nice_link]
[はてなスター日記 – はてなスターをブログに設置するには](http://d.hatena.ne.jp/hatenastar/20070707)
[massat.jp – WordPressに「はてなスター」を設置してみた](http://massat.jp/2007/07/12/243)
[Fenrir’s BLog – はてなスターのカスタマイズ設置](http://fenrir.naruoka.org/archives/000578.html)
[/nice_link]
43HR 