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