WordPressのカテゴリーで画像をアップロードしてアーカイブページに表示

前回書いた記事

WordPressのカテゴリーページに「カテゴリーの説明」(description)を取得して、更に「カテゴリーの説明」でhtmlを使用する方法

の続きですが、今回は「カテゴリーの説明」ではなく、カテゴリーごとに画像をアップして、アーカイブページに画像を表示する方法をメモ。

1,Advanced Custom Fieldsで画像をアップロードするフィールドを作る

WordPressのプラグイン【Advanced Custom Fields】をインストールし、上記のように画像アップロードするフィールドを作成。
返り値は画像IDにチェックを入れてください。

カスタムフィールドのルールでTaxsonomy Termをセレクトし、右にあるセレクトボックスで画像をアップロードしたいカテゴリー・タクソノミーを選択。

これでカテゴリーの編集で画像をアップできるようになりました。

2,カテゴリーのphpテンプレートで画像取得

カテゴリーのphpテンプレートに下記コードを記載。

カテゴリーの場合

<?php
$categories = get_categories();
//$categories = get_categories('parent=0'); 親カテゴリーの場合記載
foreach($categories as $category) :
 
$cat_id = $category->cat_ID;
$post_id = 'category_'.$cat_id; 
   
$catimg = get_field('catimg',$post_id);
$img = wp_get_attachment_image_src($catimg, 'full');
?>
<div><?php echo $category->cat_name; ?></div>
<div><a href="category/<?php echo $category->category_nicename; ?>"><img src="<?php echo $img[0]; ?>" alt="<?php echo $category->cat_name; ?>" /></a></div>
<?php endforeach; ?>

タクソノミーの場合

<?php
$taxonomy_name = 'ここにtaxonomyname';
$taxonomys = get_terms($taxonomy_name);
if(!is_wp_error($taxonomys) && count($taxonomys)):
    foreach($taxonomys as $taxonomy):
        $term_id = esc_html($taxonomy->term_id);
        $term_idsp = "ここにtaxonomyname_".$term_id;
        $photo = get_field('photo',$term_idsp);
        $photosp = wp_get_attachment_image_src($photo, 'full');
?>
                <a href="/mupamupa/mupacat/<?php echo esc_html($taxonomy->slug); ?>"><img src="<?php echo $photosp[0]; ?>" alt="<?php echo esc_html($taxonomy->name); ?>">
<span class="title"><?php echo esc_html($taxonomy->name); ?></span></a>
<?php
    endforeach;
endif;
?>

タクソノミーの場合、少しわかりづらいのですが、7行目は

taxonomyname_ + termID

と、taxonomynameにアンダーバーを付けてください。これでカテゴリー編集でアップロードした画像が取得できます。