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

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

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

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

サムネイルにPVを表示する方法
まとめ
- 参考サイト様

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

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

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

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

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

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

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

バックアップを取る

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

子テーマを準備する

Simplicityの子テーマ

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

wp-simplicity.com

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

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;
}

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

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

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

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

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