この年末に、元旦に合わせてイベントバナーを掲載して欲しいんだけど。。。
な~んてクライアントから要望があったりなかったり。。。
つか、ありますよね~(笑
そんな時どうしてますか?
① 大みそかの23:30頃からFTPやWP管理画面を開いて待機する。
② 出来ませんの一言。
③ 外注にお願いする。
④ 家のPCなどでその場に合わせて更新する。
⑤ 何かプラグインなんかが無いか一応探す。
正解は、⑤です!
設置は下記のタグで対応可能です。
先ずはお決まりのJqueryを。。。
changeDisplay.jsをheaderやfooterに埋め込んで。。。
※Jquery本体はご自身でご用意ください。
◆指定時間に非表示にしたい時。
<span class="view_timer" data-end-date="2016/12/31 23:58">時間になったら表示されなくなるよ♪</span>
◆指定時間に表示にしたい時。
<span class="view_timer" data-start-date="2016/12/31 23:59">時間になったら表示されるよ♪</span>
◆期間を限定して表示したい時。
例)2017年1月1日午前0時0分~1月3日午後23時59分の間表示しようとするとこんな感じ。
<span class="view_timer" data-start-date="2011/1/1 0:00" data-end-date="2017/1/3 23:59">設定した期間表示されるよ♪</span>
上記のタグで括るだけでOKです!
◆ changeDisplay.js は、コチラからどうぞ。
$(document).ready(function() { $(".view_timer").each(function(index, target) { var startDate = $(this).attr("data-start-date"); var endDate = $(this).attr("data-end-date"); var nowDate = new Date(); if (startDate) { startDate = new Date(startDate); } else { startDate = nowDate; } if (endDate) { endDate = new Date(endDate); } if (startDate <= nowDate && (!endDate || nowDate <= endDate)) { $(this).show(); } else { $(this).hide(); } }); });
また、コチラのサイトも参考になりました。