WPでプラグインを使わずに全てのページにSNSシェア機能を導入する方法

WordPress

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

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

*今回の記事では、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="shareicon">
<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=完全無料素材&related=SundaisyC" 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>
     
</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に入れ込んでいます。

具体的には、以下のコードの2行目の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(); ?>  //ツイート内テキスト
&via=SundaisyC  //ツイート内に含むユーザ名
&hashtags=完全無料素材 //ハッシュタグ
&related=SundaisyC" //ツイート後に表示されるユーザー
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;
    a {
      font-size: 14px;
      display: block;
      padding: 10px;
      text-align: center;
      text-decoration: none;
      color: #666;
      &: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;
  }

以上が「WPでプラグインを使わずに全てのページにSNSシェア機能を導入する方法」でした。

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

2021年1月28日WordPressphp,WP

Posted by KT