404ページを自分好みのデザインにするには、クラシックテーマなら子テーマに 404.php を作り、ブロックテーマならサイトエディターで「404」テンプレートを編集します。どちらの場合も、デザインを変えるだけでなく「HTTPステータスが404のまま返っているか」を確認することが大切です。この記事では、両方の作り方と、迷い込んだ訪問者をサイト内に戻すための構成、公開後の確認方法を解説します。
404ページに載せたい要素
見た目を作り込む前に、何を置くかを決めておきます。404ページに来た人は、リンク切れや入力ミスで目的のページにたどり着けなかった人です。デザインの目的は「お詫び」よりも「次に進む道を示す」ことにあります。
- 短い説明文: ページが見つからないこと、URLが変わったか削除された可能性があることを簡潔に伝えます。
- サイト内検索: 探していた内容をキーワードで探し直せるようにします。
- 新着記事や主要カテゴリーへのリンク: 何を探すか決まっていない人の行き先になります。
- トップページへのリンク: ヘッダーのロゴからも戻れますが、本文中にも明示しておくと迷いません。
逆に、大きな画像や重いアニメーションを置くと、表示が遅くなるうえに肝心の検索欄が画面の下に押し出されます。デザインは、ブランドの雰囲気が伝わる程度にとどめるのがおすすめです。
クラシックテーマ：子テーマに 404.php を作る
テンプレートの仕組み
クラシックテーマでは、存在しないURLにアクセスされると、WordPress はテンプレート階層に従って 404.php を探し、無ければ index.php を使います。子テーマに 404.php を置くと、親テーマのものより優先されます。親テーマを直接編集すると更新で上書きされるので、子テーマで作業してください。
親テーマにすでに 404.php があるなら、それを子テーマにコピーして編集するのが近道です。無い場合は、親テーマの index.php をコピーしてループ部分を書き換えると、ヘッダー・フッターや本文を囲む要素のクラス名がテーマの他のページとそろい、レイアウトが崩れにくくなります。
404.php の例
<?php
/**
* 404ページ（子テーマ）
*/
get_header();
?>
<main id="primary" class="site-main error-404">
<section class="error-404__inner">
<h1 class="error-404__title">お探しのページが見つかりませんでした</h1>
<p class="error-404__lead">URLが変わったか、ページが削除された可能性があります。キーワードで検索するか、下の一覧からお探しください。</p>
<?php get_search_form(); ?>
<h2 class="error-404__heading">新着記事</h2>
<ul class="error-404__list">
<?php
$recent = new WP_Query( array(
'posts_per_page' => 5,
'ignore_sticky_posts' => true,
'no_found_rows' => true,
) );
while ( $recent->have_posts() ) :
$recent->the_post();
?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php
endwhile;
wp_reset_postdata();
?>
</ul>
<h2 class="error-404__heading">カテゴリー</h2>
<ul class="error-404__list">
<?php
wp_list_categories( array(
'title_li' => '',
'orderby' => 'count',
'order' => 'DESC',
'number' => 10,
) );
?>
</ul>
<p><a class="error-404__home" href="<?php echo esc_url( home_url( '/' ) ); ?>">トップページへ戻る</a></p>
</section>
</main>
<?php
get_footer();コードの要点を説明します。
- 新着記事は WP_Query で取得しています。'no_found_rows' => true は、ページ送りを使わないときに総件数の計算を省く指定で、余計なクエリを減らせます。ループの後は wp_reset_postdata() で投稿データを元に戻します。
- wp_list_categories() の 'title_li' => '' は、一覧の先頭に付く「カテゴリー」という見出し用の li を出さない指定です。外側の ul はテンプレート側で書いています。
- 検索フォームは get_search_form() で出しています。テーマに searchform.php があればそのデザインが使われるので、サイト全体で見た目がそろいます。
main 要素の id やクラス名は例です。親テーマの他のテンプレートで使われている名前に合わせてください。
見た目を整える
.error-404__inner {
max-width: 720px;
margin: 0 auto;
padding: 48px 16px;
text-align: center;
}
.error-404__title {
font-size: 28px;
margin-bottom: 16px;
}
.error-404__list {
display: inline-block;
margin: 0 0 32px;
text-align: left;
}CSSは子テーマの style.css に追加します。404ページ専用の装飾は、上のようにクラス名を付けた要素に限定すると、他のページに影響しません。WordPress は404ページの body に error404 クラスを付けるので、body.error404 を起点に指定する方法もあります。
ブロックテーマ：「404」テンプレートを編集する
サイトエディターで編集する
Twenty Twenty-Five などのブロックテーマには、404用のテンプレートが用意されていることが多く、コードを書かずに編集できます。
- 「外観」→「エディター」→「テンプレート」を開き、「404」（表記は「ページ: 404」などテーマにより異なります）を選びます。
- 見出しや段落を書き換え、「検索」ブロック、「最新の投稿」ブロック、「カテゴリー一覧」ブロックなどを追加します。ブロック名はWordPressのバージョンによって変わることがあります（2026年10月現在）。
- グループブロックで全体を囲み、背景色や余白を設定すると、他のページと区別したデザインにできます。
- 保存します。
サイトエディターで保存した内容は、テーマのファイルではなくデータベースに保存されます。テーマを切り替えると引き継がれないため、残しておきたい場合はテンプレートのコードをコピーして控えておくか、次の方法で子テーマのファイルにしておきます。
子テーマのファイルとして持つ
テンプレートをファイルで管理したい場合は、子テーマの templates フォルダに 404.html を置きます。
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:heading {"level":1} -->
<h1 class="wp-block-heading">お探しのページが見つかりませんでした</h1>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>URLが変わったか、ページが削除された可能性があります。キーワードで検索するか、新着記事からお探しください。</p>
<!-- /wp:paragraph -->
<!-- wp:search {"label":"サイト内検索","buttonText":"検索"} /-->
<!-- wp:heading -->
<h2 class="wp-block-heading">新着記事</h2>
<!-- /wp:heading -->
<!-- wp:latest-posts {"postsToShow":5} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->テンプレートパーツの slug（header・footer）は親テーマによって異なることがあるので、親テーマの parts フォルダにあるファイル名に合わせます。
ここでつまずきやすいのが、サイトエディターでの変更との優先順位です。一度サイトエディターで404テンプレートを保存していると、データベース側の内容がファイルより優先され、404.html を置いても表示が変わりません。その場合は、サイトエディターのテンプレート一覧で404テンプレートのカスタマイズをリセット（クリア）すると、ファイルの内容が使われるようになります。リセットするとサイトエディターでの変更は失われるので、必要な部分は事前にコピーしておいてください。
公開後に確認すること
ステータスコードが404のままか
見た目が整ったら、存在しないURL（例: https://example.com/no-such-page/）を開き、ブラウザの開発者ツールの「ネットワーク」タブで、そのページのステータスが 404 になっているかを確認します。コマンドが使える環境なら、curl -I で応答ヘッダーを見る方法もあります。
デザインした404ページが「200」で返っていると、検索エンジンは中身の無いページを通常のページとして扱おうとし、ソフト404として報告されることがあります。また、すべての404をトップページへリダイレクトするプラグインや設定も、同じ理由でおすすめしません。本当に移転したページだけを個別に301リダイレクトし、それ以外は404ページで案内するのが基本です。
その他の確認
- キャッシュ: キャッシュプラグインやCDNが古い404ページを保持していることがあります。変更後はキャッシュを削除し、ログアウト状態でも確認します。
- スマートフォン表示: 検索欄が画面の上のほうに見えているかを確かめます。
- エラー: 404.php の編集後に画面が真っ白になった場合は、WP_DEBUG_LOG を有効にして wp-content/debug.log を確認し、バックアップしておいたファイルに戻します。
まとめ
- クラシックテーマは子テーマに 404.php を作り、ブロックテーマはサイトエディターの「404」テンプレートか子テーマの templates/404.html を編集します。
- 404ページには説明文・サイト内検索・新着記事やカテゴリー・トップへのリンクを置き、次の行き先を示します。
- ブロックテーマでは、サイトエディターで保存した内容がファイルより優先される点に注意します。
- 公開後は、ステータスコードが404のまま返っているかを確認し、すべてをトップへリダイレクトする運用は避けます。