合同会社ひめぽーと は、愛媛の店舗、生産者様のホームページ作成・制作・管理、ネットショップ作成・制作・管理、パソコン関連サポートなど、バックアップ致します。

ホームページやネットショップで期間限定キャンペーンを表示する。

掲載日:
ホームページやネットショップで期間限定キャンペーンを表示する。

ホームページやネットショップで期間限定キャンペーンを表示したい

表示させること自体は、通常のバナー表示と変わりませんので簡単ですが、そこは期間限定バナー

期間を設定して表示したいと思います。

サンプルソースはたくさん転がっていて、楽天市場向けなどは多く公開されています。

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が保存できない場合の対処

を参考に対処しましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA