BLOG ブログ

ホームページ制作
BLOG
【WordPress】Smart Custom Fields の日付ピッカーの使用方法

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

更新日：2019/12/27

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

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

基本の使い方

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

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;?>

<?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;?>

まとめ

今回は、時刻付き日付ピッカーの使い方についてまとめてみました。
今回紹介した例以外にもいろいろと使えそうですね！

時刻の比較なども、phpのDateTimeオブジェクトによりとても簡単にできました。
ぜひ試してみてはいかがでしょうか。

PHP WordPress

一覧へ戻る

BLOG ブログ

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

基本の使い方

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

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

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

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

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

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

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

現在時刻を表示

フィールドの設定

時間の範囲を設定

判定して出力

まとめ

関連記事

先輩社員の声 VOICES

CONTACT お問い合わせ

BLOG ブログ

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

基本の使い方

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

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

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

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

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

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

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

現在時刻を表示

フィールドの設定

時間の範囲を設定

判定して出力

まとめ

FOLLOW US 最新の情報をお届けします

関連記事

先輩社員の声 VOICES

CONTACT お問い合わせ