WordPressでプラグインを使わずにシェアボタンを設置する方法

前回に引き続き、今回はプラグインを使わずにシェアボタンを設置する方法をご紹介します。

やりたい事

当ブログでやりたい事は以下の条件になります。

1. プラグインは使わない。
2. シェアボタンは、twitter、facebook、google+、はてなブックマークを設置。
3. ついでにRSSフィードのボタンも設置したい。
4. 設置場所は記事ページの最後辺り。

設置方法

STEP1：PHPファイルの編集

設置したい場所に以下のコードを追加します。
当ブログではsingle.phpに設置しました。

<div class="site-content site-share">
	<h3>シェアする</h3>
	<?php
		// 記事のURL・タイトル取得
		$canonical_url = get_permalink();
		$title = wp_title( '|', false, 'right' );
		// エンコード処理
		$canonical_url_encode = urlencode($canonical_url);
		$title_encode = urlencode($title);
	?>
	<ul>
		<li><a class="twitter" href="http://twitter.com/intent/tweet?url=<?php echo $canonical_url_encode;?>&text=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"></a></li>
		<li><a class="facebook" href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $canonical_url_encode;?>&amp;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;"></a></li>
		<li><a class="google" href="https://plus.google.com/share?url=<?php echo $canonical_url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;"></a></li>
		<li><a class="hatena" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $canonical_url_encode;?>&title=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;"></a></li>
		<li><a class="feed" href="<?php bloginfo('rss2_url'); ?>" target="_blank"></a></li>
	</ul>
</div>

STEP2：スタイルシートの記述

当ブログでは以下の様なスタイルシートになっています。

.site-share{
  margin: 80px 0 0 !important;
}

.site-share h3{
  font-size: 2.4rem;
  font-weight: normal;
  border: none;
  border-top: 2px solid #0081BA;
  border-bottom: 1px solid #DFDFDF;
  padding: 16px 0 !important;
  margin: 0 0 32px !important;  
}

.site-share ul{
  display: flex;
  justify-content: space-between;
}

.site-share li{
  display: block;
  width: 19%;
}

.site-share li a{
  display: block;
  width: 100%;
  height: 48px;
  border-radius: 5px;
}
.site-share li a.twitter{
  background: #60A8EC url(../images/twitter-icon.svg) no-repeat center center;
  background-size: auto 14px;
}
.site-share li a.facebook{
  background: #3B4E91 url(../images/facebook-icon.svg) no-repeat center center;
  background-size: auto 16px;
}
.site-share li a.google{
  background: #D74E46 url(../images/google-icon.svg) no-repeat center center;
  background-size: auto 14px;
}
.site-share li a.hatena{
  background: #30A1DB url(../images/hatena-icon.svg) no-repeat center center;
  background-size: auto 13px;
}
.site-share li a.feed{
  background: #FB983E url(../images/feed-icon.svg) no-repeat center center;
  background-size: auto 14px;
}

結果

以下のような感じに表示されます。
お好みにカスタマイズをどうぞ♪