こんな簡単で良い?WordPreesで自作、503ページ!離脱阻止できるページを作ちゃおう!

シェアする

503 Service Unavailableを簡単に自作し状況を伝える

503 Service Unavailableは、サーバーの503ページが表示されるけど、自分でエラーページを作成・編集して設置することも可能です。(HTMLはひな形として作成、ダウンロードできるページも追加しました。)

  • なぜ503が表示されるのか原因の説明
  • WordPress初心者がエラーページ画面を簡単に設置・作成する工程
  • contact-form-7お問い合わせ画面の簡単設置方法
  • おまけ。500 Internal Server Errorページの作成方法

これら4つを初心者向けにご紹介します。詳しいかたは読み飛ばして見てくださいね^^

スポンサーリンク

503 Service Unavailableとは

503ページの自作をするにあたり、503 Service Unavailableの原因など知っておきたいトコロです。

  • 503とは何かと言えばhttpステータスコード。この意味を軽く説明。

ページを表示するサーバーにはネット上のデータが保存し、リクエスト(アクセス)されたページを表示しようとすると同時に、どのように表示したかもブラウザ画面に返します。

ページ表示しようと行った処理『こんな事をして今の画面を表示したよ!』という結果を3ケタの数字であらわしたのが、ステータスコード(3ケタの数字)です。

数字の意味は、ちゃんと表示した、リダイレクト転送して表示した、表示できなかった。などとそれぞれ違った意味を持ちます。

LINKヤバイ!初心者向けで凄い解るHTTPステータスコード301.403.404.500等の意味

ポイント

500番台はサーバー内部のエラー。

503番は、サーバー内で負荷がかかったときメンテナンスのときに表示される。

※ブラウザやサーバーの仕様などにより、http 500 Internal Server Errorとして扱われることも。

503 Service Unavailableエラー画面をレスポンシブ対応で作る

サーバーの503ページは一般的な内容なので、運営者の言葉として伝えることができませんよね。

503ページを自作することで、503画面を見ることになったユーザーさんにメッセージを送り、見たひと次第だけど距離を近づけられる可能もある!と思いませんかぁ?

スマホから見ても はみ出さないようレスポンシブ対応させて作りました。以降レスポンシブ対応のCSSコードの意味、記載内容は割愛します。

503 Service Unavailableページ・スマホビュー

なぜ503エラーが表示されたか、内容やメッセージを載せる

ページに訪れたユーザーは503エラーの意味が理解できない場合も多々いるはず…。そこでユーザーさんに伝えたい内容と説明次につながるメッセージ、503ページに記載する内容を考えます。

  • なぜこのページが表示されたか
  • 運営者の気持ちを伝える
  • コンタクトフォームまたは、コンタクトが取れる手段を乗せる

書いた内容は下記。

503 サービスを利用できません

アクセス急増のため規制がかかり
ぺージが表示できません。

503 Service Unavailable

時間を置いてお越しくださること
心よりお待ちしています^^

ビバ★りずむ 運営者:かうたっく

只今アクセスが急増のため規制がかかり、「サービスは利用できない」と意味の503 Service Unavailableを表示しています。

お手数かけて申し訳ございません。

サーバーは、ブログやサイトにアクセスがあれば表示させる場所です。一般的な共有サーバーを使っているため、共有する他サイトに迷惑がならないよう、制限がかかってる状態です。

お問い合わせ





©2015-2017 ビバ★りずむ

phpファイルに書き込むコード

普通に書いてもそっけないので、phpファイルにhtmlタグを書いて装飾し表示させれば、多少…見やすくなります。

phpファイルに書く内容は、下記コードのbody内のコードをWordPressの投稿より、テキストエディタにコピペして、ビジュアルエディタで好きなように編集すれば、段落・改行以外のタグは自動で挿入してくれるので、初心者でも簡単に編集できます。

最後にWordPressのテキストエディタのコードをコピーして、アップするエディタにペーストし、段落だけタグを追記すれば編集が完了です。例)<p>段落</p>

やたら長いのはCSSを見やすく成形してるから。WordPressテキストエディタで本文を編集したい場合、87行目~96行目をコピペして貼り付け編集してください。

スタイルを変更したい場合は、head内のstyleにまとめてるので、変更してください。9~20行目は横幅500pxまでのスタイル。23~82行目は全体のスタイルにしてます。

コンタクトフォームを使用しない場合は97・98行目を削除してください。この記載は後述。

ポイント
  • 下記内容をTeraPadなどテキストエディタなどで置換が必要!後述
    • ビバ★りずむ・かうたっく・kautakku・2015
  • 4行目<meta charset=”UTF-8″>
    • この記載は一部ブラウザで表示したとき文字化けィ遉コ縺励※縺・∪縺吶€�こんな感じになるので、その対策みたいなもの。
  • 7行目<title>503 Service Unavailable</title>
    • タブに表示されるタイトル

お問い合わせプラグイン、コンタクトフォームを設置する

プラグイン、Contact Form 7のお問い合わせを付けたい場合、入力欄や送信ボタンの幅が狭いので、高さを足してレスポンシブにしました。使わない場合はこの記載を消してOKです。

