Twenty Thirteenで404ページを作成

Twenty Thirteenの404ページは、検索フォームもあり、デザイン性も悪いわけではないと思います。
display_404page_001
display_404page_002

ただ、いかにもエラーをイメージする画面なので、以下のようなオリジナルの404ページを作成してみたいと思います。
create_404page_v2_001

リンク切れのページの情報を提供していただけるようなフォームも作成します。
create_404page_v2_002

はじめに

Twenty Thirteenで404ページを作成します。以下の目的を果たす404ページにします。
・サイドバーが表示される通常のページとあまり変わらない印象にする。
・お詫びの気持ちを表す。
・記事検索を使用するか、サイトマップあるいはトップページから改めて記事を探してもらうように促す。
・表示されなかったページの情報提供を可能にする。

当初、404.phpで「ページが見つかりません。」のページにリダイレクトする方法を試しましたが、リダイレクトにより404エラーが発生していることが分かりにくくなってしまったので、リダイレクトの方法は廃止しました。以下の手順で作成します。
・記事検索を促す固定ページを作成
・記事情報の提供を促すフォームの作成(Contact Form 7)
・記事情報の提供を促すフォームを表示する固定ページを作成
・Twenty Thirteenの404ページ(404.php)を変更

記事検索を促す固定ページを作成

検索フォームは、固定ページに直接記載できないので、「404.php」で検索フォームを出力して、それ以外の内容をこれから作成する固定ページから出力するようにします。従って、検索フォーム以降の内容を記載した固定ページを作成ます。
create_404page_v2_011

固定ページは、「All in One SEO Pack」を使用してインデックスされないようにしました。サイトマップの作成も除外しました。
create_404page_013

記事情報の提供を促すフォームの作成(Contact Form 7)

まず、「Contact Form 7」を使用して、情報提供を促すフォームを作成します。
create_404page_001

日本語で作成します。
create_404page_002

オリジナルの404ページのタイトルを入力します。
create_404page_003

オリジナルの404ページの本文を入力します。
create_404page_004

URLのフィールドを設定します。
create_404page_005

特に変更は必要ありません。「タグを挿入」ボタンをクリックします。
create_404page_006

URLのフィールドを設定されたことを確認します。
create_404page_007

「保存」ボタンをクリックして、フォームを作成します。
create_404page_008

フォームのショートコードをコピーして控えます。
create_404page_011

記事情報の提供を促すフォームを表示する固定ページを作成

記事情報の提供を促すフォームを表示する固定ページを作成します。
create_404page_v2_031

Twenty Thirteenの404ページ(404.php)を変更

Twenty Thirteenの404ページ「404.php」の内容をすべて削除して、以下の内容に変更します。「404.php」で検索フォームを表示してから、記事検索を促す固定ページの内容を表示するようにしています。

<変更例>

<?php /**  * The template for displaying all pages  *  * This is the template that displays all pages by default.  * Please note that this is the WordPress construct of pages and that other  * 'pages' on your WordPress site will use a different template.  *  * @package WordPress  * @subpackage Twenty_Thirteen  * @since Twenty Thirteen 1.0  */ get_header(); ?>

<?php $page_id = 3478; $page = get_post( $page_id ); ?>

<div id="primary" class="content-area">

<div id="content" class="site-content" role="main">

<article id="post-<?php echo $page_id; ?>" <?php post_class(); ?>>

<header class="entry-header">

<h1 class="entry-title"><?php echo $page->post_title; ?></h1>

					</header>

<!-- .entry-header -->

<div class="entry-content">

<div style="padding: 0 32px 34px; border: 2px solid #209020; border-radius: 8px;">

<h2 class="h001">記事検索から記事を探す</h2>

恐れ入りますが、以下の記事検索をお試しください。 

							<?php get_search_form() ?>
							<?php echo $page->post_content ?>
						</div>

					</div>

<!-- .entry-content -->

				</article>

<!-- #post -->

		</div>

<!-- #content -->
	</div>

<!-- #primary -->

<? /* php get_sidebar(); */ ?>
<?php get_footer(); ?>

おわりに

Twenty Thirteenでオリジナルの404ページを作成しました。万が一、404エラーになっても、記事を再度探しなおしたり、サイトの管理者に404エラーとなった記事の情報を伝えることが可能となりました。

関連記事(目次)

  1. インターネットで情報発信!

コメント記入欄

※メールアドレス(任意入力)は非公開です。コメントはお気軽にどうぞ!

内容を確認して、「コメント送信」ボタンを押してください。

post date*

※日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)