2026年10月25日

WordPressの404エラーページをカスタマイズする方法・離脱防止デザイン

エラー・白い画面

はじめに

「404ページが殺風景でユーザーがそのまま離脱してしまう」「削除した記事へのリンクが大量に404になっている」——404ページのカスタマイズとリダイレクト設定でユーザーの離脱を防ぎ、SEOへの悪影響も最小化できます。

症状・原因

WordPressのデフォルト404ページはテーマのデザインはあるものの内容が薄く、ユーザーがページを見つけられなかった場合に誘導できる情報が少ないです。また、記事のURL変更やスラッグ変更後にリダイレクトを設定しないと、被リンクやブックマークからの流入が404になります。

解決手順

ステップ1：404.phpを作成してコンテンツを充実させる

<?php
// 404.php: カスタム404ページテンプレート
get_header(); ?>

<main id="main" class="error-404">
    <div class="container">

        <div class="error-content">
            <!-- 404メッセージ -->
            <div class="error-header">
                <span class="error-code">404</span>
                <h1 class="error-title">ページが見つかりませんでした</h1>
                <p class="error-description">
                    お探しのページは移動・削除されたか、URLが変更された可能性があります。<br>
                    以下からお探しのコンテンツをお試しください。
                </p>
            </div>

            <!-- 検索フォーム -->
            <div class="error-search">
                <h2>キーワードで検索</h2>
                <?php get_search_form(); ?>
            </div>

            <!-- 人気記事 -->
            <div class="error-popular">
                <h2>人気の記事</h2>
                <?php
                $popular_posts = get_posts( [
                    'posts_per_page' => 5,
                    'meta_key'       => '_view_count',
                    'orderby'        => 'meta_value_num',
                    'order'          => 'DESC',
                ] );

                // view_countがない場合は最新記事を表示
                if ( empty( $popular_posts ) ) {
                    $popular_posts = get_posts( [
                        'posts_per_page' => 5,
                        'orderby'        => 'date',
                        'order'          => 'DESC',
                    ] );
                }
                ?>
                <ul class="popular-list">
                    <?php foreach ( $popular_posts as $post ) : setup_postdata( $post ); ?>
                        <li>
                            <a href="<?php echo esc_url( get_permalink( $post ) ); ?>">
                                <?php echo esc_html( get_the_title( $post ) ); ?>
                            </a>
                        </li>
                    <?php endforeach; wp_reset_postdata(); ?>
                </ul>
            </div>

            <!-- カテゴリー一覧 -->
            <div class="error-categories">
                <h2>カテゴリー</h2>
                <?php wp_list_categories( [
                    'orderby'    => 'count',
                    'order'      => 'DESC',
                    'show_count' => true,
                    'title_li'   => '',
                    'number'     => 10,
                ] ); ?>
            </div>

            <!-- ホームへ戻るボタン -->
            <div class="error-actions">
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="btn-home">
                    ホームへ戻る
                </a>
            </div>
        </div>

    </div>
</main>

<?php get_footer(); ?>

/* 404ページのスタイル */
.error-404 {
    padding: 60px 0;
}

.error-code {
    display: block;
    font-size: 8rem;
    font-weight: 700;
    color: #d63638;
    line-height: 1;
}

.error-title {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.error-description {
    color: #50575e;
    margin-bottom: 2rem;
}

.error-search,
.error-popular,
.error-categories {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #f0f0f1;
    border-radius: 4px;
}

.popular-list {
    list-style: none;
    padding: 0;
}

.popular-list li {
    padding: 8px 0;
    border-bottom: 1px solid #dcdcde;
}

.btn-home {
    display: inline-block;
    background: #2271b1;
    color: #fff;
    padding: 12px 32px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
}

ステップ2：301リダイレクトで404を防ぐ

// functions.php: プログラムで301リダイレクトを設定
add_action( 'template_redirect', function() {
    if ( ! is_404() ) return;

    // 旧URLから新URLへのリダイレクトマップ
    $redirects = [
        '/old-post-slug/'    => '/new-post-slug/',
        '/category/old-cat/' => '/category/new-cat/',
        '/about-old/'        => '/about/',
    ];

    $current_path = parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH );

    if ( isset( $redirects[ $current_path ] ) ) {
        wp_redirect( home_url( $redirects[ $current_path ] ), 301 );
        exit;
    }
} );

