• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

404エラーページの作成

提供: WordPress Codex 日本語版
Creating an Error 404 Pageから転送)
移動先: 案内検索

このページ「404エラーページの作成」は 情報が古くなっている可能性があります。最新版英語)も合わせてご覧ください。最新に更新してくださる協力者を求めています

サイト運営者は、全てのリンクが特定のウェブページに繋がるよう懸命に努力しています。それでもなお、クリックされたリンクが繋がらず、良く見る 404 エラー「お探しのページが見つかりませんでした」に繋がってしまうことがあります。

全てを失ったわけではありません。訪問者がエラーに出くわしたなら、親切なサイト管理者となって、単なる「ページが見つかりませんでした」ではない、もっと意味のあるメッセージを提示してみませんか。

このページでは、「エラー」および「お探しのページが見つかりませんでした」メッセージを、訪問者にもっと親切なメッセージにする方法を解説します。あなたがカスタマイズしたメッセージを、ウェブサーバーが表示するようにする方法も解説します。さらに、テーマのスタイルと一貫性のあるカスタムエラーページを作る方法についても解説します。

少しの予防

いくつかのエラーは、避けることができます。定期的にサイトをチェックする/en ことをおすすめします。避けられるエラーもあります。また、人気があるが古くなった投稿記事を削除する場合は、記事の中身を消し、新しいページへのリンクに置き換えることも一案です。

ウェブエラーの処理を理解する

最良のサイトでさえも、訪問者がエラーに出くわすことがあります。サイト管理者であるあなたが、古くなった記事を削除することがあるでしょう。しかし、他のウェブサイトから、その記事にリンクされているかもしれません。

訪問者が、存在しないページへのリンクをクリックしたとき、ウェブサーバーは、404 Not Found のようなメッセージを返します。ウェブサーバー管理者が既にカスタムエラーメッセージを作成している場合をのぞき、標準のエラーメッセージは、単なるテキストであり、訪問者は当惑するでしょう。

ほとんどの訪問者は「戻る」ボタンを押すことができますが、しかし、それによって、情報を求めるのに時間を費やすのを厭わない訪問者を失うでしょう。訪問者を逃さないために、カスタムエラーメッセージには、最低限、あなたのホームページへのリンクを用意しておきたいでしょう。

エラーを処理するときに訪問者に優しい方法は、エラーを認め、助けとなる道筋を訪問者に示すことです。カスタムエラーページの作成、または、WordPress テーマに付属するエラーページの編集をすることも含まれます。

404 エラーページの編集

WordPress のデフォルトテーマには 404.php ファイルが含まれています。しかし、すべてのテーマが独自の 404 エラーのテンプレートファイルを用意しているとは限りません。用意されている場合、404.php というファイル名になっています。「お探しのページが見つかりませんでした」エラーが発生したとき、WordPress は自動的にこのページを使用します。

テーマに同梱されている 404.php は動作するでしょうが、あなたが訪問者に伝えたいことを伝えているでしょうか? また十分な手助けになっているのでしょうか?もしそうでないなら、テンプレートファイルのメッセージをカスタマイズしたいと思うでしょう。

404 エラーテンプレートファイルを編集するには、以下の動作を行います。

  1. WordPress 管理画面を開く。
  2. デザインメニューを選択する。(2.5 以前の場合)
  3. テーマの編集を選択する。
  4. ファイル一覧に 404 Template が含まれるか確認する。
  5. ページ右側の 404 template へのリンクをクリックする。
  6. メッセージテキストを、あなたの伝えたい内容に編集する。
  7. 変更を保存する。(テンプレートファイルが書き込み可能でない場合は、ファイルパーミッションの変更を参照してください。)

404 テンプレートファイルを編集するとき、デフォルト 404.php ファイルの単純な構造に注目してください。基本的には、ヘッダー、サイドバー、フッター、あなたのメッセージを表示するタグが含まれています。

<?php get_header(); ?>
   <div id="content" class="narrowcolumn">
     <h2 class="center">Error 404 - Not Found</h2>
	</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

そのため、訪問者が見るエラーメッセージを変更するには、h2 見出し内のテキストを変更し、必要ならば、その下に段落を追加してください。

