ホームページやネットショップで期間限定キャンペーンを表示したい
表示させること自体は、通常のバナー表示と変わりませんので簡単ですが、そこは期間限定バナー
期間を設定して表示したいと思います。
サンプルソースはたくさん転がっていて、楽天市場向けなどは多く公開されています。
WordPressのページで期間限定ナバーを表示
別に楽天市場やYahooショップでの方法と変わりありませんが、制約が少ない分より簡単に表示できます。
ここでは、ウィジェットに簡単コピペできるように、JavaScriptもStyleもhtmlも一緒にしちゃっています。
<script type=”text/javascript”><!–
// イベントの開始、終了設定
var startday = new Date(‘2018/08/10 13:39:00’);
var endday = new Date(‘2018/08/10 13:40:00’);
window.onload = function(){
var today = new Date();
if ( startday < today && today < endday ){
document.getElementById(“pic”).style.display=”block”;
}else{
document.getElementById(“pic”).style.display=”none”;
}
};
// –></script>
<!– ======期間限定キャンペーンバナー======= –>
<style type=”text/css”>
div.limitedBanner{
display:none;
text-align: center;
max-width: 616px;
width: 95%;
padding-bottom:10px;
}
</style>
<div class=”limitedBanner” id=”pic” >
<a href=”クリックしたときのとび先URL” target=”_blank”><img alt=”期間限定キャンペーンバナー” src=”バナー画像のURL” ></a>
</div>
貼り付けたい場所にウィジェットがある場合は、「カスタムHTML」に上記を記述すればOK
但し、SiteGuardのプラグインを有効としている場合、保存に失敗するかもしれません。
その場合は、WordPressのカスタムHTMLやカスタムCSSが保存できない場合の対処
を参考に対処しましょう。