WordPressにはてなスターボタンを設置

はてなスターのトークンを取得

はてなにログインしてから、はてなスターのページに行き、ユーザーページを開きます( http://s.hatena.ne.jp/netcraft/ など)。このページで一番下の「外部のブログサイトを登録する」で、自分のブログのURLを入力します。

そうすると、ブログタイトルを自動取得してリストに追加され、以下のメッセージが表示されます。

<

blockquote>以下のコードをブログテンプレートのhead内に追記してください。
うまく表示されない場合ははてなスターをブログに設置するにはをご参照ください。
このメッセージは最初の☆が付けられた際に消えます。

このJavaScriptをコピーしておきます(トークンはブログごとに違います)。

WordPressにはてなスターを設置

上記でコピーしたJavaScriptを、WordPressブログ内のHTMLに記述します。記述する場所はどこでも良いのですが、ヘッダーが望ましいでしょう。テンプレートでヘッダーが定義されている場合はそちらに記述しますが、私の場合はPageLinesというテーマを使っているので、WordPress管理画面からPageLines→Site Options→Custom Code→Header Scriptsから入力しました。PageLinesの場合、ここに入力しておくとDBに登録されるので、テンプレートをアップデートしてもカスタムヘッダーは出力されます。

はてな公式サイトによると、これだけで、はてなスターボタンが表示される場合もあるようですが、私の場合は表示されませんでした。そこで、はてなスター日記の解説を読んで、以下のJavaScriptも記述しました。

この内容は各WordPressのテンプレートに応じて書き換える必要があります。意味としては、divタグのhentry-padクラス内のH1タグの中身の後ろにはてなスターボタンを設置(アーカイブページ用。URL、タイトルはH1から取得)、hgroupタグのH2タグの後ろにもはてなスターボタンを設置(トップページ用)、hgroupタグのpost-titleクラスのh4タグの後ろにもはてなスターを設置という指定になります。この内容は囲みタグに応じて変更しましょう。

注意点としては、見出し要素にはてなスターボタンを設置する場合、その見出しは、パーマリンクを持っていなければいけないということです。また、そのパーマリンクに見出しタグがリンクしていなければいけません。

私のブログの場合のテンプレート修正

私のブログの場合、アーカイブページのタグは、自分自身のページにパーマリンクを貼っていなかったので、PageLinesのテンプレートを以下のように修正しました。修正したファイルは、/wp-content/themes/pagelines/includes/class.posts.phpです。

[/crayon]

H1タグ内でget_permalink()を呼ぶように修正しています。これにより、アーカイブページのH1タグの出力は以下のようになります。

これではてなスターを、アーカイブページ、トップページ、カテゴリーページ、月別アーカイブページ全てに設置できました。

快適なはてなスターライフを!

私のブログは過疎っているブログなので、はてなスターがつくことは滅多にないと思いますが、facebookのいいねと同じくスターをもらえる機会があるならば、ぜひ承認欲求を満たしたいですよねw WordPressやブログに限らず、はてなスターボタンは設置できるので、皆さんも設置されてはいかがでしょうか?次は私のTumblrの方にも設置してみようかな…。