【WordPress】SNSシェアボタンを作成する方法

作成:2020.06.14 05:00 更新:2021-02-11T03:23:47Z

この記事ではWordPressにSNSのシェアボタンを作成する方法を記載します。

- 手順

手順

実装方法はいろいろあると思いますが、この手順では

SNSシェアボタンのPHPファイルsns.phpを作成
記事下からsns.phpを読み込む

の方法で作成しています。

SNSシェアボタンのPHPファイル`sns.php`を作成する。

まずは、以下の内容のsns.phpを作成します。このコードではアイコンフォントにicomoonを使用していますが、FontAwesomeの場合は<i class="icon icon-facebook"></i>のclassを変更してください。

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

<div  class="sns-share">
<ul>
<!--Facebook-->
<li  class="facebooklink">
<a  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;"  title="Facebookでシェア">
<i  class="icon icon-facebook"></i><span> facebook</span>
</a>
</li>
<!--Twitter-->
<li  class="tweet">
<a  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;"  title="twitterでシェア">
<i  class="icon icon-twitter"></i><span> twitter</span>
</a>
</li>
<!--LINE-->
<li  class="line">
<a  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;"  title="LINEでシェア">
<i  class="icon icon-line"></i><span> LINE</span>
</a>
</li>
<!--はてな-->
<li  class="hatena">
<a  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;"  title="はてブでシェア">
<i  class="icon icon-hatebu"></i><span> はてブ</span>
</a>
</li>
<!--Pocket-->
<li  class="pocket">
<a  href="//getpocket.com/edit?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;"  title="Pocketでシェア">
<i  class="icon icon-pocket"></i><span> Pocket</span>
</a>
</li>
</ul>
</div>

`sns.php`をテーマのフォルダの下に配置する

作成したsns.phpをwp-content\themes\<テーマフォルダ>\sns.phpに配置します。

CSSでボタンを装飾する

テーマのstyle.cssに以下を追加します。

/*
 * SNSシェアボタン
 */
.sns-share {
  margin-top: 40px;
  margin-bottom: 40px;
  margin-right: 0;
}
.sns-share  ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sns-share  ul:after {
  display: block;
  clear: both;
  content: "";
}
.sns-share  li {
  float: left;
  width: 20%;
  margin: 0;
  margin-top: 15px;
}
.sns-share  li  a {
  font-size: 14px;
  display: block;
  padding: 10px;
  text-align: center;
  text-decoration: none  !important;
  color: #fff;
}
.sns-share  li  a:hover {
  color: #fff;
  opacity: 0.8;
}
.sns-share  li  a:visited {
  color: #fff;
}
.tweet  a {
  background-color: #55acee;
}
.facebooklink  a {
  background-color: #315096;
}
.line  a {
  background-color: #00b900;
}
.hatena  a {
  background-color: #008fde;
}
.pocket  a {
  background-color: #ef4156;
}

記事コンテンツ下に`sns.php`を挿入する

親テーマのファイルを変更したくないため、function.phpでthe_contentにフィルターを追加し記事コンテンツ下にsns.phpを挿入します。

/*
 *ウィジェットをフィルターフックにセット
 */
add_filter('the_content','my_content');
function  my_content($content){
  if(!is_single()){
    return  $content;
  }

  // sns.phpを取得する
  ob_start();
  get_template_part( 'parts/sns' );
  $sns_share = ob_get_contents();
  ob_end_clean();

  // 記事
  $new_content = '';
  $new_content  .=  $content;
  $new_content  .=  $sns_share;

  return  $new_content;
}

最後まで読んでいただきありがとうございます。
また読んでくださいませ。
そんじゃーね。