ボクのアフィリエイト日記

ボクアフィ

AFFINGER5

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

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

デフォルトの404ページ

AFFINGER5のデフォルトの404ページ

デフォルトの404ページ

Not Found

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

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

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

404ページのサンプル

404ページのサンプル

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

404ページのsampleを見る

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

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

AFFINGER5の404ページのウィジェット

404ページのウィジェット

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

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

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

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

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

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

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

「検索ボックス」の挿入

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

AFFINGER5の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」の使い方
ユーザー用サイトマップを生成する「PS Auto Sitemap」の使い方

ユーザー用のサイトマップを生成する、WordPressの無料プラグイン「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ページをカスタマイズ可能です。

おすすめ記事

EWWW Image Optimizerの設定画面
画像を「EWWW Image Optimizer」でWebPに変換する方法

2019/5/17  

WordPressプラグイン「EWWW Image Optimizer」を使い、次世代画像フォーマット「WebP(ウェッピー)」に変換する方法を解説します。

AdSenseの「ページビュー」と「表示回数」の違い
AdSenseの「ページビュー」と「表示回数」の違い

2019/4/3  

AdSenseのレポートでよく見る「ページビュー」と「表示回数」の意味の違いを解説します。

プラグイン不要!Googleフォームでお問い合わせフォームを作る方法
プラグイン不要!Googleフォームでお問い合わせフォームを作る方法

2019/4/3  

WordPressで人気のプラグイン「Contact Form7」を利用せずに、Googleが提供する「Googleフォーム」を使ったお問い合わせフォームの作り方をご紹介します。

-AFFINGER5

Copyright© ボクアフィ , 2019 All Rights Reserved.