WordPress『現在メンテナンス中のため、しばらくの間ご利用いただけません。』をカスタマイズする

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
wordpress image
イラストACの画像をもとに加工しています。

WordPressのメンテナンス中のページは、黒くて大きなフォントで『現在メンテナンス中のため、しばらくの間ご利用いただけません。』だけが出ます。

これではサイトデザインとあまりに違って冷たいイメージを与えてしまい見ている人が戻ってきません。

WordPressのメンテナンスページは、カスタマイズできるようなしくみが用意されています。

とてもかんたんです。ちょっとしたHTMLをphpファイルに書くだけです。数分で終わります。

まずは結果からお見せします。メンテナンスのデフォルトページとカスタマイズしたページを見比べてください。別タブでサンプルページが開きます。

-> デフォルトページ

-> カスタマイズページ

Webページでできることはなんでもできます。必要ないでしょうがJavaScriptを埋め込んで動的にもできます。

ぼくはFontAwesomeでアイコンフォントを使いました。

これをいまからつくります。

まずはphpファイルを用意します。ファイル名は決まっていて"maintenance.php"です。

そして、phpファイルに元になるコードをコピーして貼り付けます。コピー元はwp-includes/load.phpのwp_maintenance()の下半分です。

-> WordPressリファレンス - wp_maintenance -

wp_maintenance()のmaintenance.phpを呼んでるところ
    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の全文はこちらです。

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 Pゴシック","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/"にアップロード。
WordPressの本
post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本
  • Webサイト作成から運用まで全体的に学ぶ
  • ブログサイトの運営からサイトの収益化を学ぶ
  • サイト作成・運営 + 集客の方法を学ぶ
  • WordPressからPHPプログラミングを学ぶ
  • 最新のWordPress(バージョン5)に対応した本

の7冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。


WordPressの本7選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!