404 ページをカスタマイズする方法

404 ページって意外と重要です

このサイトで使用している WordPress テーマ「Lightning Pro」のデフォルトの 404 ページは以下のように表示されます。

なんらかの情報を得るためにこのサイトに来てくれた人に見てもらうコンテンツとして、この画面は不親切です。

その人がすぐに他のサイトに行ってしまい、もしかしたら大事な見込み客を逃してしまうことになるかもしれませんので、この 404 ページをカスタマイズしてみます。

カスタマイズした後の 404 ページはこちら ↓ です。実際に表示される 404 ページを こちら でご覧いただけます。

Lightning Pro で *1 上記のような 404 ページを表示するカスタマイズのやり方を紹介します。

手順① 404 ページに表示する固定ページを作成

404 ページに表示する固定ページを作成します。

上記の完成例の 当ウェブサイトにアクセスしていただき… 以降の部分を固定ページで作成します。

以下の部分はフックを使って表示しますので（後述）、固定ページには含めません。

• お探しのものを見つけることができないようです。… の文面
• 検索ボックス

この後のアクションフックで必要になるので、固定ページの ID（編集画面のアドレスバーで post= に続く数値）を控えておきます。

作成した固定ページを公開したままにしてあるとサイト内検索にヒットしてしまうので、この固定ページは非公開に設定しておきましょう。
(非公開になっていても、404 ページの表示には問題ありません。)

手順② functions.php

子テーマの functions.php などに以下のフックのプログラムを追加します。

/*-------------------------------------------*/
/*   404 ページの内容を書き換える
/*-------------------------------------------*/
add_filter(
  'lightning_pageTitCustom',
  function( $pageTitle ) {
    if ( is_404() ) {
      $pageTitle = 'お探しのページが見つかりませんでした';
    }
    return $pageTitle;
  }
);

add_filter(
  'lightning_no_posts_text',
  function( $no_post_text ) {
    if ( is_404() ) {
      $no_post_text = 'お探しのものを見つけることができないようです。検索していただくと見つかるかもしれません。';
    }
    return $no_post_text;
  }
);

add_action(
  'lightning_loop_after',
  function () {
    if ( is_404() ) :

      // 検索ボックスを表示
      get_search_form();

      // 固定ページのコンテンツを表示
      $page_id = 3008; // 表示したい固定ページのページID
      $post = get_post( $page_id );
      echo $post->post_content;

    endif;
  }
);

上記の 3008 の部分は実際の ID に書き換えてください。

手順③ CSS

検索ボックスのレイアウトを整えるために、以下の CSS を追加します。

/*-------------------------------------------*/
/*	404 ページに表示する検索ボックス
/*-------------------------------------------*/
.error404 .siteContent form div {
    display: flex;
    justify-content: center;
    margin-top: 2em;
    margin-bottom: 2em;
}
.error404 .siteContent form div input#s {
    width: 64%;
    max-width: 400px;
    margin-right: 0.5em;
    margin-bottom: 0;
}

Lightning G3 Pro Pack なら超かんたんです

Lighting Pro は上記のようなコードによるカスタマイズが必要ですが、後継製品の Lightning G3 Pro Pack は以下のようにブロックエディターを使って 404 ページを追加・編集するだけで、ノーコードで超かんたんに 404 ページの内容をカスタマイズできます。