# .htaccess: サーバーレベルで301リダイレクトを設定（高速）
# 個別URL
Redirect 301 /old-page/ https://example.com/new-page/

# パターンマッチ（mod_rewrite）
RewriteEngine On
RewriteRule ^blog/(.*)$ /articles/$1 [R=301,L]

# 旧カテゴリーURLを新URLにリダイレクト
RewriteRule ^category/news/(.*)$ /news/$1 [R=301,L]

ステップ3：Googleサーチコンソールで404を検出・修正する

【Googleサーチコンソールでの404確認手順】

1. Search Console（search.google.com/search-console）にログイン
2. 左メニュー「インデックス」→「ページ」
3. 「インデックス未登録」タブ → 「見つかりませんでした（404）」を確認
4. 影響を受けているURLの一覧をエクスポート
5. 各URLの適切なリダイレクト先を決定して設定

【404を発見した場合の対処フロー】
同じコンテンツが別URLにある → 301リダイレクト設定
コンテンツ自体がない       → サイトマップから除外・リンクを削除
404件数が多い              → Redirection プラグインで一括管理

ステップ4：Redirectionプラグインでリダイレクトを管理する

【Redirectionプラグインの使い方】

インストール:
  プラグイン → 新規追加 → "Redirection" → インストール・有効化

基本的な使い方:
  ツール → Redirection → リダイレクトを追加
  ソースURL: /old-page/
  ターゲットURL: /new-page/
  タイプ: 301 Moved Permanently

一括インポート:
  「インポート/エクスポート」→ CSVで一括登録可能

404ログを確認:
  「404エラー」タブで発生している404を一覧表示
  そのまま対象URLにリダイレクトを設定できる

正規表現でパターンマッチリダイレクト:
  ソースURL: /posts/(\d+)/ （正規表現チェック）
  ターゲットURL: /articles/$1/

ステップ5：404ページのアクセスを監視する

// functions.php: 404発生時にログを記録
add_action( 'template_redirect', function() {
    if ( ! is_404() ) return;

    $url     = ( is_ssl() ? 'https' : 'http' ) . '://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
    $referer = $_SERVER['HTTP_REFERER'] ?? 'direct';
    $ua      = $_SERVER['HTTP_USER_AGENT'] ?? 'unknown';

    // ボットは除外
    if ( preg_match( '/bot|crawler|spider|slurp/i', $ua ) ) return;

    // カスタムテーブルまたはoption/transientに記録
    $log = get_option( 'my_404_log', [] );
    $key = md5( $url );

    if ( isset( $log[ $key ] ) ) {
        $log[ $key ]['count']++;
        $log[ $key ]['last_seen'] = current_time( 'mysql' );
    } else {
        $log[ $key ] = [
            'url'       => esc_url_raw( $url ),
            'referer'   => esc_url_raw( $referer ),
            'count'     => 1,
            'first_seen' => current_time( 'mysql' ),
            'last_seen'  => current_time( 'mysql' ),
        ];
    }

    // 最新1000件のみ保持
    if ( count( $log ) > 1000 ) {
        array_shift( $log );
    }

    update_option( 'my_404_log', $log, false );
} );

注意事項

リダイレクトは適切なステータスコードを使い分けてください。恒久的な移動には301（SEO評価を引き継ぐ）、一時的な場合は302を使います。誤って302を使うと検索エンジンが旧URLを保持し続けます。
大量のリダイレクトチェーン（A→B→C→D）はページ速度を低下させます。できるだけ最終URLへの1段階のリダイレクトに集約してください。
404.phpが存在しない場合はWordPressのデフォルト404またはindex.phpが使用されます。子テーマに404.phpを作成することで独自の404ページを表示できます。

まとめ

404ページのカスタマイズは「404.phpで検索フォーム・人気記事・カテゴリーを設置→.htaccessまたはPHPで301リダイレクト→Redirectionプラグインで404ログを管理→Googleサーチコンソールで定期的に404を確認・修正」の流れで整備します。関連記事：WordPressのサイト速度を計測して改善する方法、WordPressのマルチサイトネットワークを構築する方法。