Wordpressの404エラーページをカスタマイズ！親テーマに404.phpがあれば簡単に編集できます。

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

ブログを運営していると投稿ページや固定ページのカスタマイズに執着しがちですが、意外と盲点になるのが404ページです。

404ページはアクセスしたページが存在しない場合に表示されるページです。

デフォルトテーマtwentytwentyoneの404ページ

Wordperssのデフォルトテーマでは404ページにはサイト内検索が表示されます。

404ページの主な役割は以下です。

ページのURLを変更した時はリダイレクトで対応しないといけません。
404ページが表示された時点でユーザーに直帰される可能性は極めて高くなります。
が、それでも工夫次第でサイトに留まってもらえるかもしれません。

特に404エラーページが「ページが見つかりません。」や「404 NOT FOUND」だけの表示になっている場合は、サイト内検索だけでも追加しましょう。

404エラーページの確認

カスタマイズの前にまずは自分のサイトの404ページを確認してみましょう。
適当なURLを打ち込んでも良いのですが、404にアクセスすれば簡単で確実です。

トップページURLの後ろに404と打ち込むと404ページが表示されるはずです。

当サイトの場合はこんな感じです。

カスタマイズ前の当サイトの404ページ

カスタマイズ前の当サイトの404Not Foundページは非常にシンプルでした。

最低限の機能は果たしていますが、何か情報があると思ってアクセスしてきてくれたユーザーにいきなり「申し訳ありません。お探しのページはありませんでした。」と表示されることになります。

これは直帰間違いなし！・ｗ・
このページにサイト内検索とカテゴリー一覧を表示するようにします。

404エラーページのカスタマイズ方法

では早速カスタマイズしましょう。
具体的な手順は以下です。

ほとんどのテーマで親テーマに404.phpがあると思います。
ここでは親テーマに404.phpがある前提でお話しさせていただきます。

404.phpが親テーマにない場合はsingle.phpを404.phpに名前変更し、それをベースに要らない部分を削除、404ページに表示したい内容を追記する感じで実装できます。

親テーマから404.phpを子テーマにコピーする

まずは編集用のファイルを作りましょう。
親テーマ内の404.phpを直接編集しても反映されるのですが、テーマのアップデート時に上書きされてしまいます。

そこで子テーマにも404.phpを作ります。
1から作るのは面倒なので親テーマの404.phpをコピーしてそれをベースにします。

子テーマ内に404.phpをコピー

親テーマから404.phpをコピーし、子テーマにそのままの名前で設置します。
名前が同じであれば子テーマの404.phpが読み込まれます。

子テーマの404.phpを編集する

あとは子テーマの404.phpを404NOT FOUNDページで表示する内容に書き換えます。

カスタマイズの内容は自由なのですが、個人的に以下はあった方が良いと思います。

デザインは通常ページと同じ感じで作りましょう。
かけ離れたデザインにするとユーザーは"どこに飛ばされた！？"と混乱します。

余談ですが、404ページでの広告表示はNGです。
貼れないのではなく、多くの場合ポリシー違反となりますので気を付けてください。

テンプレートファイルにはHTMLとPHPが混在する

404.phpはテンプレートファイルなのでHTMLとphpが混在しています。
ここで初心者の方には厳しい内容になるのですが、編集する内容はテーマによって異なるので具体的な説明が出来ません。

せめて参考になりそうな情報を書いておきます。

404.phpで使えそうなコード

検索フォームを404ページに追加するにはWordpress専用の関数を使用すれば一発でサイト内検索が表示できます。
また、テーマやプラグインによって実装されるショートコードも使えます。

これらをHTMLと組み合わせてカスタマイズすると良いです。

サイト内検索フォームを表示する

サイト内検索はWordpressの機能を呼び出せば簡単に実装できます。

 404.php
<?php get_search_form(); ?>

ショートコードを使用する

テーマのショートコードも使えます。
（プラグインのショートコードも可能）

 404.php
<?php echo do_shortcode('[ショートコード名]'); ?>

スマホ、PCでの表示分け

スマホとPCで何か出し分けたい表示がある場合は以下です。

 404.php
<?php if ( wp_is_mobile() ) : ?>
スマホ＆タブレットに表示したい内容。
<?php else: ?>
PCだけに表示したい内容。
<?php endif; ?>

以上２点に注意しながらユーザービリティーの高い404ページを設計しましょう！

まとめ

簡単ではありましたがWordpressの404ページをカスタマイズする方法でした。
ワードプレスの場合は404.phpという専用のテンプレートが読み込まれるので比較的簡単にカスタマイズすることができます。

最後に当サイトでは以下のような感じにしてみました。

カスタマイズ後の当サイトの404ページ

テーマの機能としてスライダーが使えたので、カテゴリー表示に使ってみました。
少し重たいのと、逆に見えにくくなっているのが気になりますがインパクト重視でｗ

今時URLを手入力する方はいないと思うので、404ページはリダイレクト設定のミスやリンク切れがあった時の保険として考えています。