[M]コピペで実装！プラグインなしでWordPressの記事シェアボタンを自作して設置

こんにちは！みう(@miu0512）です。WordPressでWebサイトやブログを作る時に、シェアボタンってどうしていますか？私はプラグインなしのオリジナルシェアボタンを記事の本文上下に自作で設置しています。今回は私が設置しているシェアボタンをそのまま載せてみました。

実際に表示させるとこんな感じになります

コピペで実装！４つのシェアボタンを設置するためのHTML・CSSタグ

[HTML]まず、headの中にWebフォント読み込み用のタグを設置

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

次に、シェアボタン本体を設置

<ul class="s_social">
  <?php $url_encode=urlencode(get_permalink()); $title_encode=urlencode(get_the_title()); ?>
  <!-- Facebook -->
  <li class="facebook">
    <a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" target="_blank" onclick="javascript:window.open(this.href, '', 'width=700,height=500,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes');return false;"><i class="fa fa-facebook"></i></a>
  </li>
  <!-- Twitter -->
  <li class="twitter">
    <a href="" target="_blank" onclick="javascript:window.open('http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton', '', 'width=700,height=500,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes');return false;"><i class="fa fa-twitter"></i></a>
  </li>
  <!-- Hatena -->
  <li class="hatebu">
    <a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>" target="_blank" onclick="javascript:window.open(this.href, '', 'width=700,height=500,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes');return false;"><i class="fa-hatena"></i></a>
  </li>
  <!-- Pocket -->
  <li class="pocket">
    <a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>" target="_blank" onclick="javascript:window.open(this.href, '', 'width=700,height=500,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes');return false;"><i class="fa fa-get-pocket"></i></a>
  </li>
</ul>

[CSS]シェアボタンの装飾は各自お好みで行ってください

.s_social{
  display: flex;
  display: -webkit-flex;
  margin:20px 0;
  justify-content:space-between;
}

.s_social li{
  width:25%;
  text-align:center;
}

.s_social li a{
  display:block;
  padding:10px;
  font-size:150%;
  color:#fff;
}

.s_social .facebook a{
  background:#3B5998;
}
.s_social .twitter a{
  background:#00ACEE;
}
.s_social .hatebu a{
  background:#5D8AC1;
}
.s_social .pocket a{
  background:#F03E51;
}

はてなアイコン「B!」を表示させるためのCSS

.fa-hatena:before {
    content: "B!";
    font-family: Verdana;
    font-weight: bold;
}

ボタンを押すとポップアップでこんな風に表示されます

メンテナンスを楽にする「独自PHPファイル」

以前もツイートボタンのツイート数表示がなくなってしまったり、Facebookの仕様が変わったりと、シェアボタンって急に修正しなければいけないですよね。

そういう時に、テンプレート内に何箇所にも設置しているタグをいちいち書き換えるのは結構骨が折れます。

そのため、私は独自PHPファイルを作成して、テンプレートに読み込ませるようにしています。

STEP1　PHPファイルを作ってテーマ内にアップロード

上記で載せたタグをメモ帳などにペーストして保存。ファイル名は「single_social.php」のような感じでOKだと思います。

STEP2　テンプレート内の表示したい場所に独自タグを設置

設置したい場所に以下のタグを貼り付けるだけでOK

<?php get_template_part('single_social'); ?>

さいごに・・・

他にもシェアボタンは沢山ありますが、ひとまず代表的なものを挙げてみました。プラグインで実装すると、設置は簡単なのですが、どうしても融通がきかないことが多いです。さらに突然の仕様変更に対応できないプラグインが多いため、シェアボタンは自作で設置してみると良いかもしれません。

最後までお付き合いいだだきありがとうございます！

これからも、みう(@miu0512)を応援していただけたら嬉しいです！