WordPressのカスタム投稿でカスタムタクソノミーを使い各ターム記事一覧をタブ分けして表示する方法です。
運用でタームを増やす事があるとのことで記事が存在するタームをループで吐き出し
それに紐づく記事を表示する一覧を作成しました。

次使用する時の為に書いておきます。

タブ表示用のJS

$(function(){
  $('.tab').on('click',function(){
    var idx=$('.tab').index(this);
    $(this).addClass('is-active').siblings('.tab').removeClass('is-active');
    $(this).closest('.tab-group').nextAll('.panel-group').find('.panel').removeClass('is-show');
    $('.panel').eq(idx).addClass('is-show');
  });
});

クラス名などは環境に合わせて変更してください。

 

タブ表示用のCSS

/* タブ---------------------------------------------------------------*/
.tab-group{
display: -moz-flex;
display: -webkit-flex;
display: flex;
-moz-flex-flow: row wrap;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-moz-justify-content: flex-start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.tab{
flex-grow: 1;
padding:5px;
list-style:none;
border:solid 1px #CCC;
text-align:center;
cursor:pointer;
width: 25%;
align-items: center;
margin: 0 auto;
}

.panel-group{
border-top:none;
}
.panel{
display:none;
}
.tab.is-active{
background:#F00;
color:#FFF;
transition: all 0.2s ease-out;
}
.panel.is-show{
display:block;
}

 

 

まず最初にポストタイプやタクソノミーを変数に入れておく

例として
ポストタイプ=recruit
タクソノミー＝recruit_cat
としています。環境に合わせて変えてください。

<?php 
  $taxonomy_slug = 'recruit_cat'; // カスタムタクソノミーのスラッグを指定
  $post_type_slug = 'recruit'; // 投稿タイプのスラッグを指定
  $terms = get_terms($taxonomy_slug); // タームを取得
?>

 

タブのボタンにするためのターム一覧を出力

<ul class="tab-group">
<?php foreach ( $terms as $value ) : ?>
<li class="tab<?php if( $value === reset($terms) ) : ?> is-active<?php endif; ?>"><?php echo esc_html($value->name); ?></li>
<?php endforeach; ?>
</ul>

 

タームごとの記事一覧を出力

<div class="panel-group">
  <?php foreach ( $terms as $value ) : ?>
  <?php
  $term_slug = $value->slug;
  $args = array(
    'post_type' => $post_type_slug,
    $taxonomy_slug => $term_slug,
    'posts_per_page' => -1,
    'order' => 'DESC',
    'orderby' => 'date',
    'post_status' => 'publish'
  );
  $myquery = new WP_Query( $args );
  ?>
  <div class="panel<?php if( $value === reset($terms) ) : ?> is-show<?php endif; ?>">
    <div class="list">
      <?php if ( $myquery->have_posts()): ?>
      <?php while($myquery->have_posts()): $myquery->the_post(); ?>
      <dl>
        <?php $cterms = get_the_terms($post->ID, 'recruit_cat');?>
        <dt><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></dt>
      </dl>
      <?php endwhile; ?>
      <?php endif; ?>
      <?php wp_reset_postdata(); ?>
    </div>
  </div>
  <?php endforeach; ?>
</div>

 

上記であれば後々タームが増えたとしても自動的に新しいタームをタブとして出してくれるので便利でした。