Toolset Types：タームにカスタムフィールドを作り画像付きのターム一覧を表示する

タームに作成したカスタムフィールドを使い、画像付きのターム一覧（カテゴリー一覧）を、WordPress 4.6 から追加されたWP_Term_Queryで表示する方法をご紹介します。

タームの一覧を自動で出力させるのは、今までwp_list_categoriesを使っておりましたが、カスタムフィールドの有無によって表示方法を分けたり、細かく指定できるのでありがたいですね。

画像付きのターム一覧を表示する

WP_Term_Queryを使って表示する

カスタムフィールドの取得部分は、Types APIを使っています。

<?php echo types_render_termmeta('category-img', [ 'term_id' => "$term->term_id" ]); ?>

タームに作成した画像のカスタムフィールドに、画像が登録されている場合はその画像を、登録されていない場合はno imageの画像を出力させる例です。

<ul>
  <?php
  $taxonomy_slug = 'item_category'; // タクソノミーのスラッグを入力
  $args = [
  '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', [ 'term_id' => "$term->term_id" ]);
      if(!empty($image)): // カスタムフィールドに画像が登録されている場合?>
          <?php echo types_render_termmeta('category-img', [ '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>