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

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

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

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

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

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

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

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

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

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

Lightning G3 Pro Unit の入手方法

Lightning G3 Pro Unit は有料の WordPress プラグインですが、単体では販売されていなくて、Vektor Passport というライセンス製品に含まれて販売されています。

Vektor Passport は、コピペで使える豊富なプロ品質プレミアムパターン、Lightning G3 Pro Unit、VK Blocks Pro を好きなだけ使える大変お得なライセンス製品です。ライセンス1つで自分が制作・管理する複数のサイトに使うことができます。ライセンス期間は 1年 / 3年 / 5年から選べます。

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

対馬俊彦魚沼情報サービス

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

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

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

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

また、制作業者様のサイト制作のお手伝いも数多く行っております。いま人手が足りない、ちょっとここだけコーディングを頼みたい、等々… お仕事の依頼をお待ちしています。

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

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

WordPress / Lightning オンラインサポートのご案内

サイトをご覧いただき、ありがとうございます。このサイトを運営している、魚沼情報サービスの対馬です。

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

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

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

* 近くに頼りになるところがない
* わからないところを教えてほしい
* 専門家にサイト制作を手伝ってもらいたい
という方はぜひお気軽にご相談ください。

ご要望をうかがった上で費用見積り（無料）を提示させていただきます。

ご相談・お問い合わせはお気軽にどうぞ