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>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です