【WordPress】ページ内コンテンツを特定日時で公開・非公開を切り替える方法

この記事を書いた人

パピティー

htmlとCSSのきほん本を3冊読んだだけの初心者が、やりたいことベースで、shopifyとwordpressに奮闘中。

WordPressでプラグインを使わず、コード編集により特定セクションを特定の日時で公開・非公開を切り替える方法をご紹介します。例えば、店舗ホームページを作成した場合、新店の情報を特定の日時で公開したり、期間限定ショップを期間外には非表示にしたりを自動化できます。

今回のゴールは

ページ内の特定セクションを特定日時で公開・非公開を切り替えるタイマー設定

完成イメージ
1. 公開日時前
2. 公開日時以降
日時タイマーを活用するメリット
初心者でもできるコード編集方法
設定時の注意点
まとめ

完成イメージ

公開日時前

公開日時以降

公開期間前には表示されていなかった箇所が現れた！

日時タイマーを活用するメリット

自動化によりデバイスの前で構えている必要がない
指定の時間に公開したり、非公開にしたりする操作不要
作業をまとめて行える
イチイチ設定しなくてまとめてコンテンツを設置しておける

初心者でもできるコード編集方法

流れは以下の通りでかなりシンプルです。

ページ内コンテンツを特定日時で公開・非公開を切り替える方法

固定ページか投稿ページにコンテンツを作成
カスタムHTMLからHTMLとCSSでコンテンツを作成するか、お好きなブロックでコンテンツを作成し、それぞれにクラスを付与
カスタムJS箇所にタイマー用コードを記入

ではそれぞれ見ていきましょう。

1. コンテンツを作成

カスタムHTMLからHTMLとCSSでコンテンツを作成するパターンで説明いたします。

カスタムHTMLブロックにHTMLとCSSを以下のように記載。公開日時まで非表示にしておくという設定をしています。

<section id="shop2">
<img class="lion" src=""> 
<div class="info">
<h3>2号店</h3>
<p>東京都猫大好き市三毛猫2-2-2</p>
<p>TEL:222-222-222</p>
</div>
</section>

<style>
#shop2{
display: none;
justify-content: center;
}
.lion{
width: 100px;
object-fit: cover;
}
</style>

↓開始時間を過ぎた時の表示イメージ

2号店

東京都猫大好き市三毛猫2-2-2

TEL:222-222-222

2. JavaScriptでタイマーを設定

↓公開日時も非公開日時も設定したい場合は以下

<script>
document.addEventListener('DOMContentLoaded', function() {
const startDate = new Date('2025-09-17T22:31:00+09:00');
const endDate = new Date('2025-09-20T23:59:59+09:00');
const now = new Date();
const banner = document.querySelector('#shop2');
if (!banner) return; // 要素がなければ何もせず終了

if (now >= startDate && now <= endDate) {
    banner.style.display = 'flex';
} else {
    banner.style.display = 'none';
}
});
</script>

↓非公開日時の設定は不要で公開日時のみ設定したい場合は以下

<script>
document.addEventListener('DOMContentLoaded', function() {
  const startDate = new Date('2025-09-17T22:31:00+09:00');
  const now = new Date();
  const banner = document.querySelector('#shop2');
if (!banner) return; // 要素がなければ何もせず終了

  if (banner && now >= startDate) {
      banner.style.display = 'flex';
  }
});
</script>

※ここには<script>タグを記載していますが、ページ内のカスタムJavaScript箇所に記載する場合には不要。