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

Wordpress

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

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

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

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

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

こんな感じです。

s_150808-1

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

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

また私の環境はこちら

  • CMS:Wordpress Ver.4.2.4
  • テーマ:Simplicity Ver.1.8

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

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

Webフォント用意

次は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シェア数取得コード

 

150808-2

アイコンをクリックすると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;
}

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

ここにコードを挿入するのだ!

私の環境の場合ですが、今回コードを挿入する場所は「entry-card.php」です。
場所は<entry-card-content>の中にある<h2>タグ(記事タイトルです)の下です。

「entry-card.php」内を「content」などで検索して場所を見つけて下さい。

必ずコードを挿入したらリロードして、実際の表示を確認してください。
※必ずバックアップを取ってから行ってください。もし万が一トラブルが発生した場合でも一切の責任は負いませんので取り扱いには十分ご注意下さい。

150809-1

おつかれさまでした。

記事の最後に次回予告を自動挿入する方法の時よりいろいろスムーズに出来ました!
なんでもやれば出来るなと実感するこの頃です。

こういうので本格的に勉強したくなってきた。

 

タイトルとURLをコピーしました