カスタムタクソノミーのタームに画像をACFで追加しそれを表示する方法

カスタムタクソノミーのタームに画像を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; ?>">
<!-- タクソノミーヘッダー画像部分 -->

ポチッ☆とクリックお願いします!
↓ ↓ ↓

  • にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ

コメントは受け付けていません。

サブコンテンツ

TOP