Contact Form 7で、ユーザーの年齢を選択させるフォームを作成する際、セレクトボックスで特定の範囲の年数（例えば、18歳から100歳）を生成したい場合があります。このブログでは、年オプションを自動的に生成する方法を説明します。
1. PHPで年オプションを生成するショートコードの作成
まず、PHPで年オプションを動的に生成するショートコードを作成します。このショートコードは、18歳から100歳の年齢に基づく生まれ年の範囲を生成し、HTMLの<option>タグとして出力します。
functions.phpに以下のコードを追加：
function cf7_generate_year_options_shortcode() {
$current_year = date('Y'); // 現在の年
$start_year = $current_year - 18; // 18歳の人の生まれた年
$end_year = $current_year - 100; // 100歳の人の生まれた年
$years = range($start_year, $end_year);
$options = '';
foreach ($years as $year) {
$options .= "<option value='{$year}'>{$year}</option>";
}
return $options;
}
add_shortcode('cf7_generate_year_options', 'cf7_generate_year_options_shortcode');2. main.jsのハンドル名を指定
次に、スクリプトハンドル（この場合は'main-js'）を有効にするため、以下のようにenqueue_main_jsをfunctions.phpに追加します。
function enqueue_main_js() {
//パスを指定してmain.jsを読み込みハンドル名を指定
wp_enqueue_script('main-js', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_main_js');3. PHPでJavaScriptに年オプションを渡す
PHPから年オプションのデータをJavaScriptに渡す仕組みを作ります。functions.php内で、wp_localize_scriptを使ってPHPのショートコードから年オプションを生成し、それをmain.jsに渡す設定を行います。
functions.phpに以下のコードを追加します：
function cf7_enqueue_generate_year_script() {
// main.jsファイルに年オプションを渡す
wp_localize_script('main-js', 'cf7_year_options', array(
'options' => do_shortcode('[cf7_generate_year_options]')
));
}
add_action('wp_enqueue_scripts', 'cf7_enqueue_generate_year_script');wp_localize_scriptの第1引数'main-js'は、main.jsを読み込む際に使われているハンドル名です。テーマやプラグインで使われているハンドル名が異なる場合、適切なものに変更してください。
4. main.jsに年オプションを追加するJavaScriptコード
main.jsに年オプションを追加するコードを記述します。これにより、PHPから渡された年オプションがselectフィールドに動的に追加されます。
main.jsに以下のコードを追加します：
jQuery(document).ready(function($) {
// PHPから渡された年オプションをselect要素に追加
if (typeof cf7_year_options !== 'undefined') {
$('#generate-year-options').append(cf7_year_options.options);
}
});5. Contact Form 7のフォーム設定
Contact Form 7のフォーム編集画面でselectフィールドを追加します。フォームのselect要素に動的に年オプションを挿入するためのHTMLを設定します。
フォームのHTMLコード：
<label for="year">生まれた年を選択してください</label>
<select name="year" id="generate-year-options">
<option value="">-- 選択してください --</option>
</select>6. フロントエンドで確認
コードが正しく設定されていれば、フォームのselectフィールドに、18歳から100歳までの年オプションが動的に表示されます。最後に、フロントエンドでフォームを確認し、期待通りの動作をしていることを確認してください。
まとめ
以上で、年オプションを動的に生成するコードを追加する方法が完了です。functions.phpでPHPのショートコードの結果をJavaScriptに渡し、main.jsでそのデータを利用してselectフィールドに年オプションを追加する形で、Contact Form 7の年齢制限付きフォームを作成できます。この方法で、ユーザーが簡単に自分の生まれた年を選択できる便利なフォームを提供できます。
