WORDPRESSワードプレス
  • WORDPRESS
  • 2021.1.12

ワードプレスで投稿ページにSNSのシェアボタンを設置する方法

sns.phpを作成して下記の記述をする。


<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'|'.get_bloginfo('name');
?>
<div class="snsBtnBlock">
<ul>
<!--Facebookボタン-->
<li class="snsBtnBlock__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;">
FACEBOOK
</a>
</li>
<!--ツイートボタン-->
<li class="snsBtnBlock__twitter">
<a href="//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
TWITTER
</a>
</li>
<!--LINEボタン-->
<li class="snsBtnBlock__line">
<a href="//social-plugins.line.me/lineit/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;">
LINE
</a>
</li>
<!--はてなボタン-->
<li class="snsBtnBlock__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=510');return false;">
HATENA
</a>
</li>
</ul>
</div>

single.phpの設置したい場所に下記の記述をする。
あとはお好みのデザインにcssで整える。


<?php get_template_part( 'sns' ); ?>

CONTACT
〇〇〇〇へのお問い合わせは、
こちらからお気軽にご連絡ください。