WP Maintenance Modeで独自HTML/CSSを適用【カスタマイズ】

- WordPress -

2019.11.25

※ 本ページはプロモーションを含みます。

WordPressで構築したサイトを楽にメンテナンス表示させたい時は「WP Maintenance Mode」というプラグインを使う場合が多いかと思います。

が、このプラグインの管理画面機能だけでは非常に質素な画面しかできない(っぽい)んですよね。

WP Maintenance Modeで独自HTML/CSSを適用

メンテナンスページががっつりデザインされて渡ってきたので「これ、このプラグインじゃ無理じゃない？」と諦めかけました。

ですが、自分で作ったHTML/CSSを何とか適用させる方法が見つかったのでメモ。

WP Maintenance Modeで独自HTML/CSS適用方法

以下手順を踏むことで、好きな内容/スタイリングでメンテナンスページを表示できます。

wp-content/themes/{有効化しているテーマフォルダ}/配下に「wp-maintenance-mode.php」という名前のファイルを新規作成する
wp-maintenance.php内に好きなHTMLを書く
wp-maintenance.php内で好きなCSSを読み込む
WP Maintenance Modeを有効化する

※プラグインのバージョン2.2.4で動作確認

作成、配置するファイル名は「wp-maintenance-mode.php」でないといけないので注意。

以下プラグイン内のファイルを見ると、

plugins/wp-maintenance-mode/includes/classes/wp-maintenance-mode.php

こんな風に書いてありました。子テーマフォルダ内→テーマフォルダ内→/wp-contentフォルダ内、という順番でwp-maintenance-mode.phpを探しています。

<?php
// load maintenance mode template
if (file_exists(get_stylesheet_directory() . '/wp-maintenance-mode.php')) { // check child theme folder
    include_once(get_stylesheet_directory() . '/wp-maintenance-mode.php');
} else if (file_exists(get_template_directory() . "/wp-maintenance-mode.php")) { // check theme folder
    include_once(get_template_directory() . '/wp-maintenance-mode.php');
} else if (file_exists(WP_CONTENT_DIR . '/wp-maintenance-mode.php')) { // check `wp-content` folder
    include_once(WP_CONTENT_DIR . '/wp-maintenance-mode.php');
} else { // load from plugin `views` folder
    include_once(WPMM_VIEWS_PATH . 'maintenance.php');
}

ちなみにこの手法は以下WordPress StackExchangeという質問サイトで一人だけボソッと回答されているのがヒントになりました。

どれだけ探しても「テーマフォルダ内に特定名のファイルを置く」方法を明示的に書いているサイトがなかったので以下の方の回答をたまたま見ることがなかったら諦めていたと思います。。。

Q. How do I use a custom theme for the WP Maintenance Mode plugin?
Just to clarify (as I stumbled upon this from searching), if you use wp-maintenance-mode.php in the WP-Content folder (rather than wp-maintenance.php as above), it will override the default template in the plugin.– Rhys Wynne Jul 15 '14 at 14:03
WordPress StackExchangeより引用

UdemyでサクッとWordPressを学習してみる