プラグインなし！ソーシャルボタンを設置する方法｜ WordPress カスタマイズ

プラグインを使用しないでソーシャルボタンをWordPressに設置する方法についてのメモです。Twitterやfacebookなど、ひとつひとつ設定してコードを取得するのが大変なので、ひとくくりにして単純にコピペで使えるようにしました。このサイトについてるソーシャルボタンのようにオーソドックスな仕上がりになっています（2015/05月時点）。
【環境】WordPress : Twenty Fourteen

スポンサーリンク
[adSense]

function.phpに追記しよう！
content.phpに追記しよう！
footer.phpに追記しよう！
style.cssに追記しよう！
ひとこと

function.phpに追記しよう！
content.phpに追記しよう！
footer.phpに追記しよう！
style.cssに追記しよう！
ひとこと

function.phpに追記しよう！

やることとしては、上にある目次のような内容になってます。
まずfunction.php（子テーマ）ファイルに下記を追加します。
[php]
// ソーシャルボタン(Vertical)
function SocialButtonVertical()
{ ?>
<ul>
<li>
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-width="100" data-layout="button_count" data-show-faces="false" data-send="false">&nbsp;
</div>
</li>
<li>
<a href="https://twitter.com/share" data-count="horizontal" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-lang="en">&nbsp;</a>
</li>
<li>
<div class="wsbl_hatena_button"><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="standard" title="はてなブックマークに追加"> <img src="//b.hatena.ne.jp/images/entry-button/button-only@2x.png" alt="はてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
</div>
</li>
<li>
<div class="g-plusone" data-size="medium" data-href="<?php the_permalink(); ?>">&nbsp;
</div>
</li>
</ul>
<?php }
[/php]
※functions.phpファイルの扱いにはバックアップをとって、十分にご注意ください。詳細については「WordPress functions.php 子テーマ作成～編集、追記方法について　エラーを防ぐ！｜WP カスタマイズ」をご参考に。

もしWordPressを絶対リンクではなく意図的に相対リンクにしている場合は、Tweetボタンのバルーンが表示されずキチンと機能しません。
６行目のリンク
data-url="<?php the_permalink(); ?>"
を↓
data-url="http://example.com<?php the_permalink(); ?>"
のようにURLを追加しておくことで、不具合を防ぐことができます。
※WordPressが絶対リンクの場合は何もしないで大丈夫です。

content.phpに追記しよう！

content.php（子テーマ）のソーシャルボタンを配置したい場所、例えばTwenty Fourteenの記事下に挿入する場合は…
[php firstline=”44″]
) );
?>
</div><!– .entry-content –>
<?php endif; ?>

<?php the_tags( ‘<footer class="entry-meta"><span class="tag-links">’, ”, ‘</span></footer>’ ); ?>
</article><!– #post-## –>
</pre>
46行目と47行目の間に下記のコードを挿入して、function.phpのコードを呼び出します。
<pre class="brush:php">
<div class="scl_btn">
<?php SocialButtonVertical(); ?>
</div>
[/php]

footer.phpに追記しよう！

footer.php（子テーマ）ファイルの</body>タグのすぐ上に下記を追加してJava Scriptを読み込みます。
[php]
<!– Facebook SclBtn –>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id; js.async = true;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<!– Twitter SclBtn –>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);</script>
<!– HtnSclBtn –>
<script type="text/javascript" src="//b.hatena.ne.jp/js/bookmark_button.js" charset="utf-8" async="async"></script>
<!– GglOneBtn –>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js" async="async">{lang: ‘ja’}</script>
[/php]
ソーシャルボタンのJavaScriptはページの読み込み時間を高速にする為に、「非同期読み込み」が可能です。
FacebookやGoogle+1では、非同期の読み込み方法が推奨されているようです。
例えばFacebookやTwitterの場合、js.async = true; を追加、はてなとgoogle＋1は、async=”async”を追加することで非同期化します。

style.cssに追記しよう！

各ソーシャルボタンの配置などのレイアウトはstyle.cssに追記して調整します。
下記はご参考まで。幅やマージンなどはブログなどのデザインに合うように編集してください。
[css]
/*social button******************/
.scl_btn {
max-width:652px;
margin:0 30px;
padding:8px 0 5px 0 !important;
border-top:1px dashed #ddd;
border-bottom:1px dashed #ddd;
}
.scl_btn ul {
list-style-type:none;
margin-left:0px;
}
.scl_btn li {
float:left;
margin-right:10px;
}