Toolset Types:タームにカスタムフィールドを作り画像付きのターム一覧を表示する
タームに作成したカスタムフィールドを使い、画像付きのターム一覧(カテゴリー一覧)を、WordPress 4.6 から追加されたWP_Term_Queryで表示する方法をご紹介します。
タームの一覧を自動で出力させるのは、今までwp_list_categoriesを使っておりましたが、カスタムフィールドの有無によって表示方法を分けたり、細かく指定できるのでありがたいですね。
画像付きのターム一覧を表示する
WP_Term_Queryを使って表示する
カスタムフィールドの取得部分は、Types APIを使っています。
<?php echo types_render_termmeta( "category-img", array( "term_id" => "$term->term_id" ) ); ?>
タームに作成した画像のカスタムフィールドに、画像が登録されている場合はその画像を、登録されていない場合はno imageの画像を出力させる例です。
<ul> <?php $taxonomy_slug = 'item_category'; // タクソノミーのスラッグを入力 $args = array( 'taxonomy' => $taxonomy_slug, // タクソノミースラッグの指定 'orderby' => 'id', // タームIDで並び替える 'order' => 'ASC', // 昇順 'hide_empty' => false, // 記事数が0のタームも表示 ); $the_query = new WP_Term_Query($args); ?> <?php foreach($the_query->get_terms() as $term){ $term_link = get_term_link($term->slug, $taxonomy_slug); // タームアーカイブのリンクを取得 ?> <!-- ▽ ループ開始 ▽ --> <li> <a href="<?php echo $term_link; ?>"> <dl> <dt> <?php $image = types_render_termmeta( "category-img", array( "term_id" => "$term->term_id" ) ); if( !empty($image) ): // カスタムフィールドに画像が登録されている場合 ?> <?php echo types_render_termmeta( "category-img", array( "term_id" => "$term->term_id" ) ); ?> <?php else: // 登録されていない場合 ?> <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/no_image.png" alt=""> <?php endif; ?> </dt> <dd><?php echo $term->name; ?></dd> </dl> </a> </li> <!-- △ ループ終了 △ --> <?php } ?> </ul>