WordPressの記事ページにシンプルなSNSシェアボタンをプラグインなしで追加するカスタマイズ方法です。
個人的に使用頻度が高いTwitter、Facebook、はてな、LINE、Pocketの5つのボタンを実装しています。
各アイコンはFontAwesomeを使用しているので、まだ設定していない場合は予め使えるようにしておいてください。
FontAwesomeの使い方はこちらが詳しいです。
【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう
目次
専用のphpファイルを作る
まずはSNSボタン専用のphpファイルを作ります。
名前は「sns-share.php」とかで良いかと。
VS Codeの場合は、⌘+N、⌘+Sで新しいファイルを名前をつけて保存できます。
ファイルを作ったら、以下のコードをsns-share.phpに追加してください。
<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'｜'.get_bloginfo('name');
?>
<div class="share">
<ul>
<!--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;" target="_blank" rel="nofollow noopener noreferrer">
<i class="fab fa-facebook-f"></i>
<!-- <span> facebook</span> -->
</a>
</li>
<!--ツイートボタン-->
<li class="tweet">
<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;" target="_blank" rel="nofollow noopener noreferrer">
<i class="fab fa-twitter"></i>
<!-- <span> tweet</span> -->
</a>
</li>
<!--はてなボタン-->
<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=510');return false;" target="_blank" rel="nofollow noopener noreferrer"><i class="fa fa-hatena"></i>
<!-- <span> はてブ</span> -->
</a>
</li>
<!-- LINE -->
<li class=line>
<a href="https://social-plugins.line.me/lineit/share?url=<?php echo $url_encode ?>" target="_blank" rel="nofollow noopener noreferrer" title="LINEに送る">
<i class="fab fa-line"></i>
</a>
</li>
<!-- ポケット -->
<li class=pocket>
<a href="//getpocket.com/edit?url=<?php echo $url_encode ?>&title=<?php echo $title_encode ?>" target="_blank" rel="nofollow noopener noreferrer" title="Pocketに保存する">
<i class="fab fa-get-pocket"></i>
</a>
</li>
</ul>
</div>記事ページでボタンを呼び出す
次に、記事ページでsns-share.phpを呼び出します。
お使いのテーマのファイルの中のsingle.phpのシェアボタンを追加したい部分に、以下のコードをコピペしてください。
僕は記事タイトル下と本文直下の2箇所に追加しています。
<!-- シェアボタン -->
<?php get_template_part( 'sns-share' ); ?>デザインを整える
当ブログのSNSシェアボタンのデザインは以下のようなコードになっています。
デフォルトはモノトーンですが、ホバー時にブランドカラーに変わります。
/* シェアボタン */
.fa-hatena:before {
font-family: Verdana;
font-weight: bold;
content: 'B!';
}
.share {
margin-top: 40px;
margin-bottom: 40px;
}
.share ul {
margin: 0;
padding: 0 7rem;
list-style: none;
flex-wrap: wrap;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
.share li {
width: 20%;
margin: 0;
margin-top: 15px;
}
.share li a {
font-size: 1.3rem;
display: block;
padding: 10px;
text-align: center;
text-decoration: none;
color: #555;
transition: ease-in-out, .2s;
}
.share li a:visited {
opacity: .7;
}
.tweet a {
background-color: transparent;
}
.facebook a {
background-color: transparent;
}
.hatena a {
background-color: transparent;
}
.line a {
background-color: transparent;
}
.pocket a {
background-color: transparent;
}
.tweet a:hover {
color: #1DA1F2;
}
.facebook a:hover {
color: #1877f2;
}
.hatena a:hover {
color: #00A4DE;
}
.line a:hover {
color: #1dcd00;
}
.pocket a:hover {
color: #ee4056;
}
@media(max-width: 599px) {
.share li {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 3px;
}
.share li i {
font-size: 1.3em;
padding-top: 3px;
}
.share li span {
display: none;
}
.share ul {
padding: 0 .9rem;
}
.share li a {
font-size: .9rem;
}
}大きさや余白はお好みで調整してください。
サービスメニュー
Postscript執筆後記
最近、早起きに挑戦するために睡眠記録をつけ始めました。まだ全然結果は出ていないのですが、そのうちまた記事にします。
Something New一日一新
とある申込み＼本を出版しました／
＼セルフマガジン無料送付／
