WordPressにはてなスターを設置するときに詰まるところ

はてなスターを設置しようとして,普通にやってもうまくいかなかったのでメモとしてまとめました.一応これではてなスターが表示されるようになりました.

はてなスターから取ってくるもの

はてなスターのページにログインし,[外部のブログサイトを登録する]にURLをいれると表示されるものをコピーしてくる.以下のようなもの.ただし,*********…の部分はURLによって異なる.

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.Token = '********************************';
</script>

これを,自分の[外観]→[テーマ編集]のheader.phpの</title>の次あたりに貼りつけておく.
これだけでうまくはてなスターが表示されるようになることもあるが,使用しているテンプレートによっては,はてなスターが表示されない場合がある.

自分のブログのスタイルに合わせた設定

Hatena.Star.EntryLoader.headerTagAndClassNameに,[タグ名,クラス名]をセットすることで,そのタグで囲まれた部分の後ろにはてなスターが設置される.タグ名=h1,クラス名=entry-titleの場合次のようになる.これをheader.phpに貼り付ける.

<script type="text/javascript">
Hatena.Star.EntryLoader.headerTagAndClassName = ['h1','entry-title'];
</script>

この場合,

<h1 class='entry-title'><a href='記事のパーマリンク'>記事のタイトル</a></h1>

の後ろにはてなスターが設置される.自分のブログがこういう形式になってない場合は、記事のスタイルを編集する必要がある.エントリのタイトルは<?php the_title(); ?>で、パーマリンクは<?php the_permalink(); ?>で取得できるので,例えば,

<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>

というふうに設定しておけば良い.この設定をするのは,[外観]→[テーマ編集]の,loop.phpとsingle.php.loop.phpは,複数エントリを表示する画面で,single.phpは,単一のエントリを表示する画面.
loop.phpとsingle.phpで,エントリのタイトルを囲むタグが異なる場合は,上記Hatena.Star.EntryLoader.headerTagAndClassNameの設定を,header.phpではなく,loop.phpとsingle.phpの一番上にそれぞれ設定を変えて貼り付ける.

「WordPressにはてなスターを設置するときに詰まるところ」への1件のフィードバック

コメントする