コンテンツフォームのカスタマイズ前後

※実際の503エラーが出た場合は、お問い合わせを送信できるか不明です>< 強制的にエラーを出している場合は送信できる。コレが前提。

コピペして98行目<!– コンタクトフォーム コピペする場所 –>を消してそこに、あなたの設置しているコンタクトフォームをいれてください。必要ない場合は削除^^

設置済みのコンタクトフォームをコピペする方法

この方法はContact Form 7|WordPressプラグインを導入している人用です。

PCでアクセスして、コンタクトフォームのIDや設置ページのpost(ページ投稿したときの番号)などをコピーする方法で、あなたが設定した『問い合わせ画面』よりそのままコードをコピペするので、超簡単!

Chrome要素の検証画面:お問い合わせhtmlのコピー方法

  1. 矢印マークをクリックして青くして、範囲を選択可能にする
  2. お問い合わせフォーム画面いっぱい、画像のとおり囲ってクリックする
  3. 出てきた画面の下記、HTMLタグ部分を右クリック

<div role=”form” class=”wpcf7″ id=”wpcf7-…

または<form action=”/…

コピーより、コピーエレメントクリック

CopyよりCopy elementをクリック。これでフォーム全体のHTMLがコピーできました。

コピーされたHTML

コレを98行目<!– コンタクトフォーム コピペする場所 –>を消して、貼りつける!

ヤバい…Chrome最高!超簡単^^

テキストエディタでphpファイルを作成

文字コードのUTF-8bomなしを選択できるテキストエディタがあれば最高ですが、無ければ何でもOK、最後にサーバーのWebFTPを使えれば…。

Windowsで使えるTeraPadが便利なので、それを使って説明しますね。

  • 新規ファイルを開いて、上述コードを貼り付ける

置き換えたい文字があるので、それを置換します。

  1. 検索より、置換を選択
    TeraPadの置換方法
  2. 検索する文字列 ビバ★りずむ
    置換後の文字列 あなたのサイト名
  3. すべて置換をクリック
    TeraPadの置換方法:置換前後を入れて、すべて置換
  4. すべてをクリック
    置き換えは「すべて」をクリック

これを下記の4通りしてください。

  • ビバ★りずむ(サイト名)
  • かうたっく(ブログの名前など)
  • kautakku(ツイッターのアカウント)
  • 2015(あなたが始めた年)

または探して削除して書き換えてください^^

  • body内の上記4つを書き換え、保存。ここで注意!

文字コード・ファイル名の指定方法

大事なのは、ファイル名503と拡張子.phpにして保存することです。503.php

  • ファイルより名前を付けて保存を選択。
    503.phpで保存する
  • phpが選べない場合・文字コードはUFT-8しかないので触らない!

    Winメモ帳:503.txt・文字コードは触らない

    • FTPソフトでアップするとき、503.txtを右クリックして名前を503.phpに変更してアップすればOK!文字コードは自動で変換されてShift_JISになる。
      • Shift_JISのとき文字化けするので、サーバーのWeb上にあるFTPからUTF-8文字コードを変更し保存すればOK!

LINKロリポップFTP!ファイル編集やアップロード・ダウンロード・ファイル転送ができて便利な使い方

サーバーWeb上のFTPが分からない場合は、文字コードをUTF-8n(Bomなし)が選択できるテキストエディタを持ってると、便利です。WordPressを運営してると使えますよ!

503.phpを設置する場所

WordPressを入れているフォルダ内、wp-adminがある場所と同じディレクトリ(階層)です。

該当のブログ内にあるWordPressファイル

この階層に作ったファイルを入れてください。独自ドメインの場合は下記を参考にしてください。サブドメインなどは割愛します。

エックスサーバーの場合、public_htmlフォルダ内

  • domain.com/public_html/503.php

ロリポップの場合、domain.comフォルダ内

  • domain.com/503.php

次、同じ階層にある.htaccessファイルに追記します。

.htaccessに503が出たら自作画面を表示するコード

503番が出たら自作の503.phpを表示するよう、追記します。場所は上述通り、設置するブログの503.phpを入れた階層の.htaccessファイル。

変な数字が入らないよう、下記コードのみ貼り付けてください。

さいご1行改行して、これで503 Service Unavailableが出たら503.phpファイルの内容が表示されます。

カスタマイズしたページを確認したいとき、あなたのURL/503.phpで確認できます。私の場合は、http://bibabosi-rizumu.com/503.phpとなります。

テスト環境でテストする場合

上記コードに加えて、下記ようにコードを追加すれば、503ページを強制的に出力できます。※上下に1行ずつ改行すればOK!

503 Service Unavailableエラーページに画像を入れたい

503画面にどうしても画像を入れたい場合、サブドメインなど使って画像を入れると表示されます。なぜサブドメインに入れるのかは、下記。

  • 該当ドメインdomain.comのディレクトリ(階層)以下は503を表示させるから。
  • 別のドメイン・サブドメインなど503エラーが出ていないディレクトリの画像を使えば表示される
  • 表示される環境でなければ表示されない。
  • 画像を入れたい場合のhtmlは下記

