ワードプレスの固定ページで、キャンペーンページなどを作成していると「タイマーで特定の日時にバナーを表示/非表示させたい！」というような場面があるかと思います。
キャンペーンの終了時間が深夜の場合、本当は目視で確認することが望ましいですが、タイマーで非表示にできたら負担の軽減につながりますよね。
プラグインなどでも実現はできますが、javascriptでも以下のように簡単にタイマー機能を実装することができます。
結果の確認方法。
まずは現在から1分後くらいにタイマーをセットして表示または非表示になるか確認しましょう。
設定した時間にプレビューすることで簡単に結果を確認することができます。
HTML
タイマーにしたい内容をclassで括ります。
今回は「rimit」というclass名を付けています。
<div class="rimit">
<a rel="nofollow" href="リンク①" target="_blank"><img src="画像①"></a>
</div>
今回はバナーを想定していますが、単純なリンクタグでも問題なく動作します。
「rimit」に括られていれば中身はなんでもOKです。
javascript
javascriptのコードは以下になります。
<script>
function hideScheduledText() {
const scheduledElement = document.querySelector('.rimit');
const currentDate = new Date();
const targetDate = new Date('2024-04-01T10:00:00');
if (currentDate >= targetDate) {
scheduledElement.style.display = 'none';
}
}
window.addEventListener('load', hideScheduledText);
</script>
上記の例では『 2024年4月1日の朝10時になったら表示しているバナーを非表示にする 』というケースを想定しています。
「function hideScheduledText()」の「hideScheduledText」は関数名です。任意で変更して構いませんが、最終行でも関数名が使用されているので、併せて変更してください。
まずは「const scheduledElement = document.querySelector(‘.rimit’); 」で要素を取得し、変数に格納します。
次に「const currentDate = new Date();」で現在の日時を取得。同じく変数に格納します。
「const targetDate = new Date(‘2024-04-05T10:00:00’);」は日時を指定する部分です。この時間になったらバナーが非表示になります。
「if (currentDate >= targetDate)」で時間を比較し、それをifの条件にしています。つまり「currentDate（現在の日時）」が「targetDate（指定した日時）」と等しいか大きくなったら「scheduledElement.style.display = ‘none’;」を発動します。
「scheduledElement.style.display = ‘none’;」は「scheduledElement（rimitで括られた要素）」に「display = ‘none’」を追加する。という命令です。
最後に「window.addEventListener(‘load’, hideScheduledText);」でこの関数の発動トリガーに「load」をしていしています。これは『ページ読み込み時に関数を実行する』という意味です。
応用
上記のように順を追ってコードを見ていくと、何となく流れが掴めてくると思います。
『任意の時間になったらバナーを表示する』場合は逆に考えれば良いので、あらかじめrimitクラスにdisplay:none;を付与しておき、タイマーで「scheduledElement.style.display = ‘block’;」にすれば問題なく表示されると思います。
ここでは応用編として『2024年4月1日の朝10時になったらバナーを表示。2024年4月2日の朝9時59分になったらバナーを非表示にする。』というタイマー型バナーをご紹介していきます。
【 HTML 】
<div class="rimit">
<a rel="nofollow" href="リンク①" target="_blank"><img src="画像①"></a>
</div>
HTMLのコードは先ほどと同じです。
【 CSS 】
<style>
.rimit{ display:none; }
</style>
今回はタイマーで表示させるところからのスタートなので、初期設定ではバナーは非表示にしておきます。
【 javascript 】
<script>
function hideScheduledText() {
const scheduledElement = document.querySelector('.rimit');
const currentDate = new Date();
const targetDateShow = new Date('2024-04-01T10:00:00');
const targetDateDell = new Date('2024-04-02T09:59:00');
if (currentDate >= targetDateDell) {
scheduledElement.style.display = 'none';
} else if (currentDate >= targetDateShow) {
scheduledElement.style.display = 'block';
}
}
window.addEventListener('load', hideScheduledText);
</script>
javascriptの変更点はまず日時指定が2つになります。これは初期状態が非表示の為、表示する時間と再び非表示にする時間の2つが必要となる為です。
今回の例では「targetDateShow」が表示する時間。「targetDateDell」が再び非表示にする時間になります。
続くif文でも「else if」を使い、条件を2つに増やします。
ここでポイントになるのが「currentDate >= targetDateDell（再び非表示にする時間）」をifに、「currentDate >= targetDateShow（表示する時間）」をelse ifの条件にすることです。
もし「currentDate >= targetDateShow」を先に指定してしまうと、いつまでもifの条件にマッチしてしまい、else ifに進めなくなるからです。
少しややこしいと思いますが、ゆっくり頭の中で時系列を整理すれば理屈がわかってくると思います。
まとめ
以上がjavascriptを使ったタイマーでバナーの表示・非表示を切り替える方法になりますが、いかがでしたでしょうか。
前述したようにこのような機能を有したプラグインもありますが、初期設定が面倒だったり、急に壊れた際に復旧が難しかったりします。
何より今回の形は固定ページや、投稿ページに直接記述できるので、1ページ内で完結できる事や、使いまわしが楽なメリットがありますので、ぜひ挑戦してみてください。
バナーの他にも「○月○日リリース予定！」を「○月○日リリース<span class=”rimit”>予定</span>！」のようにすれ指定日以降は「○月○日リリース！」と表示を変えることもできますよ。
この記事がどなたかのお役に立てたら幸いです。
