カウントダウンタイマーの設定日をadvanced cunstom fieldで入力させて動かすことができた。
カウントダウンタイマーのscriptを読み込んで、表示させたい場所のhtmlファイルに、実行するための記述を書く方法をとったのですが、
クライアントが、自分でカウントダウンタイマーの設定日を変更するときにテーマ編集から、page-top.php(home.phpでもいいです)とかのカウントダウンタイマーの場所を開いて、
年、月、日を修正してもらわないといけないので、困ったなーと思っていました。
そんな時、
あ!Avdvanced Custom Fieldで投稿やカスタム投稿のところから、年、月、日を入力してもらい、それをカウントダウンタイマーのところに読み込んで表示させればいけるんじゃないかと思いやってみたら
バッチリできました!
Advenced Custom Fieldで以下の項目を作ります。
次に表示させたいところに、Advenced Custom Fieldで入力したものを表示させる記述を書きます。
↓ (ちなみにカウントダウンタイマーの表示部分はこんな感じです)
<!-- カウントダウンタイマー ここから -->
<div class="timer_1" id="sampleA"></div>
<script language="JavaScript" type="text/javascript">
<!--
cdTimer1();
function cdTimer1() {
// 設定項目 ここから---------------------------------------------
// タグ要素のID名
var elemID = 'sampleA';
// 期限日を設定
var year = <?php the_field('conter_year',$post->ID); ?>; // 年
var month = <?php the_field('conter_month',$post->ID); ?>; // 月
var day = <?php the_field('conter_day',$post->ID); ?>; // 日
// 期限終了後のメッセージ
var limitMessage = 'お申込期間は終了しました。';
// メッセージのスタイルクラス名(変更しない場合は空欄)
var msgClass = 'msg_1';
// 設定項目 ここまで---------------------------------------------
var timeLimit = new Date( year, month - 1, day );
var timer = new CountdownTimer( elemID, timeLimit, limitMessage, msgClass );
timer.countDown();
}
// -->
</script>
<!-- カウントダウンタイマー ここまで -->
<?php the_field(‘conter_year’,$post->ID); ?> は年
<?php the_field(‘conter_month’,$post->ID); ?> は月
<?php the_field(‘conter_day’,$post->ID); ?> は 日
↑これら3つを、始めは直接テーマ内のファイルに数字でいれないとと思っていたので、
クライアントがやりやすいように、投稿画面で入れられることができたので良かったです!!(^^)v
です。
関連記事はこちら!
スポンサーリンク
タグ:カウントダウンタイマー







