Wordpress 404ページを表示させる(プラグイン設定・ステータスには注意)
404エラーはテーマ上に404.phpがあれば自動で表示されますので、中身をカスタマイズしてユーザーの離脱率を下げる工夫をしましょう。
ステータスコードはきちんと404になっているか確認しましょう(ソフト404に注意)。
404pageプラグインを使えばすぐに実装できますし、404ページの編集機能を搭載したテーマもあります。
404エラーページとは
WEBサイトで存在しないページURLを打った際に表示させるページが「404エラーページ」です。
特にリンク切れしたページ・削除したページ時のアナウンスとして表示する場合が多いです。
存在しないページが発生する理由
この「存在しないページ」が生じる理由には、様々なケースが考えられます。
・以前は存在していたが現在は削除されているページ
・URLの入力を間違えた場合
・内部リンクのリンクミス
管理者の意図がある場合とそうでない場合とがありますね。
本記事では、特にWordpressにおける404エラーページの設置方法についてまとめています。
Wordpressの仕様
エラー時の優先順位
Wordpressの基本ルールとして、該当ページが存在しない場合は「index.php」が優先表示されるようになっています。
index.phpと言えばテーマTOPのテンプレートですので、WEBサイトのTOPページが表示される訳です。
ただしブラウザのタブ部分に「ページが見つかりません」と出たTOPページが映るため、ユーザーにページがなかった事が伝わりにくい面があります。
存在しないのであれば、明確に表示するべきだと思います。
※ユーザーもがっかりする可能性がありますしね。
エラー専用ファイル「404.php」
テーマテンプレート上に404.phpがあると、該当ページが存在しない場合にそれが表示されるようになります。
404.phpは「404エラー」時に表示するページテンプレートです。
テーマテンプレート上に「404.php」の名前でファイルを置くだけで、それが表示されるようになります。
エラー時はindex.phpよりも、404.phpの方が優先されます。
テーマテンプレート内に元々ある場合が多い
一般的に配布・販売されているWordpressテーマテンプレートでも、404ページは入っている事が多いです。
もちろん自分でテーマを自作する場合は自前で用意する事になります。
404エラーページ(404.php)の作成
まずはこのページが表示された理由を明確に出す事が大きな役目です。
・指定されたページは存在しませんでした
・ページが見つかりませんでした
などを大きめに出すべきですね。
ユーザーの次の行動をサポート
その他にも以下の項目を出しておくと良いと思います。
・表示エラーになったページのURL名
・検索ボックス
・TOPへ戻るリンク
404.phpソース例
<?php get_header(); ?> <div id="main"> <h2>お探しのページが見つかりませんでした(404 Not Found)</h2> <h3>指定された以下のページは存在しないか、または移動した可能性があります。</h3> URL:<?php echo get_pagenum_link(); ?> お探しのコンテンツキーワードで検索できます。 検索ボックスコンテンツが入ります。 <a href="<?php echo home_url(); ?>">サイトタイトル名</a>へ戻る </div> <?php get_sidebar();?> <?php get_footer();?>
テーマテンプレートの一部なので、従来通り上と下はheader.phpやfooter.phpを使います。
そこ以外の内容は自由ですが、最低でも上記位の項目はあった方が良いと思います。
get_pagenum_link()
上記コードではget_pagenum_link()でリクエストしたエラーページのURLを取得しています。
get_pagenum_link() は指定されたページ番号のリンクを取得するものです。
ここでページ番号の指定がなければ、今のページURLが取得できるのでそれを利用します。
404エラーページの持つ役割
アクセスURLが既に存在しない事をユーザーが伝えるだけが、404エラーページの役目ではありません。
もしそれだけにとどまってしまうと「ユーザーを落胆させる可能性が高い」ためです。
ユーザーを落胆させないために、検索ボックスの設置や人気記事を並べる事は大切な事です。
ユーザーの離脱率を下げる
例えば目的のコンテンツを検索してもらう事で、滞在時間を延ばす事にもつながります。
さらにお勧めや人気記事などを表示しておけば、本来の目的ページでは無くても訪問される可能性は高いです。
こういった整備が訪問ユーザーのストレスを軽減し、離脱率を下げる事に貢献します。
あくまで「ユーザーにフレンドリーな404エラーページ」を目指しましょう。
404.phpファイルがあるのに表示されない場合
時にはエラーが出ているにも関わらず、404.phpページが表示されない場合があります。
そんな時はサイトトップディレクトリにある.htaccessファイルに追記しましょう。
.htaccess追記内容
ErrorDocument 404 /index.php?error=404
上記コードは.htaccessの上部に入れます。いつものWordpressコード(画像上のifModule mod_rewrite.cから下)が最後に来るようにしましょう。
この様に記述する事で404.phpが表示されるようになるはずです。
サブディレクトリにある場合
それともう一つ、Wordpressファイル一式が特定ディレクトリ内にあり、サイトTOPページが外に出ている場合がありますよね。
その場合は特定ディレクトリTOPにある.htaccessに、以下の形で指定しましょう。
ErrorDocument 404 /ディレクトリ名/index.php?error=404
ステータスコードの確認(ソフト404防止)
例えば管理者があえて対象のページを削除したとしましょう。
その場合は404エラーページを用意すれば良いのですが、ステータスコードとして正しく「404」が出ているかは確認しておく必要があります。
何故かというと、表示上は404でも実際は200(リクエストは正常処理)となっている可能性があるからです。
これがいわゆる「ソフト404」と呼ばれるものになります。
ソフト404
ソフト404とはエラーでは無く、「通常ページだがほとんど無価値」という認識です。
ソフト404は「別ページのコピー」と判断されたり、単純にインデックスする価値がないとみなされるページに対して判定される事が多いです。
Googleから受ける判定として、決して好ましい状態ではない事にご注意下さい。
サイト評価の面で言うと、「エラーページ」と思われるより「価値が低い通常ページ」と判断される方が怖い訳です。きちんと「エラーページ」と思われる必要があります。
ステータスコードの確認方法
エラーページを開いてF12を押し、開発者ツールを開きましょう。
パネルの「要素」や「コンソール」の欄にある「ネットワーク」を選択します。
ネットワークが無い場合は、矢印をクリックして表示させましょう。
ステータス404の状態
そのページの各要素名とステータス状態の一覧が表示されます。
上記の様に404表示があれば正常なエラーとなります。
専用プラグインを導入する方法
Wordpressには「404page」というエラーページ専用プラグインがあります。
これを使えば簡単に404エラーを表示・管理する事ができます。
エラーページを自作しない場合はぜひこういったプラグインを活用してみましょう。
プラグインのインストール・有効化
プラグインの新規追加から「404page」で検索をします。
404pageを探してインストール・有効化をしましょう。
エラー専用固定ページの準備
今回紹介するこのプラグインは専用ページを出力するのではなく、指定された固定ページを表示するプラグインです。
ですので先に404エラー専用の固定ページを1ページ準備する必要があります。
ページの中身は先ほど紹介した「404.phpの中身」と大体同じにしましょう。
パーマリンク部分は「404error」など名前にしておけばわかりやすいでしょう(※ここは自由です)。
プラグイン設定
ではWordpress管理画面「外観」から「404 Error Page」をクリックします。
Generalの下にあるセレクトボックスの中で先ほど作成したエラー専用固定ページを選びましょう。
画面下にある「変更を保存」ボタンをクリックするだけです。
詳細設定について
Advancedのタブを開くとON・OFFできる項目が並んでおり、2つ目がONになった状態かと思います。
基本的にはどれも変更する必要はないです。
Send an 404 error if the page is accessed directly by its URL
これは先ほど作ったエラー用固定ページを直接開いた際、「エラー」と判定するかどうかの部分になります。
404エラー専用に作った訳ですから、このままONにしておきましょう。
404エラーページを確認する
404ページが実際にどのように表示されているかを確認する方法は2つあります。
・存在しない適当な URL にアクセスする
・以下のURLにアクセスするhttps://example.com/fred.php
※上記ドメイン名部分は、自サイトのドメインに変えて確認しましょう。
先ほど設定した固定ページが表示されると思います。
ステータスコード
上記エラーページをF12で確認した状態。正常に404エラーになっています。
404設定機能が搭載されたテーマもある
テーマによっては、プラグインを使わなくても最初から404ページの内容を編集できる機能が備わっているものがあります。
いくつか代表的なテーマをご紹介しましょう。
404ページ編集可能テーマ例
Cocoon
無料テーマとして有名な「Cocoon」の場合、管理画面から画像・タイトル・メッセージの編集ができます。
さらに404ページ専用のウィジェットも用意されているので、初心者でも簡単に設定できるはずです。
Simplicity
Simplicityの場合、「外観→レイアウト」項目にある「404イメージ」に画像を設定する事で、画像を表示させる事ができます。
「外観→ウィジェット」設定に「404ページ」ウィジェットエリアがあり、テキストなどを設定する事ができます。
Lightning
Lightningは、「G3 Pro Unit 0.14.0」から「404 Page」という投稿タイプが追加してあります。
この投稿タイプを選択して、新規投稿という形で404ページ内容を入力する事ができます。
404ページのレイアウトは「外観→カスタマイズ→Lightning→レイアウト設定→カラム設定」からカラム指定もできます。