ACFの日付選択ツール、時間選択ツールで、曜日付きのスケジュールを作成

ACFには、カレンダーから日付を選択できる、日付選択ツールとセレクターから時間を選択できる時間選択ツールがあります。今回はこれらを使用して、曜日付きのスケジュールを作成します。

今回のDEMOはライブスケジュールのシングルページです。

日時とOpen / Start時間をそれぞれ、ACF日付選択ツール時間選択ツールで表示しています。

ACF設定

日付フィールドは、日付選択ツールに設定します。編集画面に表示するフィールドラベル日付、PHPに記入するフィールド名add_nichijiに設定しました。編集画面に表示する表示形式、サイトに表示する戻り値の形式、共にカスタムでY/n/jに設定しました。

日付フィールドは、日付選択ツールに設定

項目設定値
フィールドタイプ日付選択ツール
フィールドラベル日付
フィールド名add_nichiji
表示形式カスタム : Y/n/j
戻り値の形式カスタム : Y/n/j

Openフィールドタイプは、時間選択ツールに設定します。編集画面に表示するフィールドラベルOpen、PHPに記入するフィールド名add_opentimeに設定しました。編集画面に表示する表示形式、サイトに表示する戻り値の形式、共にカスタムH:iに設定しました。

Openフィールドタイプは、時間選択ツールに設定

項目設定値
フィールドタイプ時間選択ツール
フィールドラベルOpen
フィールド名add_opentime
表示形式カスタム: H:i
戻り値の形式カスタム: H:i

Startフィールドタイプも、時間選択ツールに設定します。編集画面に表示するフィールドラベルStart、PHPに記入フィールド名add_starttimeに設定しました。編集画面に表示する表示形式、サイトに表示する戻り値の形式、共にカスタムH:iに設定しました。

Startフィールドタイプは、時間選択ツールに設定

項目設定値
フィールドタイプ時間選択ツール
フィールドラベルStart
フィールド名add_starttime
表示形式カスタム: H:i
戻り値の形式カスタム: H:i

アーティスト写真フィールドタイプ画像に設定しました。ライブタイトルライブ見出しフィールドタイプは、テキストに設定しました。ライブコンテンツフィールドタイプは、リッチエディター(WYSIWYG)に設定しました。

ライブタイトルライブ見出しフィールドタイプは、テキストに設定。ライブコンテンツフィールドタイプは、リッチエディター(WYSIWYG)に設定。

コード

シングルページループ内に下記コードを入力します。

<div class="calendar_box">
	<div class="al_heading">
		<?php the_field('add_nichiji'); ?>
		<?php
			$daytime = get_field('add_nichiji', false, false); 
			$date = date('w', strtotime($daytime));

			$week = [
  				'日', //0
  				'月', //1
  				'火', //2
  				'水', //3
  				'木', //4
  				'金', //5
  				'土', //6
  			];

			echo '(' .$week[$date] . ')';
		?>
	</div>
	<div class="artist_wrapper">
		<?php
			$image = get_field('add_artistphoto');
			if( $image ):
    		// Image variables.
    		$url = $image['url'];
    		$title = $image['title'];
    		$alt = $image['alt'];
    		// Thumbnail size attributes.
    		$size = 'large';
    		$thumb = $image['sizes'][ $size ];
		?>
			<figure class="artist_photo">
        		<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
    		</figure>
		<?php endif; ?>
		<div class="artist_content">
			<h3><?php the_field('add_livetitle'); ?></h3>
			<h5><?php the_field('add_liveheading'); ?></h5>
			<p><?php the_field('add_livecontent'); ?></p>
		</div>
	</div>
	<div class="start_head">
		Open / Start
	</div>
	<div class="start_content">
		<?php
			$date = get_field('add_nichiji', false, false); 
			$date = new DateTime($date); 
			echo $date->format('n/j '); 
		?>
		<?php
			$daytime = get_field('add_nichiji', false, false); 
			$date = date('w', strtotime($daytime));

			$week = [
				'Sun', //0
				'Mon', //1
				'Tue', //2
				'Wed', //3
				'Thu', //4
				'Fri', //5
				'Sat', //6
			];

			echo '(' .$week[$date] . ')';
		?>
		 Open <?php the_field('add_opentime'); ?>  Start <?php the_field('add_starttime'); ?>	
	</div>
</div>												

CSSでスタイルを整えます。

.calendar_box{
	width:80%;
	margin:auto;
	max-width: 1500px;
}

.calendar_box .al_heading{
	margin: auto;
	margin-bottom: 1.5em;
	border-bottom: solid 2px #272727;
	font-size:1.3em;
	font-weight:500;
	letter-spacing:0.1em;
}

.artist_photo{
	width:100%;
	flex:1;
	padding-bottom:1em;
}

.artist_photo img{
	width:100%;
	height:auto;
}

.artist_content{
	flex:1;
}

.calendar_box h3{
	color: #D00003;
	font-weight: 500;
}

.calendar_box h5{
	color: #D00003;
	font-weight: 500;
	padding-top: 1em;
}

.calendar_box p{
	padding-top:1em;
}

.calendar_box .start_head{
	padding: 0.5em 1em;
	background: #ddd;
	width:100%;
	font-weight: 400;
	margin:2em 0 1em;
}

.start_content{
	font-weight:400;
}

@media screen and (min-width: 1250px) {
	.artist_wrapper{
		display: flex;
    	gap: 2em;  
	}	
}

設置

編集画面に、ACFで設定したスケジュールフィールドが作成されます。日付のテキストボックスをクリックするとカレンダーが表示されるので、2024年6月15日を選択します。Openのテキストボックスをクリックすると時間のセレクターが表示されるので、19:00に設定します。同じように、Start20:00に設定します。

日付2024年6月15日に設定

Open19:00に設定

Start20:00に設定

アーティスト写真画像フィールドをクリックし、メディアライブラリから画像を選択します。ライブタイトルライブ見出しテキストフィールドにタイトル、見出しを入力します。ライブコンテンツリッチエディターに本文を入力します。

これで完成です。

アーティスト写真画像フィールドをクリックし、画像を選択。

ライブタイトルライブ見出しテキストフィールドにタイトル、見出しを入力。ライブコンテンツリッチエディターに本文を入力。

以上で今回の説明は終了です。カレンダーやセレクターから日時が入力できるので便利ですね。日付や時間、曜日は間違えてはいけない場所ですが、この方法では、連携することが出来ます。

RECOMMEND

CONTACT

Webサイト作成は、是非
CXG DESIGNへご検討ください。