6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

BitStarAdvent Calendar 2023

Day 14

【WordPress】ACFのDate Time Pickerを使って期間限定コンテンツを出す

Last updated at Posted at 2023-12-13

期間限定でバナー画像を出すようなお仕事があったので作業メモ

やること

ACF(Advanced Custom Fields)のDate Time Pickerを使って、WordPressの管理画面から開始日時と終了日時を設定し、その期間だけコンテンツを表示するようなものを作ります。
output2.gif

ACFで新規フィールドを作成して以下のように設定

img1.jpg

フィールドラベルを開始日時
フィールド名をstart_date_time
としました。

フィールドタイプはDate Time Picker
カレンダー状のUIから日付を選択し、時間も設定することができるようになります。

表示フォーマットは管理画面側のUIに表示される日時のフォーマットです。
初期設定(d/m/Y g:i a)は少しわかりにくいため、ここではカスタム(Y年n月j日D H:i:s)にしました。

同様に終了日時も
フィールドラベルを終了日時
フィールド名をend_date_time
で登録していきます。

ラッパーの属性:widthを50%にすることで、開始日時と終了日時の入力フォームを横並びにすることができます。

期間を設定する

作ったフィールドグループを設置したページの設定画面で日時をそれぞれ指定します。
output2.gif
フォームに入力された日時のフォーマットがACF側で設定したカスタムフォーマット(Y年n月j日D H:i:s)になっているのが確認できます。

コンテンツの出力

出力するページのPHPファイルに下記のようにコードを書きます。

PHP
  <?php
    //現在の日時を取得
    $current_date_time = esc_html(current_time('Y-m-d H:i:s'));
    //ACFのデータを取得
    $start_date_time = esc_html(get_field('start_date_time'));
    $end_date_time = esc_html(get_field('end_date_time'));

    //$start_date_timeと$end_date_timeが存在する場合、かつ現在の日時がその範囲内にある場合
    if ($start_date_time && $end_date_time && $start_date_time <= $current_date_time && $end_date_time >= $current_date_time):
  ?>

    <!-- 期間限定で出したいコンテンツ -->

  <?php endif; ?>

※上記のコードではエラーの場合何も起きないので必要に応じてエラーハンドリングを入れてください。
ポイントはcurrent_time()のフォーマットがACF側の返り値のフォーマットと同じになるようにすること。
スクリーンショット 2023-11-29 16.32.17.png

ここが違うとデータの比較ができず、正しく動作しません。
またcurrent_time()関数はWordPressの設定に基づいて時刻を取得するため、うまくいかない場合はタイムゾーンの設定が正しく行われているかも要確認です。


実際は表示するコンテンツも管理画面から登録できるように作りました。
ちなみにトップページに表示したい場合はACFの有料版を使うか、設定用の非公開固定ページを作る、WordPressの設定で特定の固定ページをトップページ化して使うなどしてACFのフィールドグループを設置することができます。

6
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?