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

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

      2016/08/13


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

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

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

RSS・SNSボタン_画像1

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

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

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

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

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

スポンサーリンク

「sidebar.php」のコード変更

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

RSS・SNSボタン_画像2

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

▪︎変更箇所(変更前)

▪︎変更箇所(変更後)

「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」を直接いじっていきます。)

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

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

RSS・SNSボタン_画像2

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

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

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

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

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

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

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

 - ブログ運営