【Contact Form 7】セレクトで動的に年月日を生成する方法
こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。
WordPressで簡単にお問い合わせフォームを実装することが出来る人気プラグインの「Contact Form 7」。
「Contact Form 7」でセレクトで年月日をそれぞれ選択する際、年の設定を動的に出来れば便利だなと思い、実装してみました。
この記事では「Contact Form 7」でセレクトで年月日をそれぞれ選択する際、年の設定を動的に設定するためのコードをご紹介したいと思います。
この記事の目次を表示
指定した年から今年までを選択出来るようにする
指定した年から今年までを選択出来るようにする方法をご紹介します。
完成コード
完成コードはこちら。
function my_wpcf7_form_tag_data_option( $values, $options, $args ) {
if( in_array( 'AutoYear', $options ) ) {
$values = range( 1900, date('Y') );
return $values;
}
if( in_array( 'AutoMonth', $options ) ) {
$values = range( 1, 12 );
return $values;
}
if( in_array( 'AutoDay', $options ) ) {
$values = range( 1, 31 );
return $values;
}
}
add_filter( 'wpcf7_form_tag_data_option', 'my_wpcf7_form_tag_data_option', 10, 3 );コード解説
「Contact Form 7」の年月日のname値をそれぞれ設定します。
このサンプルコードの場合は年が「AutoYear」、月が「AutoMonth」、日が「AutoDay」としています。
「Contact Form 7」専用のフィルターフックのwpcf7_form_tag_data_optionを使用します。
年の設定はこちら。
if( in_array( 'AutoYear', $options ) ) {
$values = range( 1900, date('Y') );
return $values;
}name値が「AutoYear」の場合、処理します。
range()関数は引数を2つ指定することでその引数1から引数2までの連番を生成する関数です。
$values = range( 1900, date('Y') );このようにすることで1900から今年までの数値を「1900,1901,1902…2024」のように選択肢を生成します。
生成した値をreturn $values;で返すことで自動でフィールドに選択肢をセットすることが出来ます。
月の設定はこちら。
if( in_array( 'AutoMonth', $options ) ) {
$values = range( 1, 12 );
return $values;
}name値が「AutoMonth」の場合、処理します。
月も同様にrange()関数を使います。月の場合は引数1に1、引数2に12を指定します。
このようにすることで1から12までの数値を「1,2,3…12」のように選択肢を生成します。
日の設定はこちら。
if( in_array( 'AutoDay', $options ) ) {
$values = range( 1, 31 );
return $values;
}name値が「AutoDay」の場合、処理します。
日も同様にrange()関数を使います。日の場合は引数1に1、引数2に31を指定します。
このようにすることで1から31までの数値を「1,2,3…31」のように選択肢を生成します。
年、月、日、どれも考え方は同じですね。
この完成コード有効化されているテーマのfunctions.phpに記述するだけで年、月、日を動的に生成することが出来ます。
今年と来年を選択出来るようにする
今年と来年を選択出来るようにする方法をご紹介します。
完成コード
完成コードはこちら。
function my_wpcf7_form_tag_data_option( $values, $options, $args ) {
if( in_array( 'AutoYear', $options ) ) {
$values = range( date('Y'), date('Y')+1 );
return $values;
}
if( in_array( 'AutoMonth', $options ) ) {
$values = range( 1, 12 );
return $values;
}
if( in_array( 'AutoDay', $options ) ) {
$values = range( 1, 31 );
return $values;
}
}
add_filter( 'wpcf7_form_tag_data_option', 'my_wpcf7_form_tag_data_option', 10, 3 );コード解説
考え方は先ほどの「指定した年から今年までを選択出来るようにする」と同じです。
異なるのは年のrange()関数に指定する引数1と引数2が変わることだけで、月と日は全く同じです。
「Contact Form 7」の年月日のname値をそれぞれ設定します。
このサンプルコードの場合は年が「AutoYear」、月が「AutoMonth」、日が「AutoDay」としています。
「Contact Form 7」専用のフィルターフックのwpcf7_form_tag_data_optionを使用します。
年の設定はこちら。
if( in_array( 'AutoYear', $options ) ) {
$values = range( date('Y'), date('Y')+1 );
return $values;
}name値が「AutoYear」の場合、処理します。
range()関数は引数を2つ指定することでその引数1から引数2までの連番を生成する関数です。
$values = range( date('Y'), date('Y')+1 );このようにすることで今年と来年（今年＋1）の選択肢を生成します。
生成した値をreturn $values;で返すことで自動でフィールドに選択肢をセットすることが出来ます。
月と日は「指定した年から今年までを選択出来るようにする」と全く同じコードなので省略します。
この完成コード有効化されているテーマのfunctions.phpに記述するだけで年、月、日を動的に生成することが出来ます。
年と月をもとにその月の日付を選択出来るようにする
次は少し応用です。月ごとにその月の最終日は異なりますね。
先ほどまでのコードだと2月でも4月でも31日が選択出来てしまうコードでしたが、続いてご紹介するコードは2月であれば選択した年に応じて28日または29日、4月であれば30日までしか選択肢が生成されないコードです。
完成コード
完成コードはこちら。
function my_wpcf7_form_tag_data_option( $values, $options, $args ) {
if( in_array( 'AutoYear', $options ) ) {
$values = range( 1900, date('Y') );
return $values;
}
if( in_array( 'AutoMonth', $options ) ) {
$values = range( 1, 12 );
return $values;
}
}
add_filter( 'wpcf7_form_tag_data_option', 'my_wpcf7_form_tag_data_option', 10, 3 );
// 「未定義の値がこの項目を通じて送信されました。」となる対策
remove_action( 'wpcf7_swv_create_schema', 'wpcf7_swv_add_select_enum_rules', 20, 2 );<script>
let $select_birth_year = $('select[name="birth-year"]');
let $select_birth_month = $('select[name="birth-month"]');
let $select_birth_day = $('select[name="birth-day"]');
function set_day(){
let birth_year = $select_birth_year.val();
let birth_month = $select_birth_month.val();
let birth_day_count = new Date(birth_year, birth_month, 0).getDate();
let birth_day_list;
for( i=1; i<=birth_day_count; i++ ) {
let selected = (i == birth_day) ? 'selected' : '';
birth_day_list += "<option value='" + i + "' " + selected + ">" + i + "</option>";
}
$select_birth_day.html(birth_day_list);
}
$(window).on('load',function(){
set_day();
});
$select_birth_year.on('change',function(){
set_day();
});
$select_birth_month.on('change',function(){
set_day();
});
</script>コード解説
選択した年と月をもとにその月の最終日までを選択出来るようにするためにはjQueryを使用します。
まずは年と月の選択肢の生成です。
function my_wpcf7_form_tag_data_option( $values, $options, $args ) {
if( in_array( 'AutoYear', $options ) ) {
$values = range( 1900, date('Y') );
return $values;
}
if( in_array( 'AutoMonth', $options ) ) {
$values = range( 1, 12 );
return $values;
}
}
add_filter( 'wpcf7_form_tag_data_option', 'my_wpcf7_form_tag_data_option', 10, 3 );年と月は先ほどまでと同様にwpcf7_form_tag_data_optionのフックを使用して選択肢を生成します。
ひとつだけ注意が必要なのがfunctions.phpには以下のコードも追加する必要があります。
// 「未定義の値がこの項目を通じて送信されました。」となる対策
remove_action( 'wpcf7_swv_create_schema', 'wpcf7_swv_add_select_enum_rules', 20, 2 );このコードがないとjQueryで動的に生成した選択肢を正しい選択肢として「Contact Form 7」が認識してくれません。
必ず忘れないように記述します。
続いてjQueryで選択した年と月をもとにその月の最終日を生成します。
let $select_birth_year = $('select[name="birth-year"]');
let $select_birth_month = $('select[name="birth-month"]');
let $select_birth_day = $('select[name="birth-day"]');それぞれのselectを変数に格納します。
function set_day(){ ... }set_day()関数を作成します。この中に選択した年と月をもとにその月の最終日までを生成するコードを記述します。
let birth_year = $select_birth_year.val();
let birth_month = $select_birth_month.val();選択された年と月をそれぞれ変数に格納します。
let birth_day_count = new Date(birth_year, birth_month, 0).getDate();new Date()関数を使い、このように取得した年と月を引数に指定することでその月の最終日を取得することが出来ます。
取得した最終日を変数に格納します。
for( i=1; i<=birth_day_count; i++ ) {
let selected = (i == birth_day) ? 'selected' : '';
birth_day_list += "<option value='" + i + "' " + selected + ">" + i + "</option>";
}取得した最終日の数だけfor文で繰り返し処理することで選択した年と月をもとにその月の最終日を選択肢として生成することが出来ます。
$select_birth_day.html(birth_day_list);生成したコードをhtml()メソッドで日付のセレクト欄にセットします。
$(window).on('load',function(){
set_day();
});
$select_birth_year.on('change',function(){
set_day();
});
$select_birth_month.on('change',function(){
set_day();
});作成した関数はページ読み込み時、年を選択した時、月を選択した時に動作するようにします。
以上で選択した年と月をもとにその月の最終日までを選択してとして生成することが出来ます。
まとめ
いかがでしたか？
今回ご紹介したコードを使うことで年が変わるたびに選択肢を変更する必要がなくなります。
また、存在しない日付を選択されるのを未然に防ぐことが出来るこのコード、是非実装してみて下さい。
