Simplicityで「SNSシェア総カウント数」をカッコよく表示する方法

https://farm6.static.flickr.com/5762/20919637280_707214c8c3.jpg

こんにちは。WordPress初心者の部長ナビ(@nabi_1080)です。日々カスタマイズ頑張っております!

ブログスタッフ「ちゃぼP」の指導の下、師匠のg.O.R.iさん風の「個別SNSシェア数」ではなく「SNSシェア総カウント数」を表示する方法をお伝えします。

SimplicityでSNSシェアボタンをCSSのみで大きくする方法
SimplicityでSNSシェアボタンをCSSのみで大きくする方法
こんにちは。部長ナビ(@nabi_1080)です Simplicityのカスタマイズで、「SNSシェア総カウント数」を表示する方法を紹介しま...

↑このカスタマイズの後に「SNSシェアボタンを大きくする方法」も記事にしましたのでよろしければどうぞ

なお、この作業は、コードの修正、追記を行いますので、バックアップを必ず取り、自己責任で行ってください。

部長ナビのページ、並びに、ちゃぼPは、いかなる責任も取ることが出来ません。いざというとき(エラーが出ると、ブラウザから管理画面にアクセスすることすら出来なくなります)のために、FTPアプリ「ForkLift」を導入することを強くお勧めします

【Macアプリ】MarsEditと連携させるべき7つのオススメアプリ
【Macアプリ】MarsEditと連携させるべき7つのオススメアプリ
↑MacBook総まとめ記事です。こちらもどうぞ! 部長ナビ(@nabi_1080)がWordPressでブログを更新するために欠...

ForkLiftについては、こちらからどうぞ

image

↑ちゃぼPのブログだとこんな感じになります!

image

↑ウチのブログだとこんな感じ。超カッコいいぞ!では、行ってみよう!

スポンサーリンク

1 子テーマ「Simplicity child」のstyle.cssに追記

.share-total {
  float: right !important;
  font-size: 32px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
}
.share-total-sum {
  display: block;
  color: #aeaeae;
  font-size: 14px;
}

ul.snsfollow-area {
  display:table;
  table-layout: fixed;
  width:100%;
  padding:initial;
}
ul.snsfollow-area li {
  display:table-cell;
  vertical-align:middle;
  text-align: center;
  background: #e6e5e1;
  padding: 8px;
  border: 8px #fff solid;
}
ul.snsfollow-area li span {
  font-size: 11px;
  text-align: center;
  display: block;
}

2 プラグイン「SNS Count Cache」をインストール

「プラグインの新規追加」で「SNS Count Cache」を検索してインストールしてください。

3 「SNS Count Cache」の編集

例のAPI終了に伴う修正を行わないと正常にTwitterが収集されないので、

【WordPress】Twitterカウント復活!代替APIがあったよ!
11月20日をもって、Twitterの非公式APIである「count.json」が終了して3日。 このサイトで&

の通りに修正してください。FTPで一旦ダウンロードしてから編集してアップロードすればいいと思います。

★部長注・私はForkLiftで直接いじりましたが、WordPressの管理画面からでもいけます

Simplicityでツイート数を表示する方法
Simplicityでツイート数を表示する方法
こんにちは。部長ナビ(@nabi_1080)です。Simplicityにおける「ツイート数表示」の方法がわかりましたので、記事で紹介した...

↑ちゃぼPプロデュースのこの記事も参考にしてください!

4 親テーマのphpファイルに追記を行う(ここ、ミスが出ると一切表示できなくなるので注意!)

対象ファイル

・「sns-buttons-balloon.php」

・「sns-buttons-icon.php」

入れる場所

⇒最後の

の上あたりに入れてください。

実際に追加するコード

5 Simplicityの設定画面で「SNSのシェア数表示」を非表示にする

管理画面一番上の「ダッシュボード」の「カスタマイズ」から、「全シェア数の表示」のチェックを外します

その下の「シェアボタンのタイプ」は「テーマカラー(高速)」がオススメです。ウチと同じ表示になります

6 シェア数をキャッシュするまで、ひたすら待つ

コレが一番大変かもしれません。ひたすら待てば、キャッシュされていくので、段々総シェア数が表示されSO NICE!になります。メッチャ楽しいっす!

まとめ

コードをいじるので、細心の注意を払ってください。このやり方で当ブログは総シェア数の表示を行っておりますし、ちゃぼPのサイト「風の羅針盤」でも、総シェア数が表示されていますので、間違いはないと思います。Simplicityバージョンですが、参考にしてください

風の羅針盤 | Destination of winds.
WordPressやMacBook、iPhoneなどのガジェットなどのレビューを、小説のように綴る、ちゃぼPの新感覚ブログ

↑ちゃぼPのブログです。レッツナウ!

Simplicityでツイート数を表示する方法
Simplicityでツイート数を表示する方法
こんにちは。部長ナビ(@nabi_1080)です。Simplicityにおける「ツイート数表示」の方法がわかりましたので、記事で紹介した...

↑ちゃぼPから教えてもらった、ツイート数を表示する方法も記事にしてありますので、自己責任となりますが、興味ある方はどうぞ!

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

この記事の関連カテゴリ

サイト内検索