WordPress:「MW WP Form」でセレクトボックスを使った年月日の選択値を動的に出力する方法

WordPress:「MW WP Form」でセレクトボックスを使った年月日の選択値を動的に出力する方法

確認・完了画面付きフォームを実装できる「MW WP Form」で、生年月日などの項目で年月日を選択するセレクトボックスを設置する際の選択値を動的に出力させる方法です。
この方法を用いることで大量の選択値も楽に設定できたり現在から過去何年分を出力といったこともできます。

WordPress:「MW WP Form」でセレクトボックスを使った年月日の選択値を動的に出力する方法 目次

  1. 年月日を動的に出力する
  2. 動的出力の値に初期値を設定する
  3. 動的出力する際の他パターン

1. 年月日を動的に出力する

まず年・月・日をそれぞれ選択できるセレクトボックスを「MW WP Form」の設定画面で用意します。
その際「選択肢」の項目は空にして、それぞれ「name」のみを任意で記述して設置しておきます。
ここでは年がbirthday_year、月がbirthday_month、日がbirthday_dayと記述し、それぞれ配置すれば下記のような状態のコードが設定画面に表示されると思います。

[mwform_select name="birthday_year"]

[mwform_select name="birthday_month"]

[mwform_select name="birthday_day"]

それぞれセレクトボックスを作成したら、通常は「選択肢」部分で指定していく内容をfunctions.phpで設定していきます。
設定にはプラグインで用意されているmwform_choices_mw-wp-form-xxxというフックを利用して下記のように記述し、この場合は年に1950〜現在の年、月に1〜12、日に1〜31がそれぞれ選択値として出力されるようになります。

※フック名にあるxxxの部分は、自身が作成したフォームのkeyに併せて変更してください。

functions.php

add_filter( 'mwform_choices_mw-wp-form-xxx', 'mwform_add_birthday_options', 10, 2 );
function mwform_add_birthday_options( $children, $atts ) {
  // 年設定
  if ( $atts['name'] === 'birthday_year' ) {
    for ( $i = 1950; $i <= date( 'Y' ); $i++ ) {
      $children[$i] = $i;
    }
  }

  // 月設定
  if ( $atts['name'] === 'birthday_month' ) {
    for ( $i = 1; $i <= 12; $i++ ) {
      $children[$i] = $i;
    }
  }

  // 日設定
  if ( $atts['name'] === 'birthday_day' ) {
    for ( $i = 1; $i <= 31; $i++ ) {
      $children[$i] = $i;
    }
  }

  return $children;
}

上記記述後、フロントで表示確認すればそれぞれで指定した値を選択できるセレクトボックスが設置されているのを確認できます。
特に年の項目はプラグインの設定画面で実装しようと思ったら、このサンプルの場合は70年分選択肢を記述して出力コードも下記のような状態になると思いますが...

[mwform_select name="birthday_year" children="1950,1951,1952,1953,1954,1955,1956,1957,1958,1959,1960,1961,1962,1963,1964,1965,1966,1967,1968,1969,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019"]

フックで動的に出力させることで選択肢をすべて記述する必要もなく、さらに例えば1970〜現在の年といったように選択値を変更したい場合も、上記サンプルコードで1950となっている箇所を1970にするだけと、何かと楽に設定が可能になります。

目次へ

2. 動的出力の値に初期値を設定する

上で紹介した方法で選択値が大量にあった場合も楽に設定することができましたが、値を動的に出力して且つ初期値も設定したい場合はmwform_value_mw-wp-form-xxxというフックを利用します。
実装には同じくfunctions.phpへ記述し、下記は年のセレクトボックス(name="birthday_year")の初期値が「2000」になるよう設定した場合になります。

※フック名にあるxxxの部分は、自身が作成したフォームのkeyに併せて変更してください。

functions.php

add_filter( 'mwform_value_mw-wp-form-xxx', 'mwform_birthday_year_value_setting', 10, 2 );
function mwform_birthday_year_value_setting( $value, $name ) {
  if ( $name === 'birthday_year' ) {
    $value = 2000;
  }
  return $value;
}

