投稿の一覧で、各投稿のカテゴリーを複数表示にする

通常、投稿一覧での各投稿のカテゴリーは1つだけの表示ですが、複数表示にカスタマイズすることができます。

デフォルト
カスタマイズ後

カスタマイズ方法

PHP

My Snow Monkey プラグインか、子テーマの functions.php に下記のコードを追加してください。

add_filter(
	'snow_monkey_get_template_part_args',
	function( $args ) {
		// 記事一覧カテゴリー以外のテンプレートの場合は無視
		if ( 'template-parts/loop/entry-summary/term/term' !== $args['slug'] ) {
			return $args;
		}

		// 投稿以外の場合は無視
		if ( 'post' !== $args['name'] ) {
			return $args;
		}

		// 全ての設定されたカテゴリーを返す
		$args['vars']['_terms'] = get_the_terms( get_the_ID(), 'category' );

		return $args;
	}
);

CSS

追加 CSS に下記の CSS を追加してください。

.c-entry-summary--post .c-entry-summary__figure span:nth-of-type(2){
  top: 2.5em;
}

.c-entry-summary--post .c-entry-summary__figure span:nth-of-type(3){
  top: 5em;
}

.c-entry-summary--post .c-entry-summary__figure span:nth-of-type(4){
  top: 7.5em;
}

.c-entry-summary--post .c-entry-summary__figure span:nth-of-type(n + 5){
  display:none;
}

あまりに多くのカテゴリーが設定されている場合、はみでたり重なったりしてしまう可能性があるため、5個目以上のカテゴリーは非表示となるようにしてみました。お好みに合わせて適当に調整してください。

この記事を書いた人

キタジマ タカシ

長崎県長崎市在住。地元のWeb制作会社でWebデザイナー/エンジニアとして従事した後、2015年にフリーランス [ モンキーレンチ ] として独立。WordPress のテーマやプラグイン、ライブラリ、CSS フレームワーク等、多数のプロダクトをオープンソースで開発・公開しています。

Snow Monkey オンラインコミュニティ

Snow Monkey をより良いテーマにするために、今後の機能開発等について情報共有したりディスカッションをしたりする場所です。より多くのユーザーの交流があったほうがより良いプロダクトに育っていくと思いますので、ぜひご参加ください!