記事一覧（リッチメディア/シンプル/パネル）のカテゴリー表示をカテゴリーごとにカテゴリースラッグを使ってスタイリングを変える方法

記事の一覧が表示されている際に、アイキャッチ画像右上に属しているカテゴリーが表示されています。

そちらの配色はカスタマイザにて設定したブランドカラーが使われますが、カテゴリーごとに配色や見せ方を変えたいなぁと思った時に利用できるカスタマイズ方法をご紹介します。

今回紹介するカスタマイズに挑戦する際には、テンプレートファイルの上書きの準備を事前にしておく必要があります。まだの方はこちらを参照してください。

では、進めていきましょう。

Snow Monkeyからテンプレートをコピーしてくる

今回カスタマイズしたい箇所を含むテンプレートは、Snow Monkeyの以下の場所にあります。

snow-monkey/template-parts/loop/entry-summary/term/term.php

こちらのファイルを、My Snow Monkeyのテンプレートファイルを上書きすることができるディレクトリ内に、同じような階層で用意（コピー）します。

僕の場合だと、My Snow Monkeyというプラグインに、上で紹介した処理を施した上で、

my-snow-monkey/override/template-parts/loop/entry-summary/term/term.php

というようにコピーしたファイルをおきます。

間違えてSnow Monkey本体のファイルを編集しないようにしてください。しても同じような結果を得ることができますが、Snow Monkeyのアップデートの際に最新ファイルに上書きされるので、カスタマイズしたものが消えてしまいます。

上書きするテンプレート側を編集する

ファイルを開いてみると、このような記述が確認できると思います。（記事執筆時：Snow Monkeyバージョン: 11.4.0）

<?php foreach ( $args['_terms'] as $_term ) : ?>
	<span class="c-entry-summary__term c-entry-summary__term--<?php echo esc_attr( $_term->taxonomy . '-' . $_term->term_id ); ?>">
		<?php echo esc_html( $_term->name ); ?>
	</span>
<?php endforeach; ?>

この部分がカテゴリーを表示させている部分なのですが、ここを編集していきます。

標準では、カテゴリー名とID番号を連ねた形でCSSクラス名が出力されています。

.c-entry-summary__term--{category-name}-{categori-id}

ただし、制作環境やローカルからの移行方法によっては、ローカル開発環境と本番環境でカテゴリーIDが違ってきてしまうということもあります。

ですので、ここではカテゴリースラッグをCSSクラスに表示させてスラッグ名でCSSスタイルを変えられるようにしています。

このような記述に変えてみましょう。

<?php foreach ( $args['_terms'] as $_term ) : ?>
	<span class="
		c-entry-summary__term
		c-entry-summary__term--<?php echo esc_attr( $_term->taxonomy . '-' . $_term->term_id ); ?>
		c-entry-summary__term_<?php echo esc_attr( $_term->slug ); ?>
	">
		<?php echo esc_html( $_term->name ); ?>
	</span>
<?php endforeach; ?>

$_term->slugでカテゴリースラッグ名を出力させています。そこで生成されるCSSクラス名は、

.c-entry-summary__term_{category-slug}

となります。好きな書き方に変えてもらっても構いません。

上記のCSSクラスにちょっとスタイリングを加えてみるとこんな感じでしょうか。SCSS記法で書きます。

.c-entry-summary__figure {
  .c-entry-summary__term {
    top: 10px;
    right: 10px;
    box-shadow: 0 0 5px rgba( #000, .5 );
    border-radius: 13px;
    &_action-hook {
      background-color: darken( $brand-color-1, 10% );
    }
    &_filter-hook {
      background-color: darken( $brand-color-2, 15% );
    }
    &_news {
      background-color: darken( $brand-color-4, 10% );
    }
    &_tips {
      background-color: darken( $brand-color-3, 10% );
    }
  }
}

こちらは、このデモサイトでも利用しているコードになりますので、表示は実際にご確認いただけるかと思います。

このようにテンプレートを上書きして少し細工をするだけで色々とカスタマイズすることができます。ぜひお試しください！