WordPressブログトップページの各記事にSNSボタンを設置させる方法

083d19330877b441dc0b59ea2641de6a.png

こんにちはコーヘイ(@k3809)です。今回はWordPressブログのトップページ上で各記事にSNSボタンを設置する方法についてまとめてみました。やってみようという方はコードをいじるので事前にバックアップをとってから行って下さいね。

スポンサーリンク

当ブログのテーマでは表示されない。

何も難しい事をしなくても表示されるテーマもあるっぽいのですが、当ブログのテーマ「Logue」では残念ながら表示できません。

関連:【備忘録】WordPressテーマ「Logue (tcd020)」の気に入っている4つの事

実際の表示はこんな感じ!

スクリーンショット 2014 12 16 17 55 37

上記のスクリーンショットのようにブログのトップページの各記事下にSNSボタンが表示されるようになります!

表示させるための前準備

カスタマイズ方法は色々あると思いますが、SNSボタンは「忍者おまとめボタン」を活用させていただきます。忍者おまとめボタンについては下記の記事にまとめたので良かったらご参照ください。

関連:手軽でカンタン!ブログのソーシャルボタンは忍者おまとめボタンに決まり!

後、表示ができても適切にカウントを刻んでもらうためにプラグイン「SNS Count Cache」を予め入れておきましょう。

関連:WordPress › SNS Count Cache « WordPress Plugins

スポンサーリンク

表示させるまでの手順

※冒頭でも書きましたがコードをイジるので、自己責任でしていただく事と万一に備えてバックアップをとってから行って下さい。

その①S忍者おまとめボタンのコードをコピーしておく!

スクリーンショット 2014 12 16 18 37 22

表示させたいSNSボタン(ここでは忍者ボタン)のコードをコピーしておく。

その②ダッシュボードから行きますよ!

スクリーンショット 2014 12 16 18 44 51

【ダッシュボード】→【外観】→【エディター】の順で開きます。

その③index.phpを開く!!

スクリーンショット 2014 12 16 18 49 01

【エディター】画面になったら右側のリストから【メインインデックスのテンプレート(index.php)】を選択して開く。

その④コピーしたコードを指定の場所にペーストする!

スクリーンショット 2014 12 16 18 20 10

後は、表示させたい箇所に予めコピーしておいたSNSボタンのコードを貼り付けて「ファイルを更新」をクリックします。

場所はお好みの所で!ぼくは冒頭の記事が終了した直後の所に設置してみました。

コード自体は読めないので、予想を立てながらコピペ→ファイルを更新を繰り返して適切な場所に来たら終了です。

予めindex.phpのコードを丸々コピーしてメモ帳に保存しておけば、怖いものはなしです。

何度も申し上げて恐縮ですが、バックアップはマメにしましょう。

トップページの記事にSNSボタンを設置する事の効果は!?

スクリーンショット 2014 12 16 17 56 03

まだ、設置して間もなく何とも言えませんが個々の記事を読まなくても、SNS上でどのくらいシェアされているかトップページ上で把握できるのはとても便利です。

本当は読みたいけど忙しくて今読めないときもトップページからチェックすることができるのも利点です。

今のところブログ自体にも不具合は生じていないのでこのまま実装して活用していきたいと思います。

☞まとめ

◯ブログトップページの各記事下にSNSボタンを設置した。

◯忍者おまとめボタンを用いて手軽に実装できます。

◯どの記事がSNS上でシェアされているかすぐに把握できる。

広告記事下
スポンサーリンク