Tips

自作のテーマでカテゴリー一覧でカテゴリー画像を表示させる
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">
コメントを残す