閉じる

WordPress archive.phpの作り方:一覧ページを表示するためのテンプレート作成手順とコード解説

WordPressでオリジナルテーマを作成する際、必ずと言っていいほど必要になるのが「アーカイブページ」です。

アーカイブページは、特定のカテゴリーやタグ、あるいは日付ごとに投稿を一覧で表示するための重要な役割を担っています。

デフォルトの状態では index.php がその役割を兼ねていることも多いですが、専用の archive.php を作成することで、一覧ページのデザインや機能をより柔軟にコントロールすることが可能になります。

本記事では、WordPressのテンプレート階層を理解しながら、実用的な archive.php の作り方と、最新のコーディング手法に基づいたコード解説を行っていきます。

WordPressにおけるアーカイブページの役割とテンプレート階層

WordPressにおいてアーカイブページとは、「複数の投稿データを特定の条件で抽出して一覧表示するページ」を指します。

具体的には、カテゴリー別一覧、タグ別一覧、投稿者別一覧、作成月別一覧などがこれに該当します。

テンプレート階層における archive.php の立ち位置

WordPressには、表示しようとしているページの種類に応じて、どのファイルを使用するかを自動的に判断する「テンプレート階層」という仕組みがあります。

アーカイブページが表示される際、WordPressは以下の優先順位でファイルを探します。

  1. カテゴリーアーカイブの場合:category-slug.phpcategory-id.phpcategory.php
  2. タグアーカイブの場合:tag-slug.phptag-id.phptag.php
  3. カスタム投稿タイプアーカイブの場合:archive-{post_type}.php
  4. これらが見つからない場合に共通で使用されるのが archive.php です。

つまり、archive.php はあらゆるアーカイブページの「包括的なテンプレート」として機能します。

特定のカテゴリーだけデザインを変えたい場合は個別のファイルを用意しますが、基本的にはこの archive.php を一つしっかり作り込むことで、サイト全体の運用効率が劇的に向上します。

なぜ index.php ではなく archive.php を作るのか

index.php はすべてのテンプレートの最終的な代替手段(フォールバック)です。

しかし、トップページとアーカイブページでは、ユーザーに提供したい情報やデザインが異なることが一般的です。

archive.php を独立させることで、「今見ているページが何のアーカイブなのか」というタイトルを表示したり、アーカイブ専用のサイドバーを配置したりといったカスタマイズが容易になります。

また、テンプレートファイルを分離しておくことで、将来的なコードのメンテナンス性も高まります。

archive.php を作成する基本的な手順

それでは、実際に archive.php を作成する手順を確認していきましょう。

作業を始める前に、必ずバックアップを取るか、ローカルの開発環境で作業することをお勧めします。

1. archive.php ファイルの作成

まず、使用しているテーマのディレクトリ(wp-content/themes/あなたのテーマ名/)の中に、新規ファイルとして archive.php を作成します。

2. 基本構造の記述

アーカイブページの基本構造は、他のテンプレートファイルと同様に、ヘッダー、メインコンテンツエリア、サイドバー、フッターの読み込みから始まります。

PHP
<?php
/**
 * The template for displaying archive pages
 */

get_header(); // header.phpを読み込む
?>

<main id="primary" class="site-main">
    <div class="container">
        <!-- ここに一覧表示の処理を記述していく -->
    </div>
</main>

<?php
get_sidebar(); // sidebar.phpを読み込む
get_footer();  // footer.phpを読み込む

3. WordPressループの実装

WordPressで投稿を表示するための最も重要な仕組みが「ループ」です。

アーカイブページでは、データベースから取得された投稿が存在する限り、繰り返し処理を行って各投稿の情報を出力します。

PHP
<?php if ( have_posts() ) : ?>

    <header class="page-header">
        <?php
        // 現在のアーカイブの種類に応じたタイトルを表示
        the_archive_title( '<h1 class="page-title">', '</h1>' );
        // アーカイブの説明文(カテゴリーの説明など)を表示
        the_archive_description( '<div class="archive-description">', '</div>' );
        ?>
    </header>

    <div class="post-list">
        <?php while ( have_posts() ) : the_post(); ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <div class="post-thumbnail">
                    <?php if ( has_post_thumbnail() ) : ?>
                        <a href="<?php the_permalink(); ?>">
                            <?php the_post_thumbnail( 'medium' ); ?>
                        </a>
                    <?php endif; ?>
                </div>
                
                <h2 class="post-title">
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </h2>

                <div class="post-meta">
                    <span class="post-date"><?php echo get_the_date(); ?></span>
                </div>

                <div class="post-excerpt">
                    <?php the_excerpt(); ?>
                </div>
            </article>
        <?php endwhile; ?>
    </div>

    <?php
    // ページネーション(ページ送り)の表示
    the_posts_pagination();
    ?>

