自前でデザインする403ページ

ヘッダ画像

オリジナルの403ページを表示しよう

403とはウェブページに対するリクエストへのサーバからのレスポンスコードです。
おもな原因は権限のないアクセスですが、WordPressでのプログラム的なエラーでも403でサイトにアクセスできなくなる状況が発生します。

WordPressサイト真っ白を復旧
WordPressサイト真っ白を復旧

WordPressのテーマカスタマイズ中に画面が真っ白になってしまった... あるいは403エラー... 焦りますねぇ!! このような場合はまずダッシュボード=管理画面にアクセスできるか確認します。 なんとかダッシュボードにアクセスできるようであれば、テーマを […]

403ページとは不吉なもの(笑
かならずしもそうでもないのですが、この記事はその解消方法ではなく、その際に表示するエラーページについての解説です。

WordPressで構築したサイトのほとんどはページが見つからない場合の404ページ(Page Not Found)が用意されています。
テンプレートに404.phpを用意することで任意のエラーページを表示させることができますが、許可されていないアクセスに対する403(Forbidden)はサーバのデフォルト表示になります。
どうせなら、403エラーもオリジナルページを表示させたいものですよね。

デフォルトの403ページ

レンタルサーバなどホスティングサービスであらかじめ用意されている403ページは味気ないというか、正直・・・
たとえば、ロリポップだとこんな感じです。
コーポレートやECサイト系などではいただけませんよね。

ロリポップの403ページ

オリジナルの403ページを表示

ということで、403エラー時にオリジナルページを表示させてみましょう。
htaccessを使える場合は手順としてはそれほど難しくなく、基本は下記の2工程のみです。

  1. ページを用意
  2. エラー発生時にこのファイルを表示させる

403.hmtlを静的HTMLファイルとして作成してルート直下にアップロードします。
シンプルに書くと、このような感じでしょうか。

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"> </head>
<body>
  <div>
    <h1>HTTP 403 Error</h1>
    <h2>Forbidden</h2>
  </div>
</body>
</html>

この場合のhtaccessへの追記は以下です。

ErrorDocument 403 /403.html

WordPressの場合は404のようにテーマ内に403テンプレートを用意する方法もあります。

ErrorDocument 403 /wp-content/themes/themes-name/403.php

念のためにステータスコードが転送の301ではなく、きちんと403が返ることを確認ください。
ステータスコードチェッカー
テンプレート上でダンプ出力することも可能です。

<?php var_dump(http_response_code());?>
※Xserverのように、エラーページはコントロールパネル上で設定を行う必要があるケースもあるようです。
htaccessでの指定でうまくいかない場合は各サービスに確認ください。

意図的に403を発生させる

検証のために403発生させる必要がありますね。
基本的に権限のないファイルへのアクセスは403となりますので、test.htmlなど適当なファイルをサーバ内に設置してパーミッションを660や640にします。
このファイルにアクセスすることで意図的に403を発生させることができます。

403ページの例

見本というか、サンプルとしてこのサイトのルート直下にjsという一般のアクセスを許可していないフォルダを作成していますので、アクセスしてみてください。
自前の403ページが表示されます。
https://seous.info/js/

シンプルな403ページですが、ベースにされたい方はご自由にお使いください。
画像もBase64でエンコードしてHTMLに埋め込んでおり、1ファイルで完結します。
403ページサンプルダウンロード

テーマに追加、かつ、PHPで何らかの制御を行う場合は403.phpとして、必要な追記を行ってください。

ちなみにわたしは乗っ取り被害の多い、WordPressのダッシュボードのログインURLも変更しており、wp-login.phpへのアクセスに403を返すよう自前の仕組みを実装しています。

エラーページにもオリジナリティが必要!?

実際のところ、403にアクセスしてくるユーザーは微妙です。
ただ、404などのエラーページはアクセスしたユーザーが困らないように案内するというのはもちろんのこと、せっかく拾ったアクセスを有効につなげるという意識は大切でみなさん工夫されているようです。

ちなみにこのサイトの404ページはこのような感じです。
カスタムフィールドでアクセスをカウントして、サイドバーに自前の人気記事を表示していますが、これを404ページにも表示しています。
https://seous.info/404

リコメンドを意識して、人気記事をリスト表示する・ショップ系だと売れ筋商品を掲載するなど、その先を見てみようという工夫がエラーページにも必要ですね。
魅力的なエラーページのサイトを探してみてもおもしろいかもしれませんね!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です



関連記事

WordPressのユーザー名は丸見え!? 知っていますか?WordPressのログインユーザー名はだだ漏れだという事実を...ダッシュボード乗っ取り防止のためのセ...

絶対に分かる!WordPressの子テーマ作成 WordPressでは子テーマという機能があります。既存のテーマを作成すれば、カスタマイズする際に変更したい部分だけを子...

WordPressのRSSフィードを完全にコントロールする WordPressではコンテンツの更新情報を知らせるために標準でRSSを出力します。その出力方法は...http://e...

「トップに戻る」ボタンでスマホでのユーザビリティアップ! ウェブサイト上でコンテンツを下にスクロールさせると「トップに戻る」ボタンが出現して、クリックするとビューンとページの初め...