STINGER8でRSSとfeedlyを記事下のSNSボタンに追加・設置する方法

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

STINGER8では記事の下に「Twitter」や「Facebook」などを含む、６種類のSNSボタンがデフォルトで設置されています。

しかし、その中にはブログの更新情報などを素早く確認することができる「RSS」や「feedly」のボタンないので、ユーザーにリピーターとなってもらう機会を逃してしまうかもしれません。

そんな心配な日々からおさらばする為に、できるだけ早いうちに対策しておいた方が良いかと思います。

自分のブログのリピーターとなってもらえることによって、安定したアクセスを獲得できるようになるので、SNSボタンに「RSS」「feedly」を追加していきましょう。

それではSTINGER8のSNSボタンに追加して設置していく方法をご紹介します。

「RSS・feedly」ボタンを追加する方法

記事下のSNSボタンに「RSS」「feedly」ボタンを追加するには、STINGER8の子テーマにある「sns.php」と「sns-top.php」ファイルを編集していきます。

投稿ページ内とトップページ内にあるSNSボタンは、それぞれ読み込むコードが分けられているので、２種類のファイルを編集する必要があります。

ただ、編集するコードや内容はほとんど同じなので、同様の作業を行うだけで簡単に変更ができます。

また、繰り返しお伝えしていることですが、テーマファイルの編集は子テーマで行うようにすることをオススメします。

ファイル編集で不都合が起きる場合もありますのでバックアップを取っておくか、タブを複数開いてすぐに編集前の状態に戻せるよう準備しておきましょう。

「sns.php」ファイルを編集する

まずはワードプレス管理画面のメニュー内から、「外観」⇒『テーマの編集』をクリックして下さい。

子テーマ内に「sns.php」がない場合は、FTPソフトで親テーマからファイルをアップロードすることができます。

「sns.php」を開いたら、ファイルの下部に以下のコードがあると思います。

	</li>

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

</div>

ファイル内にはそれぞれのSNSに対応したコードが記載されていて、記載されている順番でボタンが並んでいます。

ここではLINEボタンの後に「RSS」「feedly」を表示させたいので、以下のように色のついている部分のコードを追記します。

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

	<!--RSSボタン-->
	<li class="rss">
		<a href="<?php echo home_url(); ?>/?feed=rss2" target="blank"><i class="fa fa-rss"></i><span class="snstext">RSS</span></a>
	</li>
 
	<!--Feedlyボタン-->
	<li class="feedly">
		<a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2FブログURL%2Ffeed%2F" target="blank"><i class="fa fa-rss"></i><span class="snstext">feedly</span><?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a>
	</li>

</ul>

</div>

13列目のコード内にある「ブログURL」のところに、運営されているブログやサイトのURLを入力して下さい。

変更ができたら下にある『ファイルを更新』をクリックしましょう。

「sns-top.php」ファイルの方も、同様の流れでコードを追加してファイルを更新していきましょう。

「style.css」でデザインを編集する

２つのファイルを変更しただけではまだ表示されていないので、子テーマの「style.css」でデザインを整えます。

ファイルを開いたら、以下のコードを「style.css」内にコピー&ペーストします。

/* RSS */
.sns .rss a {
    background: #ffb53c;/*背景色*/
}
.sns .rss a:hover {
    background: #e09900;/*ホバー時の背景色*/
}
.sns .fa-rss {
    border-right: 1px solid #8b4513;/*ラインの太さ・色*/
    padding-right: 15px;/*アイコンとの間隔*/
}

/* Feedly */
.sns .feedly a {
    background: #87c040;/*背景色*/
}
.sns .feedly a:hover {
    background: #74a436;/*ホバー時の背景色*/
}
.sns .fa-rss {
    border-right: 1px solid #556b2f;/*ラインの太さ・色*/
    padding-right: 15px;/*アイコンとの間隔*/
}

上記のコードはSTINGER8のデフォルトで使用されているデザインのものと同様になります。

後は下にある『ファイルを更新』をクリックすれば、投稿記事下のSNSボタンに「RSS」「feedly」ボタンの追加及び設置が完了となります。

正常に反映されていれば、このように表示されているかと思いますが、もし上手く反映されていない場合はブラウザキャッシュを削除してから再度更新を行ってみて下さい。

SNSボタンの数を減らしたい方は

今回の「RSS」「feedly」ボタン追加で合わせて８種類のSNSボタンが表示されることになります。

こんなにボタンは必要ないという方は、「コメントアウト」を行うことで不要なボタンを非表示にすることができます。

先程編集した「sns.php」「sns-top.php」のファイル内に、記載されたSNSの各コードから非表示にしたいものを選びます。

例えばLINEボタンが不要な場合は以下のようにコードを記述します。

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

対象となるコードを「<!– –>」で囲むことで簡単に非表示にすることができ、追記したコメントアウト用のコードを削除することで、すぐにボタンを復活させることも可能です。

SNSボタンの数を減らしたいと考えている方は、ぜひ試してみて下さい。