【コピペOK】プラグイン無しで全ページにSNSシェアボタンを導入する方法

WordPress

今回はWordPress（ワードプレス）で全てのページにSNSシェアアイコンを導入する方法を紹介します。

SNSシェアアイコンの導入はテーマの機能やプラグインでも十分可能な場合もありますが、今回はテーマにその機能がない場合や、プラグインをなるべく使いたくないって方に向けてphpをを使って簡単にSNSシェアアイコンを全ページに導入する方法を紹介します。

この記事を理解出来れば、以下のようなSNSシェアボタンデザインが出来て、尚一つのコードを加えるだけで全てのページ（任意）に導入出来るようになります。

https://sundcatch.com/design/1091/

*今回の記事では、phpの基本的な知識が必要になります。知識のない方はAddToAny Share Buttonsのようなプラグインを利用することをお勧めします。

SNSシェアアイコンを導入する方法（プラグイン無し）

全てのページにSNSシェアボタンを導入するには、はじめにsns.phpを作成してSNSシェアボタンを呼び出すときのためのパーツを作成します。

今回の場合はtemplate-partsファイルにsns.phpを入れています。

続いては、作成したsns.phpに以下のコードを記述します。

<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'｜'.get_bloginfo('name');
?>
 
<div class="share">
<ul>
 
<! – tweet -->
<li class="tweet">    
<a href="http://twitter.com/share?text=<?php echo urlencode(the_title_attribute('echo=0')); ?>&url=<?php the_permalink(); ?>&via=SundaisyC&hashtags=任意のハッシュタグ&hashtags=任意のハッシュタグ&hashtags=任意のハッシュタグ&related=任意のアカウント名" rel="nofollow" data-show-count="false" 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-square"></i><span> tweet</span></a>
</li>
 
<! – facebook -->
<li class="facebook">
<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;">
<i class="fab fa-facebook-f"></i><span> share</span>
</a>
</li>
 
<! – LINE -->
<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>"><i class="fab fa-line"></i> <span> LINE</span></a>
</li>
 
<! – hatena -->
<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=800');return false;"><i class="fa fa-hatena"></i><span> はてブ</span>
</a>
</li>

<! – pinterest -->
<li class="pinterest">
<a href="//pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>" target="_blank"><i class="fab fa-pinterest"></i><span> Pinterest</span>
</a>
</li>
   
</ul>
</div>

上記のコードをsns.phpにコピペしたら保存します。

そしたら呼び出したいページのphpファイル内の表示させたい箇所に以下の記述をして下さい。
（今回はtemplate-partsにsns.phpを入れているので以下のディレクトリ指定になってます。それ以外の場合は各自適切に書き換えて下さい。）

<! – snsシェア呼び出し -->
<h4 class="text-center mt-5"><i class="fas fa-share-alt fa-xs"></i> Share</h4>
<?php get_template_part( '/template-parts/sns' ); ?>

すると次のようにSNSシェアボタンが表示されます。これをフッターやサイドバーなど全てのページで読み込んでいるファイルに記述すれば全てのページにSNSシェアボタンが入ることになります。

理屈

どうゆう意味かを知りたい方に向けて、理屈の説明をします。

今回はTwitterを例にして説明します。

Twitterでツイートを投稿するときのURLは実は以下に決まっています。試しに以下のURLをクリックしてみて下さい。（Twitterをログインしてから）するとツイートするためのテキストエリアが表示されるかと思います。

http://twitter.com/share?text=

そして、このURLの文末の「＝」以降に入力した内容がテキスト入力欄に入る文字列になります。

例えば、「＝」以降に「あああああ」と適当に入力してからアクセスすると、以下のようにツイート入力欄に「あああああ」と入力された状況でアクセス出来るのです。

この仕組みを利用してphpでタイトルやツイート入力テキストをURLに入れ込んでいます。

具体的には、以下のコードのurlencode(the_title_attribute('echo=0’)で記事のタイトルを取得しています。<?php the_permalink();>で記事のURLを取得しています。他にもハッシュタグやユーザー名なども含んでいます。コレらを先程のURLに入れ込んでaタグで囲っているだけです。

<a href="http://twitter.com/share?text=<?php echo urlencode(the_title_attribute('echo=0')); ?>&url=<?php the_permalink(); //ツイートのURL?> >&via=ツイート内に含むユーザ名&hashtags=ハッシュタグ&related=ツイート後に表示されるユーザー"
rel="nofollow"
"data-show-count="false"
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-square">
</i><span> tweet</span></a>

最後におまけとして、今回作成したSNSアイコンのSCSSを以下に置いときます。そのまま使うでも良いですし、デザインの参考にして下さい。

SCSS

// SNSシェアアイコン

.fa-hatena:before {
  font-family: Verdana;
  font-weight: bold;
  content: 'B!';
  }
   
  .share {
  margin-top: 1em;
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    &:after {
      display: block;
      clear: both;
      content: '';
      }
    }
  li {
    float: left;
    margin: 0;
    width: 6em;
    a {
      font-size: 14px;
      display: block;
      padding: 10px;
      text-align: center;
      text-decoration: none;
      color:$AtagColor;
      &:hover {
        color: #fff;
        }
      &:visited {
        color: #fff;
        }  
      }
    }
  }

  .tweet a:hover {
  background-color: #55acee;
  }
  .facebook a:hover {
  background-color: #315096;
  }
  .hatena a:hover {
  background-color: #008fde;
  }
  .line a:hover {
  background-color: #00c030;
  }
  .pinterest a:hover {
  background-color: #c60120;
  }


// スマホでの表示 
@media(max-width: 736px) {   
 .share li {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 3px;
  width: 4em;
  i {
    font-size: 1.5em;
    padding-top: 3px;
    }
  span {
    display: none;
    }
  }
}

*アイコンに関してはFontAwesomeを使ってますので別途で読み込んで下さい。
*twitterのハッシュタグは差し替えて下さい。追加する場合は「&related=」ごと追加して下さい。アカウント名は「@」は不要です。

以上が「【コピペOK】プラグイン無しで全ページにSNSシェアボタンを導入する方法」でした。

わかる人にとっては非常に簡単なので、SNSシェア程度ではプラグインは使わずに済みます。わからない人は、コレを機会にプラグインの削減のためにある程度phpの勉強もしてみてはいかがでしょうか？

三浦圭人

最後まで閲覧頂きありがとうございます。
Twitterでは更に細かくWEBリテラシーのネタを発信しています。是非フォローお願い致します。感想/ご意見頂けたら喜びます✨

2021年1月28日WordPressphp,Thema,WP

Posted by KT