<?php else : ?>
    <p>該当する記事が見つかりませんでした。</p>
<?php endif; ?>

archive.php のコード解説

上記のコードで重要なポイントを詳しく解説します。

最新のWordPress開発では、シンプルかつセマンティックなマークアップが求められます。

the_archive_title() の活用

以前のWordPressでは、is_category()is_tag() などの条件分岐を使ってタイトルを手動で切り替えていましたが、現在は the_archive_title() を使うのが標準的です。

この関数一つで、カテゴリー名、タグ名、作成者名などを自動的に適切な形で出力してくれます。

ただし、デフォルトでは「カテゴリー: ニュース」のように接頭辞がついてしまいます。

これを「ニュース」のみにしたい場合は、functions.php にフックを記述してカスタマイズするのが一般的です。

get_template_part() によるモジュール化

一覧ページの各投稿(カード形式の部分など)のデザインは、個別投稿ページや検索結果ページでも使い回すことが多いです。

そのため、ループ内のコードを直接書かずに、別のテンプレートパーツとして切り出す方法が推奨されます。

PHP
// archive.php のループ内
while ( have_posts() ) : the_post();
    get_template_part( 'template-parts/content', 'archive' );
endwhile;

このように記述することで、template-parts/content-archive.php というファイルに各記事のレイアウトコードをまとめ、管理を容易にすることができます。

ページネーションの実装とカスタマイズ

記事数が多くなると、アーカイブページは複数ページにわたります。

ここで必要になるのがページネーションです。

the_posts_pagination() の引数

the_posts_pagination() 関数は、アクセシビリティに配慮したHTMLを出力してくれます。

さらに、配列でオプションを指定することで、表示されるテキストなどを変更できます。

PHP
the_posts_pagination( array(
    'mid_size'  => 2,      // 現在のページの両側に表示するページ数
    'prev_text' => '前へ',  // 「前へ」リンクのテキスト
    'next_text' => '次へ',  // 「次へ」リンクのテキスト
) );

出力されるHTMLは以下のような構造になります(実際のクラス名はテーマの設定によります)。

HTML
<nav class="navigation pagination" aria-label="投稿">
    <h2 class="screen-reader-text">投稿ナビゲーション</h2>
    <div class="nav-links">
        <a class="prev page-numbers" href="...">前へ</a>
        <a class="page-numbers" href="...">1</a>
        <span aria-current="page" class="page-numbers current">2</span>
        <a class="page-numbers" href="...">3</a>
        <a class="next page-numbers" href="...">次へ</a>
    </div>
</nav>

アーカイブページの表示件数を制御する方法

初心者がよくやってしまう間違いの一つに、archive.php 内で query_postsnew WP_Query を使って表示件数を変更しようとすることが挙げられます。

テンプレートファイル内でクエリを書き換えると、データベースへのアクセスが余計に増えるだけでなく、ページネーションが正しく動作しなくなる原因となります。

アーカイブページの表示件数や並び順を変更したい場合は、functions.phppre_get_posts アクションフックを使用しましょう。

pre_get_posts を使った実用例

以下のコードは、カテゴリーアーカイブの表示件数を一律で10件に設定し、特定のカスタム投稿タイプのアーカイブでは並び順を変更する例です。

PHP
function custom_archive_query( $query ) {
    // 管理画面ではなく、メインクエリであり、アーカイブページである場合
    if ( ! is_admin() && $query->is_main_query() && is_archive() ) {
        
        // 表示件数を10件に変更
        $query->set( 'posts_per_page', 10 );

        // もし「event」というカスタム投稿タイプのアーカイブなら
        if ( is_post_type_archive( 'event' ) ) {
            $query->set( 'orderby', 'meta_value' );
            $query->set( 'meta_key', 'event_date' );
            $query->set( 'order', 'ASC' );
        }
    }
}
add_action( 'pre_get_posts', 'custom_archive_query' );

このように、「表示ロジックは functions.php」「見た目の出力は archive.php」と役割を分けることが、WordPress開発の鉄則です。

カテゴリーやタグごとの条件分岐

共通の archive.php を使いつつ、特定の条件の時だけ一部の表示を変えたい場合は、WordPressの条件分岐タグを使用します。

