はてなブックマーク用ボタンをつける 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行目

  1. <small><?php the_date() ?> - <?php the_time() ?> by <?php the_author() ?></small>

<?php the_author() ?></small>の間にコードを追加して、以下のようにします。

  1. <small><?php the_date() ?> - <?php the_time() ?> by <?php the_author() ?>
  2. <a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>">
  3. <img src="アップロードしたb_entry.gifのURL" width="16" height="12" alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a>
  4. <a href="http://b.hatena.ne.jp/append?<?php the_permalink() ?>">
  5. <img src="アップロードしたappend.gifのURL" alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" width="16" height="12" /></a>
  6. </small>

2行目から5行目が追加されたコードです。

これをwp-contnt/thema/japanフォルダにアップロードすれば完了です。

コメント・トラックバックの脇に配置する場合

このようにコメントへのリンクの隣にボタンを配置する場合です。
コメントへのリンクの脇にボタンを追加する場合

同じくindex.phpの19行目

  1. <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行目付近は次のようになります。

  1. <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 (%)')); ?>
  2. <strong>|</strong> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>">
  3. <img src="アップロードしたb_entry.gifのURL" width="16" height="12" alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a>
  4. <a href="http://b.hatena.ne.jp/append?<?php the_permalink() ?>">
  5. <img src="アップロードしたappend.gifのURL" alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" width="16" height="12" /></a>
  6. </p>

2行目から5行目までが追加した部分です。

変更したindex.phpをwp-contnt/thema/japanフォルダにアップロードすれば完了です。

ちょっと注意

パーマリンク構造を導入している場合、ボタン画像のURLに注意してください。例えばwp-imagesフォルダにボタン画像がある場合は以下のようにすると間違いがありません。

  1. <a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>">
  2. <img src="<?php bloginfo('url') ?>/wp-images/b_entry.gif" width="16" height="12" alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a>
  3. <a href="http://b.hatena.ne.jp/append?<?php the_permalink() ?>">
  4. <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の場合を例として示してみます。

  1. <img src="アップロードしたb_entry.gifのURL" width="16" height="12" alt="『<?php the_title(); ?>』を含むはてなブックマーク" title="『<?php the_title(); ?>』を含むはてなブックマーク" /></a>

これで、カーソルをあわせたときにタイトルも表示されます。

『はてなブックマーク用ボタンをつける for WP』を含むはてなブックマーク 『はてなブックマーク用ボタンをつける for WP』をはてなブックマークに追加

0 トラックバック & ピンバック

  1. WEBデザイン・翻訳の peacock union » Wordpressに、はてなブックマークのアイコンを表示する

    [...] http://www.peacock-union.com/library/hatebo.htm Knowledge of WP  >  はてなブックマーク用ボタンをつける for WP [...]

    ピンバック by WEBデザイン・翻訳の peacock union » Wordpressに、はてなブックマークのアイコンを表示する — 2006年9月17日 @ 19:46:41

  2. はてなスターとSBM(一部)に対応 – Design My Future

    [...] 参考にしたところ:はてなブックマーク用ボタンをつける for WP、wordpressにはてなブックマークボタンとlivedoor クリップボタンを貼り付ける方法 [...]

    ピンバック by はてなスターとSBM(一部)に対応 - Design My Future — 2009年1月15日 @ 21:40:38

  3. SIer魂

    はてなの「B」をつけてみた(゚∀゚ )

    以下の記事を参考に、はてなブックマークボタンを付けてみました。

     ・はてなブックマーク用ボタンをつける for WP
     ・自分のブログに「↑B」アイコンを表示する

    でも、はてなブ…

    トラックバック by SIer魂 — 2009年2月18日 @ 21:46:40

  4. ‘Save This Page’ Button « blog.shimazu.org

    [...] はてなブックマーク用ボタンをつける for WP [...]

    ピンバック by ‘Save This Page’ Button « blog.shimazu.org — 2010年9月19日 @ 02:45:44

コメントはまだありません

RSS feed for comments on this post