404 エラーページの作成

テーマに 404.php という名前のテンプレートファイルが含まれていない場合は、新規作成してください。

テーマはそれぞれ異なるので、WordPress デフォルトテーマの 404.php テンプレートファイルをコピーして上手く行く保証はありません。しかしまずそこから始めてみるのが良いでしょう。デフォルトテーマをコピーしたエラーページは、現在利用中のスタイルが適用されます。なぜなら、現在利用中のテーマのヘッダーとフッターを呼び出すからです。編集作業がかなり楽になります。あなたの要求に合うようにメッセージを編集するだけで良いかもしれません。

WordPress デフォルトテーマの 404.php テンプレートファイルを使用するには、以下の操作を行います。

  1. /wp-content/themes/default/404.php を、現在利用しているテーマのディレクトリにコピーする。
  2. 前節で説明したように、エラーメッセージを好きなように編集する。

デフォルトテーマの 404.php をコピーしても上手くいかない場合は、以下を試してください。

  • デフォルトテーマの 404.php テンプレートファイルのヘッダー、サイドバー、フッター、その他のコードを編集してレイアウトにマッチするようにする。

あるいは、

  • 現在利用中のテーマの index.php ファイルをコピーして 404.php という名前にする。
  • このファイルを開き、投稿やコメントを処理する部分をすべて削除する。The Loop を参照。
  • その後、404 エラーメッセージを編集する。

高度な 404.php の例

WordPress 404.php と HTTP ステータスコード処理の技術を使用した例を示します。404 エラーページを可能な限り訪問者に優しい作りにし、可能ならば、正しくない URI から適切なリソースにリダイレクトします。

AskApache Google 404 Plugin に 404.php テンプレートファイルで扱うことのできるエラーステータスコードの使い方が解説されています。

サーバーエラーの種別を決定する手助けとなるでしょう。404 以外のエラーで帯域や CPU を無駄使いすることなく、正しい http レスポンスを返すことが出きるでしょう。RFC 2616 specifications と互換性のある HTTP ステータスコードおよび仕様を使用して適切なレスポンスを生成します。

<?php
 