条件タグ説明
is_category()カテゴリーアーカイブを表示しているとき
is_tag()タグアーカイブを表示しているとき
is_date()日付別アーカイブを表示しているとき
is_author()投稿者別アーカイブを表示しているとき
is_post_type_archive()カスタム投稿タイプアーカイブを表示しているとき

例えば、カテゴリーアーカイブのときだけ特別なバナー画像を表示したい場合は、以下のように記述します。

PHP
<?php if ( is_category() ) : ?>
    <div class="category-banner">
        <img src="<?php echo get_template_directory_uri(); ?>/images/category-header.jpg" alt="Category Header">
    </div>
<?php endif; ?>

SEOとユーザー体験を向上させる工夫

アーカイブページは検索エンジンからの流入も期待できる重要なページです。

単に記事を並べるだけでなく、以下の点に配慮することで、より価値の高いページになります。

カテゴリー・タグ説明文の活用

WordPressの管理画面から設定できる「説明」欄を活用していますか? the_archive_description() を使うことで、この説明文を出力できます。

各アーカイブページに固有のテキスト情報を追加することで、重複コンテンツのリスクを下げ、検索エンジンに対してページの内容を正しく伝えることができます。

パンくずリストの設置

ユーザーがサイト内での現在地を把握しやすくするために、パンくずリストは必須と言えます。

プラグイン(SEO関連のプラグインなど)を利用するか、自作の関数を呼び出すコードを archive.php のヘッダー付近に記述しましょう。

構造化データ(JSON-LD)の検討

アーカイブページ全体を一つの「ItemList」として構造化データでマークアップすることで、検索結果にリッチリザルトとして表示されやすくなります。

これはテーマ制作の中級者以上のステップになりますが、競合他社と差をつける大きなポイントです。

モダンな開発における archive.php

2026年現在、WordPressの開発シーンでは「ブロックテーマ(フルサイト編集)」も普及していますが、依然としてPHPベースのクラシックテーマや、そのハイブリッド形式の需要は非常に高い状況です。

パフォーマンスへの配慮

アーカイブページは多くの投稿データを扱うため、画像(アイキャッチ)の読み込み最適化が欠かせません。

the_post_thumbnail() を出力する際は、loading="lazy" が自動で付与されるのが標準ですが、ファーストビューに含まれる可能性が高い最初の数件分については、あえて遅延読み込みを解除することで、LCP(Largest Contentful Paint)の数値を改善することも検討してください。

アクセシビリティの確保

各記事へのリンクテキストが「続きを読む」ばかりになっていませんか? スクリーンリーダーを使用しているユーザーにとって、同じテキストのリンクが並んでいるのは不便です。

aria-label を使用して、「○○(記事タイトル)を詳しく読む」といった形で明示的な情報を付加するようにしましょう。

PHP
<a href="<?php the_permalink(); ?>" aria-label="<?php the_title_attribute(); ?>の続きを読む">
    続きを読む
</a>

トラブルシューティング:archive.php が反映されない場合

もし archive.php を作成したのに反映されない場合は、以下のポイントをチェックしてみてください。

  1. テンプレート階層の優先順位:もし category.php が存在する場合、カテゴリーページではそちらが優先されます。
  2. ファイル名のスペルミス:archives.php (複数形)になっていませんか? 正しくは archive.php です。
  3. パーマリンクの設定:稀にパーマリンク設定が競合している場合があります。管理画面の「設定 > パーマリンク」で「変更を保存」ボタンを一度押して、設定をリフレッシュしてみてください。
  4. カスタム投稿タイプの has\_archiveカスタム投稿タイプでアーカイブが表示されない場合、投稿タイプ登録時の引数 'has_archive' => true が設定されているか確認してください。

まとめ

archive.php は、WordPressサイトにおける情報の「ハブ」となる非常に重要なテンプレートファイルです。

単に記事を羅列するだけでなく、テンプレート階層を正しく理解し、pre_get_posts によるクエリ制御や the_archive_title() といった便利な関数を組み合わせることで、効率的かつ高品質な一覧ページを構築できます。

今回解説した基本構造をもとに、自身のサイトのデザインに合わせてCSSを適用し、ユーザーが目的の記事を見つけやすいアーカイブページを目指してください。

適切なマークアップとSEOへの配慮を忘れないことが、サイト全体の評価を高める近道となります。

クラウドSSLサイトシールは安心の証です。

URLをコピーしました!