カスタムWordPress404エラーページを作成する方法

公開: 2021-06-30

404ページにアクセスし、役に立たなかったためにすぐにWebサイトを離れた可能性が高いです。 404ページは、誰かがWebサイトに存在しないURLを入力またはクリックしたときに、WordPressが表示するページです。このページは、ページが見つからなかったことを訪問者に通知するだけの一般的なエラーです。この記事では、WordPressのカスタム404ページを作成する方法について説明します。その過程で、良いデザインと悪いデザインの両方が見られます。

WordPress用のカスタム404ページを作成する理由

誰にも見られないことを望んでいるので、404ページのデザインをスキップしたくなります。しかし、それはあなたの訪問者に役立つ必要があります。他のページと同じくらい重要です。一般的なメッセージは、ユーザーエクスペリエンスが悪いことです。それは見栄えが悪く、あなたのウェブサイトにとどまる理由を彼らに与えません。

まず、避けようとしている一般的なページを見てみましょう。

ジェネリック404ページ

WordPressが表示する標準の404ページは単なるエラーメッセージです。ボディコンテンツ領域内に配置され、ヘッダー、フッター、サイドバーがある場合はそれらが表示されます。

残念ながら、それは役に立ちません。それは、あなたが探しているものがあなたがいる通路にあるかどうか店員に尋ねるようなもので、彼らはただノーと言います。あなたは彼らにあなたを正しい通路に向けさせたいのです。より多くの情報が必要です。

404ページでより多くの情報が得られるはずです。役に立つはずです。ツール、リンク、アドバイス、または何らかの形のヘルプを提供する必要があります。次にどこに行けばいいのかわからないまま、通路に一人で残されたくはありません。

カスタム404ページの例

ウェブ全体に何千もの驚くべき404ページがあります。面白い人もいれば、深刻な人もいます。いくつかは他よりも役に立ちます。プレーンなものもあれば、ゴージャスなものもあります。これらがどのように設計されているかを理解するために、404ページをいくつか見てみましょう。シンプルで退屈なものもあれば、便利で見栄えのするものもあります。

1.グーグル

グーグル

Googleの（WordPressではない）404ページは単純です。これは、画面の中央にある小さなコンテンツ領域です。このメッセージは、エラーがあることを示し、ロボットのグラフィックをバラバラに提供します。それは他の情報を提供しませんが、それはグーグルなので、あなたがしなければならないのは検索バーに何か他のものをタイプすることだけです。

2. WordPress.org

WordPress.org

WordPress.orgの404ページには、標準のヘッダーとフッターが表示されます。本文には、ページが見つからなかったことを示すタイトル、ユーモアを交えた簡単な説明、ガイドに役立つリンクのリストが含まれています。リンクは役立つことに焦点を当てています。

3. WordPress.com

WordPress.com

WordPress.comの404ページは、ヘッダーとフッターを削除します。グラフィック、タイトル、クリック可能なリンク付きの説明、検索ボックス、WordPress.comのロゴが表示されます。リンクは役に立ちます。

4.エレガントなテーマ

エレガントなテーマ

エレガントなテーマの404ページ（とにかく見るつもりなので）には、ETヘッダー、小さな説明付きの大きなタイトル、およびCTAとしてのボタンが表示されます。ここからほとんどすべてにアクセスできます。

5.二十二十一

二十二十一

WordPressのTwentyTwenty-Oneテーマには、プライマリメニューとフッターメニューを使用する404ページがあります。タイトルが大きいです。本文には簡単な説明と検索ボックスがあります。線はスタイリングに使用されます。背景はサイトと一致しています。

6.二十二十

トゥエンティトゥエンティ

WordPressのTwentyTwentyテーマは、ヘッダーとフッターを表示します。本文には、中央に大きなタイトル、説明、検索ボックスが表示されます。すべてテーマの色を使用しています。

7.たるみ

スラック

Slack（WordPress以外）の404ページには、ヘルプセンターへのリンクとともに、エラーに関する情報が記載されたボックスが中央に表示されます。すべてのメニューもここにあります。興味深い部分は背景です。これは、マウスを追うために右または左にスクロールする漫画の背景です。アニメーションの動物が画面上を移動します。

