WordPressで定休日メッセージを自動表示する方法（特定日指定） | 飯田市ホームページ制作デザインスタジオiR

日付ごとに変わる定休日を、自動で「本日は定休日です」と表示したいと思ったことはありませんか？
曜日固定ではなく「〇月〇日は定休日」というように、カレンダーで決まっている場合でも対応できる方法をご紹介します。

この記事では、カスタムHTMLとJavaScriptを使って、定休日だけ自動でメッセージを表示する方法を解説します。

1. 想定する場面

営業日は不定期で、あらかじめ決まった日だけお休み
定休日の日だけ「本日は定休日です」とトップページなどに表示したい
定休日が終わったら自動でメッセージが非表示になる

2. 完成イメージ

定休日に該当する日になると、以下のようなメッセージがトップページなど任意の場所に表示されます。

本日は定休日です

日付が変わると自動的に消えるので、手動で表示・非表示を切り替える必要はありません。

3. 実装方法

プラグインをさがしてみましたが、プラグインは良い物が見つかりませんでした。
以下の方法がシンプルでやりやすかったので紹介します。

HTML＋CSS＋JavaScriptを設置

WordPressのブロックエディターの「カスタムHTML」ブロックなどに、以下のコードをそのまま貼り付けるだけで動作します。
「任意の日付」のところに休みの日を登録してください。いくつでもOKです。

<!-- 定休日メッセージ -->
<div id="yasumi-message">
  本日は定休日です
</div>

<style>
#yasumi-message {
  display: none;
  color: red;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const holidays = [
    "任意の日付", 
    "任意の日付", 
    "任意の日付", 
    "任意の日付"
  ];

  const today = new Date();
  today.setHours(today.getHours() + 9); // 日本時間に補正
  const todayStr = today.toISOString().split("T")[0];

  const msg = document.getElementById("yasumi-message");
  if (holidays.includes(todayStr) && msg) {
    msg.style.display = "block";
  }
});
</script>