【WordPress】404ページの作り方・リダイレクト方法の解説

RELEASE / 2023.11.5 UPDATE / 2023.11.16

.htaccess

404

WordPress

テンプレート

プラグイン

リダイレクト

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

Webサイトを運営する際、閲覧者が予期しないページへアクセスしてしまうことはユーザー体験を損ねてしまうため、出来る限り防ぎたいところですが、完全に防ぐことは難しいです。
それは運営者側の設定で全て回避することが出来れば、完全に防ぐことは出来ますが、閲覧者側が原因でそのようなページへアクセスしてしまうことも想定されます。
このブログではこのように閲覧者が予期しないページへアクセスしてしまった際の対応方法を詳しく解説していきます。

この記事の目次を表示

1 「 404 Not Found」（404エラー）とは
- 1.1 何故表示されるのか
2 WordPressサイトでの「 404 not found」（404エラー）の対応方法
3 まとめ

「 404 Not Found」（404エラー）とは

「404 Not Found」（404エラー）は、インターネット上のサーバーエラーの一種であり、存在しないページにアクセスしようとしたときにブラウザに表示されます。サーバーエラーには様々な種類がありますが、400番台のエラーはクライアントエラーと呼ばれ、これは閲覧者側からの要求に対してサーバー側が応答できない場合に発生します

何故表示されるのか

「404 Not Found」（404エラー）が表示される原因には様々なものがありますが、主に次の2つが考えられます。

削除されたページへアクセス

「404 Not Found」（404エラー）は、すでに削除されて存在しないウェブページをアクセスしようとしたときに表示されます。Googleなどの検索エンジン経由でウェブページにアクセスする場合でも、このエラーに遭遇することがあります。これは、ウェブサイトの管理者がページを削除したとしても、Googleの検索結果が即座には更新されないためです。検索インデックスに残っている情報がリアルタイムで削除されるわけではなく、削除されたページの情報が一定期間、検索結果に表示され続けるためです。結果として、検索結果に表示されたリンクをクリックすると、ページが既に存在しないにもかかわらず「404 Not Found」（404エラー）が発生する場合があるのです。

URLが間違っている

閲覧者がURLを直接打ち込んでアクセスしようとした場合、入力したURLに誤りがある場合、該当するURL、ページが存在しないため、「404 Not Found」（404エラー）が表示されます。URLは1文字でも間違えるとアクセスることが出来ません。

WordPressサイトでの「 404 not found」（404エラー）の対応方法

閲覧者がウェブブラウザのアドレスバーにURLを直接入力してアクセスしようとした場合、もし入力ミスがあると、そのURLに対応するページが存在しないために「404 Not Found」（404エラー）のメッセージが表示されます。URLには正確さが求められ、たとえ1文字の違いがあっても、正しいページにアクセスすることはできません。

404ページを作成

WordPressはテンプレート階層という特定のページが存在する場合、優先的にそのファイルが使用されるという仕組みを取り入れて言います。
トップページや投稿ページはもちろん、WordPressでは「404 Not Found」（404エラー）専用のテンプレートファイルを用意しています。このファイルが404.phpです。404.phpがテーマフォルダ内に存在している場合、閲覧者が存在しないページにアクセスした場合、WordPressはこの404.phpを使用してページを表示します。
「404 Not Found」（404エラー）の際、404.phpを表示させるだけであれば、特に設定をする必要はなく、テーマ内に404.phpというファイルを作成するだけで大丈夫です。

ただし、この404.phpで任意のテキストを表示したり、ボタンを表示したりする場合は、この404.phpにHTMLを記述する必要があります。ここでは一般的な404.phpに記載される内容をHTML・CSSと合わせてサンプルソースをご紹介します。ご紹介するテキストやHTML・CSSは適宜調整してご使用ください。

404.php

<?php get_header(); ?>
<div class="page404">
    <h1 class="page404__title">404 NOT FOUND</h1>
    <h2 class="page404__subtitle">お探しのページは見つかりませんでした</h2>
    <p class="page404__text">お探しのページは見つかりませんでした。<br>ご指定いただいたURLはすでに削除されたか、間違っている可能性があります。</p>
    <div class="page404__button"><a href="<?php echo home_url(); ?>">TOPへ戻る</a></div>
</div>
<?php get_footer(); ?>

CSS

.page404{
    width: 1000px;
    margin: 50px auto;
    text-align: center;
}
.page404__title{
    font-size: 30px;
    margin-bottom: 5px;
}
.page404__subtitle{
    font-size: 20px;
    margin-bottom: 15px;
}
.page404__text{
    font-size: 1.8px;
    line-height: 1.5;
}
.page404__button{
    width: 200px;
    margin: 0 auto;
}
.page404__button a{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222;
    color: #fff;
}
.page404__button a:hover{
    backgrond: #fff;
    color: #222;
    border: 1px solid #222;
}

リダイレクト処理関数を作成し任意のページへリダイレクト

