ワードプレスのMaintenanceで公開までカウントダウンさせ自動公開させる。|WP Maintenance|PHP|wordpress
ワードプレスでサイトを簡単にメンテナンスにするプラグイン「Maintenance」
WebFactory Ltd様制作の優良プラグインです。
普段お世話になっている方も多いはず。
今日はこちらのプラグインでメンテナンス終了までの時間をカウントダウンし、0になると自動で公開されるようにしてみましょう。
今回日付けのカウントダウンには「jQuery Countdown」を利用します。
そのため、まずはjQuery Countdownの読み込みからやってみましょう。
これには「load_custom_scripts」というフックを利用します。
functions.phpに以下を記入しましょう。
1 2 3 4 5 6 7 8 |
<?php function mochi_maintenance_script(){ echo '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.1.0/js/jquery.plugin.min.js" integrity="sha512-MPI2h+3IVJR8ElOGFV02uH6W1augIqS9y/YgTZH7xNb7QwLVPjFL0eRxbDpE6ZAk/hQbHm6zWXMh/oMR4/3sDA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>'; echo '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.1.0/js/jquery.countdown.min.js" integrity="sha512-+Cdr05lT+aP+PTW4988XKLMjoAf0o5P2nRDIHooD/NItysfsyCPPhZhK/C6s7ZpaVoMRtsvRNJLtYOTDANC5UA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>'; //echo '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.1.0/css/jquery.countdown.min.css" integrity="sha512-3TZ6IiaoL7KEeLwJgOfw+/dEOxOUpb9YhmUokvcFOvNuFJ7t9kvilMNAMqeJ8neRT4iBnCe35TZsPwD2Y1Gl6g==" crossorigin="anonymous" referrerpolicy="no-referrer" />';//cssも読み込む場合はここも読み込みましょう echo '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.1.0/js/jquery.countdown-ja.min.js" integrity="sha512-R9lTOKS9izBtxVJit1PbnijA9a2eybOyv0DU9kGZZUa5U+d2T8G/+d4HkBkqkFn6ho+Kfub0rGagxwXjHR6NlQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>'; } add_action('load_custom_scripts','mochi_maintenance_script',100); |
これでjQuery Countdown読み込みは完了です。
勿論これだけでなく自分の作業するjavascriptも読み込ませておきましょう。
そのため、上記を以下に修正
1 2 3 4 5 6 7 8 9 10 |
<?php function mochi_maintenance_script(){ echo '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.1.0/js/jquery.plugin.min.js" integrity="sha512-MPI2h+3IVJR8ElOGFV02uH6W1augIqS9y/YgTZH7xNb7QwLVPjFL0eRxbDpE6ZAk/hQbHm6zWXMh/oMR4/3sDA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>'; echo '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.1.0/js/jquery.countdown.min.js" integrity="sha512-+Cdr05lT+aP+PTW4988XKLMjoAf0o5P2nRDIHooD/NItysfsyCPPhZhK/C6s7ZpaVoMRtsvRNJLtYOTDANC5UA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>'; //echo '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.1.0/css/jquery.countdown.min.css" integrity="sha512-3TZ6IiaoL7KEeLwJgOfw+/dEOxOUpb9YhmUokvcFOvNuFJ7t9kvilMNAMqeJ8neRT4iBnCe35TZsPwD2Y1Gl6g==" crossorigin="anonymous" referrerpolicy="no-referrer" />';//cssも読み込む場合はここも読み込みましょう echo '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.1.0/js/jquery.countdown-ja.min.js" integrity="sha512-R9lTOKS9izBtxVJit1PbnijA9a2eybOyv0DU9kGZZUa5U+d2T8G/+d4HkBkqkFn6ho+Kfub0rGagxwXjHR6NlQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>'; echo '<script src="'.get_template_directory_uri().'/js/maintenance_script.js"></script>';//URLは適宜置き換えてください。 } add_action('load_custom_scripts','mochi_maintenance_script',100); |
今回はテーマファイルの直下にjsというフォルダを作り、「maintenance_script.js」というファイルを作成しました。
次に、残り時間を表示させるためのhtmlをメンテナンスページに追加しましょう。
これには「content_section」というフックを利用します。
functions.phpに以下を記入しましょう。
1 2 3 4 5 |
<?php function mochi_content_section_add(){ echo '<div id="defaultCountdown"></div>'; } add_action('content_section', 'mochi_content_section_add',0); |
次は時間を表示させるためのjavascriptを記述していきます。
maintenance_script.jsへ以下を記述しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
(function ($) { "use strict"; (function () { var $defaultCountdown = $('#defaultCountdown'); if($defaultCountdown.length){ /* 対象時刻の設定 */ var targetDate = new Date('2024/10/14 15:35:00'); /* 対象時刻の設定ここまで */ $defaultCountdown.countdown({until: targetDate, compact: true, description: '',onExpiry:function(){ setTimeout(function(){ location.reload();//再読み込み処理。環境等によっては別処理に置き換えましょう。 },1000); }}); /* 既に時間だった場合の処理 */ var now = $defaultCountdown.countdown('getTimes'), nowSum = now.reduce(function (a,b){ return a + b; }); if(nowSum<1){ var buttonStyle = 'style="display:block;margin:10px auto;width:150px;line-height:50px;text-align:center;background: #fff;border:1px solid #adadad;border-radius:4px;color: #000;text-decoration:none;"', endTextStyle = 'style="width:850px;max-width:90%;margin:15px auto;"'; $defaultCountdown.after('<a class="reload-button" href="javascript:location.reload();" ' + buttonStyle + '>更新</a>'); $defaultCountdown.after('<p class="end-text" '+ endTextStyle +'>時間になりました。ページの更新をしてください。<br>※何度か更新しても変わらない場合はお使いの端末の設定時間が日本標準時間と一致していない可能性があります。<br>端末の設定を見直すか、正しい現在時刻を確認してください。<br>それでも解決しない場合はサイト管理者にお問い合わせください。</p>'); } /* 既に時間だった場合の処理ここまで */ } })(); })(jQuery); |
javascriptでは少しだけ修正が必要となります。
13行目の箇所にメンテナンスの終了時間を設定しましょう。
ここまで正常に完了していれば下記画像のような表示になります。
※時間がちっさいですがこれは各自好きなCSSを当ててください。
動作としては時間が0になればページの再読み込みがかかります。
また、PCとサーバーの時間がズレていた時のために初めから0秒だと再読み込み等を促す案内が流れる仕組みとなっています。
※使用しているサーバーのスペックや予想ユーザー数次第では自動再読み込みではなくメッセージの表示に変更するなど工夫しましょう。
ただ、このままだとただカウントダウンされるだけでメンテナンスは終了しないので終了させる処理を追記します。
functions.phpに以下コードを追加しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function mochi_mtnc_load_maintenance_page_for_this_user($not_logged_in){ $now_day = wp_date('Y/m/d H:i:s'); /* 対象時刻の設定 */ $end_day = date('Y/m/d H:i',strtotime('2025/10/14 15:35:00')); /* 対象時刻の設定ここまで */ if($now_day>=$end_day){ $not_logged_in = false; } return $not_logged_in; } add_filter('mtnc_load_maintenance_page_for_this_user','mochi_mtnc_load_maintenance_page_for_this_user'); |
ここも少し修正が必要となり、6行目にメンテナンスの終了時間を設定しましょう。
以上で設定は完了です。
最終的にfunctions.phpへの追記は以下内容となります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<?php function mochi_maintenance_script(){ echo '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.1.0/js/jquery.plugin.min.js" integrity="sha512-MPI2h+3IVJR8ElOGFV02uH6W1augIqS9y/YgTZH7xNb7QwLVPjFL0eRxbDpE6ZAk/hQbHm6zWXMh/oMR4/3sDA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>'; echo '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.1.0/js/jquery.countdown.min.js" integrity="sha512-+Cdr05lT+aP+PTW4988XKLMjoAf0o5P2nRDIHooD/NItysfsyCPPhZhK/C6s7ZpaVoMRtsvRNJLtYOTDANC5UA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>'; //echo '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.1.0/css/jquery.countdown.min.css" integrity="sha512-3TZ6IiaoL7KEeLwJgOfw+/dEOxOUpb9YhmUokvcFOvNuFJ7t9kvilMNAMqeJ8neRT4iBnCe35TZsPwD2Y1Gl6g==" crossorigin="anonymous" referrerpolicy="no-referrer" />';//cssも読み込む場合はここも読み込みましょう echo '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.1.0/js/jquery.countdown-ja.min.js" integrity="sha512-R9lTOKS9izBtxVJit1PbnijA9a2eybOyv0DU9kGZZUa5U+d2T8G/+d4HkBkqkFn6ho+Kfub0rGagxwXjHR6NlQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>'; echo '<script src="'.get_template_directory_uri().'/js/maintenance_script.js"></script>';//URLは適宜置き換えてください。 } add_action('load_custom_scripts','mochi_maintenance_script',100); function mochi_content_section_add(){ echo '<div id="defaultCountdown"></div>'; } add_action('content_section', 'mochi_content_section_add',0); function mochi_mtnc_load_maintenance_page_for_this_user($not_logged_in){ $now_day = wp_date('Y/m/d H:i:s'); /* 対象時刻の設定 */ $end_day = date('Y/m/d H:i',strtotime('2025/10/14 15:35:00')); /* 対象時刻の設定ここまで */ if($now_day>=$end_day){ $not_logged_in = false; } return $not_logged_in; } add_filter('mtnc_load_maintenance_page_for_this_user','mochi_mtnc_load_maintenance_page_for_this_user'); |
注意点
今回紹介した方法にはいくつか注意点があります。
まず、サイトの公開が完了したあとはfunctions.phpに追記した32行目のフィルターをコメントアウトして管理画面のプラグイン設定からメンテナンスモードをオフに変更しておきましょう。
また、カウントダウン表示自体はプラグインを有料のPRO版にアップグレードすることにより実装することも可能です。
プラグインのアップデートによる不具合の可能性もあるので基本的にはPRO版をおすすめいたします。(開発者のためにもなります)
NEWS