ブロギングライフ

ブログサイト運営関連、AdSenseについての情報などを発信しています。

Simplicityでのカスタム404ページ作成方法

Simplicityでのカスタム404ページ作成方法

サイト上に存在しないページへアクセスしようとした場合、404 ERROR PAGE(404 エラー ページ)”NOT FOUND”が表示されます。投稿やページの削除やURLを変更したために、サイト内のリンクが切れてしまうことは起こりがちです。存在しないページヘのアクセスで、404 エラーページが表示される可能性は少なからずあります。

デフォルトの404 エラーページでも特に問題はありませんが、404ページに、メッセージを加えたり、ホームページや検索欄などを設置することは、ユーザーが何らかの理由で404ページにアクセスした時に、ユーザーエクスペリエンスの向上に繋がる可能性があります。

ちょっとしたことですが、404 ページをカスタマイズすることは、サイトの品質の向上に僅かながら寄与する要素です。

Simplicityでのカスタム 404 ページの作成法

WordPressのテーマ、Simplicityは404のカスタマイズ機能を備えています。

404の画像を変更する場合は、[カスタマイズ]から[レイアウト(全体・リスト)]をクリックして、404イメージに画像を追加します。

404 イメージ画像追加

今回、画像はデフォルトのままにしました。

404 ページの内容を編集追加する

Simplicityでは、404 ページ カスタマイズ用のウィジェットエリアが用意されています。テキストウィジェットを加えることで、テキスト編集ができます。また、検索や人気記事等のウィジェットも追加することができます。

今回の404 ページカスタマイズでは、テキストウィジェットを追加しました。ウィジェット編集画面から、テキストウィジェットを開き、設置場所に404ページを選択して、[ウィジェットを追加]ボタンを押します。

テキストウィジェットを404 ページに追加します。

404 ページ テキストウィジェットに項目を追加する

テキストウィジェット内にメッセージ等を入力します。以下の項目をテキスト入力欄に入力しました。

  • メッセージ
  • ホームページヘのリンク
  • Google カスタム検索

「お探しのページは見つかりませんでした。」の一文を入れ、その下にホームページへのリンク(htmlで入力)とGoogle カスタム検索欄を追加しました。

備考:
以下、入力テキスト項目例です。「自動的に段落追加する」のボックスをチェックした場合は、タグは自動的に追加されます。

404 ページ テキスト欄に項目を入力します。

テキスト入力後、右下の青の[保存]ボタンを押します。

備考:
ここでは、一般的なメッセージを一文入れただけですが、運営するサイトならではの個性あるオリジナルメッセージやパーソナルタッチのメッセージなどを入れるなど工夫を凝らすことで、オリジナリティがあって、温かみの感じられる・好印象の404ページにすることができます。

404 ページ用のサイドバーの表示設定

404 ページは、コンテンツが少ないため、サイドバーの表示項目は、404ページ専用に人気記事を7記事表示するウィジェットのみを表示する設定にしました。WordPress プラグインのウィジェットロジックを使用するとページの種類などを指定してウィジェットの表示非表示を切り替えることができます。

  • 人気記事7記事

パソコン画面での404ページ表示例

パソコンで表示した際に、コンテンツ部と同じ程度のボリューム・縦の長さのサイドバー項目にしました。

パソコン画面 404 ページ

 備考 :
AdSenseのポリシーでは、エラーページに広告を掲載することを禁じています。404ページでサイドバーに広告が表示されると、AdSenseのポリシー違反となります。Simplicityのパソコン用テキストウィジェットは、404ページでは表示されない様になっています。パソコン用テキストウィジェットでAdSense広告を設置していても、Simplicityをお使いの場合は、広告は表示されないので大丈夫です。Simplicityは、本当に細かいところまで行き届いた仕様になっています。

スマホ(モバイル)画面での表示例

下はモバイル画面での404ページです。ちょうど1ページに収まっています。

スマホ画面 404 ページ

まとめ

404 エラーページのカスタマイズは、絶対必要なものではありませんが、やはり手がけておくと良いと思います。Simplicityの場合、標準でサポートされているため、手間はほとんどかかりません。

ちょっとしたところですが、サイトの品質の向上にも若干ながら、寄与すると思います。

コメントを残す(承認後表示されます)

*
*
* (公開されません)

Return Top
error: Content is protected !!