今回はWordPress（ワードプレス）で全てのページにSNSシェアアイコンを導入する方法を紹介します。
SNSシェアアイコンの導入はテーマの機能やプラグインでも十分可能な場合もありますが、今回はテーマにその機能がない場合や、プラグインをなるべく使いたくないって方に向けてphpをを使って簡単にSNSシェアアイコンを全ページに導入する方法を紹介します。
この記事を理解出来れば、以下のような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="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をログインしてから）するとツイートするためのテキストエリアが表示されるかと思います。
そして、この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を以下に置いときます。そのまま使うでも良いですし、デザインの参考にして下さい。
// 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の勉強もしてみてはいかがでしょうか？
