2026年5月20日

WordPressの404ページをカスタマイズする方法

テーマ・デザイン

はじめに

WordPressの404ページは 404.php テンプレートファイルで完全にカスタマイズできます。デフォルトの404ページは最低限の表示しかありませんが、検索ボックス・人気記事・ナビゲーションを追加することでユーザーの離脱を防げます。

症状・原因

404ページがデフォルトのまま殺風景
404ページからのユーザー離脱を減らしたい
独自のデザインの404ページを作りたい
404エラーの発生状況を確認したい

解決手順

ステップ1：404.phpテンプレートを作成する

# 親テーマの404.phpをコピーして子テーマで上書き
cp wp-content/themes/parent-theme/404.php \
   wp-content/themes/my-child-theme/404.php

# 親テーマに404.phpがない場合は新規作成
touch wp-content/themes/my-child-theme/404.php

# 404.phpが存在するか確認
ls -la wp-content/themes/my-child-theme/404.php

ステップ2：404.phpの基本構造を作成する

<?php
// wp-content/themes/my-child-theme/404.php
get_header();
?>

<main class="error-404 not-found">
    <div class="page-content">

        <header class="page-header">
            <h1 class="page-title">404</h1>
            <p class="page-subtitle">ページが見つかりませんでした</p>
        </header>

        <div class="error-404-content">
            <p>お探しのページは移動・削除されたか、URLが間違っている可能性があります。</p>

            <!-- 検索ボックス -->
            <div class="search-box">
                <p>キーワードで検索してみてください：</p>
                <?php get_search_form(); ?>
            </div>

            <!-- 人気記事・最新記事 -->
            <div class="suggested-posts">
                <h2>こちらの記事はいかがですか？</h2>
                <?php
                $recent = new WP_Query([
                    'posts_per_page' => 5,
                    'orderby'        => 'date',
                    'order'          => 'DESC',
                ]);
                if ($recent->have_posts()):
                ?>
                <ul class="posts-list">
                    <?php while ($recent->have_posts()): $recent->the_post(); ?>
                    <li>
                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    </li>
                    <?php endwhile; wp_reset_postdata(); ?>
                </ul>
                <?php endif; ?>
            </div>

            <!-- トップへ戻るボタン -->
            <p>
                <a href="<?php echo esc_url(home_url('/')); ?>" class="btn-home">
                    トップページへ戻る
                </a>
            </p>
        </div>

    </div>
</main>

<?php get_footer(); ?>

ステップ3：404ページのCSSをカスタマイズする

/* 子テーマの style.css に追加 */
.error-404 {
    text-align: center;
    padding: 80px 20px;
}

.error-404 .page-title {
    font-size: 8rem;
    font-weight: 900;
    color: #2271b1;
    line-height: 1;
    margin: 0;
}

.error-404 .page-subtitle {
    font-size: 1.5rem;
    color: #50575e;
    margin: 0 0 40px;
}

.error-404 .search-box {
    max-width: 480px;
    margin: 0 auto 40px;
}

.error-404 .posts-list {
    list-style: none;
    padding: 0;
    text-align: left;
    max-width: 600px;
    margin: 0 auto 40px;
}

.error-404 .posts-list li {
    border-bottom: 1px solid #e0e0e0;
    padding: 12px 0;
}

.error-404 .posts-list a {
    color: #2271b1;
    text-decoration: none;
    font-size: 1rem;
}

.error-404 .btn-home {
    display: inline-block;
    background-color: #2271b1;
    color: #ffffff;
    padding: 14px 32px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
}

.error-404 .btn-home:hover {
    background-color: #135e96;
}

ステップ4：404エラーの発生をWP-CLIで確認する

# アクセスログから404エラーを確認（Apacheの場合）
grep " 404 " /var/log/apache2/access.log | awk '{print $7}' | sort | uniq -c | sort -rn | head -20

# Nginxの場合
grep " 404 " /var/log/nginx/access.log | awk '{print $7}' | sort | uniq -c | sort -rn | head -20

# WordPressのリダイレクトプラグインと組み合わせる場合
wp plugin install redirection --activate
wp eval "echo home_url('/non-existent-page/') . PHP_EOL;"

# パーマリンクをフラッシュして404を解消
wp rewrite flush --hard

# 投稿のパーマリンクを確認
wp post list --format=table | head -10
wp eval "echo get_permalink(1) . PHP_EOL;"

ステップ5：Redirectionプラグインで404をリダイレクトする

# 特定の404 URLをリダイレクト設定
wp plugin install redirection --activate

# WP-CLIでリダイレクトを追加
wp eval "
if (function_exists('Red_Item::create')) {
    Red_Item::create([
        'url'    => '/old-page/',
        'action_code' => 301,
        'action_data' => ['url' => '/new-page/'],
        'group_id' => 1,
    ]);
    echo 'リダイレクト追加完了' . PHP_EOL;
}"

注意事項

404.php はWordPressのテンプレート階層の最後に使われます。子テーマに置くことでテーマ更新の影響を受けません
WP_Query を使って最新記事を表示する場合は wp_reset_postdata() を必ず呼び出してください
404ページにも get_header() と get_footer() を呼び出すことで、サイト全体の見た目を統一できます

まとめ

404ページのカスタマイズは子テーマに 404.php を作成し、検索ボックス・最新記事・トップへ戻るボタンを追加するだけです。Redirectionプラグインと組み合わせることで、404エラーの発生を根本的に減らすことができます。

Post Views: 9