WEB STUDIES

もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

Tips

2026年5月1日

自作のテーマでカテゴリー一覧でカテゴリー画像を表示させる

WordPressのカテゴリー一覧でカテゴリーを表すユニークなサムネイル画像を表示させたいことはよくあります。

市販のテーマでは、そもそもその機能がついている場合もありますが、自作のテーマでは、コードを書いて実装するほかありません。
一番簡単なのは、そのカテゴリーに属した最新の投稿のサムネイルを表示させる方法ですが、投稿のたびに、サムネイルが変わってしまうのは、統一感が乏しいです。

そこで、ACF(アドバンスドカスタムフィールド)を使って、カテゴリーにあらかじめサムネイル画像を紐づけることにします。これなら投稿が増えても、サムネイルが変わらず、各カテゴリーサムネイルの統一感が図れます。

ACFでフィールドグループを作ります。
今回、category_imageというフィールドグループを作り下のように設定しました。
キモはルールで「タクソノミーがカテゴリーと等しい」場合と設定することです。
保存して、カテゴリー設定のページを見てみます。

そこには、カテゴリー画像として「画像を追加する」ボタンが表示されています。
ここで、画像を追加して下記のように呼び出せば、カテゴリー一覧ページにカテゴリーサムネイル画像が表示されます。

$acf_image = get_field( 'category_image', 'category_' . $category->term_id );
if ( is_array( $acf_image ) ) {
	$thumb_url = ! empty( $acf_image['sizes']['medium_large'] )
		? esc_url( $acf_image['sizes']['medium_large'] )
		: esc_url( $acf_image['url'] );
		$thumb_alt = esc_attr( $acf_image['alt'] ?: $cat_name );
	} elseif ( is_string( $acf_image ) && $acf_image !== '' ) {
		$thumb_url = esc_url( $acf_image );
		$thumb_alt = esc_attr( $cat_name );
} else {
	$thumb_url = $no_image;
	$thumb_alt = esc_attr( $cat_name );
}

<img src="<?php echo $thumb_url; ?>" alt="<?php echo $thumb_alt; ?>" loading="lazy">

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


一覧に戻る