WordPress（STINGERテーマ）を使用していて、サイドバーにSNS・RSSのフォローボタンをつけたい方に、読んでほしい記事です。
ブログのサイドバーに、ツイッターやRSSなどのフォローを促すため、以下のようなボタンを設置しました。
フォローボタンのデザイン、変更方法は下記のブログを参考にしています（というか、ほぼ一緒です）。
【参考】【STINGER5】サイドバーにSNSフォローボタンを追加してみよう
もし同じように、サイドバーにSNSやRSSのフォローボタンをつけようと考えているのであれば、本記事を参考にカスタマイズを進めてみてください。
なお、カスタマイズにあたり、まだ子テーマを作成していないようであれば、先に子テーマを作成することをオススメします。
スポンサーリンク
「sidebar.php」のコード変更
まず、使用しているFTPサーバーの子テーマフォルダ内に「sidebar.php」がない場合は、親テーマのフォルダ内にある「sidebar.php」のファイルをそのまま子テーマ内にコピーします。
（子テーマを使用しない方は、親テーマの「sidebar.php」を直接いじっていきます。）
コピーした「sidebar.php」内の下記コードを変更します。
▪︎変更箇所（変更前）
<?php } ?> <!-- RSSボタンです --> <div class="rssbox"> <a href="<?php echo home_url(); ?>/?feed=rss2"><i class="fa fa-rss-square"></i> 購読する</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を入れてください。
「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のフォローボタンをつけることができました。
それぞれのボタンを押してみて、それぞれのサービスが立ち上がれば完成です。
もし、サイト上にエラーが表示されてしまった場合、コードの記述をミスしている可能性があるので、コードの記述を確かめてみてください。
もし、何もデザインに変化がない場合、古いデザインのキャッシュが残っている可能性があるので、キャッシュの削除をおこなってから、サイトの更新をおこなってみてください。
本記事は、以上になります。
コピペですぐに実装ができると思いますよ。
お付き合い頂き、ありがとうございました！