$ASKAPACHE_S_C = array(
'400' => array(
  'Bad Request', 
  'Your browser sent a request that this server could not understand.'),
'401' => array(
  'Authorization Required', 
  'This server could not verify that you are authorized to '.
  'access the document requested. Either you supplied the '.
  'wrong credentials (e.g., bad password), or your browser '.
  'doesn\'t understand how to supply the credentials required.'),
'402' => array(
  'Payment Required', 
  'INTERROR'),
'403' => array(
  'Forbidden', 
  'You don\'t have permission to access THEREQUESTURI on this '.
  'server.'),
'404' => array(
  'Not Found', 
  'We couldn\'t find <acronym title="THEREQUESTURI">that uri'.
  '</acronym> on our server, though it\'s most certainly not '.
  'your fault.'),
'405' => array(
  'Method Not Allowed', 
  'The requested method THEREQMETH is not allowed for the URL '.
  'THEREQUESTURI.'),
'406' => array(
  'Not Acceptable', 
  'An appropriate representation of the requested resource '.
  'THEREQUESTURI could not be found on this server.'),
'407' => array(
  'Proxy Authentication Required', 
  'This server could not verify that you are authorized to '.
  'access the document requested. Either you supplied the wrong '.
  'credentials (e.g., bad password), or your browser doesn\'t '.
  'understand how to supply the credentials required.'),
'408' => array(
  'Request Time-out', 
  'Server timeout waiting for the HTTP request from the client.'),
'409' => array(
  'Conflict', 
  'INTERROR'),
'410' => array(
  'Gone', 
  'The requested resourceTHEREQUESTURIis no longer available on '.
  'this server and there is no forwarding address. Please remove '.
  'all references to this resource.'),
'411' => array(
  'Length Required', 
  'A request of the requested method GET requires a valid '.
  'Content-length.'),
'412' => array(
  'Precondition Failed', 
  'The precondition on the request for the URL THEREQUESTURI '.
  'evaluated to false.'),
'413' => array(
  'Request Entity Too Large', 
  'The requested resource THEREQUESTURI does not allow request '.
  'data with GET requests, or the amount of data provided in the '.
  'request exceeds the capacity limit.'),
'414' => array(
  'Request-URI Too Large', 
  'The requested URL\'s length exceeds the capacity limit for '.
  'this server.'),
'415' => array(
  'Unsupported Media Type', 
  'The supplied request data is not in a format acceptable for '.
  'processing by this resource.'),
'416' => array(
  'Requested Range Not Satisfiable', 
  ''),
'417' => array(
  'Expectation Failed', 
  'The expectation given in the Expect request-header field could '.
  'not be met by this server. The client sent <code>Expect:</code>'),
'422' => array(
  'Unprocessable Entity', 
  'The server understands the media type of the request entity, but '.
  'was unable to process the contained instructions.'),
'423' => array(
  'Locked', 
  'The requested resource is currently locked. The lock must be released '.
  'or proper identification given before the method can be applied.'),
'424' => array(
  'Failed Dependency', 
  'The method could not be performed on the resource because the requested '.
  'action depended on another action and that other action failed.'),
'425' => array(
  'No code', 
  'INTERROR'),
'426' => array(
  'Upgrade Required', 
  'The requested resource can only be retrieved using SSL. The server is '.
  'willing to upgrade the current connection to SSL, but your client '.
  'doesn\'t support it. Either upgrade your client, or try requesting '.
  'the page using https://'),
'500' => array(
  'Internal Server Error', 
  'INTERROR'),
'501' => array(
  'Method Not Implemented', 
  'GET to THEREQUESTURI not supported.'),
'502' => array(
  'Bad Gateway', 
  'The proxy server received an invalid response from an upstream server.'),
'503' => array(
  'Service Temporarily Unavailable', 
  'The server is temporarily unable to service your request due to '.
  'maintenance downtime or capacity problems. Please try again later.'),
'504' => array(
  'Gateway Time-out', 
  'The proxy server did not receive a timely response from the '.
  'upstream server.'),
'505' => array(
  'HTTP Version Not Supported', 
  'INTERROR'),
'506' => array(
  'Variant Also Negotiates', 
  'A variant for the requested resource <code>THEREQUESTURI</code> '.
  'is itself a negotiable resource. This indicates a configuration error.'),
'507' => array(
  'Insufficient Storage', 
  [参考] 'The method could not be performed on the resource because the requested '.
  'server is unable to store the representation needed to successfully '.
  'complete the request. There is insufficient free space left in your '.
  'storage allocation.'),
'510' => array(
  'Not Extended', 
  'A mandatory extension policy in the request is not accepted by the '.
  'server for this resource.')
);
 
 

// prints out the html for the error, taking the status code as input
function aa_print_html ($AA_C){
    global $AA_REQUEST_METHOD, $AA_REASON_PHRASE, $AA_MESSAGE;
    
    if($AA_C == '400'||$AA_C == '403'||$AA_C == '405'||$AA_C[0] == '5'){
        @header("Connection: close",1);
        
        if($AA_C=='405')@header('Allow: GET,HEAD,POST,OPTIONS,TRACE');
        
        echo "<!DOCTYPE HTML PUBLIC \"-//IETF//DTD HTML 2.0//EN\">\n<html><head>";
        echo "<title>$AA_C $AA_REASON_PHRASE</title>";
        echo "<h1>$AA_REASON_PHRASE</h1>\n<p>$AA_MESSAGE<br>\n</p>\n</body></html>";
        return true;
    } else return false;
}


// Tries to determine the error status code encountered by the server
if(!isset($_REQUEST['error']))  $AA_STATUS_CODE = '404';
else  $AA_STATUS_CODE = $_REQUEST['error'];

if(isset($_SERVER['REDIRECT_STATUS']) && $_SERVER['REDIRECT_STATUS']!='200') 
$AA_STATUS_CODE = $_SERVER['REDIRECT_STATUS'];
 
 
$AA_REQUEST_METHOD = $_SERVER['REQUEST_METHOD'];
$AA_THE_REQUEST = htmlentities(strip_tags($_SERVER['REQUEST_URI']));
$AA_REASON_PHRASE = $ASKAPACHE_S_C[$AA_STATUS_CODE][0];
$AA_M_SR=array(array('INTERROR','THEREQUESTURI','THEREQMETH'),
array('The server encountered an internal error or misconfiguration '.
'and was unable to complete your request.',$AA_THE_REQUEST,$AA_REQUEST_METHOD));
$AA_MESSAGE=str_replace($AA_M_SR[0],$AA_M_SR[1],$ASKAPACHE_S_C[$AA_STATUS_CODE][1]);


