WordPress

Advanced Custom Fields カスタムフィールドを使った表示予約機能を実装する方法

Advanced Custom Fields カスタムフィールドを使った表示予約機能を実装する方法

WordPress のカスタムフィールドプラグイン Advanced Custom Fields(以下ACF)を使った表示予約機能を実装する方法を紹介します。
例えば、投稿にカスタムフィールドで登録した内容の一部に時間設定をして表示を制御したい場合に便利な方法です。

  1. 準備するもの
  2. カスタムフィールドの設定
  3. フィールドの入力
  4. フィールドの表示
    1. リピーターフィールドを使った場合
  5. プレビューの方法

準備するもの

まずは次のプラグインとアドオンをインストールします。

・WordPress プラグイン Advanced Custom Fields
・Advanced Custom Fields のアドオン Date & Time Picker

日時の登録では ACF の Date Picker を使用してもよいのですが、今回は時間も取得できるようになる ACF のアドオン Date & Time Picker を使用します。
Date & Time Picker は、時間指定のUIがとても使いやすい便利なアドオンです。

カスタムフィールドの設定

カスタムフィールドの設定

用意するカスタムフィールドは「公開開始日」と「公開終了日」の二つ。
この二つは、フィールドラベルとフィールド名以外は同じ内容です。
細かい設定内容は次の通りです。

フィールドラベル
公開終了日 ※任意の名前
フィールド名
公開終了日 ※任意の名前
フィールドタイプ
Date & Time Picker
フィールド記入のヒント
任意
必須か?
任意
Date and Time Picker?
日付と時刻のピッカー
Date and Time Picker
Date Format
日付の形式
yymmdd
Time Format
時刻の形式
HHmm
Display Week Number?
週番号の表示
No
Time Picker style?
時刻ピッカーのスタイル
任意
Save as timestamp?
タイムスタンプとして保存するか?
No
Get field as timestamp?
タイムスタンプのようにフィールドを取得するか?
Yes
条件判定
いいえ

フィールドの入力

フィールドの入力

作成したフィールドに任意の日時を入力してください。

フィールドの表示

表示の仕組みは現在時刻を基準に「公開開始日」と「公開終了日」を比較するシンプルなものです。


<?php
date_default_timezone_set('Asia/Tokyo'); $date_now = date('YmdHi'); // 予約機能用の日本時間を取得
if(get_field('公開開始日')) {
$date_start = get_field('公開開始日');
} else { // フィールドに入力がない場合
$date_start = 0;
}
if(get_field('公開終了日')) {
$date_end = get_field('公開終了日');
} else { // フィールドに入力がない場合
$date_end = 999999999999;
}
$date_start = preg_replace('/(\s| )/','',$date_start); //正規表現で文字列を置換
$date_end = preg_replace('/(\s| )/','',$date_end); //正規表現で文字列を置換
?>
<?php if( $date_now >= $date_start && $date_now < $date_end ): ?>
<p>公開中</p>
<?php endif; ?>

フィールドに入力がない場合は仮の数字が入れることで常に表示状態になります。

リピーターフィールドを使った場合

ACF の有料アドオンである Repeater Field(繰り返しフィールド) を使った場合の表示方法です。
次のコードは、リピーターフィールド名が reservation の場合の表示方法です。


<?php date_default_timezone_set('Asia/Tokyo'); $date_now = date('YmdHi'); ?>
<?php if(have_rows('reservation')): ?>
<?php while(have_rows('reservation')): the_row(); ?>
<?php if(get_sub_field('公開開始日')) { $date_start = get_sub_field('公開開始日'); } else { $date_start = 0; } if(get_sub_field('公開終了日')) { $date_end = get_sub_field('公開終了日'); } else { $date_end = 999999999999; } $date_start = preg_replace('/(\s| )/','',$date_start); $date_end = preg_replace('/(\s| )/','',$date_end); ?>
<?php if( $date_now >= $date_start && $date_now < $date_end ): ?>
<p>公開中</p>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

プレビューの方法

今回紹介した方法はプレビュー時に内容を確認する方法がありません。事前に表示内容を確認する場合は表示のif文に is_user_logged_in() を追加することで、ログインした時には予約日時と関係なく表示するようにできます。
次のコードは対象のif文に論理演算子 ||(…または…) を追加、続いて is_user_logged_in() を追加します。


<?php if( $date_now >= $date_start && $date_now < $date_end || is_user_logged_in() ): // 現在時刻が開始と終了の間なら表示、ログイン時にも表示 ?>

まとめ

WordPress のカスタムフィールドプラグイン Advanced Custom Fields を使った、表示予約機能を実装する方法を紹介しました。

合わせて読みたい関連記事