今回は、WordPressサイトの404ページをカスタマイズする方法として、WordPressテーマの404.phpを編集して404ページをカスタマイズする場合についてお伝えいたします。
WordPressの404ページを設定することで、「存在しないページ」や削除されたページを示す404エラーの際に、WordPressサイトのテンプレートテーマを利用して、ユーザーに対してWordPressサイトのWebデザインに沿った404ページを表示することができます（厳密に「削除されたページ」を示す場合は410を返します）。
通常404エラーの際には契約サーバーの用意した404エラーの表示画面が表れますが、404テンプレートの存在するWordPressテーマを使用している場合、WordPressサイトに合わせた404ページが表示されます。
この404エラーページで表示する内容もWordPressテーマの中の404.phpを編集してカスタマイズすることができます。
後半には、404ページからトップページへのリダイレクト方法（数秒後に転送）、WordPressテーマ内の404.phpではなくheader.phpにおいて条件分岐を利用して設定する方法などについて触れています。
404ページとは？
404ページとは、ページにアクセスした時に、そのページが存在しない、もしくは削除されて存在しなくなった場合にブラウザに表示されるHTTPエラーコード「404」を表示しているページです。
基本的には「Not Found」といった表示がされますが、カスタム404ページを作成しておくと、404エラーの際に表示するページを設定することができます。
404ページが表示されると、「ページが存在しません」という表示がされるのみとなり、ユーザーとしてはブラウザの戻るボタンなどでアクセス前に表示していたページに戻ったりする必要があります。
URLの変更やページ削除に伴い、ページが存在しない状態で、こうした404ページが表示された場合、大半のユーザーはページを離脱してしまうため、せっかくのホームページアクセスが無駄になります。
カスタム404ページ
カスタム404ページとは、存在しないページが表示され、404エラーが表示される場合に、オリジナルのカスタムページを用意しておくことによって、ユーザーの離脱を防ぐためのページです。
一般的な404ページが表示され、リンクなどが全く設置されておらず、どうアクションを起こしてよいかわからないユーザーの困惑を避けるために、カスタム404ページを作成しておくことが重要です。
カスタム404ページは、404ページでありながら、トップページや主要ページへのリンク、サイト内検索などを設置しておくことで、存在しないページに来てしまったユーザーを他のページに誘導することができます。
WordPressテーマによっては、404.phpなどで、カスタム404ページが用意されていることがあります。
こうした404ページに表示される内容は、WordPressテーマの404.phpなどを編集することでカスタマイズすることができます。
WordPressテーマの404.phpを編集する
WordPressテーマの中に404.phpが存在している場合、このファイルが404ページの基本的なテンプレートとなります。
WordPressサイトの中で、存在しないページにアクセスがあった場合に表示されるカスタム404ページのテンプレートです。
404ページの表示内容がそれほど入念に設定されていなくても、基本的にWordPressサイトの場合はヘッダーなどが表示されるため、サイトロゴによるトップページへのリンクやグローバルメニューが表示されるため、一般的な404ページよりはユーザーの困惑は少ないと考えることができますが、コンテンツ部分にメッセージを記載しておく方が無難でしょう。
WordPressテーマにもよりますが、英語でメッセージが表示された場合にはユーザーは戸惑いますので、なるべく使用言語である日本語でメッセージを残しながら、主要ページへのリンクやサイト内検索を設置しておくほうが良いでしょう。
404.phpだけで404ページを設定していないケース
page.phpなどと同様にWordPressテーマによっては404.phpが存在せず、index.phpとcontent.phpなどを組み合わせて404ページの仕様を設計しているものもあります。
またWordPressテーマ内に404.phpがあったとしても、部分的にcontent.phpを利用しているケースもあり、404.phpのみの編集だけでは404ページを完全にカスタマイズすることができない場合もあります。
WordPressサイトの404ページの表示をカスタマイズするために、この404.phpを編集する場合は、WordPress管理画面から直接ファイルを操作するか、WordPressインストールサーバーにFTPなどで接続し、404.phpをダウンロードしてローカル環境でエディタを用いて修正します。
管理画面から404.phpを確認し、編集する
WordPressにログインし、WordPress管理画面の左側に操作メニューの「外観」から「テーマの編集」を選択して、画面右側に404.phpがあればそれをクリックしてください。
WordPressテーマにもよりますが「404（404.php）」や「404テンプレート（404.php）」といったように表記されています。
クリックすると404ページを構成しているphpが表示されますので、この画面から404ページのカスタマイズを行ってください。
404ページをカスタマイズする
一般的にこの404.phpには、404ページが表示されたときのHTMLの吐き出しに関する設定が記述されています。
もし、記述がphpやWordPressタグばかりだった場合は、該当箇所からファイルを呼び出す設定になっているため、該当ファイルを探して、その部分を編集してカスタマイズする必要があります。
もし404ページをカスタマイズする際に該当箇所が見つからない場合はWordPressテーマファイルの構成を元に、該当ファイルを見つける必要があります。
なお、index.phpなどの中にWordPressタグを用いて404エラーの際の取扱が設定されているケースもあります。
テキストリンクやサイト内検索を設置する
404ページはそのページが存在しないことを示しますが、そのページの表示のままだと、ユーザーが困惑する場合があります。
WordPressサイトのヘッダーなどにグローバルナビゲーションなどが設置されている場合は、テキスト表記だけでも良いかもしれませんが、なるべく404ページのコンテンツ部分に主要ページへのテキストリンクやサイト内検索を設置しておいたほうが無難です。
WordPressサイトトップページへと転送する
また、404ページが表示されてから一定時間経過後にWordPressサイトのトップページへと転送移動（リダイレクト）する仕組みを組み込んでおくのも良いかもしれません。
WordPressの設定・カスタマイズ・修正・編集方法の参考例
一度「このURLは404です（存在しないページ）です」とユーザーに示してから転送することで、そのURL自体は404ページであるということを伝えておくことができるからです。
それを伝えるためには、転送まで数秒間のタイムラグがあったほうが良いかもしれません。
404ページからトップページへのリダイレクト方法
リダイレクトには、meta要素によるリダイレクトやhtaccessによるリダイレクト、javascriptによるリダイレクトなどがあります。
ページURLを変更し、ページそのものを移転した場合はhtaccessによる301リダイレクトを設置することが理想的ですが、一度404ページ（削除されたページ）を表示し、一定時間経過後にトップページにリダイレクト（転送）する場合は、meta要素によるリダイレクトを利用するのが望ましいと考えられます。
meta要素によるリダイレクト設定例
meta要素によるリダイレクト設定例は次のようなものになります。
<meta http-equiv="refresh" content=" 5; url=https://トップページのURL.com">
content属性にある数値は「転送するまでの秒数」で、「;」で区切って、「遷移先のURL」です。なおURLは絶対パスでも相対パスでもどちらでも有効です。
これを<head></head>内に挿入します。
WordPressテーマ内の404.phpではなくheader.phpにおいて条件分岐を利用する
WordPressテーマの404ページの構成にもよりますが、こうしたmeta要素によるリダイレクト設定は、通常<head></head>内に挿入して設定するため、404.phpではなくheader.phpなどヘッダーに関するphpファイルにおいて「404ページの場合」の条件分岐を利用して設定することが多いと思います。
404ページの条件分岐例
404ページの条件分岐例としては次のようなものになります。
<?php if(is_404()): ?>
404ページでのみ表示されるコードをこの部分に記載
<?php endif; ?>
ソフト404エラーの回避と正しいHTTPステータスコードの送出
404ページのデザインを語る前に、エンジニアとして最も重視しなければならないのが、HTTPステータスコードの正確性です。見た目が「ページが見つかりません」となっていても、サーバー内部で正しい「404 Not Found」コードを返していないケースが散見されます。これをGoogleは「ソフト404」と呼び、SEO上の重大な欠陥として扱います。
もし、存在しないURLにアクセスした際に、ステータスコード「200 OK」（正常に表示された）が返されてしまうと、検索エンジンはそのエラーページを「コンテンツがある正常なページ」としてインデックスしようとします。これはサイト内に無価値なページが大量に生成されることになり、サイト全体の評価を著しく下げる原因となります。
header関数を用いたステータスコードの明示
通常、WordPressのテンプレート階層に従って 404.php が読み込まれる場合は自動的に404ステータスが返されますが、複雑なリライトルールを用いたり、独自のルーティングを行ったりしている場合は、明示的にヘッダーを送出する必要があります。
// 404.php の冒頭、get_header() よりも前に行うのが理想的
if ( ! function_exists( ‘status_header’ ) ) {
// WordPress環境外や特殊な状況へのフェイルセーフ
header( “HTTP/1.1 404 Not Found” );
} else {
status_header( 404 );
}
nocache_headers(); // エラーページがブラウザやCDNにキャッシュされるのを防ぐ
特に nocache_headers() は重要です。一時的なサーバーエラーや設定ミスで404が表示された際、その状態がブラウザにキャッシュされてしまうと、復旧後もユーザーにはエラー画面が表示され続けることになります。これを防ぐために、エラーページはキャッシュさせない設定が大切です。
ユーザーの検索意図を推測する「スマート404」の実装
「お探しのページは見つかりませんでした」と言って検索窓を置くだけでは、不親切です。ユーザーは何らかのキーワードやURLを頼りにそのページに来ています。URLの入力ミス（タイプミス）であれば、正しいURLを推測して提案する「おもてなし」もよいのではないでしょうか。
Levenshtein距離を用いた類似スラッグの提案
PHPには、2つの文字列がどれくらい似ているかを計算する levenshtein() という関数があります。これを利用し、リクエストされたURL（存在しないスラッグ）と、サイト内に存在する記事のスラッグを比較します。もし非常に似ているスラッグがあれば、「もしかして、こちらのページをお探しですか？」とレコメンドを表示します。
// URLからスラッグを取得
$requested_slug = basename( parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH ) );
// 比較対象の記事を取得（全記事取得は重いので、直近の記事や主要カテゴリーに絞るなどの工夫が必要）
$args = array(
'post_type' => 'post',
'posts_per_page' => 50,
'fields' => 'ids' // IDだけ取得して軽量化
);
$posts = get_posts( $args );
$closest_match = null;
$shortest_distance = -1;
foreach ( $posts as $post_id ) {
$slug = get_post_field( 'post_name', $post_id );
// レーベンシュタイン距離を計算
$distance = levenshtein( $requested_slug, $slug );
// 完全に一致しない（0ではない）かつ、類似度が高いものを探す
if ( $distance > 0 && ( $distance <= 3 || $shortest_distance < 0 || $distance < $shortest_distance ) ) {
$closest_match = $post_id;
$shortest_distance = $distance;
}
}
// 類似記事が見つかった場合の表示処理
if ( $closest_match && $shortest_distance <= 3 ) {
$link = get_permalink( $closest_match );
$title = get_the_title( $closest_match );
echo '<div class="suggest-box">';
echo '<p>もしかして、こちらの記事をお探しではありませんか？</p>';
echo '<a href="' . esc_url( $link ) . '">' . esc_html( $title ) . '</a>';
echo '</div>';
}
このロジックを実装することで、URLの手打ちミスによる機会損失を救い、ユーザーを正しいコンテンツへと誘導できます。
Google Analytics 4 (GA4) によるエラー追跡と改善サイクル
マーケターの視点では、404ページは「サイトの不具合検知センサー」です。404ページの表示回数が増えているということは、サイト内にリンク切れがあるか、外部サイトからのリンクが間違っているか、あるいは特定のページが削除されたにもかかわらずリダイレクト設定が漏れている可能性があります。
これを検知するためには、404ページが表示されたタイミングで、GA4にカスタムイベントを送信する設定を 404.php に埋め込む必要があります。
データレイヤーを用いたイベント送信
Googleタグマネージャー（GTM）を使用している場合、以下のようなスクリプトを記述して、どこのURLでエラーが起きているかを記録します。
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'error_404',
'page_path': '<?php echo esc_js( $_SERVER['REQUEST_URI'] ); ?>',
'referrer': '<?php echo isset($_SERVER['HTTP_REFERER']) ? esc_js($_SERVER['HTTP_REFERER']) : "direct"; ?>'
});
</script>
これにより、「どのURLで404が発生したか」だけでなく「どのページからリンクされていたか（リファラー）」も特定できます。もしリファラーが自社サイト内であれば、即座に修正すべきリンク切れ（Broken Link）です。外部サイトからのリンクであれば、301リダイレクトを設定して、正しいページへ転送することで、失われていたアクセス（SEO評価）を取り戻すことができます。
離脱を防ぐためのナビゲーション設計と回遊導線
404ページに到達したユーザーは、直帰（サイトから離れること）する可能性が極めて高い状態です。これを防ぐためには、単に「トップページへ戻る」ボタンを置くだけでは不十分です。ユーザーはトップページに行きたいのではなく、「探している情報」に行きたいのです。
サイトマップの動的表示と人気記事の掲出
ユーザーが迷子になった時、地図を見せるのが最も親切です。wp_list_pages や wp_list_categories を使用して、サイト全体の構造をコンパクトに表示します。
さらに効果的なのが、「今、このサイトで最も読まれている記事（人気記事ランキング）」を表示することです。ユーザー自身の本来の目的とは違うかもしれませんが、「多くの人が読んでいる有益な情報」を提示されることで、新たな興味を喚起し、サイト内回遊を促すことができます。
<div class="error-content">
<h3>人気のある記事を読んでみませんか？</h3>
<?php
// 人気記事プラグインなどのロジックを利用、あるいはコメント数順などで取得
$args = array(
'posts_per_page' => 3,
'orderby' => 'comment_count',
'order' => 'DESC'
);
$popular_query = new WP_Query( $args );
if ( $popular_query->have_posts() ) :
echo '<ul class="popular-posts">';
while ( $popular_query->have_posts() ) : $popular_query->the_post();
// 記事リストの表示
endwhile;
echo '</ul>';
wp_reset_postdata();
endif;
?>
</div>
ブランドイメージを損なわないためのデザインと言葉選び
技術的なことだけでなく、デザインやコピーライティングも重要です。404ページは、ブランドの「素」が出る場所とも言われます。
堅いコーポレートサイトであれば、誠実に「申し訳ございません。お探しのページは削除されたか、URLが変更された可能性があります」と伝えるのが正解です。 一方で、フレンドリーなブランドやBtoCのサービスであれば、少しユーモアを交えたり、ブランドキャラクターが謝っているイラストを使ったりすることで、ユーザーのイライラを緩和し、逆に「かわいい」「面白い」というポジティブな印象に変えることも可能です。
事業のトーン＆マナーに合わせる
重要なのは、サイト全体のトーン＆マナーから逸脱しないことです。404ページだけデフォルトの無機質なデザインだと、「管理が行き届いていないサイト」という印象を与えてしまいます。ヘッダーやフッターは必ず他のページと共通のものを使用し、サイトの一部であることを認識させることが信頼感につながります。
セキュリティへの配慮・バージョン情報の隠蔽
エラーページは、攻撃者にとっても情報の宝庫になり得ます。デフォルトのエラー画面や、不用意に作成された404ページには、使用しているサーバーの情報やWordPressのバージョン、PHPのエラーメッセージなどが表示されてしまうことがあります。
404.php を作成する際は、WP_DEBUG が有効になっていないか確認することはもちろん、不要なシステム情報を画面に出力しないよう注意が必要です。攻撃者は404ページを含むあらゆるページから脆弱性の糸口を探しています。
検索フォームの最適化
404ページに設置する検索フォームは、ただ設置するだけでなく、プレースホルダー（入力欄にあらかじめ表示されている薄い文字）を工夫します。「キーワードを入力してください」ではなく、「解決したい悩みや、サービス名を入力してください」といった具体的なアクションを促す文言にすることで、検索機能の利用率を高めることができます。
<form role="search" method="get" class="search-form-404" action="<?php echo home_url( '/' ); ?>">
<label>
<span class="screen-reader-text">検索:</span>
<input type="search" class="search-field" placeholder="例：料金プラン、導入事例..." value="" name="s" />
</label>
<button type="submit" class="search-submit">探す</button>
</form>
404ページは「終わりの場所」ではなく「始まりの場所」
404ページを「エラー処理」ではなく「リテンション（顧客維持）施策」の一環として捉えてみましょう。
正しいステータスコードでSEO評価を守る
類似URLの提案でユーザーを助ける
GA4でエラーを追跡し、サイトの欠陥を修復する
人気記事や検索窓で次のアクションを提示する
これらを実装した 404.php は、道に迷ったユーザーに対し、ただ謝るだけでなく、新しい道を案内する優秀なコンシェルジュとなります。ぜひ、貴社のホームページにおいても、この「隠れた重要ページ」の最適化に取り組んでみてください。それは必ず、サイト全体の品質向上（EEAT）に寄与します。
WordPressサイトにやってきたユーザーの離脱を防ぐために
基本的には存在しないページ・削除されたページを示す404エラーが返された時には、404の際のページを用意していない限り、英語でエラー表示が出ます。また、WordPressのテーマにもよりますが、404.phpとして404エラー時のページ表示のファイルが用意されている場合でも、英語でエラーコードが表示されたり、「見つかりません」と表示される場合がほとんどです。
削除済みのページであってもGoogleのインデックスに残存していたり、削除前に設置された外部からのリンクを経由してホームページにやってくるユーザーもいます。
こうしたユーザーの混乱を避けるために、404ページの表現に工夫を加えていくことで、ユーザーの離脱を防ぐことができます。
404ページへの工夫も大切ですが、もしページが移動しただけ（URL変更）の場合は、301リダイレクトを使用するなど適切な処理を心がけましょう。
（初回投稿日 2015年12月2日）
WordPressカスタマイズ・修正
ホームページ制作 京都のWeb制作会社ファンフェアファンファーレでは、WordPressで制作されたウェブサイト・ホームページのカスタマイズサービスとして、WordPress（ワードプレス）のテーマ（テンプレート）やプラグインのカスタマイズサービスを提供しております。
WordPressカスタマイズの他、WordPressに関する様々な機能の実装や調整、編集はもちろん、各種エラーの修正・復旧・復元に対応しております。
WordPressでのホームページ制作（WordPressサイト制作）
ホームページ制作 京都 ファンフェアファンファーレでは、ホームページ制作にあたり、WordPressでのホームページ制作（WordPressサイト制作）を推進させていただいております。
企業のWebマーケティングを加速するWordPressでのホームページ制作（WordPressサイト制作）ならお任せください！新規WordPressサイト制作はもちろん、htmlサイトからのホームページリニューアル、WordPressサイトのリニューアルにも対応しています。
WordPress（ワードプレス）でのホームページ制作・ウェブサイト制作
Related page
-
今回は、WordPressテーマのindex.phpを編集してWordPressサイトのトップページをカスタマイズする方法についてお伝えします。 本来、WordPressのトップページは、表示設定において「最新の投稿」をリスト表示するか、固定ページを選択して表示を行います。その他、フロントページ機能を用いて、トップページ用の固定ページテンプレートを使いながら
-
WordPressテーマのheader.phpを編集してヘッダーをカスタマイズする方法をお伝えします。 WordPressサイトは、全ページの共通部分としての「サイトヘッダー」があり、この部分にはサイトタイトルやサイトロゴ、主要なページへのリンクが設置されているグローバルナビゲーションなどが組み込まれています。 サイトヘッダーは「WordPressサイト」の
-
今回は、WordPressサイトの投稿ページをカスタマイズする方法として、WordPressテーマのsingle.phpを編集して投稿ページをカスタマイズする場合についてお伝えいたします。 主にカスタムフィールドの設定反映、著者名や投稿日、最終更新日の反映、カテゴリーの呼び出し、アイキャッチ画像の設置、投稿記事に属するタームを表示などについて触れていきます。
-
今回は、WordPressテーマのsearch.phpを編集してサイト内検索結果ページのリストをカスタマイズする方法についてお伝えします。 WordPressには現在サイト内に公開されている投稿や固定ページを検索し、検索結果一覧リストを表示するサイト内検索機能があります。WordPressテーマによってはサイト内検索が設置されていないものもありますが、大半の
-
WordPressテーマのsidebar.phpを編集してサイドバーをカスタマイズする方法をお伝えします。 WordPressサイトの中でサイドバーは主にサブコンテンツを配置する場所で、主要ページへのリンクやカテゴリーアーカイブ、タグクラウド、新着記事のリストなどが設置されます。 WordPressにおいて一般的にサイドバーは、サイドバーウィジェットを用いて
