WordPressの使い方

【STINGER8】SNSボタン「Google+」を削除して「feedly」を追加する方法

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

しかしこの中にある「Google+」は2019年4月をもって個人向けサービスが終了しています。よってこのSNSボタンを設置する必要性はもう無いということですね。

ということでこの記事では、いらなくなった「Google+」のボタンを削除して、空いた枠に別のSNSボタンを追加する方法をご紹介します。試しに今回は「feedly」を設置してみます。

「Google+」ボタンの削除方法

デフォルトの「Google+」ボタンを削除する為には「STINGER8」の子テーマ内にある「sns-top.php」と「sns.php」の2種類のファイルを編集します。

sns-top.php」はTOPページのSNSボタンコードを読み込むファイル、「sns.php」は投稿ページ内のコードを読み込むファイルとそれぞれコードを読み込むファイルが分けられているので、必ずどちらも編集する必要があります。

しかし難しいことは何もなく同じ作業を繰り返すだけなのでとっても簡単!

そして何度も繰り返しお伝えしていることと思いますが、ファイルの変更を行う際は親テーマではなく必ず子テーマを使用するようにして下さいね。

どうして親テーマを編集してはいけないの?そもそも親テーマ子テーマって何?という方は下記の記事を参考にしてみて下さい。

 

子テーマの「sns-top.php」と「sns.php」を編集する

WordPressの「ダッシュボード」にあるメニューから「外観」>「テーマエディター」と進みます。

ここで子テーマにある「sns-top.php」と「sns.php」を選択するのですが、これらのファイルは本来親テーマにしか存在しないファイルです。編集したい場合は親テーマから必要なファイルを子テーマ内にコピーしてきて使用します。
もしまだ上記2つのファイルがない!という方は親テーマに直接手は加えず、下記の記事を参考にコピーをお願いします。やり方は簡単でサクッとできますよ!

「Google+」ボタンを削除(非表示)にする

「sns-top.php」と「sns.php」、どちらから編集しても構いません。私は「sns-top.php」の方が順番的に上にあったのでこちらから編集してます(適当)
ファイル内に以下の「Google+」ボタンのコードがあると思います。<!––Google+1ボタン––>~</li>までをまるっと消してもいいのですが、

以下のように対象となるコードを「<!– –>」で囲むことで削除しなくても非表示(コメントアウト化)することができます。削除してしまうのがちょっと不安な方は非表示にしておくのがオススメです。

私はビビりなので非表示にしましたが「邪魔くさいからいらない」って方は潔く削除して下さい。

作業が終わったら「ファイルを更新」をクリックして一度保存します。
プレビュー画面で「Google+」ボタンが消えているのを確認できれば成功です。

「feedly」ボタンの設置方法

「Google+」を削除したことで枠に一つ空きができたので、「feedly」ボタンを設置してみます。「Google+」ボタンの削除と同様、子テーマ内の「sns-top.php」と「sns.php」に「feedly」ボタンのコードを書き足していきましょう。

先ほど「Google+」ボタンを削除(非表示)にしたファイルから開いて編集します。この記事では「sns-top.php」から作業しているのでまずこちらを開きます。

「feedly」ボタンのコードを書き加える

各ファイルにはそれぞれのSNSボタンに対応したコードが書かれており、書かれている順番にボタンが表示される仕組みです。
私は「Facebook」の次に「feedly」を表示させたいので「Facebook」ボタンのコードの下に7行目から10行目までのコードを付け足しました。

9行目にある「ブログURL」部分は自分のブログやサイトのURLに書き換えて下さい。

書き加えが終わったら「ファイルを更新」をクリックして保存します。

「sns.php」ファイルの方も同じ手順で「Google+」の削除と「feedly」の追加を行います。必ず両ファイルとも作業して下さいね。

「style.css」で装飾する

2つのファイルを編集しただけでは真っ白で何も表示されていないので、子テーマ内の「style.css」か「追加css」に以下のコードを書き加えます。
「追加css」は編集とライブプレビューを行えるのでとっても便利です。最近は専ら「追加css」に書き加えています。
ダッシュボードの「外観」>「カスタマイズ」>「追加css」と進み、以下のコードをコピーして貼り付ければOKです。

このように表示されていれば成功です!子テーマの「style.css」に追記した場合だとキャッシュが邪魔をしてすぐに反映されていないことがあるので、もし上手く表示されていない時はキャッシュのクリアを試してみて下さい。記述に間違いがない限り大概これで直ります。

最後に

お疲れ様でした!ファイルのあっちこっちを編集するのは一見難しそうに感じますが、実は結構簡単だったりします。
これを応用すれば他のSNSボタンも消したり追加したりできるので、自分で色々試してみるのも面白いかもしれませんね。

最後までお付き合い頂きありがとうございました♪