「MW WP Form」で年月日のセレクト項目を動的に生成する方法

Posted on by

WordPressサイトのフォーム作成プラグインとして人気のある「MW WP Form」には、
さまざまなカスタマイズ機能があります。
今回は、その中でも年月日のセレクト項目を動的に出力する方法について解説します。
この方法を使うことで、ユーザーがフォームを使いやすくし、入力ミスを減らすことができます。

MW WP Formの基本設定

まずは、MW WP Formの基本的な設定について確認します。
MW WP Formは、WordPressの管理画面からプラグインをインストールし、
フォームを作成することができます。

プラグインのインストールと有効化

  1. WordPressの管理画面にログインします。
  2. 「プラグイン」 > 「新規追加」をクリックします。
  3. 「MW WP Form」で検索し、プラグインをインストールします。
  4. インストールが完了したら、「有効化」をクリックしてプラグインを有効にします。

フォームの作成

  1. 「MW WP Form」メニューから「新規追加」をクリックします。
  2. フォームのタイトルを入力し、必要なフィールドを追加します。
  3. フォームの設定を保存します。

以上で基本的なフォームの作成は完了です。次に、年月日のセレクト項目を動的に出力する方法について具体的に見ていきましょう。

年月日のセレクト項目を動的に出力する方法

MW WP Formでは、フォームフィールドに動的な値を設定するために
「MW WP Form Field」というショートコードを使用します。
以下に、具体的な方法を示します。

年のセレクト項目を動的に出力

まず、年のセレクト項目を動的に出力する方法を紹介します。
現在の年から過去100年分の年をセレクトボックスに表示する例です。

function dynamic_year_options() {
    $current_year = date('Y');
    $years = range($current_year, $current_year - 100);

    $options = '';
    foreach ($years as $year) {
        $options .= "<option value='{$year}'>{$year}</option>";
    }

    return $options;
}
add_shortcode('dynamic_year_options', 'dynamic_year_options');

上記のコードをfunctions.phpファイルに追加します。
これにより、ショートコード[dynamic_year_options]を
使用して年のセレクトボックスを動的に生成できます。

月のセレクト項目を動的に出力

次に、月のセレクト項目を動的に出力する方法です。
月は1から12まで固定なので、以下のコードでセレクトボックスを生成します。

function dynamic_month_options() {
    $months = range(1, 12);

    $options = '';
    foreach ($months as $month) {
        $options .= "<option value='{$month}'>{$month}</option>";
    }

    return $options;
}
add_shortcode('dynamic_month_options', 'dynamic_month_options');

このコードもfunctions.phpファイルに追加します。
ショートコード[dynamic_month_options]を使用して月のセレクトボックスを動的に生成できます。

日のセレクト項目を動的に出力

日のセレクト項目は、月によって異なるため、少し複雑になります。
以下のコードでは、選択された月に応じて日のセレクトボックスを動的に生成します。

function dynamic_day_options() {
    $days = range(1, 31);

    $options = '';
    foreach ($days as $day) {
        $options .= "<option value='{$day}'>{$day}</option>";
    }

    return $options;
}
add_shortcode('dynamic_day_options', 'dynamic_day_options');

このコードもfunctions.phpファイルに追加します。
ショートコード[dynamic_day_options]を使用して日のセレクトボックスを動的に生成できます。

フォームに動的な年月日セレクト項目を追加

以上で準備が整いました。次に、フォームにこれらのセレクト項目を追加します。
以下は、MW WP Formのフォームに動的な年月日セレクト項目を追加する例です。

[select name="year" children="[dynamic_year_options]"]
[select name="month" children="[dynamic_month_options]"]
[select name="day" children="[dynamic_day_options]"]

これにより、フォームに動的な年月日セレクト項目が表示されます。

カスタマイズの応用

ここまでで基本的な動的セレクトボックスの設定ができましたが、
さらなるカスタマイズも可能です。
たとえば、選択された年と月に基づいて日のセレクトボックスの内容を動的に変更することもできます。

JavaScriptを使った日の動的変更

以下のコードは、選択された年と月に基づいて日のセレクトボックスの内容を変更する例です。

<select name="year" id="year" onchange="updateDays()">
    [dynamic_year_options]
</select>
<select name="month" id="month" onchange="updateDays()">
    [dynamic_month_options]
</select>
<select name="day" id="day">
    [dynamic_day_options]
</select>

<script>
function updateDays() {
    var year = document.getElementById('year').value;
    var month = document.getElementById('month').value;
    var daySelect = document.getElementById('day');

    var daysInMonth = new Date(year, month, 0).getDate();
    daySelect.innerHTML = '';

    for (var i = 1; i <= daysInMonth; i++) {
        var option = document.createElement('option');
        option.value = i;
        option.text = i;
        daySelect.appendChild(option);
    }
}
</script>

このコードを使用することで、年と月の選択に応じて日のセレクトボックスが自動的に更新されます。

まとめ

MW WP Formを使って年月日のセレクト項目を動的に出力する方法について解説しました。
この方法を利用することで、ユーザーにとって使いやすいフォームを作成することができます。
さらに、JavaScriptを組み合わせることで、より高度なカスタマイズも可能です。
ぜひ、この記事を参考にして、自分のサイトに合ったフォームを作成してみてください。