8.アマゾン

アマゾン

Amazon（WordPressではない）の404ページには、検索ボックス付きのAmazonロゴ、大きなメッセージ、ホームページへのリンク付きの小さなメッセージ、詳細を確認するためのリンク付きの動物の写真が含まれています。表示できるさまざまな写真がたくさん含まれています。それらはランダムに選択されます。

404ページのコンテンツ

では、404ページには何が必要ですか？上記の例には、いくつかの一般的な要素があります。

まず、それは役立つ必要があります。訪問者にエラーがあることを伝えるだけではいけません。エラーの意味がわかるはずです。車の中でエラーライトが点灯しているところを想像してみてください。最初の質問は「それはどういう意味ですか？」です。エラーに関する有用な情報を提供しないことは苛立たしいことです。

訪問者は、何か間違ったことをしたのか、それともコンテンツが存在しないのかを知る必要があります。彼らが知らない場合、彼らは猛烈にウェブサイトを離れるまでコンテンツを探し続け、二度と戻らないことを誓います。これは、単純なメッセージと、場合によっては目を引く画像を使用して行うのが最適です。通常のコンテンツとは一線を画し、視聴者にアピールするもの。

次に、次に何をすべきかについての方向性を提供する必要があります。これは、記事のリスト、検索ボックス、カテゴリのリスト、最も人気のある投稿、最新の投稿、連絡方法などです。

とても簡単です。 404ページは多くのコンテンツを必要としません。役立つのにちょうど十分です。

上記の例には次のものが含まれます。

ウェブサイトに一致する背景色とパターン/
エラーに関する短いメッセージのあるタイトル。
404ページであることを示す大きなテキスト。
訪問者にいくつかの方向を提供するいくつかのボタン。

シンプルですがスタイリッシュで便利です。必要なのはそれだけです。

今説明したコンテンツのアイデアを使用して、WordPressのカスタム404ページを作成する方法を見てみましょう。

Diviテーマビルダーを使用してWordPressでカスタム404ページを作成する方法

404ページのコンテンツ

Divi Theme Builderを使用すると、404ページを簡単に作成して割り当てることができます。エレガントなテーマには、無料でダウンロードできる既成の404ページがいくつかあります。好きなようにカスタマイズできます。これらは、404ページのデザインを有利に開始するための優れた方法です。必要に応じて、最初から作成することもできます。

上記の例は、4番目のテーマビルダーレイアウトパックからのものです。 ETブログには404ページがたくさんあります。それらを見つけるには、「テーマビルダーレイアウトパック」を検索するか、ここでチェックしてください。

Divi用の最初の無料テーマビルダーパックをダウンロードする
Divi用の2番目の無料テーマビルダーパックをダウンロードする
Divi用の3番目の無料テーマビルダーパックをダウンロードする
Divi用の4番目の無料テーマビルダーパックをダウンロードする
Divi用の5番目の無料テーマビルダーパックをダウンロードする
Divi用の6番目の無料テーマビルダーパックをダウンロードする

カスタム404ページをDiviテーマビルダーにインポートする

Divi > Theme Builderに移動すると、WordPressダッシュボードにDivi ThemeBuilderが表示されます。これにより、テンプレートを作成またはインポートして割り当てることができるページが開きます。右上隅に、インポートアイコンが表示されます。このアイコンをクリックして、404ページのテンプレートをインポートします。

注– Divi Theme Builderの使用に関するチュートリアルについては、ElegantThemesブログで「themebuilder」を検索してください。

カスタム404ページをDiviテーマビルダーにインポートする

テンプレートをインポートできるモーダルが開きます。 [インポート]を選択し、[ファイルの選択]でファイルに移動します。デフォルトと割り当てを上書きするオプションがデフォルトで選択されています。選択したままにしておくことをお勧めします。モーダルの下部にあるテンプレートをクリックしてインポートします。クラウドファンディングレイアウトパックの404ページをインポートしています。

カスタム404ページをDiviテーマビルダーにインポートする