WordPressでトップページにSNSアイコンとシェア数表示する方法

ギークさんはレベルが上がり初心者を脱出した！！

なんかもう自分でも思うけど前より出来る子になりましたな。

今までのWordpressカスタマイズ記事はこちらにまとめてあります。

Wordpressカスタマイズ

Wordpressのカスタマイズ記事を集めました！外観系便利機能系ちょっと高度なやつ

そして今回イジイジしてブログのトップページにSNSアイコンとシェア数を表示することに成功しました。

こんな感じです。

今回行う主な手順は以下となります。

SNS Count Cacheプラグインのインストール
各SNSのシェア数を取得するコードを作成
Webフォント用意
2のコードにWebフォントを追加し最終的なコード完成
CSSで装飾

また私の環境はこちら

CMS：Wordpress Ver.4.2.4
テーマ：Simplicity Ver.1.8

じゃぁ早速やってみましょう！

メニュー

SNS Count Cacheプラグインを使って各SNSのシェア数を取得する基本コード作成
Ｗｅｂフォント用意
元コードにWebフォントを追加し最終的なコード完成
CSSで装飾する
ここにコードを挿入するのだ！

SNS Count Cacheプラグインを使って各SNSのシェア数を取得する基本コード作成

まずはこちらからSNS Count Cacheプラグインをインストールしましょう。

WordPress › SNS Count Cache « WordPress Plugins

このプラグインを使うことでシェアやフォロー数をキャッシュしネットワークを介さずに取得することで表示速度を改善することができます。

そしてこのプラグインを導入することにより下記のコードを使ってシェアやブックマーク数を取得することが出来るんです！便利！！

scc_get_share_twitter()：Twitterのシェア数取得
scc_get_share_facebook()：Facebookのシェア数取得
scc_get_share_gplus()：Google+のシェア数取得
scc_get_share_hatebu()：はてブのブックマーク数取得
scc_get_share_pocket()：Pocketのブックマーク数取得
scc_get_share_total()：合計数を取得

上記にちょっと付け足して出来た基本コードがこちら

<?php if(function_exists('scc_get_share_twitter')) ?><?php echo scc_get_share_twitter(); ?>
<?php if(function_exists('scc_get_share_facebook')) ?><?php echo scc_get_share_facebook(); ?>
<?php if(function_exists('scc_get_share_gplus')) ?><?php echo scc_get_share_gplus(); ?>
<?php if(function_exists('scc_get_share_hatebu')) ?><?php echo scc_get_share_hatebu(); ?>
<?php if(function_exists('sscc_get_share_pocket')) ?><?php echo scc_get_share_pocket(); ?>
<?php if(function_exists('scc_get_share_total')) ?><?php echo scc_get_share_total(); ?>

function_existsという関数を使っています。

このように書くと、「wp_xxx」という関数が定義されていたら「wp_xxx();」を実行するし、この関数がなければ無視されます。プラグインをアンインストールしても、「関数が定義されてないよ」というエラーが出ないんですね。すばらしいです。
[wordpress] テーマ内で新しい関数を使う場合は、function_existsを使おう | xxxx7

はい。ほんとすばらしいです。
これで基本となるコードの完成です。

参考：トップページのサムネイルにSNSシェア数を表示させたい。
参考：[試] 表示速度改善のその先へ！進化するWordPressプラグイン SNS Count Cache | 試行錯誤ライフハック
参考：【WordPress】オリジナルSNSボタン設置方法！スマホ用シェア数つきSNSアイコンも公開 – ゆめぴょんの知恵
参考：[wordpress] テーマ内で新しい関数を使う場合は、function_existsを使おう | xxxx7

Ｗｅｂフォント用意

次はSNSアイコンですが画像だとそれを読み込むのに時間がかかったり修正が大変だったりするのでWebフォントを使います。

Webフォントアイコンを使用する事でこのようなメリットがあります。
いくらでも大きくできる。
Retinaディスプレイにも問題無し
CSSを使えばサイズ・色も簡単に制御可能
CSS3でリッチな表現も簡単。
ブログのデザインでも使用している「Webフォントアイコン」を本当にオススメしたい！ | ドウラク

