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

   2016.09.06 Simplicity , WordPress

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

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

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

こんにちは。部長ナビ(@nabi_1080)です Simplicityのカスタマイズで、「SNSシェア総カウント数」を表示する方法を紹介しました http://nabi1080.c

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

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

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

https://nabi1080.com/review/macreview/43938 ↑MacBook総まとめ記事です。こちらもどうぞ! 部長ナビ(@nabi_1080)

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が収集されないので、

http://www.omoide-soko.jp/apps/wordpress/wordpress/1384#SNS_Count_Cache

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

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

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

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

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

対象ファイル

・「sns-buttons-balloon.php」

・「sns-buttons-icon.php」

入れる場所

⇒最後の

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

実際に追加するコード

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

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

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

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

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

まとめ

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

http://www.omoide-soko.jp/apps/wordpress/

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

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

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

部長ナビマストドン始動

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

ABOUT ME

書いてる人

部長ナビ

41歳 / 情熱ブロガー

プロフィールを見る

RECOMMEND

おすすめ記事

RELATED

関連記事

RANKING

今日の人気記事