404 not found(エラー)ページをオリジナルにカスタマイズする!

404 not found(エラー)ページをオリジナルにカスタマイズする!

ネットサーフィンをしていると突然『404』と書かれたページにアクセスした事はありませんか?

飼いヌコ
あるある。

この『404 not found』は、ページが見つからない場合に返されるエラーになります。

404 not found(エラー)ページをオリジナルにカスタマイズする!

通常、WEBサイトを閲覧する場合、ブラウザから送られるリクエストに対し、サーバーからは3桁の数字が返されますが、これをHTTPステータスコードと呼びます。

今回は、404 not found(エラー)ページをオリジナルにカスタマイズする方法を紹介したいと思います。

スポンサーリンク

ステータスコードの種類と役割

404 not found(エラー)ページをオリジナルにカスタマイズする!

HTTPステータスコードは100番台から500番台まで存在し、それぞれ個別に役割があります。下記は代表的なステータスコードです。

番号意味
100番台処理中100:リクエストが処理中
200番台リクエスト完了200:リクエストの受付に成功
300番台リダイレクト301:別URLへ恒久的な転送
400番台エラー(クライアント側に問題)404:ページが見つからない
500番台 エラー(WEBサーバーに問題)503:一時的に過負荷やメンテナンスで使用不可能
飼いヌコ
503はたまに見かけますね。

404 not found(エラー)ページとは? 原因は?

あなたは何か情報を知りたい時などは、インターネットで検索すると思います。そこで、目的のページを見つけてクリックすると、下記の様なページを見かける事があると思います。この状態が404 not found(エラー)ページです。

ページが存在しません 404 NOT FOUND 記事は見つかりませんでした。

404 not found(エラー)ページが作成される原因は大きく分けて3つあります。

  • 以前はページとして活用されていたが、現在はそのページは削除されてしまっている。
  • URLを打ち間違えて表示された。
  • リンク切れページ(内部リンク)をクリックした。

このような原因が考えられます。

有益な404 not found(エラー)ページとは

404 not found(エラー)ページをオリジナルにカスタマイズする!

404 not found(エラー)ページは自由にカスタマイズが出来ます、検索ユーザーをサイトから離脱させないように、有益な404 not found(エラー)ページを作るには、以下の様にすることがお勧めです。

  • ユーザーに対して、探しているページが見つからないことを明確に伝えます。親しみやすく魅力的な言葉を使用します。
  • 404 ページを、サイトのその他の部分と同じデザイン(ナビゲーションを含む)にします。
  • 最も人気のある記事や投稿へのリンクの他、ホームページへのリンクを追加します。
  • ウェブサーバーが実際の 404 HTTP ステータス コードを返すことを確認します。  引用元:Google

分かりやすくまとめると、下記の様な感じになると思います。

  • 404ページを検索ユーザーに対して、ページが見つからない事をやさしく伝えてね~。
  • 404ページは装飾しないで他の記事と同じ感じにしてね~。
  • 人気記事やトップへのリンクを作成しといてね~。
  • 実際にステータス コードを確認しといてね~。
飼いヌコ
検索ユーザーに有益な404ページにしなければならない訳ですね。

では、実際にWordpressで404 not found(エラー)ページを作っていきましょう。なお、ワタシがWordpressで使用しているテーマはSimplicityです。

親テーマの『404.php』をローカルにダウンロード

FTPソフトを起動して、ブログの親テーマの『404.php』をローカルにダウンロードします。なお、今回使用するFTPソフトはFileZillaです。

「public_html」➝「wp-content」➝「themes」➝「simplicity」と進んでいき、『404.php』をローカルにダウンロードします

404 not found(エラー)ページをオリジナルにカスタマイズする!

飼いヌコ
子テーマ? 直接親テーマを変更すれば良いのでは?

親テーマを直接カスタマイズした場合、テーマがアップデートされると、親テーマは新しく上書きされてしまい、これまでカスタマイズしてきたものが無駄になります、子テーマを作成する事により、テーマがアップデートされても子テーマに施したカスタマイズは上書きされずに残ります。

飼いヌコ
なるほど、テンプレートをカスタマイズする場合は子テーマを使えば良いのですね。

『404.php』の画像とテキストをカスタマイズする

ローカルにダウンロードした『404.php』をTeraPadなどのテキストエディタで開きましょう。デフォルトの場合、下記の様になっています。

404 not found(エラー)ページをオリジナルにカスタマイズする!

こんな感じですね、殺風景な404 not found(エラー)ページです。

404 not found(エラー)ページをオリジナルにカスタマイズする!

飼いヌコ
味も素っ気もないな~。

この平凡な404 not found(エラー)ページをオリジナリティ溢れる404ページに変更していきましょう。まず初めに、変更する画像を管理画面のメディアからアップロードしておきます。

404 not found(エラー)ページをオリジナルにカスタマイズする!

テキストエディタで開いた『404.php』を編集していきましょう。

クリックで拡大
404 not found(エラー)ページをオリジナルにカスタマイズする!

①「ページが存在しません」の個所を分かり易い文章に書き換えます。

②赤枠の[“”]の中の画像を先程アップロードした画像に変更します。

③Topページへのリンクと誘導文に変更します。

④検索BOXを設置します。

飼いヌコ
う~む、少し難しいかな?

なお、検索BOXを出力するための関数は以下になります。

この様にカスタマイズしました。このファイルを上書き保存後、子テーマにアップロードします。

クリックで拡大
404 not found(エラー)ページをオリジナルにカスタマイズする!

変更後の404エラーページです。訪問者にページが削除またはURLが変更された事を伝えて、トップページへのリンクと検索BOXを表示しました。

404 not found(エラー)ページをオリジナルにカスタマイズする!

下記は404ページへの直リンクです。

https://11874.click/404.php

飼いヌコ
世界に一つしかないオリジナルページですね(笑)。

まとめ

Simplicityの親テーマ内の『404.php』ファイルを、子テーマにコピーするだけで、初心者でも簡単にオリジナルの404 not found(エラー)ページの作成が可能になります。こうする事で訪問者の混乱を防げるし、SEO的にも有効的になると思います

※Simplicity2では、404ページの内容をウィジェットで変更する事が可能になりました。

WordPressの無料テンプレートのSimplicityでは、初心者には難しいPHPやCSSといったコードをいじらなくて良いので、比較的簡単にカスタマイズが可能になります。

スポンサーリンク

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)