【WordPress】記事一覧に連番を振る方法｜カウンター変数・ページネーション対応・CSSカウンター

<?php $count = 1; if (have_posts()) : while (have_posts()) : the_post(); ?>
  <div class="post-item">
    <span class="number"><?php echo $count++; ?></span>
    <h2 class="title">
      <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </h2>
  </div>
<?php endwhile; else : ?>
  <p>記事が見つかりません。</p>
<?php endif; ?>

<?php
// 現在のページ番号（1ページ目は paged が空なので 1 にする）
$paged    = get_query_var('paged') ? get_query_var('paged') : 1;
$per_page = get_option('posts_per_page'); // 1ページの表示件数

// 例: 1ページ10件なら 2ページ目は 11 から始まる
$count = ($paged - 1) * $per_page + 1;

if (have_posts()) : while (have_posts()) : the_post(); ?>
  <div class="post-item">
    <span class="number"><?php echo $count++; ?></span>
    <h2 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  </div>
<?php endwhile; endif; ?>

/* 親でカウンターを初期化 */
.post-list { counter-reset: post-number; }

/* 各タイトルでカウントアップし、頭に番号を表示 */
.post-list .title { counter-increment: post-number; }
.post-list .title::before {
  content: counter(post-number) ". ";
  font-weight: bold;
  color: #0284c7;
}

.number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #64748b;
  color: #fff;
  font-weight: 700;
}

/* 1〜3位を金・銀・銅で色分け */
.post-list .post-item:nth-child(1) .number { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.post-list .post-item:nth-child(2) .number { background: linear-gradient(135deg, #cbd5e1, #94a3b8); }
.post-list .post-item:nth-child(3) .number { background: linear-gradient(135deg, #d6a36e, #b45309); }