こりゃ便利ですな。
でもこういうのって海外発のサービスなので日本独自のサービス（はてブやLINEなど）のアイコンって用意されてないんでしょ？奥さん？

ご安心下さい！！

ドウラクのsw2x(さわさわ)さん（@sw2x）がアイコン作ってくれました！パチパチ！！さすが！！

参考：ブログのデザインでも使用している「Webフォントアイコン」を本当にオススメしたい！ | ドウラク

上の記事からFeedly,Pocket,はてブ,LINEのWebフォントアイコンをダウンロード出来ます！

そして他サービスのアイコンフォントも作成します。
そちらについてはこちらの記事をご覧下さい。

参考：日本のブログでよく利用されているWEBサービスロゴのアイコンフォントまとめと利用方法

ちょっと難しいのがダウンロードした「icomoon.zip」を解凍してそのフォルダをテーマフォルダの直下に置く所じゃないでしょうか。
テーマフォルダ？直下ってどこやねん？ってなると思うので少し解説します。

フォルダの構造がデフォルトのまま（何もしてなければデフォルトのはず）だとテーマフォルダはここにあります。

/wp-content/themes/

このフォルダの中にお使いのWordpressテーマフォルダがあると思いますのでその中に先ほど解凍したフォルダをアップロードします。

ちなみにSimplicityの子テーマを使っている場合は「Simplicity-child」の方へアップロードしておくと本体のアップデートの影響を受けないのでオススメです。
※Wordpress自体のアップデートはもろに影響受けます。

フォルダのアップロードが終わったらもうひとつしないといけないことがあります。「header.php」の<head></head>内に以下のコードを貼り付けます。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/icomoon/style.css">

Simplicityの子テーマを使用している場合はこちらのコードを挿入

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/icomoon/style.css">

次は上記の2つを組み合わせて最終的なコードを完成させます。

元コードにWebフォントを追加し最終的なコード完成

上記の2つのコードを組み合わせてちょっと追加してひとつのコードにします。

私はTwitter,Facebook,はてブとPocketを表示するようにしました。

<div class="snsicon">
<?php if(function_exists('scc_get_share_twitter')) { ?><a href="https://twitter.com/drying" class="twitter-btn-icon-link"><span class="icon-twitter"></span></a><?php echo scc_get_share_twitter(); } ?>
<?php if(function_exists('scc_get_share_facebook')) { ?><a href="https://www.facebook.com/athomegeek" class="facebook-btn-icon-link"><span class="icon-facebook"></span></a><?php echo scc_get_share_facebook(); } ?>
<?php if(function_exists('scc_get_share_hatebu')) { ?><a href="http://b.hatena.ne.jp/" class="hatena-btn-icon-link"><span class="icon-hatena"></span></a><?php echo scc_get_share_hatebu(); } ?>
<?php if(function_exists('scc_get_share_pocket')) { ?><a href="https://getpocket.com/" class="pocket-btn-icon-link"><span class="icon-pocket"></a><?php echo scc_get_share_pocket(); } ?>
</div>

少し解説します。

Twitterシェア数取得コード

アイコンをクリックするとTwitterとFacebookなら私のアカウントへはてブとPocketはそれぞれのトップページに飛ぶようになっています。
ほんとは拡散画面に飛ぶようにしたいんです。
やり方知ってる人がいたら教えて下さい。

あとは右寄りにしたかったのでdiv要素で囲みました。

最後にCSSで装飾しましょう。

CSSで装飾する

これが私が実装したCSSはこちらです。

.snsicon {
  text-align: right;
  font-style: italic;
  font-weight: bold;
}
.twitter-btn-icon-link {
color: #55ACEE;
padding-right: 3px;
}
.facebook-btn-icon-link{
  color: #3C5A99;
  padding:0 3px;
}
.hatena-btn-icon-link{
  color: #3C7DD1;
  padding:0 3px;
}
.pocket-btn-icon-link{
  color: #EE4257;
  padding:0 3px;
}

これで完成しました！
ではコードを挿入しましょう。