スマートフォンにも適用した自作のSNSシェアボタン

息抜きでPhoneからサイトの確認をしたところ、ナナナナんと「自作のSNSシェアボタン」がみっともない姿をしてた。早速調べたところ「header.phpのheader」の部分に「FontAwesome」のWebフォントを使用するためのタグを追加していなかったことが判明した。

① 自作のSNSシェアボタンのソースコードのファイル作成
　設定したSNSシェアボタンのソースコードのファイル作成←sns.php
　作成した「sns.php」を子テーマ内に格納

<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'｜'.get_bloginfo('name');
?>
<div class="share">
<ul>
    <!--Facebookボタン-->
    <li class="facebooklink">
     <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;"><i class="fa fa-facebook"></i>
    </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;"><i class="fa fa-twitter"></i>
    </a>
    </li>
<li class="pocket">
    <a href="//getpocket.com/edit?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;"><i class="fab fa-get-pocket"></i>
	</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;"><i class="fa fa-hatena"></i>
    </a>
    </li>
    <!--LINEボタン-->
    <li class="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;"><span>LINE</span>
	</a>
    </li>
</ul>
</div>

② content.phpにコードの追加
wordpress/wp-content/themes/子テーマ/template-parts/post「content.php」内にコードを追加
content.phpにコードを追加

	<?php
	if ( is_single() ) {追記→：get_template_part( 'sns' );
		twentyseventeen_entry_footer();
	}
	?>

③ SNSシェアボタンの装飾←style.cssに追加

/*--sns--*/
.fa-hatena:before {
    font-family: Verdana;
    font-weight: bold;
    content: 'B!';
}
.share {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    margin-right: 2em;
}
.share ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.share ul:after {
    display: block;
    clear: both;
    content: '';
}
.share li {
    float: left;
    width: 15%;
    margin: 0 0.5%;
    margin-top: 10px;
}
.share li a {
    font-size: 12px;
    display: block;
    padding: 4px;
    text-align: center;
    text-decoration: none;
    color: #fff;
	  border-radius: 4px; /* 丸み調整 */
    box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26); /* シャドー作成 */

}
.share li a:hover {
    opacity: .8;
	  -ms-transform: translateY(4px);
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: none;

}
.share li a:visited {
    color: #fff;
}
.tweet a {
    background-color: #55acee;
}
.facebooklink a {
    background-color: #315096;
}
.pocket a{
    background-color: #EF4156;
}
.hatena a {
    background-color: #008fde;
}
.line a {
    background-color: #00b900;
}
@media screen and (max-width:768px){
    .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;
    }
}

④ 各NSのアイコン表示
「FontAwesome」のWebフォントを使用（はてなブックマークとLINEは別）←Webアイコンを利用する設定は「header.phpのheader」タグに追加。

　<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

装飾的な意味合いのSNSシェアボタンなので、前もってカスタマイズのスマホ用画面でチェックすれば良かったけど、今度はOK!。