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

2015/12/11 2020/11/18 約 7 分で読めます

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

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

関連記事【Simplicityカスタマイズ】サムネイルにPVを表示する方法

このサイトのトップみたいにする方法
まとめ
- 参考サイト様

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

トップで行っていること

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

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

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

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

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

バックアップを取る

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

子テーマを準備する

Simplicityの子テーマ

テーマをカスタマイズするなら親テーマの直接編集はお勧めできません。というのも、ダウンロードページで配布しているテーマファイルを直接編集すると、アップデート時に編集下部分がが上書きされ、せっかくのカスタマイズが全て消えてしまいます。それ

wp-simplicity.com

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

SNS Count Cacheをインストール

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.

wordpress.org

各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の共有数を表示することも可能です。好みに合わせて設置をしてみてください。