デイトラWeb制作コース上級編DAY25〜26応用 カスタムタクソノミーのアーカイブページでタームごとにタブ切り替えを行う方法

<?php

/**
 * Archive Work
 */

get_header();
?>

<div class="mainvisual">
  <div class="inner">
    <div class="mainvisual-content">
      <div class="mainvisual-title">制作実績</div>
    </div>
  </div>
</div>

<?php if (function_exists('bcn_display')) : ?>
  <div class="work-breadcrumb">
    <div class="inner">
      <div class="breadcrumb">
        <?php bcn_display(); ?>
      </div>
    </div>
  </div>
<?php endif; ?>

<div id="content" class="content-work">
  <div class="inner">
    <main id="primary">
      <div class="genre-nav tab">
        <?php
        $tabs = array(
          array('name' => 'Webサイト制作', 'slug' => 'web'),
          array('name' => 'SEO支援', 'slug' => 'seo'),
          array('name' => 'その他', 'slug' => 'other')
        );

        array_unshift($tabs, array('name' => 'すべて', 'slug' => 'all'));
        ?>

        <?php foreach ($tabs as $tab) : ?>
          <div class="genre-nav-link tab">
            <a href="#<?php echo $tab['slug']; ?>" class="<?php echo ($tab['slug'] === 'all') ? 'is-active' : ''; ?>">
              <?php echo $tab['name']; ?>
            </a>
          </div>
        <?php endforeach; ?>
      </div>

      <?php foreach ($tabs as $tab) : ?>
        <?php
        if ($tab['slug'] === 'all') {
          $args = array(
            'post_type' => 'work',
            'posts_per_page' => 6
          );
        } else {
          $args = array(
            'post_type' => 'work',
            'posts_per_page' => 6,
            'tax_query' => array(
              array(
                'taxonomy' => 'genre',
                'field' => 'slug',
                'terms' => $tab['slug']
              ),
            )
          );
        }
        $the_query = new WP_Query($args);
        ?>

        <?php if ($the_query->have_posts()) : ?>
          <div id="<?php echo $tab['slug']; ?>" class="tab_area <?php echo ($tab['slug'] === 'all') ? 'is-show' : ''; ?>">
            <div class="entries entries-work">
              <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>

                <a href="<?php the_permalink(); ?>" <?php post_class(array('entry-item', 'entry-item-horizontal')); ?>>
                  <!-- entry-item-img -->
                  <div class="entry-item-img">
                    <?php if (has_post_thumbnail()) {
                      the_post_thumbnail('my_thumbnail');
                    } else {
                      echo '<img src="' . esc_url(get_template_directory_uri()) . '/img/noimg.png" alt="">';
                    } ?>
                  </div><!-- /entry-item-img -->

                  <!-- entry-item-body -->
                  <div class="entry-item-body">
                    <div class="entry-item-meta">
                      <div class="entry-item-tag"><?php echo esc_html(get_the_terms(get_the_ID(), 'genre')[0]->name); ?></div><!-- /.entry-item-tag -->
                    </div><!-- /.entry-item-meta -->
                    <h2 class="entry-item-title"><?php the_title(); ?></h2><!-- /.entry-item-title -->
                    <div class="entry-item-excerpt">ここに抜粋が入ります</div><!-- /.entry-item-excerpt -->
                  </div><!-- /.entry-item-body -->
                </a><!-- /.entry-item -->
              <?php endwhile; ?>
            </div><!-- /.entries -->
          </div>
        <?php endif; ?>
        <?php wp_reset_postdata(); ?>
      <?php endforeach; ?>

      <?php if (paginate_links()) : ?>
        <!-- pagenation -->
        <div class="pagenation">
          <?php
          echo wp_kses_post(
            paginate_links(
              array(
                'end_size'  => 0,
                'mid_size'  => 1,
                'prev_next' => true,
                'prev_text' => '<i class="fas fa-angle-left"></i>',
                'next_text' => '<i class="fas fa-angle-right"></i>',
              )
            )
          );
          ?>
        </div><!-- /.pagenation -->
      <?php endif; ?>

    </main><!-- /primary -->

  </div><!-- /.inner -->
</div><!-- /.content -->

<?php get_footer(); ?>

/* tab */
jQuery(function () {
	// 最初のタブをアクティブ状態にする
	jQuery('.tab a:first').addClass('is-active');
	// すべてのWorkを表示する
	jQuery('.tab_area:first').addClass('is-show');

	// クリックしたタブに対応するWorkを表示する
	jQuery(".tab a").on("click", function (e) {
		e.preventDefault();
		var $this = jQuery(this);
		var tab_area = $this.attr("href").substring(1);
		jQuery(".tab a").removeClass("is-active");
		$this.addClass("is-active");
		jQuery('.tab_area').removeClass('is-show');
		jQuery("#" + tab_area).addClass("is-show");
	});
});

.tab_area {
  display: none;
}

.tab_area.is-show {
  display: block;
}