WordPressのメンテナンス中のページは、黒くて大きなフォントで『現在メンテナンス中のため、しばらくの間ご利用いただけません。』だけが出ます。
これではサイトデザインとあまりに違って冷たいイメージを与えてしまい見ている人が戻ってきません。
WordPressのメンテナンスページは、カスタマイズできるようなしくみが用意されています。
とてもかんたんです。ちょっとしたHTMLをphpファイルに書くだけです。数分で終わります。
WP5.3からもっとかんたんにカスタマイズできるようになりました。
まずは結果からお見せします。メンテナンスのデフォルトページとカスタマイズしたページを見比べてください。別タブでサンプルページが開きます。
Webページでできることはなんでもできます。必要ないでしょうがJavaScriptを埋め込んで動的にもできます。
ぼくはFont Awesomeでアイコンフォントを使いました。
これをいまからつくります。
まずはphpファイルを用意します。（ファイル名はmaintenance.php）
そして、phpファイルに元になるコードをコピーして貼り付けます。コピー元はwp-includes/load.phpのwp_maintenance()の下半分です。
WordPress.orgリファレンス
if ( file_exists( WP_CONTENT_DIR . '/maintenance.php' ) ) {
require_once( WP_CONTENT_DIR . '/maintenance.php' );
die();
}この部分で、maintenance.phpがあったらカスタマイズしたページを使うように動きます。
die()で処理を終わらせるのでそこから下のデフォルトページは使いません。コピー元のソースはこのmaintenance.phpを使う処理の下の部分です。
wp_load_translations_early();
$protocol = wp_get_server_protocol();
header( "$protocol 503 Service Unavailable", true, 503 );
header( 'Content-Type: text/html; charset=utf-8' );
header( 'Retry-After: 600' );
$dir_attr = '';
if ( is_rtl() ) {
$dir_attr = ' dir="rtl"';
}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"<?php echo $dir_attr; ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php _e( 'Maintenance' ); ?></title>
</head>
<body>
<h1><?php _e( 'Briefly unavailable for scheduled maintenance. Check back in a minute.' ); ?></h1>
</body>
</html>上のphpコードの部分は分からない人はそのままにしてください。編集する部分はHTMLの部分です。
こちらに好きなようにHTMLを作成してください。ちなみに最初に見たサンプルのmaintenance.phpの全文はこちら。
<?php
wp_load_translations_early();
$protocol = wp_get_server_protocol();
header( "$protocol 503 Service Unavailable", true, 503 );
header( 'Content-Type: text/html; charset=utf-8' );
header( 'Retry-After: 600' );
$dir_attr = '';
if ( is_rtl() ) {
$dir_attr = ' dir="rtl"';
}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"<?php echo $dir_attr; ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php _e( 'Maintenance' ); ?></title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style type='text/css'>
body {
color:#383838;
text-align:center;
font-family: 'Roboto',"游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Verdana,"メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","Font Awesome 5 Free","Font Awesome 5 Brands",sans-serif;
}
h1 {
font-size:2rem;
}
hr {
border: .3rem groove #828cff;
}
.message {
margin-top: 3rem;
display: flex;
flex-direction: column;
align-items: center;
}
.fa-tools, .fa-comments, .fa-exclamation-triangle {
font-size: 1.5rem;
color: #fff;
}
.fa-tools {
margin-top: 3rem;
font-size: 2rem;
text-shadow: 0 0 3px #383838;
}
.fa-comments {
text-shadow: 0 0 1.5px #383838;
}
.fa-exclamation-triangle {
text-shadow: 0 0 20px #FFE900;
margin-top: 1rem;
}
div.comment, div.exclamation {
display: inline-block;
}
.message p {
margin-top: .5rem;
padding: 0 1rem;
border-bottom: 2px solid;
}
p.exclamation {
border-color: #FFF482;
}
</style>
</head>
<body>
<i class="fas fa-tools"></i>
<h1><?php _e( 'Briefly unavailable for scheduled maintenance. Check back in a minute.' ); ?></h1>
<hr>
<div class="message">
<i class="far fa-comments"></i>
<div class="comment">
<p class="comment"><?php echo 'ブラウザの再読み込み、またはF5キーを押してページを更新してください。'; ?></p>
</div>
<i class="fas fa-exclamation-triangle"></i>
<div class="exclamation">
<p class="exclamation"><?php echo '通常は1分ほどで終了しますが、最大10分かかることもあります。'; ?></p>
</div>
</div>
</body>
</html>CSSファイルは用意していません。メンテナンスページはたいした量じゃないので、インラインCSSでHTMLに直接書いてます。
echoで日本語をそのまま表示していますが、このコードだとphpではなくてHTMLに直接書くのと同じです。
_e()でメッセージに翻訳機能をつけようとしたのですが、うまくいかないのでechoにしちゃいました。
優先順位が低いので、あとで_e()を使うように修正するつもりです。
さいごに、maintenance.phpを"***/DocumentRoot/wp-content/"にアップロードしてください。
作業は以上です。
メンテナンスページのカスタマイズのまとめ
- maintenance.phpファイルを用意する。
- wp-includes/load.phpのwp_maintenance()からソースコードをコピーして貼り付け。
- HTML文の部分をカスタマイズ。
- "***/DocumentRoot/wp-content/"にアップロード。
