BLOG
25年新卒 WEBエンジニア インターンシップ 受付中

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

更新日:2019/12/27


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

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

基本の使い方

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

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

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

▼SCFの設定画面

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

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

▼SCFの設定画面

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

▼投稿画面上の表示

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

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

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

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

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

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

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

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

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

▼SCFの設定画面

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

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

▼投稿画面上の表示

●出力結果
入力した日付: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オブジェクトを用いて表示します。

●出力結果
現在の時刻: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のDateTimeオブジェクトによりとても簡単にできました。
ぜひ試してみてはいかがでしょうか。

FOLLOW US