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

2021-09-10
WordPress

Wordpress-404エラーページカスタマイズ_eyecatch

WordPressサイトで404ページを編集してカスタマイズする方法です。

404Not Foundページと言えばリクエストされたURLにページが存在していない場合に表示されるエラーページですが、工夫次第で見つからなかった記事があるか検索してもらえたり、他に関心のある記事を読んでもらえるかもしれません。

サイト内検索や人気記事、カテゴリーなどを表示してユーザービリティーを高め、直帰率を少しでも下げるとSEOに良い影響が出るかもしれません。

WordPressの場合は404.phpという専用のテンプレートがありますので簡単にカスタマイズできます。

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

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

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

Wordpress-404エラーページカスタマイズ_001

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

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

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

404ページの役割

  • ページが存在せず、表示できない事を伝える。
  • アクセスしたURLが間違っている可能性を伝える。
  • URLが変更されたか、ページが削除された可能性があることも伝える。
  • どちらにしても表示できないので、サイト内検索などの代替え案を提案する。

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

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

404エラーページの確認

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

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

(例)https://sologaku.com/404

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

Wordpress-404エラーページカスタマイズ_002

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

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

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

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

スポンサーリンク

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

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

  1. 親テーマから404.phpをコピー
  2. 子テーマにコピーした404.phpを設置
  3. 子テーマの404.phpをカスタマイズする

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

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

ポイント

404.phpが無ければindex.phpのテンプレートが読み込まれます。

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

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

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

Wordpress-404エラーページカスタマイズ_003

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

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

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

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

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

404ページに含めたい情報

  • ページの説明
  • 表示される原因
  • 検索フォーム
  • 人気記事やカテゴリーなどのコンテンツ

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

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

Wordpress-404エラーページカスタマイズ_004

テンプレートファイルには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ページにはキャッシュが効きません。
重たいパーツを増やすとアクセス数に応じてサーバー負荷が高くなります。

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

まとめ

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

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

Wordpress-404エラーページカスタマイズ_005

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

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

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

関連記事

ワードプレスのサイト内検索は全角スペースが効きません。
確認していない方は動作確認しておくと良いです。
WordPressのサイト内検索が全角スペースだとダメ、半角区切りならOK?ープラグイン無しで解決する方法。

-WordPress

ありがとうございました!
良かったらシェアしてネ・w・
当サイトはピンバックを受け付けます。

© 2022 ソロ学