【Simplicityカスタマイズ】サムネイルにSNS共有数を表示する方法

先日の「【Simplicityカスタマイズ】サムネイルにPVを表示する方法」に引き続き、このサイトのトップページで行っているカスタマイズに関しての記事です。

僕はphpやcssの専門家ではないのであくまで「素人」のカスタマイズ方法です。間違いや非合理的な部分があるとは思いますが、細かい点はご自分で修正をして頂ければと思います。

スポンサーリンク

このサイトのトップみたいにする方法

トップで行っていること

simplicity-customize-top01

カーソルを合わせると、サムネイル部分にPV数が表示されるカスタマイズを行っています。

o3-web-plugins02

少し前までは各SNSの共有数表示していました。
twitterのカウント数が非表示になったこともあり、この表示は廃止にしました。

本日はSNSの共有を表示する方法を解説していきます。

カスタマイズ前に行うこと

  • バックアップを取る
  • 子テーマを準備する
  • SNS Count Cacheをインストール

バックアップを取る

テーマを改造することになるので必ずバックアップをとりましょう。
特にSNSの表示に関してはfunctions.phpに追記を行います。
場合によっては、サイトが真っ白になる場合もあるので、必ずバックアップを!

子テーマを準備する

Simplicityのカスタマイズは子テーマで行うことが推奨されています。
公式サイトよりダウンロードが可能なので、ダウンロードをしましょう。

SNS Count Cacheをインストール

This plugin gets and caches SNS counts in the background, and help you to shorten page loading time through the use of cache mechanism.

各SNSの共有数をキャッシュして表示できるプラグインです。
Simplicityのカウントを呼び出す方法もあると思いますが、ここではプラグインを使った表示方法を紹介します。

修正・追記を行うファイル

  • Simplicityの設定変更
  • entry-card.php
  • style.css
  • functions.php

上記のファイルに修正や追記を加えていきます。
子テーマにない「entry-card.php」は親テーマからもってきてください。
functions.phpは取扱が面倒なので、くれぐれも注意してください!

Simplicityの設定変更

管理画面の左サイドバー「外観」 > カスタマイズ > レイアウト(全体・リスト)
一覧リストのスタイルの中から「サムネイル大」を選択してください。

entry-card.phpへの追記

  <div class="figure">
  <a href="<?php the_permalink(); ?>" class="entry-title entry-title-link" title="<?php the_title(); ?>">
    <?php the_post_thumbnail($thumb , array('class' => 'entry-thumnail', 'alt' => get_the_title()) ); ?>
      <figcaption>
        <?php socialbutton(); ?>
      </figcaption>
  </a>
  </div>

上記を13行目の「$thumb = ( is_list_style_tile_thumb_cards_raw() ? ‘thumb320_raw’ : ‘thumb320’) ?>」の下に挿入します。

entry-card.phpの削除部分

<a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><?php the_post_thumbnail($thumb , array('class' => 'entry-thumnail', 'alt' => get_the_title()) ); ?></a>

2016.04.23追記
上記の部分を削除してください。
削除をしないとサムネイルがふたつ並んでしまいます。

style.cssへの追記

.figure {
    position: relative!important;
    overflow: hidden!important;
}

figcaption {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 0;
    color: #fff;
}

.entry:hover figcaption {
    opacity: 1;
}

.top_sns_box {
    margin: 0;
    padding: 70px 0 0 5px;
    text-align: center;
}
 
.top_sns {
    margin-right: 1em;
    font-weight: bold;
    font-size: 120%;
    color: #fff;
}

functions.phpへの追記内容

function socialbutton()
{ ?>
<p class="top_sns_box">
<span class="top_sns">
<i class="fa fa-facebook"></i>&nbsp;
<?php if(function_exists('scc_get_share_facebook')) echo scc_get_share_facebook(); ?>
</span>
<span class="top_sns">
<i class="icon-hatena"></i>&nbsp;
<?php if(function_exists('scc_get_share_hatebu')) echo scc_get_share_hatebu(); ?>
</span>
</p>
<?php }

コードに関しては「ツイート数やはてブ数を取得して高速表示できるSNS Count Cache」を参考にさせて頂いています。

ここでは、facebookとはてブのみですがgoogle+など他のSNSの共有数を表示することも可能です。好みに合わせて設置をしてみてください。

simplicity-customize-sns01

カーソルを合わせるとこのようにSNSの共有数が表示されるはずです。
好みでCSSを変更して頂き自分のサイトにあったかたちで修正をしてみてください。

まとめ

【Simplicityカスタマイズ】サムネイルにSNS共有数を表示する方法いかがだったでしょうか?
少しでも参考になれば幸いです。

次回は「サムネイルにカテゴリーを表示する方法」を解説していきたいと思います。
興味のある方はぜひ、ご確認ください!

それでは本日はこれで失礼いたします。

参考サイト様

この記事をお届けした
O3 WEBの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク