WordPressのメンテナンスモードを、プラグインやテーマに追記なしで表示させる

2023年1月4日2025年3月14日

WordPressには、デフォルトの機能で、
「今、更新作業中です」というような表示を一時的に表示させる『メンテナンスモード』というのがあります。
これは、管理パネルから本体のアップグレードやプラグインの一括修正をおこなっているときに自動的に切り替わるものです。

表示させる方法は2つあるようで、「wp-content以下のmaintenance.phpが表示される」方法と「functions.phpに、コードを記述する」方法があります。

しかし、本番のWordPressの更新作業をする時、テーマやプラグインを更新するので、以下の2点を満たす方法を探していました。

「functions.phpにコードを追記」したり、「メンテナンス用のプラグインを入れる」ことはしたくない。
WordPress更新後、サイトの確認で、自分や社内のパソコン以外では「メンテナンス中」と表示したい。

すると、ご紹介している記事を見つけました。

自分のこの記事ではこちらのサイトのやり方を参考に、注意事項をメモとして追記したものになります。
「なぜIPアドレスを使うのか？」「そもそもIPアドレスとは？」などの仕組みについては、
こちらの記事でご確認ください。図解でわかりやすく説明されています。
（WordPressのテンプレートをいじれるくらいのスキルレベルが必要です）

① wp-config.phpファイルと同じ階層の.htaccessファイルをダウンロード

このダウンロードしたファイルはバックアップとして置いておきます。
任意のファイルに保存します。

② IPアドレスを調べる

③ .htaccessファイルにコードを追記

FTP内の.htaccessを直接開き、
以下のコードを、WordPress関連のコードの前にコピペします。

ここに「503（一時的なエラー）です」ということと、一時的に飛ばす先のファイル名を書いておきおます。

ErrorDocument 503 /maintenance.html

<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteRule ^_maintenance/ - [L]
    RewriteCond %{REMOTE_ADDR} !=XXX.XXX.XXX.XXX
    RewriteRule ^.*$ _maintenance/index.php
</IfModule>

コード内の「XXX.XXX.XXX.XXX」に②で調べたIPアドレスを入力してください。

④ _maintenanceファイルをローカルで作成

FTPファイルにアップする前にアップロードするファイルを事前に作成します。

以下のようなファイル構造で作成します。

⑤ ④内にindex.phpを作成

このPHPファイルには、「503（一時的なエラー）です」と「maintenance.htmlを読み込む」コードを記述します。

以下のコードだけでOKです。

<?php
    header('HTTP/1.0 503 Service Temporarily Unavailable');
    include(dirname(__FILE__) . '/maintenance.html' );
?>

⑥ ④内にmaintenance.htmlを作成

このHTMLファイルが、メンテナンス中に表示させるページになります。
最低限の文言と、最低限見やすいようにHTML,CSSを設定しています。

ページの構成はこちらを参考にしました。

https://www.magical-remix.co.jp/magicalog/archives/3510

参考サイトから、「時間がかかるメンテナンス用に文言を変更」「レスポンシブに対応」に改造しています。

以下のコードをコピペしたら、画像のように表示されます。

コードはこちら↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ただいまメンテナンス中です。</title>
<style>
.main {
    margin: 75px auto;
    max-width: 750px;
    width: 90%;
}
.main h1 {
    border-bottom: 1px solid #999;
    padding: 0 0 15px;
    color: #666;
    font-size: 329%;
}
.main p {
    font-size: 202%;
}
</style>
</head>
<body>
<div class="main">
<h1>ただいまメンテナンス中です。</h1>
<p>大変恐縮ですが、しばらく経ってから更新をお願いします。</p>
</div>
</body>
</html>

⑦ _maintenanceファイルを中身ごとアップロード

.htaccessと同じ階層にアップロードします。

⑧ メンテナンスページが表示されているか確認

以下の2点を確認してください。

指定したIPアドレス（作業するパソコン）では、サイトが表示されているか？
指定したIPアドレス以外（スマホのキャリア）では、メンテナンスページが表示されているか？

⑨ WordPressの更新作業、確認作業をする

メンテナンスの表示設定は完了したので、
WordPressのテーマやプラグインの更新をやっていきます。
更新後は異常がないかも確認しましょう！

⑩ メンテナンスが終われば、.htaccessを元に戻す。

社内や自分で確認が終われば、
先方様にご報告する前に、必ず以下の2点は忘れないようにしてください！

.htaccessを元に戻す（③で書いたコードを消します）
_maintenanceファイルを削除

以上となります！

【追記】メンテナンスページに画像やCSSを読み込ませる方法

ご質問があったので追記いたします。
このメンテナンスページですが、ドメイン内のアクセス全部を一時的にmaintenance.htmlに飛ばしているため、
maintenance.htmlに画像やCSSファイルなどの、別のファイルを読み込むことができない仕様になっています。

そのため、CSS自体はmaintenance.htmlの<style>タグに直接書いていただく、画像は使用しないのが最良の解決策になります。

どうしても、maintenance.htmlに画像などの、別のファイルを読み込ませたい場合、
力技になりますが、「別ドメインに読み込ませたファイルを設定する」と解決します。

画像だったら、srcのurlを別ドメインのものにします。

<img width="1024" height="574" src="https://別ドメイン/hogehoge.svg" alt="">

ブラウザやサーバーで「クロスドメイン（複数のドメインをまたぐこと）」が禁止されていると使えない方法にはなります。
設定の際は、自己責任でご対応いただけますと幸いです🙇‍♀️
（ちなみに私のサーバーでは表示できました）

この記事が気に入ったら
フォローしてね！

Follow @yoshizo_web

よかったらシェアしてね！