A2-blog

【WP】指定時間にメッセージを表示させるコードを実装してみた！

ワードプレスサイトで指定した時間だけお知らせを表示させるコード(スクリプト？)を実装してみました。

実装方法

header.phpなどに以下のコードを追加して表示させておきたい時間帯を指定します。

<script>
window.onload = function() {
var now = new Date();
var start = new Date('2019/6/18 0:00:00'); // 表示開始日時（時間は24h表記）
var end = new Date('2019/6/20 9:00:00'); // 表示終了日時（時間は24h表記）
if ( start <  now && now < end ) {
    document.getElementById("timeLimitedScript").style.display="block";
}
}
</script>

お知らせを表示させたい位置に<div id=”timeLimitedScript” style=”display: none;”>タグで囲った以下のような記載すると指定した時間帯だけdivで囲んだテキストが表示されます。

<div id="timeLimitedScript" style="display: none;">
    緊急メンテナンス<br>
    2019/06/20(木) 01:00 ～ 09:00
    ソフトウェアメンテナンス（セキュリティアップデート）によって
    1時間程度のサーバーの停止が予定されているので
    一時的に当サイトにアクセスできなくなると思います。
</div>

Tweet