ブログBLOG

【WordPress】Smart Custom Fields の日付ピッカーの使用方法

更新日：2024/08/15

WordPressでカスタムフィールドを追加するためのプラグイン「Smart Custom Fields」。
その中でも日付ピッカーの使い方についてまとめました！
基本の使い方と、応用編として登録した日付の期間中・期間外を判定して表示内容を出し分ける方法をご紹介します。

1 基本の使い方
2 フォーマットのカスタマイズ
3 「現在の時刻」と「入力された時刻」の比較判定
4 まとめ

基本の使い方

まずは基本的なものとして時刻付きの日付ピッカーを作ってみましょう。

SCFで日付ピッカーのフィールドを作成

日付ピッカーのフィールドを作成します。
「タイプ」を「時刻付き日付ピッカー」に設定します。

▼SCFの設定画面

「ラベル」と「名前」に任意の名前を設定します。
フォーマットや最大日付等のカスタマイズもできますが、一旦そのままで設定します。

●フィールド定義
ラベル：「日付」 ← 投稿画面の入力欄に表示される項目名
名前：「date」 ← プログラムで扱う名前（英字で指定）

▼SCFの設定画面

追加したフィールドを任意の投稿ページや固定ページに表示させましょう。
投稿画面のほうを確認してみると、以下のように表示されているはずです。
こちらから日付時刻を入力できます。

▼投稿画面上の表示

●投稿画面での入力値
日付：2019-12-02 12:00

設定した日付を取得・表示

さきほど設定した日付をページ上で取得・表示します。
以下のコードで出力できます。

<?php
  $date = SCF::get('date');//取得
?>

<p>
入力した日付：<?php echo $date; //表示 ?>
</p>

<?php

$date = SCF::get('date');//取得

入力した日付：<?php echo $date; //表示 ?>

●出力結果
入力した日付：2019-12-02 12:00

フォーマットのカスタマイズ

日付時刻のフォーマットは、
フィールドの設定画面にてカスタマイズすることができます。

フォーマットを指定して出力

「日付のフォーマット」を以下のように設定してみます。

●フィールド定義
日付フォーマット：「Y年n月j日 H時i分」

▼SCFの設定画面

日付と時刻を設定します。

●投稿画面での入力値
日付：2019年12月2日 20時20分

▼投稿画面上の表示

<?php
  $date = SCF::get('date');//取得
?>

<p>
入力した日付：<?php echo $date; //表示 ?>
</p>

<?php

$date = SCF::get('date');//取得

入力した日付：<?php echo $date; //表示 ?>

●出力結果
入力した日付：2019年12月2日 20時20分

フォーマットに使用できる文字

SCFの時刻付き日付ピッカーでは、内部的に「flat picker」というライブラリを使用しているようです。
flat pickerでは様々なフォーマット文字が用意されています。
以下に、よく使うフォーマット文字をまとめました。

文字	説明	例
Y	年の完全な数値表現、4桁	1999または2003
y	年の2桁の表現	99または03
M	月の短いテキスト表現	1月から12月
m	先行ゼロ付きの月の数値表現	01から12
n	先行ゼロなしの月の数値表現	1から12
J	先行ゼロおよび序数の接尾辞のない月の日	1日、2日、31日
j	先行ゼロなしの月の日	1から31
d	月の日、先行ゼロ付きの2桁	01から31
H	時間、先行ゼロ付きの2桁(24)	1から23
G	時間、先行ゼロ付きの2桁(12)	1から12
i	分、先行ゼロ付きの2桁	00から59
S	秒、先行ゼロ付きの2桁	00から59
s	秒	0、1から59

※参考：https://flatpickr.js.org/formatting/#date-formatting-tokens：フォーマット一覧

「現在の時刻」と「入力された時刻」の比較判定

時刻付き日付ピッカーを用いて、現在時刻との比較・判定をする例を紹介します。

実現したいもの：指定した期間により、アクセス時の画像を切り替える

指定した期間内の時間にアクセスすると、以下が表示されます。

指定した期間外の時間にアクセスすると、以下が表示されます。

現在時刻を表示

まずは現在時刻を表示してみます。
現在時刻の取得には、ワードプレスの「date_i18n()」関数を使用します。
取得した時刻を、phpのDateTimeオブジェクトを用いて表示します。

<?php
  $date_format = 'Y-m-d H:i';
  $date_now = new  DateTime(date_i18n($date_format));//アクセス時の時刻を取得
?>

<p>
  現在の時刻：<?php echo $date_now->format( $date_format) ; //表示 ?>
</p>

<?php

$date_format = 'Y-m-d H:i';

$date_now = new DateTime(date_i18n($date_format));//アクセス時の時刻を取得

現在の時刻：<?php echo $date_now->format( $date_format) ; //表示 ?>

●出力結果
現在の時刻：2019-12-02 11:49
※2019年12月2日 11時49分にアクセスした場合

date_i18nを使用する理由は、以下を参考
参考：https://qiita.com/yousan/items/a385f794a9bb433aecbb

フィールドの設定

時間を指定するためのフィールド「開始時刻」と「終了時刻」を用意します。
今回フォーマットは指定しません。

●フィールド定義
ラベル①：「開始時刻」
名前①：「date_start」
ラベル②：「終了時刻」
名前②：「date_end」

▼SCFの設定画面

時間の範囲を設定

管理画面より、以下の時間に設定します。

●投稿画面での入力値
開始時刻：2019年12月1日 10:00
終了時刻：2019年12月4日 18:00

▼投稿画面上の表示

判定して出力

以下のロジックにて判定して出力します。
日付時刻の比較には、phpのDateTimeオブジェクトを用います。

<?php
//期間判定の出力フラグ設定
$date_flg = false;

//カスタムフィールドの日付を取得
$date_start = SCF::get('date_start');
$date_end = SCF::get('date_end');
$date_format = 'Y-m-d H:i';

//カスタムフィールドの日付がどちらも入っている場合
if($date_start && $date_end){
  //日付オブジェクト
  $DateTime_start = new DateTime($date_start);
  $DateTime_end = new DateTime($date_end);
  $DateTime_now = new  DateTime(date_i18n($date_format));//現在時刻

  //現在の日付がstartとendの範囲内の場合
  if($DateTime_start <= $DateTime_now  && $DateTime_now < $DateTime_end){
    $date_flg = true;
  }
}
?>

//出力部分
<?php if($date_flg):?>
  <img src="<?php echo get_template_directory_uri(); ?>/img/event.png" alt="イベント開催中">
<?php else: ?>
  <img src="<?php echo get_template_directory_uri(); ?>/img/end.png" alt="イベントは終了しました">
<?php endif;?>