カスタムタクソノミーのタームに画像を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; ?>"> <!-- タクソノミーヘッダー画像部分 -->
関連記事はこちら!
スポンサーリンク