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

2016/1/8 2020/11/18 約 6 分で読めます

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

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

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

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

トップで行っていること

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

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

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

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

バックアップを取る

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

子テーマを準備する

Simplicityの子テーマ

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

wp-simplicity.com

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行目を削除します。
ここの部分を消さないとカテゴリー名が重複してしまいます。
残しておくのもありかもしれないので、好みに合わせて修正してください。