現在利用しているWordPressテーマHueman。
WordPressのテーマページからでなくリンク先の作者のホームページからダウンロードすることでSNSボタンなどの機能がついた完全版を入手することができます。
ただ導入当初からページ右側に表示されるはずのGoogle+のSNSボタンだけが表示されない不具合が発生していました。
またSNSボタンを表示させているsharrre.phpでははてなブックマークには対応していないため今回不具合の修正ついでにはてなブックマークのボタンも追加しました。
1. Google+のシェアボタンの表示
管理画面から外観→テーマ編集
sharrre.phpの44行目を以下のように変更。
urlCurl: '<?php echo get_template_directory_uri() .'/js/sharrre.php'; ?>',
↓
urlCurl: '',
ついでに他のシェアボタンが四角に対してTwitterだけがそうでないのでsharrre.phpの44行目を以下のように変更。
template: '<a class="box" href="#"><div class="count" href="#">{total}</div><div class="share"><i class="fa fa-twitter"></i></div></a>',
↓
template: '<a class="box" href="#"><div class="count" href="#">{total}</div><div class="share"><i class="fa fa-twitter-square"></i></div></a>',
2. はてなブックマークボタンの追加
先ほど編集していたsharrre.phpの6行目、
<div style=”text-align: center; … の下に以下のコードを追加。
<div style="text-align: center; margin-top:30px;"><a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title=""><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="24" height="24" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></div>
ボタンは公式のボタンコードを利用。
大きさを合わせるために1辺24pxにしました。
この記事の右側に表示されていると思いますが、思ってた以上にはてなボタンが他のシェアボタンとマッチしていて結構気に入っています。
コメント