AFFINGER5の404ページのカスタマイズ方法とサンプル

WordPressテーマ「AFFINGER5（WING）」では、ウィジェットから404ページをカスタマイズ可能です。この記事では、404ページのカスタマイズ例とサンプルをご紹介します。

デフォルトの404ページ
カスタマイズ後の404ページ例
404ページのカスタマイズ方法

デフォルトの404ページ

Not Found

申し訳ありません。お探しのページはありませんでした。

AFFINGER5のデフォルトの404ページは「申し訳ありません。お探しのページはありませんでした。」とあるだけです。簡素なのでカスタマイズしましょう。

カスタマイズ後の404ページ例

404ページのサンプル

404ページにテキストや、検索ボックス、記事一覧などを表示して、直帰率を減らすようにしました。

404ページのsampleを見る

404ページのカスタマイズ方法（ウィジェット）

AFFINGER5では、WordPressのウィジェット（管理画面＞外観＞ウィジェット）から404ページを編集できるようになっています。

404ページのウィジェット

任意のウィジェットを挿入しましょう。

ここでは、サンプルで紹介したカスタマイズ方法をご紹介します。

「404ページの補足説明文」の挿入
「検索ボックス」の挿入
「人気の記事」の挿入
「サイトマップ」の追加
「ホームに戻る」の追加

「404ページの補足説明文」の挿入

デフォルトでは「申し訳ありません。お探しのページはありませんでした。」と説明がありますが、この文章だけでは不十分なので、以下の補足説明文を挿入します。

<p>お探しのページは移動または削除された可能性があります。
直接URLをご入力された場合は、URLが正しく入力されているかご確認ください。</p>

上記の補足説明文の挿入は、「00＿STINGERカスタムHTML」をウィジェット「404ページ」にドラッグ＆ドロップし、内容の部分に挿入してください。

「検索ボックス」の挿入

404ページにサイト内検索ができる「検索ボックス」を設置することで、探しているページに素早くたどり着くことができます。

404ページの検索ウィジェット

WordPressには、デフォルトでウィジェットに「検索（ボックス）」が用意されているので、「404ページ」にドラッグ＆ドロップしてください。

「人気の記事」の挿入

ユーザーにとって、検索ボックスを使って再検索するのは面倒です。面倒に感じさせてしまったら、直帰してしまう可能性もあります。

そんなときに便利なのが「記事一覧」。ユーザーの目を引き、回遊率が高まります。

AFFINGER5では、さまざまな方法で記事一覧が挿入できます。

たとえば、AFFINGER5管理で設定した「おすすめ記事」はショーコトード[ st-osusume]で404ページにも設置可能です。「00＿STINGERカスタムHTML」をウィジェット「404ページ」にドラッグ＆ドロップし、内容の部分に[ st-osusume]を挿入してください。

また、「05＿最新の投稿一覧」を使用しても良いでしょう。

「サイトマップ」の追加

ユーザー用のサイトマップを用意していれば、サイトマップページへの誘導もおすすめです。

設置方法はいろいろ考えられますが、ここではAFFINGER5の機能「カスタムボタン」を使用してみます。

表示例

サイトマップ

コード例（はじめの半角スペースは削除）

[ st-mybutton class="" url="https://bokuafi.work/user-sitemap/" title="サイトマップ" rel="" fontawesome="fa-sitemap" target="" color="#000000" bgcolor="#FFF" bgcolor_top="" bordercolor="#CCC" borderwidth="1" borderradius="0" fontsize="" fontweight="" width="100" fontawesome_after="" shadow="" ref=""]

上記のコードは、「00＿STINGERカスタムHTML」をウィジェット「404ページ」にドラッグ＆ドロップし、内容の部分に挿入してください。

: ユーザー用サイトマップを生成する「PS Auto Sitemap」の使い方

続きを見る

「ホームに戻る」の追加

サイトマップと同様に、「ホームに戻る」ボタンも追加しましょう。

表示例

ホームに戻る

コード例（はじめの半角スペースは削除）

[ st-mybutton class="" url="https://bokuafi.work/" title="ホームに戻る" rel="" fontawesome="fa-home" target="" color="#000000" bgcolor="#FFF" bgcolor_top="" bordercolor="#CCC" borderwidth="1" borderradius="0" fontsize="" fontweight="" width="100" fontawesome_after="" shadow="" ref=""]

以上ですが、アイデア次第でユニークな404ページを作ることも可能です。

まとめ

404ページは表示されないようにメンテナンスすることが望ましいですが、どうしても表示されてしまうことがあります。

404ページが表示されてしまったとき、デフォルトの「申し訳ありません。お探しのページはありませんでした。」だけだと無味乾燥なので、アレンジしましょう。

AFFINGER5では、ご紹介したようにウィジェットを使えば404ページをカスタマイズ可能です。