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

  • ブックマーク
  • -
    コピー

snow_monkey_before_entry_content

snow_monkey_prepend_entry_content

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

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

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

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

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

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

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

「あれ?この情報、古くない?」と思ったらご連絡ください。

snow_monkey_append_entry_content

snow_monkey_after_entry_content

HAPPY SNOW MONKEYの管理人情報

久野 晃司

Web制作系フリーランス。WordPressに関するお仕事や活動が多いです。

WordPressコア貢献者/テーマ開発者/プラグイン開発者/Meetupオーガナイザー/翻訳貢献者