We’re Open!プラグイン使用時の日付取得とリロード

Wordpress関連
2024年10月29日

店舗などのサイトで「本日休業」や「Open」」「 Closed」などの表示用に使っているプラグインWe’re Open!。
分単位でOpen Closedの表示分けができるので重宝しているものの、バリエーションとして「１月１日　本日開館」等、当日の月日表示が欲しい時もあるので、日付取得の方法を覚書。
functions.phpに以下を追加。

//We're Open表示のToday取得
function shortcode_today() {
return wp_date("n/j");
}
add_shortcode('today_date', 'shortcode_today');
add_filter('the_content', 'do_shortcode');

で、表示させたいテンプレートの該当部分に[today_date]で表示させる。
以下We’re Open!を使ったテンプレートで表示させる例。

<?php 	 echo do_shortcode('[open_text]
%if_regular_today%%if_open_today%<div class="l-header__cal__today">[today_date]</div><div class="l-header__cal__current">OPEN</div><div class="l-header__cal__times"> %hours_today%</div>%end%
%if_closed_today%<div class="l-header__cal__today">[today_date]</div><div class="l-header__cal__current">CLOSED</div><div class="l-header__cal__times">for the day</div>%end%
%end%
%if_not_regular_today%
%if_open_today%<div class="l-header__cal__today">[today_date]</div><div class="l-header__cal__current">OPEN</div><div class="l-header__cal__times"> %hours_today%</div>%end%
%if_closed_today%<div class="l-header__cal__today">[today_date]</div><div class="l-header__cal__current">CLOSED</div><div class="l-header__cal__times">for the day</div>%end%
%end%
[/open_text]'); 
?>

さらに、掲載されたページのタブをそのままでブラウザを閉じて、日をまたいで再度開いた時にキャッシュが残っていて前回表示の情報がそのまま掲載されていることがあります。
これでは休日をまたいだりした場合に間違った表示が残ってしまうことになるので、タブがアクティブになった時にリロードさせましょう。
javascriptを利用した方法は以下。
但し、この方法には注意が必要で、すべてのページに適応させると問題があります。例えばお問合せのページでメッセージなどを頂く場合、せっかくの書きかけの文章が、調べ物で等で他のタブに行って再度戻った時にクリアされてしまう場合があります。なので必要なページにのみ適応させましょう。

document.addEventListener("visibilitychange", function () {
  if (document.visibilityState === "visible") {
    // タブがアクティブになったときにリロード
    location.reload();
  }
});

もう少し踏み込んで、Open Closedなどの表示を営業時間にあわせてリロード表示させたい場合は以下を。
この例は、月曜日から金曜日までは営業時間が8時30分から19時30分まで、
土曜日と日曜日は10時から19時までで、水曜日が定休日だった場合です。
各時間のsecond: 3はwe’re open!と同時刻だとリロードの際に反映されない場合を考慮して3秒遅らせています。
{ hour: 24, minute: 0, second: 3 }は月日の表記を入れている場合や、翌日が休日の場合、また営業時間の表記が変わることがあるので、深夜対応として入れています。
こちらも適応させるページには注意しましょう。

<script>
document.addEventListener("DOMContentLoaded", function () {
  // 曜日ごとのリロード時間設定
  // 0 = 日曜日, 1 = 月曜日, ..., 6 = 土曜日
  const reloadSchedule = {
    1: [
      { hour: 8, minute: 30, second: 3 },
      { hour: 19, minute: 30, second: 3 },
      { hour: 24, minute: 0, second: 3 },
    ],
    2: [
      { hour: 8, minute: 30, second: 3 },
      { hour: 19, minute: 30, second: 3 },
      { hour: 24, minute: 0, second: 3 },
    ],
    3: [{ hour: 24, minute: 0, second: 3 }
    ],
    4: [
      { hour: 8, minute: 30, second: 3 },
      { hour: 19, minute: 30, second: 3 },
      { hour: 24, minute: 0, second: 3 },
    ],
    5: [
      { hour: 8, minute: 30, second: 3 },
      { hour: 19, minute: 30, second: 3 },
      { hour: 24, minute: 0, second: 3 },
    ],
    6: [
      { hour: 10, minute: 0, second: 3 },
      { hour: 19, minute: 0, second: 3 },
      { hour: 24, minute: 0, second: 3 },
    ],
    0: [
      { hour: 10, minute: 0, second: 3 },
      { hour: 19, minute: 0, second: 3 },
      { hour: 24, minute: 0, second: 3 },
    ],
  };

  function checkReloadTime() {
    const now = new Date();
    const currentDay = now.getDay(); // 現在の曜日を取得（0～6）
    const currentHour = now.getHours();
    const currentMinute = now.getMinutes();
    const currentSecond = now.getSeconds();

    // 現在の曜日がスケジュールに含まれている場合のみチェック
    if (reloadSchedule[currentDay]) {
      // その曜日のすべてのリロード時間を確認
      for (const scheduledTime of reloadSchedule[currentDay]) {
        // 時間が一致したらページをリロード
        if (
          currentHour === scheduledTime.hour &&
          currentMinute === scheduledTime.minute &&
          currentSecond === scheduledTime.second
        ) {
          location.reload();
          break; // リロードが実行されたらループを抜ける
        }
      }
    }
  }

  // 1秒ごとにチェックする
  setInterval(checkReloadTime, 1000); 
});
</script>

PAGE TOP