【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(); ?>
      <?php
      $cat = get_the_category(); // カテゴリの配列を返すWordPress関数
      $catslug = $cat[0]->slug; // カテゴリslugの変数
      $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>

// ---------------------------------------------------------------
// ここからお知らせページ専用のCSS
// ---------------------------------------------------------------
// お知らせ一覧全体の囲い
.news-info_wrapper {
  background-color: fw.$white;
  box-shadow: 0px 3px 6px fw.$shadow-black;
  border-radius: 10px;
}
.news-info_wrapper.--front {
  margin-top: 50px;
  @include fw.mq("sp") {
    margin-top: 30px;
  }
}

// お知らせの行全体の囲い
.news-row_wrapper {
  border-bottom: 1px solid fw.$line-gray;
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 100px;
  @include fw.mq("sp") {
    grid-template-columns: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
.news-row_wrapper:last-child {
  border-bottom: none;
}
// 日付とカテゴリの囲い
.news-date_wrapper {
  display: grid;
  grid-template-columns: 180px 120px;
  @include fw.mq("sp") {
    grid-template-columns: 45% 1fr;
  }
}
.info,
.exhibition,
.holiday {
  border: 1px solid fw.$dark-pink;
  color: fw.$dark-pink;
  border-radius: 25px;
  width: 100px;
  display: grid;
  place-items: center;
  @include fw.mq("sp") {
    font-size: 1rem;
    width: 60px;
  }
}
.exhibition {
  border: 1px solid fw.$green;
  color: fw.$green;
}
.holiday {
  border: 1px solid fw.$blue;
  color: fw.$blue;
}
// 日付の囲い
.news-date {
  display: grid;
  align-items: center;
  padding: 20px 20px 20px 40px;
  @include fw.mq("tab") {
    padding: 10px 20px 10px 40px;
  }
  @include fw.mq("sp") {
    padding: 10px 10px 10px 20px;
    font-weight: 600;
  }
}
// カテゴリの囲い
.news-classification {
  display: grid;
  place-items: center;
  @include fw.mq("sp") {
    justify-content: start;
  }
}
// お知らせ内容の囲い
.news-content {
  display: grid;
  align-items: center;
  padding: 20px;
  @include fw.mq("tab") {
    padding: 10px 20px;
  }
  @include fw.mq("sp") {
    padding: 0px 20px 10px 20px;
  }
}