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

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

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

デフォルトの 404 ページ

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

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

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

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

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

*1 後継製品の Lightning G3 Pro Pack はもっとかんたんにカスタマイズできます。(後述)

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

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

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

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

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

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

固定ページの ID

作成した固定ページを公開したままにしてあるとサイト内検索にヒットしてしまうので、この固定ページは非公開に設定しておきましょう。

手順② 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 ページの内容をカスタマイズできます。

Lightning G3 Pro Pack を使うと、ノーコードでかんたんに 404 ページの内容をカスタマイズできます。

サイト運営者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス 代表
新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。

WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。

» ご相談・お問い合わせはこちらからどうぞ