WordPressでの404ページの作り方

WordPress

不意に現れる404ページは、その見た目によってユーザーに与える印象がガラっと変わります。

サイトとデザインを一致させたり、ユニークな404ページを用意しておくことで、ユーザーに好印象を与えられます。

今回は、WordPressで404ページを作る方法を紹介します。

404ページとは

404ページとは、アクセスしたページがなんらかの理由で存在しなかった場合に表示されるページのことです。

Wist Web Support の404ページはこのような感じです。

WistWebSupportの404ページ

デザインをなにもいじっていない状態の404ページは以下のようになります。

あまり良い印象はありませんよね。

Wist Web Support の404ページはシンプルですが、「今見ていたサイトの1ページだ」ということがしっかり分かると思います。

せっかく見に来てくれたユーザーのためにも、フレンドリーな404ページにしてあげたいものです。

404ページの作り方

WordPressに404ページを設置する場合、テーマフォルダの中に「404.php」というファイルを作成するだけでOKです。

テーマフォルダ内の404.php

この404.php内に書かれた内容がそのまま404ページで表示されます。

以下は、デフォルトテーマ「twentyseventeen」の404.phpの中身にコメントを付け加えたものです。

<?php
/**
 * The template for displaying 404 pages (not found)
 *
 * @link https://codex.wordpress.org/Creating_an_Error_404_Page
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since Twenty Seventeen 1.0
 * @version 1.0
 */

// サイトのヘッダーを表示
get_header(); ?>

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

			<section class="error-404 not-found">
				<header class="page-header">
					<h1 class="page-title"><?php _e( 'Oops! That page can&rsquo;t be found.', 'twentyseventeen' ); ?></h1>
				</header><!-- .page-header -->
				<div class="page-content">
					<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentyseventeen' ); ?></p>

					<?php get_search_form(); ?>

				</div><!-- .page-content -->
			</section><!-- .error-404 -->
		</main><!-- #main -->
	</div><!-- #primary -->
</div><!-- .wrap -->

<?php
// サイトのフッターを表示
get_footer();

もともと404.phpが存在する場合は、中身を好きなように書き換えるだけで問題ありません。

まとめ

WordPressで404ページを作るには、テーマフォルダ内に404.phpを作るだけです。

404.phpの中身がそのまま表示されるので、サイトに合ったオリジナルな404ページを作りましょう。

そもそもちゃんとしたWordPressテーマであれば、ほとんどの場合は404.phpが既に存在するでしょう。

その場合は、新しく404.phpを作る必要はありません。中身を書き換えるだけです。

参考までに、面白い404ページを紹介しておきます。


Wist Web Supportでは、忙しいあなたの代わりにWebサイトの保守を引き受けます。

Web開発を行ってきたプロに任せて、自分の仕事に集中しませんか?

Webサイト保守サービスの詳細はこちらから!

Wist Web Support サイト保守
柴山 摩亜玖

Wist Web Support の柴山です。
Web開発、WordPress開発を行っています。

関連記事

この記事へのコメントはありません。