Simplicityをカスタマイズしてエントリカード毎にシェア数を表示させてみた

Simplicityカスタマイズマニュアル
Simplicityカスタマイズマニュアル
Simplicityをカスタマイズして個性のあるデザインにしよう トップページの記事一覧と記事ページの関連記事一覧をフラットにしてみよう ...

どうもIT大好きFwwwです。

最近現在使用しているSimplicityのカスタマイズに熱中しすぎて、

記事の投稿がおろそかになっています笑

最近この弱小ブログ(2016/8/24現在月間5万PV)でも、

若干ですがバズるようになりました。

このブログを読んでくれているみなさんのおかげです!

本当にありがとうございます!!

唐突ですが、ここ最近シェア数が気になるようになりました。

そこで今回は、Simplicityをトップページのエントリーカード毎にTwitterやFacebook、はてなブックマークのシェア数をアイコンで表示させるカスタマイズをしていこうと思います

完成形はこんな感じです♪

エントリーカード シェア数

ここからは、コードを交えながら上記のように

エントリーカード毎にTwitterやFacebook、はてなブックマークのシェア数を表示させる方法を紹介していきたいと思います。

もちろん、Simplicity対応ですよ!!

今回のソースコードをカスタマイズできるように、解説も交えていこうと思います。

※今回の記事ではSNS Count Cacheを用いて、

シェア数を取得させているので事前にインストールして導入しておく必要があります。

スポンサーリンク

Simplicityのエントリーカード毎にシェア数を表示させてみよう

編集するファイルは/entry-card-content.phpです。

Simplicityをアップデートするとカスタマイズしたファイルも綺麗さっぱり新しくなっちゃいますから、

entry-card-content.phpを子テーマなどに格納してから編集するようにしましょう。

entry-card.phpの後半部分に記述されている

上記のソースコードの手前に今回Simplicityをカスタマイズするソースコードを挿入します。

上記のソースコードも交えて下記のように挿入してください。

次に上記のソースコードについて解説していきたいと思います。

僕自身の意見ですが、色々なSNSのシェア数を表示させるのは少し見苦しいため、

TwitterとFacebookとはてなブックマークのシェア数を取得してアイコン付きで表示しています。

Simplicityは素晴らしいことに、デフォルトでFont Awesomeを導入しているので、

外部からインクルードさせるような手間は必要ないです。

いやぁホントにかゆいところまで手が届いてる、

Simplicityを開発したわいひら様に感謝ですよ♪

しかし、まだはてなブックマークが上手く表示されていないと思います。

どうやら、Font Awesomeがはてなブックマークのアイコンを提供していないために、

自作する必要があるみたいです。

と思ってたらCSSでサクッとはてなブックマークアイコンを表示するソースコードを提供しているサイトを発見しましたので、

ソースコードを引用付きで紹介させていただきます。

下記のソースコードをstyle.cssに記述してください

?Font Awesome などアイコンフォントにないはてなブックマークを自力で追加する簡単な方法

うまくはてなブックマークのアイコンが表示されたでしょうか?

次は余談ですが、もしシェア数が0の場合に、

そのSNSアイコンとカウント数を表示させたくない場合は、

先ほどのソースコードは次のようになります

これは && get_scc_SNS名()!=0で、

シェア数が0でない、いわゆるシェアされているSNSアイコンとカウント数だけを表示させるようにしています。

ですので、上記のようにカスタマイズした場合次のように変わります。

シェア数0の場合

もちろんシェアされていないFacebookだけが非表示になりました!!

これは自分のお好みで好きなようにしてください♪

また、post-metaのbackground-colorが薄かったため若干濃くしています。

フォントカラーは、#F5F5F5なので余裕があればカスタマイズしてみてください。

なにか分からないことがあればコメントお願いします!!

最後まで読んでいただきありがとうございました!!

Simplicityカスタマイズマニュアル
Simplicityカスタマイズマニュアル
Simplicityをカスタマイズして個性のあるデザインにしよう トップページの記事一覧と記事ページの関連記事一覧をフラットにしてみよう ...
スポンサーリンク

シェアする



URLをコピーする

関連記事