WordPressでオリジナルのSNSボタンをお手軽に設置する方法

何かと使う機会も多く、都度調べ直すのも面倒なのでコピペ用にメモ。
各SNSには公式のシェアボタンもありますが、読み込むのが遅いのと、横並びにした時に1~2pxずれて調整が必要だったりするので最近はオリジナルのボタンを設置することも多いです。

今回はWordPressでFacebook、Twitter、Google+、Lineの4つのシェアボタンを設置する方法をご紹介します。

設置サンプル

まずはベースとなるhtmlとcssを。

See the Pen zdJMGx by OKD (@OKD) on CodePen.

WordPress用の記述

<div class="snsWrap">
  <div class="snsInner">
    <a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" class="facebook" target="_blank" title="facebookで共有">Facebook</a>
    <a href="http://twitter.com/home?status=<?php echo urlencode(the_title_attribute('echo=0')); ?>%20<?php the_permalink(); ?>%20by%20" class="twitter" target="_blank" title="Twitterで共有">Twitter</a>
    <a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" class="google" target="_blank" title="Google+で共有">Google+</a>
    <a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" class="line" target="_blank" title="LINEで送る">LINE</a>
    </div>
</div>

これで基本的な設置が可能です。
あとはカスタムしたい項目などがあれば調整していきます。
それとLineに関しては基本的にはモバイル対応になるのでPC閲覧時は非表示でも良いですね。