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

今回は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の勉強もしてみてはいかがでしょうか?
ディスカッション
コメント一覧
まだ、コメントがありません