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一日一新

とある申込み
Seiji Aihara / 相原 征爾

Seiji Aihara / 相原 征爾

『独立は最強の解決法』という理念のもと、長期的な視野と絶妙なバランス感覚で人生を楽しむことをサポートする、ひとりビジネス専門税理士・ライフコンサルタント。

簿記がわからなくても、一から経理ができるようにお伝えします。
遠方・オンライン・スポット対応可能です。
クラウド会計の導入・ペーパーレス化・経理業務効率化・各種シミュレーション・独立支援が得意。
Windows・Mac両対応。

音楽、映画、インターネット、カレー、クラフトビールが大好き。

詳しいプロフィールはこちら
税理士事務所のHPはこちら