【WordPress】お知らせ一覧にカテゴリーを表示する方法【オリジナルテーマ】

<!-- お知らせ一覧 -->
<ul class="news-info_wrapper">
  <?php
  // ページ番号の取得
  $paged = get_query_var('paged') ? get_query_var('paged') : 1;
  $args = array(
    'post_type' => 'post', //投稿タイプ
    'posts_per_page' => 10, //１ページの表示数
    'paged' => $paged //何ページ目の情報を取得するかを指定
  );

  // ここからループ構造
  $the_query = new WP_Query($args);
  if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); 

  //カテゴリーの各配列を変数化
  $cat = get_the_category(); // カテゴリの配列を返すWordPress関数を変数化
  $catslug = $cat[0]-> slug; // カテゴリslug配列の変数化（CSSを書く時のClass属性として利用）
  $cat_name = $cat[0]-> name; // カテゴリ名配列の変数化
  ?>

  <li class="news-row_wrapper">
    <div class="news-date_wrapper">
      <!-- 投稿日表示 -->
      <div class="news-date"><?php the_time('Y年n月j日') ?></div>
      <!-- カテゴリ名表示（カテゴリ名slugでクラス付与・リンクなし) -->
      <div class="news-classification">
        <div class="<?php echo esc_attr($catslug); ?>"><?php echo esc_html($cat_name); ?></div>
      </div>
    </div>
    <div class="news-content">
      <!-- お知らせ内容表示 -->
      <p><?php the_content(); ?></p>
    </div>
  </li>
  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>
  <?php endif;
  ?>
</ul>

//カテゴリーの各配列を変数化
<?php
$cat = get_the_category(); // カテゴリの配列を返すWordPress関数を変数化
$catslug = $cat[0]-> slug; // カテゴリslug配列の変数化（CSSを書く時のClass属性として利用）
$cat_name = $cat[0]-> name; // カテゴリ名配列の変数化
?>

<!-- カテゴリ名表示（カテゴリ名slugでクラス付与・リンクなし) -->
<div class="news-classification">
　　<div class="<?php echo esc_attr($catslug); ?>"><?php echo esc_html($cat_name); ?></div>
</div>