はてなスターのトークンを取得
はてなにログインしてから、はてなスターのページに行き、ユーザーページを開きます（ http://s.hatena.ne.jp/netcraft/ など）。このページで一番下の「外部のブログサイトを登録する」で、自分のブログのURLを入力します。
そうすると、ブログタイトルを自動取得してリストに追加され、以下のメッセージが表示されます。
<
blockquote>以下のコードをブログテンプレートのhead内に追記してください。
うまく表示されない場合ははてなスターをブログに設置するにはをご参照ください。
このメッセージは最初の☆が付けられた際に消えます。
<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.Token = '************';
</script>
このJavaScriptをコピーしておきます（トークンはブログごとに違います）。
WordPressにはてなスターを設置
上記でコピーしたJavaScriptを、WordPressブログ内のHTMLに記述します。記述する場所はどこでも良いのですが、ヘッダーが望ましいでしょう。テンプレートでヘッダーが定義されている場合はそちらに記述しますが、私の場合はPageLinesというテーマを使っているので、WordPress管理画面からPageLines→Site Options→Custom Code→Header Scriptsから入力しました。PageLinesの場合、ここに入力しておくとDBに登録されるので、テンプレートをアップデートしてもカスタムヘッダーは出力されます。
はてな公式サイトによると、これだけで、はてなスターボタンが表示される場合もあるようですが、私の場合は表示されませんでした。そこで、はてなスター日記の解説を読んで、以下のJavaScriptも記述しました。
Hatena.Star.SiteConfig = {
entryNodes: {
'div.hentry-pad': {
uri: 'h1 a',
title: 'h1',
container: 'h1'
},
'hgroup': {
uri: 'h2 a',
title: 'h2',
container: 'h2'
},
'hgroup.post-title': {
uri: 'h4 a',
title: 'h4',
container: 'h4'
}
}
};
この内容は各WordPressのテンプレートに応じて書き換える必要があります。意味としては、divタグのhentry-padクラス内のH1タグの中身の後ろにはてなスターボタンを設置（アーカイブページ用。URL、タイトルはH1から取得）、hgroupタグのH2タグの後ろにもはてなスターボタンを設置（トップページ用）、hgroupタグのpost-titleクラスのh4タグの後ろにもはてなスターを設置という指定になります。この内容は囲みタグに応じて変更しましょう。
注意点としては、見出し要素にはてなスターボタンを設置する場合、その見出しは、パーマリンクを持っていなければいけないということです。また、そのパーマリンクに見出しタグがリンクしていなければいけません。
私のブログの場合のテンプレート修正
私のブログの場合、アーカイブページのタグは、自分自身のページにパーマリンクを貼っていなかったので、PageLinesのテンプレートを以下のように修正しました。修正したファイルは、/wp-content/themes/pagelines/includes/class.posts.phpです。
if( is_page() && pagelines_option('pagetitles') && ! has_filter
( "pagelines_no_page_title_{$pagelines_ID}" ) ) {
$title = sprintf( '>h1 class="entry-title pagetitle"/\</>a href='.get_permalink($post).'/\</%s>/a/\</>/h1/\</',
apply_filters( 'pagelines_post_title_text', get_the_title() ) );
} elseif(!is_page()) {
if ( is_singular() )
$title = sprintf( '>h1 class="entry-title"/\</>a href='.get_permalink($post).'/\</%s>/a/\</>/h1/\</',
apply_filters( 'pagelines_post_title_text', get_the_title() ) );
H1タグ内でget_permalink()を呼ぶように修正しています。
これではてなスターを、アーカイブページ、トップページ、カテゴリーページ、月別アーカイブページ全てに設置できました。
快適なはてなスターライフを！
私のブログは過疎っているブログなので、はてなスターがつくことは滅多にないと思いますが、facebookのいいねと同じくスターをもらえる機会があるならば、ぜひ承認欲求を満たしたいですよねw WordPressやブログに限らず、はてなスターボタンは設置できるので、皆さんも設置されてはいかがでしょうか？次は私のTumblrの方にも設置してみようかな…。
