WordPressブログの記事一覧ページを改善する方法【カテゴリ・タグ・導線設計】

<?php get_header(); ?>

<main class="blog-archive">
  <header class="blog-archive__header">
    <p class="blog-archive__eyebrow">BLOG</p>
    <h1><?php echo esc_html(single_cat_title('', false) ?: '記事一覧'); ?></h1>
    <?php if (category_description()) : ?>
      <div class="blog-archive__description">
        <?php echo wp_kses_post(category_description()); ?>
      </div>
    <?php endif; ?>
  </header>

  <?php get_template_part('template-parts/blog/topic-nav'); ?>

  <?php if (have_posts()) : ?>
    <div class="blog-archive__grid">
      <?php while (have_posts()) : the_post(); ?>
        <?php get_template_part('template-parts/card', 'post'); ?>
      <?php endwhile; ?>
    </div>

    <nav class="blog-archive__pagination" aria-label="記事一覧のページ送り">
      <?php the_posts_pagination([
          'mid_size' => 1,
          'prev_text' => '前へ',
          'next_text' => '次へ',
      ]); ?>
    </nav>
  <?php else : ?>
    <p>記事が見つかりませんでした。</p>
  <?php endif; ?>
</main>

<?php get_footer(); ?>

<?php
$topics = [
    ['label' => 'WordPress', 'url' => home_url('/tag/wordpress/')],
    ['label' => 'CSS', 'url' => home_url('/tag/css/')],
    ['label' => 'JavaScript', 'url' => home_url('/tag/javascript/')],
    ['label' => 'AI', 'url' => home_url('/tag/ai/')],
    ['label' => 'Basketball', 'url' => home_url('/tag/basketball/')],
];
?>

<nav class="topic-nav" aria-label="記事テーマ">
  <ul>
    <?php foreach ($topics as $topic) : ?>
      <li>
        <a href="<?php echo esc_url($topic['url']); ?>">
          <?php echo esc_html($topic['label']); ?>
        </a>
      </li>
    <?php endforeach; ?>
  </ul>
</nav>

.blog-archive {
  width: min(100% - 32px, 1120px);
  margin-inline: auto;
  padding-block: 48px 72px;
}

.blog-archive__header {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}

.blog-archive__eyebrow {
  margin: 0;
  color: #e60033;
  font-weight: 700;
}

.blog-archive__description {
  max-width: 720px;
  color: #475467;
  line-height: 1.9;
}

.topic-nav {
  margin-bottom: 28px;
  overflow-x: auto;
}

.topic-nav ul {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
}

.topic-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding-inline: 14px;
  border: 1px solid #d9dee7;
  border-radius: 999px;
  color: #141414;
  text-decoration: none;
  white-space: nowrap;
}

.blog-archive__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
}

.blog-archive__pagination {
  margin-top: 40px;
}