![](https://cxg-design.jp/wp-content/uploads/2024/05/acfschedule_thumb.png)
ACFの日付選択ツール、時間選択ツールで、曜日付きのスケジュールを作成
ACFには、カレンダーから日付を選択できる、日付選択ツールとセレクターから時間を選択できる時間選択ツールがあります。今回はこれらを使用して、曜日付きのスケジュールを作成します。
今回のDEMOはライブスケジュールのシングルページです。
日時とOpen / Start時間をそれぞれ、ACFの日付選択ツール、時間選択ツールで表示しています。
ACF設定
日付のフィールドは、日付選択ツールに設定します。編集画面に表示するフィールドラベルは日付、PHPに記入するフィールド名はadd_nichijiに設定しました。編集画面に表示する表示形式、サイトに表示する戻り値の形式、共にカスタムでY/n/jに設定しました。
![](https://cxg-design.jp/wp-content/uploads/2024/05/491b88bef35d1b39bc261cd1fea115c6.png)
日付のフィールドは、日付選択ツールに設定
項目 | 設定値 |
---|---|
フィールドタイプ | 日付選択ツール |
フィールドラベル | 日付 |
フィールド名 | add_nichiji |
表示形式 | カスタム : Y/n/j |
戻り値の形式 | カスタム : Y/n/j |
Openのフィールドタイプは、時間選択ツールに設定します。編集画面に表示するフィールドラベルはOpen、PHPに記入するフィールド名はadd_opentimeに設定しました。編集画面に表示する表示形式、サイトに表示する戻り値の形式、共にカスタムでH:iに設定しました。
![](https://cxg-design.jp/wp-content/uploads/2024/05/6c4db85a25226f036e38fdff78f0baa5.png)
Openのフィールドタイプは、時間選択ツールに設定
項目 | 設定値 |
---|---|
フィールドタイプ | 時間選択ツール |
フィールドラベル | Open |
フィールド名 | add_opentime |
表示形式 | カスタム: H:i |
戻り値の形式 | カスタム: H:i |
Startのフィールドタイプも、時間選択ツールに設定します。編集画面に表示するフィールドラベルはStart、PHPに記入フィールド名はadd_starttimeに設定しました。編集画面に表示する表示形式、サイトに表示する戻り値の形式、共にカスタムでH:iに設定しました。
![](https://cxg-design.jp/wp-content/uploads/2024/05/6e39c5fc1ecea3a06768f626fb4ebef0.png)
Startのフィールドタイプは、時間選択ツールに設定
項目 | 設定値 |
---|---|
フィールドタイプ | 時間選択ツール |
フィールドラベル | Start |
フィールド名 | add_starttime |
表示形式 | カスタム: H:i |
戻り値の形式 | カスタム: H:i |
アーティスト写真のフィールドタイプは画像に設定しました。ライブタイトル、ライブ見出しのフィールドタイプは、テキストに設定しました。ライブコンテンツのフィールドタイプは、リッチエディター(WYSIWYG)に設定しました。
![](https://cxg-design.jp/wp-content/uploads/2024/05/24e68ef6798b50368c5e37c9aa56c8c9.png)
ライブタイトル、ライブ見出しのフィールドタイプは、テキストに設定。ライブコンテンツのフィールドタイプは、リッチエディター(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に設定します。同じように、Startを20:00に設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/05/c401d2d538c85ec91cfc0fbdee3fcb50.png)
日付を2024年6月15日に設定
![](https://cxg-design.jp/wp-content/uploads/2024/05/ed20deade7bc97d80401e7c7f53f0249.png)
Openを19:00に設定
![](https://cxg-design.jp/wp-content/uploads/2024/05/ed8ba33d5c78732f5d73a3f261b75610.png)
Startを20:00に設定
アーティスト写真の画像フィールドをクリックし、メディアライブラリから画像を選択します。ライブタイトル、ライブ見出しのテキストフィールドにタイトル、見出しを入力します。ライブコンテンツのリッチエディターに本文を入力します。
これで完成です。
![](https://cxg-design.jp/wp-content/uploads/2024/05/bbee634eb1949757f2f372d58450c5b6.png)
アーティスト写真の画像フィールドをクリックし、画像を選択。
![](https://cxg-design.jp/wp-content/uploads/2024/05/84d6f98c3e710ce8ce8f43c98663afcd.png)
ライブタイトル、ライブ見出しのテキストフィールドにタイトル、見出しを入力。ライブコンテンツのリッチエディターに本文を入力。
以上で今回の説明は終了です。カレンダーやセレクターから日時が入力できるので便利ですね。日付や時間、曜日は間違えてはいけない場所ですが、この方法では、連携することが出来ます。