カスタムタクソノミーのタームに画像をACFで追加しそれを表示する方法
CPTUIでカスタム投稿(salonmenu)を作成し、そのカスタム投稿にカスタムタクソノミー(salonmenu_cate)を設定、そしてカスタムタクソノミーにクライアントが自由にタームを設定できるようにした。
さらに、タームには、画像を追加できるようにACFで画像のフィールド(menucategoryimg)を追加した。
タームに設定できる画像は、メニュー一覧のタイルメニューでも使えるし、ターム毎の一覧ページ(taxonomy-salonmenu_cate.php)のヘッダー画像にも使えるようにしている。
タイルメニューに使う場合のコードはこちら!
<?php
$args = array(
'order' => 'ASC',
'parent' => '0', //親タームのみ表示させるための記述(この記述を外すと個タームまで表示される)
);
$taxonomy_name = 'salonmenu_cate'; //表示したいtaxonomynameを設定
$taxonomys = get_terms($taxonomy_name, $args); //$argに入れた親タームだけ表示させる
if(!is_wp_error($taxonomys) && count($taxonomys)):
foreach($taxonomys as $taxonomy):
$term_id = esc_html($taxonomy->term_id);
$term_idsp = "salonmenu_cate_".$term_id; //カスタムフィールドを取得するのに必要なtermのIDは「taxonomyname_ + termID」
$photo = get_field('menucategoryimg',$term_idsp);
$photosp = wp_get_attachment_image_src($photo, 'tnbbig-thumbnails');
?>
<ul>
<li>
<a href="/salonmenu_cate/<?php echo esc_html($taxonomy->slug); ?>"><img src="<?php echo $photosp[0]; ?>">
<span class="title"><?php echo esc_html($taxonomy->name); ?></span></a>
</li>
</ul>
<?php
endforeach;
endif;
?>
また、ターム毎の個別ページでヘッダー画像に使えるように、そのターム一つだけの画像を表示させるコードはこちら!
<!-- タクソノミーヘッダー画像部分 -->
<?php
$term_id = get_queried_object()->term_id;
$term_name = get_queried_object()->name;
$term_idsp = 'hairmakemenu_cate_'.$term_id;
$photo = get_field('menucategoryimg',$term_idsp);
$photosp = wp_get_attachment_image_src($photo, 'full');
?>
<img src="<?php echo $photosp[0]; ?>" alt="<?php echo $term_name; ?>">
<!-- タクソノミーヘッダー画像部分 -->
関連記事はこちら!
スポンサーリンク






