はてなブックマーク用ボタンをつける for WP
「このエントリーを含むはてなブックマーク」ボタンと「このエントリーをブックマークに追加」ボタンをWordPressでも使ってみましょう。これらのボタンを追加することで、コメントやブックマークしているユーザーを参照できたり、ブックマークへの登録を補助したり出来ます。
まずは、ボタンとなる画像をダウンロードします。
(
(ファイル名はb_entry.gif、append.gifのままでよいでしょう。
例えばwp-imagesディレクトリなど、画像用のディレクトリにこの2つの画像をアップロードします。テーマを変更しても共通して使いたい画像がある場合は、wp-imagesのような画像ディレクトリにまとめておくと便利です。アップロードしたボタン画像のURLを控えておきましょう。
それでは実際にボタンを追加してみましょう。今回はMEの標準テーマであるJapanを対象に進めていきます。適宜お使いのテーマにあわせて読みかえてください。なお、テーマファイルに手をいれるので、必ずお使いのBlogと同じ文字コードで編集してください。
ボタンをどこに配置するか迷うところですが、多くの方はコメント・トラックバックの脇に配置しているようです。あと多いのは日付の隣でしょうか。個別エントリーページにボタンを付ける場合も、編集するファイルがsingle.phpになるだけで、基本的には同じです。
日付の隣に配置する場合
このように日付の隣にボタンを追加する場合です。
まずwp-contnt/thema/japanフォルダ内index.phpの13行目
<small><?php the_date() ?> - <?php the_time() ?> by <?php the_author() ?></small>
の<?php the_author() ?>と</small>の間にコードを追加して、以下のようにします。
<small><?php the_date() ?> - <?php the_time() ?> by <?php the_author() ?><a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>"><img src="アップロードしたb_entry.gifのURL" width="16" height="12" alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a><a href="http://b.hatena.ne.jp/append?<?php the_permalink() ?>"><img src="アップロードしたappend.gifのURL" alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" width="16" height="12" /></a></small>
2行目から5行目が追加されたコードです。
これをwp-contnt/thema/japanフォルダにアップロードすれば完了です。
コメント・トラックバックの脇に配置する場合
このようにコメントへのリンクの隣にボタンを配置する場合です。
同じくindex.phpの19行目
<p class="postmetadata"><?php _e('Posted in', 'wpj_default'); ?> <?php the_category(', ') ?> <strong>|</strong> <?php edit_post_link(__('Edit', 'wpj_default'),'','<strong>|</strong>'); ?> <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?></p>
の末尾の</p>の前にコードを追加します。追加後の19行目付近は次のようになります。
<p class="postmetadata"><?php _e('Posted in', 'wpj_default'); ?> <?php the_category(', ') ?> <strong>|</strong> <?php edit_post_link(__('Edit', 'wpj_default'),'','<strong>|</strong>'); ?> <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?><strong>|</strong> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>"><img src="アップロードしたb_entry.gifのURL" width="16" height="12" alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a><a href="http://b.hatena.ne.jp/append?<?php the_permalink() ?>"><img src="アップロードしたappend.gifのURL" alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" width="16" height="12" /></a></p>
2行目から5行目までが追加した部分です。
変更したindex.phpをwp-contnt/thema/japanフォルダにアップロードすれば完了です。
ちょっと注意
パーマリンク構造を導入している場合、ボタン画像のURLに注意してください。例えばwp-imagesフォルダにボタン画像がある場合は以下のようにすると間違いがありません。
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>"><img src="<?php bloginfo('url') ?>/wp-images/b_entry.gif" width="16" height="12" alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a><a href="http://b.hatena.ne.jp/append?<?php the_permalink() ?>"><img src="<?php bloginfo('url') ?>/wp-images/append.gif" alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" width="16" height="12" /></a>
少し手を加えてみましょう
このままでもよいのですが、ボタン画像のalt属性やtitle属性に少し手を入れてみましょう。このエントリーを含むはてなブックマーク
の「このエントリー」の部分をエントリーのタイトルにしてみます。
こんな風にしてみます。
alt属性やtitle属性の部分にテンプレートタグのthe_titleを使えばOKです。b_entry.gifの場合を例として示してみます。
<img src="アップロードしたb_entry.gifのURL" width="16" height="12" alt="『<?php the_title(); ?>』を含むはてなブックマーク" title="『<?php the_title(); ?>』を含むはてなブックマーク" /></a>
これで、カーソルをあわせたときにタイトルも表示されます。
