WordPress｜記事一覧ページの作り方｜archive.php

/*----------------------------------------------------------*/
/* 投稿アーカイブページの表示設定 */
/*----------------------------------------------------------*/
function post_has_archive($args, $post_type)
{
  if ('post' == $post_type) {
    $args['rewrite'] = true;
    $args['has_archive'] = 'news'; //URLとして使いたい文字列
  }
  return $args;
}
add_filter('register_post_type_args', 'post_has_archive', 10, 2);

<!-- 記事一覧-->
<ul class="post-archive_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="post_wrapper">
        <a href="<?php the_permalink(); ?>" class="archive_li-a">
          <!-- サムネイル -->
          <div class="post-img-wrapper">
            <?php the_post_thumbnail('medium'); ?>
          </div>
          <div class="post-date_wrapper">
            <!-- カテゴリ名表示（カテゴリ名slugでクラス付与・リンクなし) -->
            <div class="post-classification_wrapper">
              <div class="<?php echo esc_attr($catslug); ?>"><?php echo esc_html($cat_name); ?></div>
            </div>
            <!-- タイトル表示 -->
            <div class="post-title"><?php the_title() ?></div>
            <!-- 投稿日表示 -->
            <div class="post-date"><?php the_time('Y年n月j日') ?></div>
          </div>
        </a>

      </li>

    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
  <?php else : ?>
    <p>投稿がありませんでした。</p>
  <?php endif;
  ?>
</ul>

<!-- ページネーション全体 -->
<div class="post-pagination-wrapper">
  <?php
  $args = array(
    'type' => 'list',
    'current' => $paged,
    'total' => $the_query->max_num_pages,
    'prev_text' => '<',
    'next_text' => '>',
  );
  echo paginate_links($args);
  ?>
</div>