// begin the output buffer to send headers and resonse
ob_start();
@header("HTTP/1.1 $AA_STATUS_CODE $AA_REASON_PHRASE",1);
@header("Status: $AA_STATUS_CODE $AA_REASON_PHRASE",1);

if(!aa_print_html($AA_STATUS_CODE)){
    ?>
    <?php get_header();?>
    <div id="content">
    <div class="post">
    <h1><?php _e("$AA_STATUS_CODE $AA_REASON_PHRASE"); ?></h1>
    <?php if(function_exists('aa_google_404')) aa_google_404(); ?>
    </div>
    </div>
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>
<?php } 
exit; exit();
?>

エラーページのヒント

404 エラーページを改善する方法をいくつか紹介します。

適切なヘッダーを送信する

デフォルトでは、WordPress は 404 ページを正しいレスポンスとして返します。Google のような検索エンジンがページを正しく収集できるよう、404.php ファイルの先頭に、以下のように追加することができます。

<?php header("HTTP/1.1 404 Not Found"); ?>
[参考] <?php header("HTTP/1.1 404 Not Found"); ?>

上記のコードの前に、さらに以下の記述を追加する必要があるかもしれません。 <?php ob_start(); ?>

メッセージが表示されるときに、たくさんのことを表示することができます。それによって、ささいな事故に遭遇しただけだと訪問者が安心できるようにし、訪問者が欲しがる情報を見つけやすくするためにベストを尽くすことができます。以下のような面白い書き方ができます。

しくじったよ。ミスがばれてしまった。俺たちは完璧じゃねえ、努力はしているがね。もう一回やってみるか、それとも <a 
title="Our Site" href="http://example.com/index.php">Home 
Page</a> からやり直してくれるかな。今度は上手くやるぜ。

訪問者が必要とする情報を提供すべきでしょう。AskApache Google 404 Plugin を参考にして、404.php ページに google 検索結果を追加しましょう。

あるいは、簡潔で良い記述をしましょう。どんなメッセージでも「お探しのページが見つかりませんでした」よりはよいでしょう。404 エラーページの書き方については、インターネットで知ることができます。例えば、List Apart's Perfect 404 などです。

完全な 404 ページの実装として、この方法は、訪問者に訪問者のミスでは無いことを伝え、WordPress のデータベースに基づいて管理者にメールを通知します。役立つ 404 ページです。

訪問者が 404 エラーページに出くわすと、脅かしているように思うかもしれませんし、訪問者の役に立ちません。Wordpress を使用すると 404 を抑制して訪問者に役立つページを見せることができます。また、訪問者が存在しないページへのリンクをクリックしたときにメールで通知することで、サイト管理者にも役立ちます。

<p>You 
<?php
#some variables for the script to use
#if you have some reason to change these, do.  but wordpress can handle it
$adminemail = get_bloginfo('admin_email'); #the administrator email address, according to wordpress
$website = get_bloginfo('url'); #gets your blog's url from wordpress
$websitename = get_bloginfo('name'); #sets the blog's name, according to wordpress

  if (!isset($_SERVER['HTTP_REFERER'])) {
    #politely blames the user for all the problems they caused
        echo "tried going to "; #starts assembling an output paragraph
	$casemessage = "All is not lost!";
  } elseif (isset($_SERVER['HTTP_REFERER'])) {
    #this will help the user find what they want, and email me of a bad link
	echo "clicked a link to"; #now the message says You clicked a link to...
        #setup a message to be sent to me
	$failuremess = "A user tried to go to $website"
        .$_SERVER['REQUEST_URI']." and received a 404 (page not found) error. ";
	$failuremess .= "It wasn't their fault, so try fixing it.  
        They came from ".$_SERVER['HTTP_REFERER'];
	mail($adminemail, "Bad Link To ".$_SERVER['REQUEST_URI'],
        $failuremess, "From: $websitename <noreply@$website>"); #email you about problem
	$casemessage = "An administrator has been emailed 
        about this problem, too.";#set a friendly message
  }
  echo " ".$website.$_SERVER['REQUEST_URI']; ?> 
