クラシックテーマのカテゴリー・タグ・日付などの一覧をarchive.phpで表示します。WordPressのメインクエリをそのまま使い、抜粋とページ送りを表示する例です。category.phpやtaxonomy.phpなど、より優先度の高いテンプレートがある場合はそちらが使われます。
archive.phpを作成する
自作テーマのフォルダーにarchive.phpを作成し、以下を保存します。既存ファイルがある場合はバックアップして置き換えてください。header.phpとfooter.phpは前の回で作成したものを使います。
<?php get_header(); ?>
<main id="main-content" class="main-content">
<?php the_archive_title('<h1 class="title">', '</h1>'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<article>
<h2 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php if (has_post_thumbnail()) : ?><figure class="thumbnail"><?php the_post_thumbnail(); ?></figure><?php endif; ?>
<div class="excerpt"><?php the_excerpt(); ?></div>
</article>
<?php endwhile; ?>
<?php the_posts_pagination(['prev_text'=>'前へ', 'next_text'=>'次へ']); ?>
<?php else : ?><p>表示できる記事がありません。</p><?php endif; ?>
</main>
<?php get_footer(); ?>ページ送りの見出しを残す
the_posts_paginationが出すscreen-reader-textは支援技術向けの見出しです。HTMLを正規表現で削除せず、表示だけを次のCSSで整えます。自作テーマのstyle.cssへ追加してください。
.screen-reader-text { border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); width:1px; height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute!important; word-wrap:normal!important; }
.screen-reader-text:focus { clip:auto!important; clip-path:none; width:auto; height:auto; position:static!important; }アーカイブのページ番号と404を分けて確認する
カテゴリーに検証用の投稿を3件用意し、1ページ2件の条件で番号リンクを操作しました。1ページ目は2件、2ページ目は残り1件です。スマホ幅390pxで「2」と「1」をEnterで開き、同じカテゴリーの一覧へ戻れることを確認しました。サイドバーの「最近の投稿」と、main内の一覧件数は分けて数えてください。
存在しない99ページ目へのアクセスではHTTP 404になり、archive.phpの「記事がありません」の分岐は使われませんでした。404.phpがない検証テーマではmainが空になるため、archive.phpだけで範囲外のページを案内できるとは考えないでください。
案内文と検索欄を出すには、制作⑧の404.phpを同じ自作テーマのフォルダーへ配置します。その組み合わせで99ページ目を再確認し、HTTP 404と「ページが見つかりませんでした。」、検索欄の表示を確認しました。タグ・日付・空のタグを確認した結果は次節にまとめます。
タグ・日付・0件の一覧を確認する
| 開く一覧 | 確認した結果 |
|---|---|
| 投稿3件のタグ・1ページ2件 | 1ページ目2件、番号2で残り1件。URLのタグ条件も保持 |
| 2025年2月・3月の月別一覧 | 2月の2件と3月の1件をそれぞれ表示 |
| 登録済み・投稿0件のタグ | HTTP 200。タグ見出しと「表示できる記事がありません。」を表示 |
| 投稿のない2024年2月 | HTTP 404。404.phpの案内と検索欄を表示 |
2026年10月3日、WordPress 7.1.2の独立した検証環境で、掲載コードを含む自作クラシックテーマの実クエリを確認しました。タグ一覧の番号2はEnterで開き、main内に残り1件が出ることも確認しています。投稿0件でも、登録済みの空タグと、投稿のない月では使われたテンプレートが異なりました。0件だから必ずarchive.phpになるとは判断せず、HTTP状態と見出しを照合してください。
タグではtag.php、日付ではdate.phpがあるとarchive.phpより優先されます。ファイル名はarchive.phpです。詳しい選択順はWordPressのテンプレート階層を参照してください。今回はPC幅1280pxで表示を確認しました。
空タグ用の文言を直すときはarchive.php、404の案内を直すときは404.phpを編集します。両ファイルを先に保存し、問題があれば変更したファイルをその原本へ戻します。
確認する画面と戻し方
検証環境で「設定 → 表示設定」の1ページの表示件数を小さくして、2ページ目まで確認します。確認後は元の件数へ戻します。カテゴリーとタグ、記事がない一覧、長いタイトル、PC・スマホ幅を対象にし、Tabでページ番号へ移動してEnterで遷移できることを確かめます。
この例はメインクエリ用です。独自WP_Queryの一覧にそのまま流用するとページ数が合わない場合があります。投稿一覧のhome.phpと検索結果のsearch.phpも別のテンプレートです。問題があればarchive.phpと追加CSSを変更前へ戻してください。旧GitHubサンプルとは同期していません。
関連手順：WordPress自作テーマ制作⑦│検索結果ページの作成
よくある質問：WordPress自作テーマでアーカイブページを作成するとき
archive.phpは、どのページを表示しますか？
記事では、クラシックテーマのカテゴリー・タグ・日付などの一覧をarchive.phpで表示します。WordPressのメインクエリをそのまま使い、抜粋とページ送りを表示する例です。
category.phpなどがある場合は、どうなりますか？
記事では、category.phpやtaxonomy.phpなど、より優先度の高いテンプレートがある場合はそちらが使われます。タグではtag.php、日付ではdate.phpがあるとarchive.phpより優先されます。詳しい選択順はWordPressのテンプレート階層を参照してください。
ページ送りの見出しは、削除してよいですか？
削除しないでください。記事では、the_posts_paginationが出すscreen-reader-textは支援技術向けの見出しなので、HTMLを正規表現で削除せず、表示だけをCSSで整えます。CSSは自作テーマのstyle.cssへ追加します。
存在しないページ番号にアクセスしたら、どうなりますか？
記事では、存在しない99ページ目へのアクセスではHTTP 404になり、archive.phpの「記事がありません」の分岐は使われませんでした。404.phpがない検証テーマではmainが空になるため、archive.phpだけで範囲外のページを案内できるとは考えないでください。案内文と検索欄を出すには、制作⑧の404.phpを同じ自作テーマのフォルダーへ配置します。
投稿が0件のタグや月は、どのテンプレートになりますか？
記事では、投稿0件でも、登録済みの空タグ（HTTP 200で、タグ見出しと「表示できる記事がありません。」を表示）と、投稿のない月（HTTP 404で、404.phpの案内と検索欄を表示）では使われたテンプレートが異なりました。0件だから必ずarchive.phpになるとは判断せず、HTTP状態と見出しを照合してください。
ページ送りは、どう確認しますか？
検証環境で「設定 → 表示設定」の1ページの表示件数を小さくして、2ページ目まで確認します。確認後は元の件数へ戻します。記事では、Tabでページ番号へ移動してEnterで遷移できることを確かめます。サイドバーの「最近の投稿」と、main内の一覧件数は分けて数えてください。
独自のWP_Queryの一覧にも、そのまま使えますか？
使えない場合があります。記事では、この例はメインクエリ用で、独自WP_Queryの一覧にそのまま流用するとページ数が合わない場合があります。投稿一覧のhome.phpと検索結果のsearch.phpも別のテンプレートです。
元に戻すには、どうしますか？
archive.phpと追加CSSを変更前へ戻します。空タグ用の文言を直すときはarchive.php、404の案内を直すときは404.phpを編集し、両ファイルを先に保存しておいて、問題があれば変更したファイルをその原本へ戻します。既存のarchive.phpがある場合は、バックアップして置き換えてください。
どこまで動作確認されていますか？
記事では、2026年10月3日に独立したWordPress 7.1.2の検証環境で、掲載コードを含む自作クラシックテーマの実クエリを確認し、スマホ幅390pxで番号リンクの操作、PC幅1280pxで表示を確認したとされています。すべての環境での表示を確認したものではありません。
