まずはプレーンなソースコード
single.phpやpage.php等のSNSボタンを設置したい箇所に記述
<?php
$share_url = (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
$share_title = get_the_title().'｜'.get_bloginfo('name');
?>
<ul>
<li><a href="http://twitter.com/intent/tweet?text=<?php echo $share_title; ?>&url=<?php echo $share_url; ?>" target="_blank" rel="noopener noreferrer">Twitter</a></li>
<li><a href="https://www.facebook.com/share.php?u=<?php echo $share_url; ?>&t=<?php echo $share_title; ?>" target="_blank" rel="noopener noreferrer">Facebook</a></li>
<li><a href="https://line.me/R/msg/text/?<?php echo $share_title; ?>%0D%0A<?php echo $share_url; ?>" target="_blank" rel="noopener noreferrer">Line</a></li>
<li><a href="http://b.hatena.ne.jp/entry/<?php echo $share_url; ?>" target="_blank" rel="noopener noreferrer">B!</a></li>
<li><a href="http://getpocket.com/edit?url=<?php echo $share_url; ?>&title=<?php echo $share_title; ?>" target="_blank" rel="noopener noreferrer">Pocket</a></li>
</ul>シェアの際に“ページタイトル | サイトのタイトル”が表示されるようにしてます。
single.php等のSNSボタンを設置したい箇所に記述してください。
ページのURLはWordPressの機能は使用せず、単にPHPでURLを取得しています。
Font Awesomeを使用してボタンを作成する
本サイトで使用しているSNSボタンのソースコードです。（このページの下の方に設置しています）
「はてなブックマーク」はFont Awesomeにフォントが無いので、CSSで見栄えを調整します。
Font Awesomeのソースコードを<head>タグ内に設置
CDNを使用します。ソースの設置場所は迷ったら</head>（閉じタグ）前にでも…
header.php内の<head>タグ内
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">SNSボタンのソースを設置したい場所へ記述
single.phpやpage.php等のSNSボタンを設置したい箇所に記述
<?php
$share_url = (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
$share_title = get_the_title().'｜'.get_bloginfo('name');
?>
<div class="sns">
<p class="sns-text">この記事をシェア</p>
<ul class="sns-list">
<li class="sns-item twitter"><a href="http://twitter.com/intent/tweet?text=<?php echo $share_title; ?>&url=<?php echo $share_url; ?>" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter-square"></i></a></li>
<li class="sns-item facebook"><a href="https://www.facebook.com/share.php?u=<?php echo $share_url; ?>&t=<?php echo $share_title; ?>" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-square"></i></a></li>
<li class="sns-item line"><a href="https://line.me/R/msg/text/?<?php echo $share_title; ?>%0D%0A<?php echo $share_url; ?>" target="_blank" rel="noopener noreferrer"><i class="fab fa-line"></i></a></li>
<li class="sns-item hatebu"><a href="http://b.hatena.ne.jp/entry/<?php echo $share_url; ?>" target="_blank" rel="noopener noreferrer">B!</a></li>
<li class="sns-item pocket"><a href="http://getpocket.com/edit?url=<?php echo $share_url; ?>&title=<?php echo $share_title; ?>" target="_blank" rel="noopener noreferrer"><i class="fab fa-get-pocket"></i></a></li>
</ul>
</div>CSSで見た目を整える
style.css
.sns {
margin-top: 50px;
color: #666;
text-align: center;
background-color: #f5f5f5;
padding: 20px 10px;
}
.sns-text {
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin-bottom: 10px;
}
.sns-text::before,
.sns-text::after {
width: 20px;
height: 2px;
border-radius: 3px;
background-color: #666;
content: "";
}
.sns-text::before {
transform: rotate(50deg);
margin-right: 10px;
}
.sns-text::after {
transform: rotate(-50deg);
margin-right: 10px;
}
.sns-list {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.sns-item {
margin: 0 10px;
width: 60px;
height: 60px;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
transition: transform 0.3s;
line-height: 1;
}
.sns-item i {
font-size: 40px;
line-height: 1;
}
.sns-item:hover {
transform: scale(1.05);
}
.sns-item.twitter a {
color: #1DA1F2;
}
.sns-item.facebook a {
color: #3C5A99;
}
.sns-item.line a {
color: #00B900;
}
.sns-item.pocket a {
color: #ee4056;
}
.sns-item.hatebu a {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: #FFF;
background-color: #00A4DE;
width: 36px;
height: 36px;
font-size: 23px;
border-radius: 6px;
font-weight: bold;
}