4.製品情報の入力
カスタムフィールドの設定と表示ができたので、製品情報ページから製品情報を入力します。
作成したエントリーをクリックして詳細ページに移動し、[変更]をクリックします。
「エントリー変更」になります。作成したカスタムフィールドは図のように表示されます。
[価格]と[発売日]は数字を入力します。[発売日]は、記入例[2014-01-01]で記入方法を例示しています。さらに、[発売日]欄をクリックするとカレンダーが表示され、入力しやすくしています。入力内容を厳密にする場合は、フォームオプションを使用します。
サイズの項目では、プルダウンでSサイズ、Mサイズ、Lサイズを選べるようになっています。テキスト入力より自由度が低い反面、データを正確に保てます。
[価格]は[1400]、[発売日]は[2014-05-14]を入力し、サイズは[Mサイズ]を選び、[保存]をクリックします。
サイトを表示すると、「家庭用製品I」のところに、価格、発売日、サイズが反映されています。他の製品も、同様の方法で製品情報を入力できます。
今回は2種類のカスタムフィールドしか使用していませんが、チェックボックス、ラジオボタン、テキストエリアもカスタムフィールドに使用でき、画像やファイルなどのアップロードもできます。
日付入力にカレンダーを表示
[発売日]の入力欄をクリックするとカレンダーが表示されます。下記のように、「js-datepicker」というクラス名をつけるだけで実装できます。
■カレンダー表示
<input type="text" name="releaseDate" value="{releaseDate}" class="js-datepicker">