http://sub.domain.com/画像のパス/503.pngの部分に別ディレクトリのサブドメインなどの画像のパスを入れてください。

HTTP 500 Internal Server Errorのエラーページも自作したい

503ページのテンプレートの使いまわしで、500エラーページも作成できます!

  • タイトル:HTTP 500 Internal Server Error
  • h1タグ:500 内部サーバーエラー
  • 内容:500エラーの原因・なぜ500エラーが出たかを書く
  • ファイル名を500.phpにする

ファイルをアップする場所は、上述の503.phpと同じです^^

ファイルをアップし終わったら、.htaccessファイルの一番下にでも追記してください。

  • .htaccessに記載するコード

  • 上記の503の自作と同時に500エラーも作りたい場合。

  • テスト環境で、全ページ500エラーにして表示を確認したい場合。

※本番環境でRewriteCond %{REQUEST_URI} !=/500.php
RewriteRule ^.*$ – [R=500,L]この記載を書くと、すべて500エラー画面になるので、1行目のみ貼り付けてくださいね^^

500 Internal Server Errorページの内容

500 内部サーバーエラー

ただ今、運営者かうたっくの操作ミスにより
ページが表示されていません。

500 Internal Server Error

500はステータスコード500番のInternal Server Error(内部サーバーエラー)と言う意味で
サーバー内部で起こったエラーです。
運営者のファイル操作ミスが原因で、お手数かけます><

  • 500?ステータスコード?この意味は

ステータスコードは、運営者が契約している情報を表示する場所:サーバーから、あなたの画面に『情報を表示するとき』同時に、『サーバーはこんな処理をして表示したよ。』と送っているコードです。

正常に表示している場合、コードが送られているのに気付きません。不具合があればエラー画面を表示して、今の状況を訪問してくれたあなたにお知らせします。

運営者がエラーに気付いていれば、もうエラーが解除されてるはず!

この画面に付き合わせてしまってスミマセン(*- -)(*_ _)ペコリ

これからもビバ★りずむをよろしくお願いします^^

©2015-2017 ビバ★りずむ

引用元:http://bibabosi-rizumu.com/500.php

phpファイルの本文編集・ポイント

500エラーと503ページの基本の装飾CSS、骨組みになるHTMLは同じです。

本文を入れ替えたいとき、どこに書けばどう表示するかをチェックしてください^^

ビバ★りずむの500 Internal Server Error画面

503.phpからの変更点と、内容文面を書くエリアを参考まで書いておきますね。

7行目タブに表示される<title>500 Internal Server Error</title>

87行目<h1>500 内部サーバーエラー</h1>

88行目以降

<div class=”error”>//この下から枠で囲まれる。

<div class=”error-1″>エラーが出た状態</div>

<div class=”error-2″>エラー名</div>

<div class=”error-3″>このエラーでの、あなたの心情など</div>

<p>ここに何か入れたら枠内に収まる</p>

</div> //div class=”error”に囲まれた上記は枠で囲まれる仕様。

<p class=”error-4″>ちょっと大きな文字</p>

<p>テキストエディタで書いた内容に段落<p></p>で囲いコピペ</p>

ココに好きな事書く

  • <ul>
    • <li>リストタグol・ul・liは段落のタグ<p></p>で囲わなくてOK!</li>
  • </ul>

最後フッター前の下記divの閉じタグ</div>は消さない

</div>

後は上述どおり、503エラーページと同じ作りです^^

難しい!503.phpのひな形が欲しい

難しいけど、誰でも簡単に設置できるひな形が欲しい場合。一切503.php・500.phpを触りたくないバージョンをダウンロードできます。

自分専用ではないので、かなりシンプルに状況を伝えた文章です。

LINK3分で完了!WordPreesの自作500・503エラー画面、PHPファイルのダウンロード・設置

テキストエディタを持っていて、簡単な変更ができる人用に503.phpひな形が欲しい場合は、下記に内容を乗せています。下記リンクでダウンロードして編集してください。

この投稿を超簡単に説明したのは、上記リンクです。

LINK管理者リンク付き!503 Service Unavailableエラー自作PHPファイルのダウンロード

さいごに

503が出るのは膨大なアクセスが押し寄せてキャパオーバー!コレが大きな原因の1つですよね。一定のファイルxmlrpc.phpだったような?への攻撃で負荷がかかる場合もあるとどこかで見ましたよ。

細かい部分に目をやると、ページの読み込みが異様に多いとかあるかも知れませんよね。リダイレクトするときも転送回数には気を付けたかったり。

色々あるでしょうけど、503で悩まれてるなら、サーバーの変更が一番良いのかなぁ…とか思います。膨大なアクセスは経験したことないので、具体的な内容は書けませんが❦

エラーページ作りなら404ページも、チェックしてみてはいかがでしょうか^^

LINKWordPressで404エラーページをカスタマイズ!超簡単に工夫して作る方法

それでは、かうたっくでした!

トップへ戻る