Web制作

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

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

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

Sharebtn 1

コピペで実装!4つのシェアボタンを設置するための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;
}

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

Sharebtn 2

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

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

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

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

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

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

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

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

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

さいごに・・・

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

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

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

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でみうをフォローしよう!

About

みう

みう (@miu0512)

フリーランス4年を経て起業。ホームページ制作やLP制作を企画からマーケティングまですべて請けているため、「Webコーディネーター」として活動中。

Category

Popular

  • 本日
  • 週間
  • 月間
  • 殿堂

本日の人気記事

週間の人気記事

月間の人気記事

殿堂の人気記事

PAGETOP