カウントダウンタイマーの設定日をadvanced cunstom fieldで入力させて動かすことができた。

カウントダウンタイマーの設定日をadvanced cunstom fieldで入力させて動かすことができた。

カウントダウンタイマーのscriptを読み込んで、表示させたい場所のhtmlファイルに、実行するための記述を書く方法をとったのですが、

クライアントが、自分でカウントダウンタイマーの設定日を変更するときにテーマ編集から、page-top.php(home.phpでもいいです)とかのカウントダウンタイマーの場所を開いて、
年、月、日を修正してもらわないといけないので、困ったなーと思っていました。

そんな時、

あ!Avdvanced Custom Fieldで投稿やカスタム投稿のところから、年、月、日を入力してもらい、それをカウントダウンタイマーのところに読み込んで表示させればいけるんじゃないかと思いやってみたら
バッチリできました!

Advenced Custom Fieldで以下の項目を作ります。

01

次に表示させたいところに、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

です。

ポチッ☆とクリックお願いします!
↓ ↓ ↓

  • にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ

コメントは受け付けていません。

サブコンテンツ

TOP