【プラグインなし】ワードプレスでソーシャルボタン（SNSシェアボタン）を設置する方法（コピペOK）

悩んでる人

ワードプレスを使っているけど、SNSのシェアボタンを設置したいんだけど、おすすめのプラグインはどれかなぁ。プラグインなしで簡単にできるならそれでもいいかなぁと思ってます。

という質問に答えていきます。

MARUO

ちなみにボクはワードプレスを使い続けて12年になるWEBデザイナー兼フロントエンジニアです。
そんなボクが答えていきますね！

ワードプレスの初心者で、
プラグインに頼らざるを得ない人にはややハードルが高いので
プラグインなしでのSNSボタンの実装はある程度コーディングスキルがある人におすすめしてます。

Contents

SNSボタンをプラグインなしでワードプレスに実装する理由
1. SNSボタンのアイコン（header.php）
2. SNSボタンだけのファイルを作成（sns.php）
3. SNSボタンをCSSでデザイン
4. SNSボタンを設置する

SNSボタンをプラグインなしでワードプレスに実装する理由

プラグインを使わない理由は、

カスタマイズできない、自由なデザイン・入れたいSNSが入れられない
多くのプラグインを使うことで、サイトの速度が遅くなってしまう
他のプラグインとの互換性やアップデートによる不具合の心配

カスタマイズできないとサイトにあった自由なデザインに変更することができません。
それに自分が入れたいSNSが選んだプラグインにはないこともあります。
とくにLINEがそのケースが多いです。

プラグインを多くワードプレスにインストールすると、
サイト速度が遅くなりSEO対策に影響し検索順位が下がるし、
せっかくサイトに来てもらっても読み込みが遅いことで離脱率が上がってしまいます。

また、ワードプレスのアップデートやPHPなどのアップデートにより、
使っているプラグインがエラーを起こし、サイトエラーが発生してしまうなんてことも起こり得ます。

1. SNSボタンのアイコン（header.php）

各SNSのアイコンは、アイコンWEBフォントのFont Awesome 5を使用します。

使用中のワードプレスのテーマ内にあるheader.phpの<head>〜</head>内に下記のcssを追記します。
今回はCDNで利用する前提で書いています。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

※2020年12月時点ではバージョン5.15.1が最新です。
最新バージョンを確認したい方はこちらをご覧ください。

2. SNSボタンだけのファイルを作成（sns.php）

次に挿入したいSNSシェアボタンの一覧を一つのphpファイルに保存しましょう。
今回は、sns.phpとします。

sns.phpを使用中のワードプレスのテーマ内に新規作成します。
下記は「Twitter」「Facebook」「はてなブックマーク」「LINE」の4つのSNSシェアボタンのコードとになります。

<?php
  $url_encode=urlencode(get_permalink());
  $title_encode=urlencode(get_the_title()).'｜'.get_bloginfo('name');
?>

<ul class="sns-list">

  <li><a class="flowbtn1 fl_tw1" href="//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fab fa-twitter"></i></a></li>

  <li><a class="flowbtn1 fl_fb1" href="//www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fab fa-facebook-f"></i><div>Facebook</div></a></li>

  <li><a class="flowbtn1 fl_hb1" href="//b.hatena.ne.jp/entry/<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;"><i class="fas fa-bold"></i></a></li>

  <li><a class="flowbtn1 fl_li1" href="//social-plugins.line.me/lineit/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;"><i class="fab fa-line"></i></a></li>

</ul>

3. SNSボタンをCSSでデザイン

続いてCSSでデザインしていきましょう。
こちらは、使用中のワードプレスのテーマ内のstyle.cssもしくは、
カスタマイズ用のCSSに追記します。

/* ボタン全体 */
.flowbtn1{
  border-radius:50%;
  position:relative;
  display:inline-block;
  width:50px;
  height:50px;
  font-size:30px;
  color:#fff!important;
  text-decoration:none;
  transition:.5s;
}

.flowbtn1 i{
  position:absolute;
  top:50%;
  left:50%;
  -ms-transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}

ul.sns-list{
  padding:0!important;
  list-style:none!important;
}

.sns-list{
  display:flex;
  flex-flow:row wrap;
}

.sns-list li{
  text-align:center !important;
  margin:10px;
}
.flowbtn1:hover{
  -webkit-transform:translateY(-5px);
  -ms-transform:translateY(-5px);
  transform:translateY(-5px);
}

/* Twitter */
.fl_tw1{
  background:linear-gradient(135deg, #13f1fc 0%,#0470dc 100%);
}

/* Facebook */
.fl_fb1{
  background: linear-gradient(135deg, #6699ff 0%,#3b5998 100%);
}
/* はてブ */
.fl_hb1{
  background: linear-gradient(to bottom, #1fbccd 0%, #1c91d4 84%);
  font-size:25px;
}
/* LINE */
.fl_li1{
  background: linear-gradient(135deg, #3a9278 0%,#00c300 100%);
}