【STINGER6】購読者数カウント付！SNSボタンに「RSS」「feedly」ボタンを追加するカスタマイズ

SNSボタンに「RSS」と「feedly」を追加する

「STINGER5」までは不揃いだったSNSボタンですが、「STINGER6」からは整ったフラットデザインのものに変わりましたね。

僕は、このボタン結構気に入っています。

今回、このSNSボタンに「RSS」と「feedly」のボタンを追加したので、そのカスタマイズを備忘録的に残しておきます。

「feedly」については、購読者カウント付きでこれが今回のカスタマイズのミソです。
少ないながら、現時点で15名もの方がこのブログを購読してくださっているので、是非とも表示させたくて頑張りました。笑

今回のカスタマイズについては、下記ブログを参考にさせて頂きました。

 

PHPファイルにボタンのコードを追加する

まずは、sns.phpとsns-top.phpに「RSS」と「feedly」それぞれのボタンを追加します。

※子テーマ内にそれぞれのファイルをコピペ、編集してアップロードしています。

<!--はてブボタン--> 
<li class="hatebu"> 
<a href="http://b.hatena.ne.jp/entry/<?php home_url(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="<?php bloginfo('name'); ?>"><i class="fa fa-hatena"></i><span style="font-weight:bold">B!</span>
<?php if(function_exists('get_scc_hatebu')) { 
if( scc_get_share_hatebu( array( 'post_id' => 'home' ) ) !== 0){
echo '<span class="snstext">'.scc_get_share_hatebu( array( 'post_id' => 'home' ) ).'</span>';
}
}?></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

</li>

<!--rssボタン-->
<li class="rss">
<a href="<?php echo home_url(); ?>/?feed=rss2" target="blank"><i class="fa fa-rss"></i> RSS</a></li>

<!--feedlyボタン-->
<li class="feedly">
<a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F【sibatabi.com】%2Ffeed%2F" target="blank"><i class="fa fa-rss"></i> feedly&nbsp; <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a>
</li>

<!--LINEボタン--> 
<li class="line">
<a target="_blank" href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>"><span class="snstext">LINE</span></a>
</li>

上記のように「はてブ」と「LINE」の間にボタンを追加しました。
また、「LINE」については、「LINEへ送る」という文言を「LINE」に変えています。

コピペする場合は、【sibatabi.com】の部分にご自身のドメインを入れてください。

 

CSSで見た目を整える

次にCSSで見た目を整えます。

/* RSS */
.sns .rss a {
	background:#ffb53c;
}
.sns .rss a:hover {
	background:#74a436;
}

.sns .rss .snstext {
	border-left:1px solid #E0776D;
	padding-left:10px;
	margin-left:5px;
}


/* feedly */
.sns .feedly a {
	background:#87c040;
}
.sns .feedly a:hover {
	background:#74a436;
}

.sns .feedly .snstext {
	border-left:1px solid #E0776D;
	padding-left:10px;
	margin-left:5px;
}

上記のように、style.cssの子テーマへ書き込みました。

 

これで、このようにSNSボタンに「RSS」と「feedly」が追加されているはずです。

以上、SNSボタンのカスタマイズでした。