【WordPress】オリジナルテーマでトップページにカテゴリ一覧を表示する

<!-- タブ -->
<ul class="section02__menu">
  <?php
    $categories = get_categories();
    //ループの開始
    foreach($categories as $category):
      if($category -> count != 0):
        //カテゴリ名
        $cat_name = $category->name;
  ?>
  <!-- 繰り返しSTART -->
  <li class="section02__menu__list">
    <a href="#" class="section02__menu__link"><?php echo $cat_name; ?></a>
  </li>
  <!-- 繰り返しEND -->
  <?php $cat_count++;
    endif;
    endforeach;
  ?>
</ul>
<!-- タブ -->

<!-- 記事一覧 -->
<?php
  $categories = get_categories();
  //ループの開始
  foreach($categories as $category):
    if($category -> count != 0):
      //カテゴリー名
      $cat_name = $category -> cat_name;
      //カテゴリーカラー
      $cat_color = get_field('color', 'category_' . $category->term_id);
     //カテゴリースラッグ名
     $cat_nicename = $category -> category_nicename;
?>
<div class="section02__article">
  <?php
    $args = array(
      'posts_per_page' => 5,//表示件数
      'category_name' => $cat_nicename,
      'orderby' => 'modified'
    );
    $posts = get_posts($args);
    foreach($posts as $post):
      setup_postdata($post);
  ?>
  <!-- 繰り返しSTART -->
  <article class="article">
    <a href="<?php the_permalink(); ?>" class="article__link">
      <picture class="article__box">
        <source media="(max-width: 559px)" srcset="SP用画像" width="80" height="80">
        <img src="PC用画像" width="192" height="114" alt="<?php the_title(); ?>" class="article__img" loading="lazy">
      </picture>
      <div class="article__detail">
        <ul class="article__item01">
          <li>
            <span class="icon" style="border-color: <?php echo $cat_color; ?>; color: <?php echo $cat_color; ?>;"><?php echo $cat_name; ?></span>
          </li>
        </ul>
        <p class="article__lead"><span class="article__lead__inner"><?php the_title(); ?></span></p>
      </div>
    </a>
  </article>
  <!-- 繰り返しEND -->
  <?php endforeach; ?>
</div>
<?php endif; endforeach; ?>
<!-- 記事一覧 -->