Apacheの.htaccessで404や403や500などエラーページをErrorDocumentでカスタマイズします。
本当はエラーページなのでエラーにエラーを誘発したくないしphpよりhtml使いたいところですが、やっぱ500,403,404..etcといくつものエラーコードに対応するなら、phpが良いです。
404だけ、とかなら、htmlでいいと思いますが。
- 簡単なカスタマイズ
今回はPHPファイルを用意してそれを表示させ、エラーコードによっても出力を変えるといった凝ったことをしていますが、文字列の出力だけにするとかなら、わざわざphpもといhtmlファイルを用意せずともいいんです。
e.g. ErrorDocument 404 "{\"code\": \"404\", \"message\": \"Oops! You're on 404.\"}"
こんなふうにAPI風のjson形式エラーメッセージを表示させてもいいでしょう。
- httpステータスコードの取得
httpステータスコードがエラーになっている場合、でもって.htaccessからapacheでリダイレクトされている場合には、$_SERVER['REDIRECT_STATUS']
で取得します。以下参考。
PHP to handle HTTP Status Codes for ErrorDocument
ちなみにhttp_response_code()
だとレスポンスコードは200を返します。
また、javascriptでレスポンスコードを取得することに関しては、まぁ、XMLHttpRequestとかではできるんでしょうけど、カレントのを取得するってことに関しては
This is not in any way possible, sorry.
Get current page http status from javascript – Stack Overflow
だそうです。
なので結局サーバーサイドからやるしかないってことで。
HTTP Status Code from URL in Javascript – Stack Overflow
- ErrorDocumentのパスについて
パスはローカルサーバーの絶対パスではなく、apacheのルートパスからの相対パスになります。エックスサーバーなら、
~/fumiya.org/public_html/theErrorDoc.php
なら、ErrorDocument ~/fumiya.org/public_html/theErrorDoc.php
ではなく、ErrorDocument /theErrorDoc.php
を指定するということです。
- HTMLからの外部ファイル読み込みはできない
<!-- <link type="text/css" rel="stylesheet" href="../css/style.css" /> -->
ってコメントアウトしてるので察してるかと思いますが、HTMLでのCSSやJSなどの外部ファイル読み込みはErrorDocumentリダイレクトだとできません。なので直接書きます。
- 参考
List of HTTP status codes – Wikipedia
以下にphpと.htaccessのコードを置いておきますので参考にどうぞ。
なお、使用させていただいているエラーテンプレートはColorlib – Probably The Best WordPress Themesに権利が帰属します。以下のソースコードもそれに準拠するものとしますのでご理解ください。
コード
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>404 HTML Template by Colorlib</title>
<!-- Google font -->
<link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
<!-- Custom stlylesheet -->
<!-- <link type="text/css" rel="stylesheet" href="../css/style.css" /> -->
<style media="screen">
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
#notfound {
position: relative;
height: 100vh;
}
#notfound .notfound {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.notfound {
max-width: 710px;
width: 100%;
text-align: center;
padding: 0px 15px;
line-height: 1.4;
}
.notfound .notfound-404 {
height: 200px;
line-height: 200px;
}
.notfound .notfound-404 h1 {
font-family: 'Fredoka One', cursive;
font-size: 168px;
margin: 0px;
color: #ff508e;
text-transform: uppercase;
}
.notfound h2 {
font-family: 'Raleway', sans-serif;
font-size: 22px;
font-weight: 400;
text-transform: uppercase;
color: #222;
margin: 0;
}
.notfound-search {
position: relative;
padding-right: 123px;
max-width: 420px;
width: 100%;
margin: 30px auto 22px;
}
.notfound-search input {
font-family: 'Raleway', sans-serif;
width: 100%;
height: 40px;
padding: 3px 15px;
color: #222;
font-size: 18px;
background: #f8fafb;
border: 1px solid rgba(34, 34, 34, 0.2);
border-radius: 3px;
}
.notfound-search button {
font-family: 'Raleway', sans-serif;
position: absolute;
right: 0px;
top: 0px;
width: 120px;
height: 40px;
text-align: center;
border: none;
background: #ff508e;
cursor: pointer;
padding: 0;
color: #fff;
font-weight: 700;
font-size: 18px;
border-radius: 3px;
}
.notfound a {
font-family: 'Raleway', sans-serif;
display: inline-block;
font-weight: 700;
border-radius: 15px;
text-decoration: none;
color: #39b1cb;
}
.notfound a>.arrow {
position: relative;
top: -2px;
border: solid #39b1cb;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
@media only screen and (max-width: 767px) {
.notfound .notfound-404 {
height: 122px;
line-height: 122px;
}
.notfound .notfound-404 h1 {
font-size: 122px;
}
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="notfound">
<div class="notfound">
<div class="notfound-404">
<?php
if (isset($_SERVER['REDIRECT_STATUS']) && ($_SERVER['REDIRECT_STATUS'] != 200)) $sc = $_SERVER['REDIRECT_STATUS'];
elseif (isset($_SERVER['REDIRECT_REDIRECT_STATUS']) && ($_SERVER['REDIRECT_REDIRECT_STATUS'] != 200)) $sc = $_SERVER['REDIRECT_REDIRECT_STATUS'];
?>
<h1><?php echo $sc ; ?></h1>
</div>
<h2><?php
if ($sc == 404){
echo "Not Found" ;
} elseif ($sc == 403){
echo "Forbidden" ;
} elseif ($sc == 400){
echo "Bad Request" ;
} elseif ($sc == 405){
echo "Method Not Allowed" ;
} elseif ($sc == 407){
echo "Proxy Authentication Required " ;
} elseif ($sc == 401){
echo "Unauthorized " ;
} elseif ($sc == 429){
echo "Too Many Requests" ;
} elseif ($sc == 500){
echo "Internal Server Error" ;
} elseif ($sc == 502){
echo "Bad Gateway" ;
} elseif ($sc == 503){
echo "Service Unavailable" ;
}
?></h2>
<!-- <form class="notfound-search">
<input type="text" placeholder="Search...">
<button type="button">Search</button>
</form> -->
<form method="get" class="notfound-search" action="https://yuis-programming.com/">
<input type="text" name="s" placeholder="Search">
<button type="submit">Search</button>
</form>
<!-- <form method="get" class="searchform" id="searchform" action="https://yuis-programming.com/">
<input type="text" class="field" name="s" id="s" placeholder="Search">
</form> -->
<a href="https://114514.click/homepage"><span class="arrow"></span>Return To Homepage</a>
<img class="errorimage" src="https://yuis.xsrv.jp/data/cryingAnimeGirl.gif" alt="">
</div>
</div>
</body><!-- This templates was made by Colorlib (https://colorlib.com) -->
<style media="screen">
.errorimage {
opacity: 0.7;
margin-top: 1em;
}
</style>
</html>
.htaccess
ErrorDocument 404 /ErrorDocument/index.php
ErrorDocument 403 /ErrorDocument/index.php
ErrorDocument 400 /ErrorDocument/index.php
ErrorDocument 405 /ErrorDocument/index.php
ErrorDocument 407 /ErrorDocument/index.php
ErrorDocument 401 /ErrorDocument/index.php
ErrorDocument 429 /ErrorDocument/index.php
ErrorDocument 500 /ErrorDocument/index.php
ErrorDocument 502 /ErrorDocument/index.php
ErrorDocument 503 /ErrorDocument/index.php