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

上記に引き続き、本日も複数お問い合わせを頂いた「記事一覧のサムネイルにカテゴリーを表示する方法」です。

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

スポンサーリンク

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

トップで行っていること

simplicity-customize-category01

サムネイルに該当する「カテゴリー」名が表示される表示方法をとっています。
また、ひと目で記事のカテゴリーがわかるようにカテゴリー名を色分けしています。

注意としては「ひとつの記事に対して複数のカテゴリーが設定されていないこと」が条件になります。複数カテゴリーが設定されている場合は表示がおかしくなるのでご注意ください!

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

  • バックアップを取る
  • 子テーマを準備する

バックアップを取る

テーマを改造することになるので必ずバックアップをとりましょう。
このカスタマイズに関わらず、テーマを修正する際はバックアップが基本です。

子テーマを準備する

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

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

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

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

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

Simplicityの設定変更

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

※タイル2列、タイル3列での表示も確認済みです

style.cssへの追記

/* カテゴリーカラーの指定 */
p.●●●{
  background-color: rgba(33,117,155,0.8);
  color: #fff!important;
  position: absolute;
  top: -13px;
  right: 0;
  width: 30%;
  font-size: 13px;
  padding: 3px;
  text-align: center;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

/* TOPページ用カテゴリー表示 */
.figure {
    position: relative!important;
    overflow: hidden!important;
}

●●●の部分は利用されているカテゴリー名のスラッグ名になります。
カテゴリースラッグ名は管理画面 > 投稿 > カテゴリーで確認が可能です。
表示カラーやサイズなどは好みに合わせて調整してみてください。

entry-card.phpへの追記

<div class="figure">
<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>
<?php $cat = get_the_category(); $cat = $cat[0]; { echo '<p class="' . $cat->category_nicename . '" />'; } ?>
<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>
</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追記
上記の部分を削除してください。
削除をしないとサムネイルがふたつ並んでしまいます。

entry-card-content.phpの削除部分

    <?php if ( is_category_visible() && //カテゴリを表示する場合
               get_the_category() ): //投稿ページの場合?>
    <span class="category"><span class="fa fa-folder fa-fw"></span><?php the_category(', ') ?></span>
    <?php endif; //is_category_visible?>

entry-card-content.phpの19行~22行目を削除します。
ここの部分を消さないとカテゴリー名が重複してしまいます。
残しておくのもありかもしれないので、好みに合わせて修正してください。

simplicity-customize-category02

完成すると上記のようになります。
好みでCSSを変更して頂き自分のサイトにあったかたちで修正をしてみてください。

まとめ

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

これで一連のトップページカスタマイズシリーズは終了になります。
当サイトでご紹介したものを応用してカッコいい表示をして頂ければ幸いです。

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

参考サイト様

【Simplicityカスタマイズ】サムネイルにカテゴリーを表示する方法
この記事をお届けした
O3 WEBの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク