WordPressサイトの完成度を高める：仕上げのファイル作成ガイド

投稿日 2025年12月31日
著者 HITMARKET
カテゴリーおすすめ
カテゴリーホームページ

今回解説するのは、一覧ページを司る archive.php、エラー時に表示する 404.php、そして管理画面での「顔」となる screenshot.png の3つです。

これまでのファイルだけでも動きますが、これらの「仕上げファイル」があることで、予期せぬエラーに対応できたり、カテゴリーごとの一覧が見やすくなったりします。

1. カテゴリーやタグ専用の：archive.php

index.php でも代用できますが、archive.php を用意することで、「何の一覧を表示しているのか」をユーザーに明示できます。

PHP

<?php get_header(); ?>

<div class="container flex-layout">
    <main class="main-content">
        <header class="archive-header">
            <?php
            the_archive_title( '<h1 class="archive-title">', '</h1>' );
            the_archive_description( '<div class="archive-description">', '</div>' );
            ?>
        </header>

        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <article class="post-item">
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <?php the_excerpt(); ?>
            </article>
        <?php endwhile; else : ?>
            <p>記事が見つかりませんでした。</p>
        <?php endif; ?>

        <?php the_posts_pagination(); ?>
    </main>

    <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

the_archive_title(): カテゴリー名、タグ名、投稿者名、日付などを、現在のページに合わせて自動で出力します。
the_archive_description(): 管理画面で設定したカテゴリーの説明文などを表示します。

2. 「ページが見つかりません」：404.php

存在しないURLにアクセスされた際、真っ白な画面やブラウザ標準のエラー画面ではなく、自分のサイトのデザインで「戻り道」を示してあげるのが親切な設計です。

PHP

<?php get_header(); ?>

<div class="container">
    <main class="main-content error-404">
        <header class="page-header">
            <h1 class="page-title">お探しのページは見つかりませんでした。</h1>
        </header>

        <div class="page-content">
            <p>申し訳ありませんが、お探しのページは削除されたか、URLが変更された可能性があります。</p>
            
            <p>以下の検索窓から記事を探すか、トップページへお戻りください。</p>
            <?php get_search_form(); ?>
            
            <div class="return-home">
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="btn">トップページへ戻る</a>
            </div>
        </div>
    </main>
</div>

<?php get_footer(); ?>

get_search_form(): WordPress標準の検索窓を出力します。404ページにこれを置くのはユーザビリティの基本です。

3. テーマの顔：screenshot.png

最後はプログラミングではなく「画像ファイル」です。テーマフォルダの直中に screenshot.png という名前の画像を置いておくと、WordPressの管理画面（外観 > テーマ）でプレビュー画像として表示されます。

推奨サイズ: 1200 × 900 ピクセル
形式: PNG（推奨）または JPG
内容: サイトの完成予想図やロゴ、テーマの特徴が伝わるデザイン。

これがないと: 管理画面で「NO IMAGE」のような寂しい表示になってしまいます。

仕上げのチェックリスト

すべてのファイルが揃ったら、最後に以下の点を確認しましょう。

項目	確認内容
デバッグモード	`wp-config.php` で `WP_DEBUG` を `true` にして、エラーが出ていないか。
スマホ表示	CSSのレスポンシブ対応が崩れていないか。
タイトルタグ	`functions.php` の `add_theme_support( 'title-tag' )` が効いて、ブラウザのタブにタイトルが出ているか。
ウィジェット	サイドバーにウィジェットを追加して、デザインが崩れないか。