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

このサイトの記事一覧で行っているカスタマイズに関してよくお問い合わせを頂いています。そのため、サイトで公開することにしました。

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

スポンサーリンク

サムネイルにPVを表示する方法

記事一覧で行っていること

simplicity-customize-top01

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

o3-web-plugins02

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

本日はPV表示を紹介させて頂きます。

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

  • バックアップを取る
  • 子テーマを準備する
  • WordPress Popular Postsをインストールする

バックアップを取る

テーマを改造することになるので必ずバックアップをとりましょう。
子テーマをまるごと別に保存しておくのがオススメです。

子テーマを準備する

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

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

WordPress Popular Postsをインストールする

https://wordpress.org/plugins/wordpress-popular-posts/

人気記事を表示できるプラグインです。
こちらを利用してPV数の表示を行っています。

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

  • Simplicityの設定変更
  • entry-card.phpへの追記
  • style.cssへの追記

上記のファイルに修正や追記を加えていきます。
子テーマにない「entry-card.php」は親テーマからもってきてください。

Simplicityの設定変更

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

entry-card.phpへの追記内容

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>
        <p class="top_pv_box">
          <?php if ( function_exists ( 'wpp_get_views' ) ) { echo '<span class="top_pv">' . wpp_get_views ( get_the_ID() ) . '</span> views'; } ?>
        </p>
      </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_pv_box {
    margin: 0;
    padding: 70px 0 0 5px;
    text-align: center;
}
 
.top_pv {
    margin-right: 1em;
    font-weight: bold;
    font-size: 120%;
    color: #fff;
}

これで無事に下記のようになっているはずです。

simplicity-customize-top02

あとは好みの問題ですが、このサイトのように枠を作って擬似的にタイル表示を再現するなどいろいろと工夫をしてみてください。

simplicity-customize-top03

.entry-thumb {
    margin-top: 0px;
}

#main .entry {
    height: 375px!important;
    margin: 10px 8px 0 10px!important;
    border: solid 1px #ccc;
}

試しに上記のCSSを設置すると枠が付きます。
高さや色などは好みに合わせて変更をしてみてください!

まとめ

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

近日中に「サムネイルにSNS共有数を表示する方法」と「サムネイルにカテゴリーを表示する方法」をこのサイトで解説していきたいと思います。

興味のある方はぜひ、ご確認ください!
それでは本日はこれで失礼いたします。

参考サイト様

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