続いてご紹介するのが「404 Not Found」（404エラー）でページが存在しなかった場合、専用のページを表示するのではなく、特定のページへリダイレクト、つまりページ移動させる方法です。
この方法はひとつではなく、様々な方法が存在しています。ここでは代表的な方法を3つご紹介します。

404ページのテンプレートを使用

先ほど「お探しのページは見つかりませんでした」ということを表示した404.phpはテキストを表示するだけでなく、404.phpが表示された際、強制的にあらかじめ指定したページへリダイレクトをさせることが出来ます。404.phpは実は万能なんですね。それでは404.phpを使用したリダイレクト方法を見ていきましょう。

<?php
	header('Location:' . home_url());
?>

404.phpにアクセスした際、PHPの組み込み関数のheader関数を実行して、特定のページへリダイレクトさせる記述です。上の例ではトップページのURLを取得するWordPressの標準関数を引数として指定しているため、アクセスしたページが存在しない場合、強制的にトップページへリダイレクトさせることが出来ます。

functions.phpを使用

「404 Not Found」（404エラー）の際の処理は404.phpだけでなく、functions.php経由でも指定することが出来ます。function.phpを使ったリダイレクト方法は以下の通りです。

<?php
    function redirect_404() {
        if (is_404()) {
            wp_redirect(home_url());
            exit();
        }
    }
    add_action('template_redirect', 'redirect_404');
?>

この関数をfunctions.phpに記載は、WordPressで「ページが見つからない」（is_404() が true）時に動作します。この関数があると、訪問者が指定したページが存在しない時に、サイトのトップページにリダイレクトさせます。

.htaccessを使用

先ほどの2つの例の他に.htaccessに記述することで「404 Not Found」（404エラー）の際、特定のページへリダイレクトさせることが出来ます。.htaccessに記載する場合は以下の通りです。

ErrorDocument 404 /

もし仮に上で紹介した、404.php、functions.php、.htaccessそれぞれに別々のページへリダイレクトする処理を記述していた場合、どうなるのでしょう？

この場合、一番最優先されるのは.htaccessです。これはサーバーの設定ファイルのため、最も早い段階で処理されます。そのためこのファイルに記述したページへリダイレクトされます。
2番目に優先されるのが、functions.phpです。このファイルの処理はWordPressのテーマが読み込まれた後、特定のアクションをきっかけに実行されます。そのため.htaccessにリダイレクトの記述がない場合は、functions.phpに記述された処理によって指定したページへリダイレクトします。
.htaccess、functions.phpどちらにも「404 Not Found」（404エラー）の際の処理が記述されていない場合は、この404.phpに記述された内容が実行されます。

ただし、同様の処理を複数個所に記載するのは思わぬバグを生んでしまったり、複数人でサイト管理をしている混乱を生じさせてしまう恐れがあります。各個人、またはチーム内でどの方法で処理するのかルール化しておくことが望ましいです。

プラグインを使用

WordPressのプラグインで「404 Not Found」（404エラー）をコントロールするものは多数用意されています。ここではいくつか代表的なものをご紹介します。

Smart Custom 404 error page [404page]

このプラグインは、WordPressのテーマに組み込まれている404.phpをカスタマイズしたページに簡単に置き換えることが出来ます。使用が簡単で、追加の設定はほとんど必要ありません。
プラグインは管理画面または以下からダウンロードすることでインストール出来ます。
Smart Custom 404 error page [404page]

Redirection

これはWordPressで非常に人気のあるリダイレクト設定の出来るプラグインです。「404 Not Found」（404エラー）を検出して、指定したURLに自動的にリダイレクトするルールを作成出来ます。また、「404 Not Found」（404エラー）が発生した時のログを取ることも出来ます。
プラグインは管理画面または以下からダウンロードすることでインストール出来ます。
Redirection

All 404 Redirect to Homepage

このプラグインは名前の通り、全ての「404 Not Found」（404エラー）をホームページにリダイレクトすることが。SEOにマイナス影響を及ぼすことなく、訪問者をサイトにとどめるのに役立ちます。
プラグインは管理画面または以下からダウンロードすることでインストール出来ます。
All 404 Redirect to Homepage

まとめ

この記事では、WordPressを使用している際に避けられない「404 Not Found」（404エラー）に直面したときの対処法を幅広くご紹介しました。最初に触れたように、「404 Not Found」（404エラー）を全て予防することは現実的ではありませんが、適切な準備と事前対策によって、これらのエラーがユーザー体験に及ぼす影響を最小限に抑えることが可能です。
適切に「404 Not Found」（404エラー）を管理することは、訪問者にとって使いやすいウェブサイトを維持し、その閲覧者を再訪してくれるリピーターに変える可能性を高めます。最終的には、こうした細やかな注意がWEBサイトを成功に導く重要な要素となるのです。だからこそ、「404 Not Found」（404エラー）の対策は、サイト運営者にとって欠かせないものと言えるでしょう。