目次へ

3. 動的出力する際の他パターン

備忘録も兼ねて、年のセレクトボックスの選択値を動的出力する際の他パターンをいくつか紹介します。

※いずれも適用するセレクトボックスのname属性はbirthday_yearとなり、実装はfunctions.phpに記述、フック名にあるxxxの部分は、自身が作成したフォームのkeyに併せて変更してください。

現在から過去○年分を出力

現在から指定した過去何年分かを出力させる方法です。
このサンプルコードの場合は「現在から20年前までを出力」というものになり、問題なく実装できればこの記事公開時点では1999から2019までの選択値が出力されます。
この方法で実装しておくことで単にフォーム設置時の選択値入力の手間を省けるだけでなく、例えば常にこのルールで表示させなければいけない場合に、年に1回とはいえ新しい年がくる度に選択値を変更する作業をしなければならないのも必要なくなります。
過去何年分かの設定を変更する場合は、$start_yearで指定している20を任意の数値に変更してください。

functions.php

add_filter( 'mwform_choices_mw-wp-form-xxx', 'mwform_add_birthday_options', 10, 2 );
function mwform_add_birthday_options( $children, $atts ) {
  if ( $atts['name'] === 'birthday_year' ) {
    $current_year = date( 'Y' );
    $start_year = $current_year - 20;
    for ( $i = $start_year; $i <= $current_year; $i++ ) {
      $children[$i] = $i;
    }
  }
}

特定の期間を出力

上で紹介した表示されるタイミングによって出力内容を変えるものとは違い、完全に固定で特定の期間を動的出力する場合は単純にforの条件部分でその数値を記述します。
このサンプルコードの場合は「2000から2010を出力」というものです。

functions.php

add_filter( 'mwform_choices_mw-wp-form-xxx', 'mwform_add_birthday_options', 10, 2 );
function mwform_add_birthday_options( $children, $atts ) {
  if ( $atts['name'] === 'birthday_year' ) {
    for ( $i = 2000; $i <= 2010; $i++ ) {
      $children[$i] = $i;
    }
  }
}

初期表示用に空の値を出力

セレクトボックスの初期表示に利用するものとして、値が空になっている選択値を出力する方法です。
このサンプルコードの場合は、まずセレクトボックスの先頭に「年を選択してください」という文言で値が空に設定されているものを出力し、その後2000年から現在の年までの選択値を動的出力したものです。

functions.php

add_filter( 'mwform_choices_mw-wp-form-xxx', 'mwform_add_birthday_options', 10, 2 );
function mwform_add_birthday_options( $children, $atts ) {
  if ( $atts['name'] === 'birthday_year' ) {
    $children[''] = '年を選択してください';
    for ( $i = 2000; $i <= date( 'Y' ); $i++ ) {
      $children[$i] = $i;
    }
  }
}

送信値と表示値に異なる値を出力

送信値と表示値とでそれぞれ異なる値(設定画面では:で分割する形で記述)を動的出力する方法で、まずプラグインの設定画面で下記のように対象のセレクトボックスにpost_raw="true"を記述します。

[mwform_select name="birthday_year" post_raw="true"]

functions.phpへは下記のように記述し、この場合はフロントだと数字のみの表示になりますが、送信されるときは2000年や2019年のように「数字+年」の値になります。

functions.php

add_filter( 'mwform_choices_mw-wp-form-xxx', 'mwform_add_birthday_options', 10, 2 );
function mwform_add_birthday_options( $children, $atts ) {
  if ( $atts['name'] === 'birthday_year' ) {
    for ( $i = 2000; $i <= date( 'Y' ); $i++ ) {
      $children[$i . '年'] = $i;
    }
  }
}

目次へ


今回は生年月日などの項目で利用される年月日出力を例にしましたが、紹介したフックを使うことで投稿に関する内容を選択値として設定なども簡単にできるので、「MW WP Form」をよく利用する方はこのフックを覚えておくといろいろ便利だと思います。
今回利用したフックについての詳細は以下で確認できます。

Close the search window,
please press close button or esc key.