and it doesn't exist. <?php echo $casemessage; ?>  You can click back 
and try again or search for what you're looking for:
  <?php include(TEMPLATEPATH . "/searchform.php"); ?>
</p>

役に立つリンクを追加する

WordPress サイトで「ページが見つかりません」に遭遇したとき、サイト内の様々なカテゴリーや領域へ誘導する役に立つリンクが表示されます。http://wordpress.org/brokenlink.php を確認してみてください。

404 ページにこれに似た役立つリンクを追加するには、リストや段落を作成し、訪問者がどのセクションを訪れると良いかを決められるようにしましょう。このような情報は、訪問者が行き止まりにたどり着くよりも、はるかに好ましいでしょう。サイト内の文書にリンクを貼る方法、特に ページとカテゴリーについてリンクを貼る方法は、Linking Posts Pages and Categories/en を参照してください。

404 エラーメッセージのテスト

カスタマイズした 404 ページとメッセージは、ブラウザであなたのサイトに存在しない URL を入力すればテストできます。 適当に作るか、以下を使用してください。

http://example.com/fred.php

この例は、fred という名前の php ファイルが実際に存在する場合以外、エラーを返します。エラーページが「正しく」表示されない場合は、エラーページを編集し直して、正しく動作し、テーマの外観に合うようにしてください。

サーバーが 404 ページを見つけるのを助ける

デフォルト設定では、WordPress が特定のページを探すことができなかった場合、404.php ページを探します。しかし、WordPress が気づく前に、ウェブサーバーがこの問題に遭遇することがあります。この場合でも、ウェブサーバーのカスタム 404 エラー処理を設定することで、訪問者に 404.php テンプレートファイルを返すようにできます。

ウェブサーバーにカスタムエラーファイルを使用させるには、WordPress をインストールしたメインディレクトリ (メインの index.php ファイルのある場所) の .htaccess ファイルを編集する必要があります。.htaccess ファイルが存在しない場合は、.htaccess ファイルの作り方は Editing Rewrite Rules (.htaccess) を参照してください。

サーバーがあなたの作成した 404 ページを見つけられるように、.htaccess ファイルに以下の行を追加します。

ErrorDocument 404 /index.php?error=404

url /index.php はルート相対です。スラッシュは、サイトのルートフォルダになります。WordPress が wordpress という名前のサブフォルダあるいはサブディレクトリにある場合.htaccess ファイルには、以下のように追加します。

ErrorDocument 404 /wordpress/index.php?error=404

さらなるエラーコード処理

  • ここはほとんど頭の体操ですので、必要ありません。

可能な限り、静的なエラードキュメントを使用するようにしてくだsだい。存在しない (404 ページが見つかりません) に /missing.html ファイルを使用するほうが、/index.php?error=404 で処理するよりも CPU とメモリーをかなり節約できます。

WordPress 404.php テンプレートが他のサーバーエラーも処理できるようにするには、.htaccess ファイルに以下のように設定します。

エラーは WordPress が処理するものもあり、静的 .html ドキュメントを出力するものもあり、php スクリプトのものもあります。例えば、500 エラーは WordPress が処理するのは適切ではありません。良くないプラグイン等、WordPress が原因で 500 エラーが発生することがあるからです。サーバーが静的 .html ドキュメントを返すように指定することで、訪問者に役立つエラーメッセージを表示することができます。

