Wordpressにはてなスターの色を変えて設置

Wordpressにはてなスターの色を変えて設置

はてなの新サービス、 はてなスターを設置しました。それとスターの色をこのBlogデザインと調和がとれるように黄色から緑色に変えてみました。

はてなスターはどんなサービスかと言うと、ブログを読んで感じた「ちょっといいな」を気軽に☆にするサービスだそうです。ですから、このBlogでもどんどんスター追加ボタン「 Add Star」をクリックしてください。

ブログに書かれた各エントリーに表示された「 Add Star」ボタンをクリックすることで、簡単に☆を付けることができます。一つのエントリーに対して何個も☆をつけることができます。あなたがブログを読んで感じた「ちょっといいな」を気軽に☆にしてください。

引用元:はてなスターはじめてガイド - Hatena Star

Wordpressはてなスター設置方法

Wordpressにはてなスターを設置するのには、以下のコードを

〜内に挿入するだけです。

コードの2行目のhttp://s.hatena.com/js/Hatena/Star/EntryLoader/WordPress.jsは、Wordpress用のスクリプトです。このスクリプトを使わないデフォルトの状態では

タグの後にはてなスターが設置されるのですが、それを、

タグの後に設置するようにします。

コメント機能を有効にする

コメント機能を有効にするには、はてなのアカウントを取得してログインし、[はてなスター] -> [ホーム] -> [Blogs]から、[外部のブログサイトを登録する]で自分のサイトを登録します。そうすれば追加のトークンってのを得られるので、それを

〜内に挿入します。Wordpress用のスクリプトも忘れずに。

Hatena.Star.Token = ' *****************************';

はてなスターの色(画像)を変える

スターの画像を変更するには、以下のスクリプトを追加するだけです。
Hatena.Star.Star.ImgSrc = ‘画像へのパス’;

僕は、緑色のスター画像 greenstar.gif をテーマディレクトリの下のimagesディレクトリに入れたので、画像へのパスは、<?php bloginfo(‘template_directory’); ?>/images/greenstar.gif なので、

〜内に挿入するコードは以下のようになります。

Hatena.Star.Token = ' ***************';
Hatena.Star.Star.ImgSrc = '<?php bloginfo('template_directory'); ?>/images/greenstar.gif';

コメント機能がいらない人は、Hatena.Star.Token = ‘***************’;を省いても問題無いです。

僕はスターの色を変えただけだけど、これなら色んな画像が使えますね。
他にもコードを読めば色んな事を変更出来ると思う。

参照・参考

massat.jp - WordPressに「はてなスター」を設置してみた

Wordpress ではてなスターを使う « blog.y4su0.com

[観] はてなスターを設置してみました