WordPressのブログ記事にシェアボタンをつける方法【プラグイン非使用】

2020.09.16 2020.10.13

TECH

こんにちは、エソラボの大西です。

今回は、Wordpressの記事にSNSシェアボタンを設置したいけど、プラグインの設置以外のやり方がわからないという方向けの記事となります。

この記事では

プラグインを設置する場合と、コーディングする場合の違い
SNSシェアボタンの設置方法

を書いておりますので、これからコーディングをされるという方はぜひ参考にしてみてください。

プラグインを設置する場合と、コーディングする場合の違い
SNSシェアボタンの設置方法
まとめ

プラグインを設置する場合と、コーディングする場合の違い

WordPressを使ったことがある方であれば、Wordpressの記事にシェアボタンをつけたいと思ったことは一度はあるかと思います。

ただ、その際に検索をするとさまざまな方法が載っていたりし、余計にこんがらがってしまう経験をされたことはありませんか？

実は私もWordPressを勉強し始めた頃は、プラグインでなんでも解決をしようとしていました。

ただ、プラグインは便利な反面、複雑なことをしようとすると有料になってしまったり、出来なかったりします。

そういった時に備えて、今のうちから少しはコーディングができるようになっていると良いかもしれません。

また、他にもプラグインを使用しないメリットとしては

サイト自身の軽量化（SEOで有利になります。）
脆弱性からの解消
アップデートによる不具合の解消

などさまざまなメリットがあります。

これでもうコーディングをするメリットの方が多いことが分かりますよね。

さて次はコーディングの方法をレクチャーしていきます。

SNSシェアボタンの実装方法

今回、例とさせていただくのが、弊社で以前制作させていただきました、こちらのホームページのブログを参考にさせていただきます。

https://www.kissa-sunshine.jp/news/134/

こちらは今、「ツイッター」「フェイスブック」「はてなブログ」「LINE」

の４つのシェアボタンを設置しております。

SNSシェアボタンの解説写真

みなさんがシェアボタンを設置する際も、大きくはこちらのSNSを使用されることが多いかと思いますので、こちらでご説明をさせていただきます。

まずは、single.phpに下記のPHPのソースコードを追加します。

<?php
$share_url=get_permalink();
$share_title=get_the_title();
?>

こちらはどういうソースコードかというと、

share_urlという関数に、get_permalink()というWordpressのパーマリンクを取得する関数を入れ、

share_titleという関数に、get_the_title()というWordpressのページタイトルを取得する関数を入れているというだけです。

こちらをする意味としては、WordPressのブログページのURLは記事によって変わるため、URLを絶対パスで指定することができないのでPHPを使用して動的にURLを取得しているというだけとなります。

そして、あとは各SNSのシェアボタンをしているだけです。

<!-- ツイッターです -->
<div class="share__icon">
<a href="//twitter.com/share?text=<?=$share_title?>&url=<?=$share_url?>" title="Twitterでシェア" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/blog/tw.png" alt=""></a>
</div>
<!-- フェイスブックです -->
<div class="share__icon">
<a href="http://www.facebook.com/share.php?u=<?=$share_url?>" title="Facebookでシェア" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/blog/fb.png" alt=""></a>
</div>
<!-- はてなブックマークです -->
<div class="share__icon">
<a href="https://b.hatena.ne.jp/entry/<?=$share_url?>" data-hatena-bookmark-layout="basic-label-counter" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加" target="_blank">
<img src="<?php echo get_template_directory_uri(); ?>/images/blog/hatebu.png" alt="">
</a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</div>
<!-- LINEです -->
<div class="share__icon">
<a href="https://social-plugins.line.me/lineit/share?url=<?=$share_url?>" target="_blank">
<img src="<?php echo get_template_directory_uri(); ?>/images/blog/line.png" alt="">
</a>
</div>