みらしん

読者の未来に、少しでも役立つネタを配信するブログ。

STINGER サイドバーにSNS・RSSフォローボタンをつける方法

更新日:

RSS・SNSボタン_記事用アイキャッチ画像

WordPress(STINGERテーマ)を使用していて、サイドバーにSNS・RSSのフォローボタンをつけたい方に、読んでほしい記事です。

ブログのサイドバーに、ツイッターやRSSなどのフォローを促すため、以下のようなボタンを設置しました。

RSS・SNSボタン_画像1

フォローボタンのデザイン、変更方法は下記のブログを参考にしています(というか、ほぼ一緒です)。

【参考】【STINGER5】サイドバーにSNSフォローボタンを追加してみよう

もし同じように、サイドバーにSNSやRSSのフォローボタンをつけようと考えているのであれば、本記事を参考にカスタマイズを進めてみてください。

なお、カスタマイズにあたり、まだ子テーマを作成していないようであれば、先に子テーマを作成することをオススメします。

【参考】WordPress 子テーマのメリットと作成方法

スポンサーリンク

PC300×250




「sidebar.php」のコード変更

まず、使用しているFTPサーバーの子テーマフォルダ内に「sidebar.php」がない場合は、親テーマのフォルダ内にある「sidebar.php」のファイルをそのまま子テーマ内にコピーします。
(子テーマを使用しない方は、親テーマの「sidebar.php」を直接いじっていきます。)

RSS・SNSボタン_画像2

コピーした「sidebar.php」内の下記コードを変更します。

▪︎変更箇所(変更前)

<?php } ?>
<!-- RSSボタンです -->
<div class="rssbox"> <a href="<?php echo home_url(); ?>/?feed=rss2"><i class="fa fa-rss-square"></i>&nbsp;購読する</a> </div>
<!-- RSSボタンここまで -->

▪︎変更箇所(変更後)

<!-- 201XXXXX_カスタマイズ_SNS・RSSフォローボタン ここから-->
<h4 class="menu_underh2">Follow Me!</h4>
<div class="follow">
<ul>
<li class="twitter"><a href="【※ここにTwitterのアカウントURL(例:https://twitter.com/miraisyndrome)を入れてくだい※】" target="_blank">Twitter</a></li>
<li class="facebook"><a href="【※ここにFacebookのアカウントURL(例:http://www.facebook.com/miraisyndrome)を入れてくだい※】" target="_blank">Facebook</a></li>
<li class="rss"><a href="<?php echo home_url(); ?>/?feed=rss2" target="_blank">RSS</a></li>
<li class="feedly"><a href="http://feedly.com/index.html#subscription%2Ffeed%2F【※ここにサイトのドメイン名(例:【※ここにドメイン名(例:mirasin.com)を入れてくだい※】%2Ffeed%2F" target="_blank">Feedly</a></li>
</ul>
</div>
<!-- 201XXXXX_カスタマイズ_SNS・RSSフォローボタン ここまで-->

「Twitter」のコードにある【※ここにTwitterのアカウントURL(例:https://twitter.com/miraisyndrome)を入れてくだい※】を墨付きカッコも含めて削除し、自分のアカウントURLを入れてください。

「Facebook」のコードにある【※ここにFacebookのアカウントURL(例:http://www.facebook.com/miraisyndrome)を入れてくだい※】を墨付きカッコも含めて削除し、自分のアカウントURLを入れてください。

【参考】Facebookで自分のURLを確認する方法

「feedly」のコードにある【※ここにドメイン名(例:mirasin.com)を入れてくだい※】を墨付きカッコも含めて削除し、自分のドメイン名を入れてください。

「Follow Me!」の文字を変えたいようであれば、コードの<h4></h4>の中に書かれている文字を変更してください。

PHP言語で「<!– –>」内の記載内容は、サイトに反映されない内容になるので、コードの最初と最後に「変更時の日付」「変更内容」などのメモを残しておくと、コードを見返すときに便利になります。(無くても反映されます。)

「style.css」のコード変更

「style.css」はデザインを担当するコードのため、SNS・RSSのフォローボタンのデザインはここで実装していきます。

子テーマの「style.css」を開き、「/*media Queries タブレットサイズ」より前に、以下のコードを追記します。
(子テーマを使用しない方は、親テーマの「style.css」を直接いじっていきます。)

/* 201XXXXX_カスタマイズ_SNS・RSSフォローボタン ここから */
.follow {
	margin-bottom:24px;
}


.follow ul{
	position:relative;
	margin:-10px 5 5 -10px;
	overflow:hidden;
}

.follow ul li{
	float:left;
	width:46%;
	margin:10px 0 0 10px;
	}
	
.follow ul li a{
	padding-top:10px;
	padding-bottom:5px;
	display:block;
	-webkit-transition:	.2s ease-in-out;
	transition:	.2s ease-in-out;
	color:#fff;
	font-family:'Open Sans',sans-serif;
	text-align:center;
	text-decoration:none;
	}
	
.follow ul li a::before{
	position:relative;
	display:block;
	-webkit-transition:.15s ease-in-out;
	transition:.15s ease-in-out;
	color:#fff;
	font-size:26px;
	font-family: "FontAwesome";
	}
	
.follow ul li a:hover{
	background-color:#fff;
	}
	
	
.follow ul .twitter a{
	background-color:#00aced;
	border:2px solid #00aced;
	}
.follow ul .twitter a::before{
	content: "\f099";
	}
	
.follow .twitter a:hover,.follow .twitter a:hover::before{
	color:#00aced;
	}


.follow .facebook a{
	background-color:#3c5a98;
	border:2px solid #3c5a98;
	}
	
.follow .facebook a::before{
	content:"\f09a";
	}
	
.follow .facebook a:hover,.follow .facebook a:hover::before{
	color:#3c5a98;
	}

.follow ul .rss a{
	background-color:#ffb53c;
	border:2px solid #ffb53c;
	}
.follow ul .rss a::before{
	content:"\f09e";
	}
.follow ul .rss a:hover,.follow ul .rss a:hover::before{
	color:#ffb53c;
	}
.follow ul .feedly a{
	background-color:#87c040;
	border:2px solid #87c040;
	}
.follow ul .feedly a::before{
	content:"\f09e";
	}
.follow ul .feedly a:hover,.follow ul
 .feedly a:hover::before{
	 color:#87c040;
	 }

/* 201XXXXX_カスタマイズ_SNS・RSSフォローボタン ここまで */

CSS言語で「/* */」内の記載内容は、サイトに反映されない内容になるので、コードの最初と最後に「変更時の日付」「変更内容」などのメモを残しておくと、コードを見返すときに便利になります。(無くても反映されます。)

これで、サイドバーにSNS・RSSのフォローボタンをつけることができました。

RSS・SNSボタン_画像2

それぞれのボタンを押してみて、それぞれのサービスが立ち上がれば完成です。

もし、サイト上にエラーが表示されてしまった場合、コードの記述をミスしている可能性があるので、コードの記述を確かめてみてください。

もし、何もデザインに変化がない場合、古いデザインのキャッシュが残っている可能性があるので、キャッシュの削除をおこなってから、サイトの更新をおこなってみてください。

【参考】キャッシュ(インターネット一時ファイル)の削除方法

本記事は、以上になります。

コピペですぐに実装ができると思いますよ。

お付き合い頂き、ありがとうございました!

PC300×250




PC300×250




-ブログ運営

Copyright© みらしん , 2020 All Rights Reserved.