WordPressのブログにはてなブックマークボタンを表示させる

はてなブックマークボタンを表示する

このブログはWordPressで書いている。

ソーシャルメディアアイコンはAll in One SEO Packのソーシャルメディア（過去記事参照）にて表示しているのだが海外のプラグインという事もありFacebookやTwitterには対応しているが「はてなブックマーク」には対応していない。

「はてなブックマーク」も対応しているSNSアイコンを表示するプラグインを探してみたのだがイマイチ気に入ったものが無かった。

仕方がないのでとりあえずプラグインを使わない方法で「はてなブックマークボタン」を表示する事にした。

尚、毎回記事に「はてなブックマーク」ボタンを貼り付けるのは手間なのでsidebar.phpを編集して表示されるようにした。

他のSNS関連のアイコンとはちょっと離れた所に表示されてしまうのがイマイチだけど、そのうち気に入ったプラグインが見つかったらそちらに変更するつもりなので暫定的な対応と割り切って追加をした時の備忘録。

誰かの参考になれば幸いです。

設定方法

はてなブックマークのユーザ登録（任意）

まずははてなブックマークのページからユーザ登録を行う。

尚、WordPressのブログに「はてなブックマーク」ボタンを表示させるだけであればユーザ登録する必要は無い。

自分は「はてなブックマーク」を使ってみたかったのでユーザ登録を行った。

「本登録のお願い」のメールが来るので本登録する

プロフィールを一通り設定して「はてなブックマーク」側の設定は終了

はてなブックマークボタン用のコードを取得する

はてなブックマークボタンのページのアクセスしてコードを取得する

<a class="hatena-bookmark-button" title="このエントリーをはてなブックマークに追加" href="http://b.hatena.ne.jp/entry/s/<?php the_permalink(); ?> /" data-hatena-bookmark-layout="basic-label-counter" data-hatena-bookmark-lang="ja">
<img style="border: none;" src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20"></a>
<script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

ブログに表示する

取得したコードをphpファイルに貼り付けてボタンが表示されるようにする。

最初はsingle.phpを編集したのだが表示位置がイマイチな気がしたので結局sidebar.phpを編集してサイドバーに表示する事にした。

尚、この辺はWordPressのテーマ（このブログはHuemanを使っている）によっても違う時があるので色々と試行錯誤してみる。

８行目に上記コードを貼り付けた

　　・
　　・
　　・
<?php hu_print_social_links() ; ?>
</div>
<?php endif; ?>
<?php if ( hu_get_option('post-nav' ) =='s1') { get_template_part('parts/post-nav'); } ?>
<a href="hatena-bookmark-button" title="このエントリーをはてなブックマークに追加" href="http://b.hatena.ne.jp/entry/s/<?php the_permalink(); ?> /" data-hatena-bookmark-layout="basic-label-counter" data-hatena-bookmark-lang="ja">
<img style="border: none;" src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20"></a>
<script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<?php if( is_page_template('page-templates/child-menu.php') ): ?>
<ul class=”child-menu group”>
<?php wp_list_pages('title_li=&sort_column=menu_order&depth=3'); ?>
</ul>
<?php endif; ?>
<?php hu_print_widgets_in_location('s1') ?>
</div><!–/.sidebar-content–>
</div><!–/.sidebar–>

その他

sidebar.phpはテーマのファイルを直接編集したわけでない。

子テーマを作成しているので以下の手順で編集した。

１．子テーマのディレクトリに移動して親テーマからsidebar.phpをコピーする。

cd /var/www/wordpress/wp-content/themes/hueman-child
sudo cp ./../hueman/sidebar.php ./

２．子テーマのsidebar.phpを編集する（上記参照）

３．chownで所有者やグループをwww-data（ubuntu OS の場合、www-dataが apache等のWEBサーバーを操作するデフォルトのユーザとグループ）に変更する

cd /var/www
sudo chown -R www-data:www-data wordpress

以上で「はてなブックマークボタン」の追加は終了。

この記事が何処かで誰かの役に立つことを願っている。

尚、当記事中の商品へのリンクはAmazonアソシエイトへのリンクが含まれています。Amazonのアソシエイトとして、当メディアは適格販売により収入を得ていますのでご了承ください。