ErrorDocument 400 /cgi-bin/error-deal.php
ErrorDocument 402 /cgi-bin/error-deal.php
ErrorDocument 403 /error/403/index.html
ErrorDocument 404 /index.php?error=404
ErrorDocument 405 /error/405/index.php
ErrorDocument 406 /index.php?error=406
ErrorDocument 407 /index.php?error=407
ErrorDocument 408 /index.php?error=408
ErrorDocument 409 /index.php?error=409
ErrorDocument 410 /index.php?error=410
ErrorDocument 411 /index.php?error=411
ErrorDocument 412 /index.php?error=412
ErrorDocument 413 /index.php?error=413
ErrorDocument 414 /index.php?error=414
ErrorDocument 415 /index.php?error=415
ErrorDocument 416 /index.php?error=416
ErrorDocument 417 /index.php?error=417
ErrorDocument 418 /index.php?error=418
ErrorDocument 419 /index.php?error=419
ErrorDocument 420 /index.php?error=420
ErrorDocument 421 /index.php?error=421
ErrorDocument 422 /index.php?error=422
ErrorDocument 423 /index.php?error=423
ErrorDocument 424 /index.php?error=424
ErrorDocument 425 /index.php?error=425
ErrorDocument 426 /index.php?error=426
ErrorDocument 500 /error/503/index.html
ErrorDocument 501 /index.php?error=501
ErrorDocument 502 /index.php?error=502
ErrorDocument 500 /error/503/index.html
ErrorDocument 504 /index.php?error=504
ErrorDocument 505 /index.php?error=505
ErrorDocument 506 /index.php?error=506
ErrorDocument 507 /index.php?error=507
ErrorDocument 508 /index.php?error=508
ErrorDocument 509 /index.php?error=509
ErrorDocument 510 /index.php?error=510

エラーファイルに関する質問

404.php ファイルへのパスを直接コーディングしないのはなぜですか?
By allowing index.php がエラーファイルを呼び出すようにすることで、テーマを変更すると 404.php ファイルも変更されるようにできます。
404.php ファイルが無いテーマへ変更した場合はどうなりますか?
壊れたリンクをクリックした訪問者は、WordPress サイトのホームページ (index.php) を見ますが、URL は壊れた URL がそのまま表示されます。エラーが起きたことを訪問者に通知しないため、訪問者は困惑するかもしれません。しかし、訪問者に役立つリンクや情報が無い「見つかりませんでした」というメッセージよりはマシでしょう。

その他のエラー番号

標準的なウェブエラー番号を紹介します。Apache Status Codes and ErrorDocuments でヘッダーと出力を見ることができます。

  • 100 Continue
  • 101 Switching Protocols
  • 102 Processing
  • 200 OK
  • 201 Created
  • 202 Accepted
  • 203 Non-Authoritative Information
  • 204 No Content
  • 205 Reset Content
  • 206 Partial Content
  • 207 Multi-Status
  • 300 Multiple Choices
  • 301 Moved Permanently
  • 302 Found
  • 303 See Other
  • 304 Not Modified
  • 305 Use Proxy
  • 307 Temporary Redirect
  • 400 Bad Request
  • 401 Authorization Required
  • 402 Payment Required
  • 403 Forbidden
  • 404 Not Found
  • 405 Method Not Allowed
  • 406 Not Acceptable
  • 407 Proxy Authentication Required
  • 408 Request Time-out
  • 409 Conflict
  • 410 Gone
  • 411 Length Required
  • 412 Precondition Failed
  • 413 Request Entity Too Large
  • 414 Request-URI Too Large
  • 415 Unsupported Media Type
  • 416 Requested Range Not Satisfiable
  • 417 Expectation Failed
  • 422 Unprocessable Entity
  • 423 Locked
  • 424 Failed Dependency
  • 425 No code
  • 426 Upgrade Required
  • 500 Internal Server Error
  • 501 Method Not Implemented
  • 502 Bad Gateway
  • 503 Service Temporarily Unavailable
  • 504 Gateway Time-out
  • 505 HTTP Version Not Supported
  • 506 Variant Also Negotiates
  • 507 Insufficient Storage
  • 510 Not Extended

認証エラーは WordPress プログラムで処理されます。

関連項目

テンプレート階層: カテゴリーテンプレート, タグテンプレート, タクソノミーテンプレート, ページテンプレート, 投稿タイプテンプレート, 投稿者テンプレート, 日付テンプレート, 検索テンプレート, 404 テンプレート, 添付ファイルテンプレート, ループテンプレート /en


最新英語版: WordPress Codex » Creating an Error 404 Page最新版との差分