やってみましょう。
構想
「生年月日」の枠を作って、年月日を入力させる。
枠の準備
「Welcart Shop」→「カスタム・メンバーフィールド」タブでフィールドを作る。
「フィールドキー」は入力フォームのnameになる。
selectで年月日それぞれを作ってもいいんだけど、単純にめんどくさい。
月日は固定でいいけど年はどうするのって話になる。
「1900年から現在まで」がよくある形らしいけど、毎年編集するのはダルいよね。
なので、input:textである「テキスト」を選ぶ。
input:dateがあればいいんだけどね。
一番下の挿入位置はサイト上、管理画面上それぞれの入力フォームに反映される。
これで
<?php uesces_addressform( 'member', usces_memberinfo( null ), 'echo' ); ?>こうなる。
<em>＊</em>お名前<span class="member_name">姓</span><span class="member_name">名</span>
フリガナ<span class="member_furigana">セイ</span><span class="member_furigana">メイ</span>
生年月日<input type="text" name="custom_member[birth]" class="iopt_text" value="">
<em>＊</em>郵便番号
<input name="member[zipcode]" id="zipcode" type="text" value="" style="ime-mode: inactive">100-1000
<input type="hidden" name="member[country]" id="member_country" value="JP">
<em>＊</em>都道府県
<select name="member[pref]" id="member_pref" class="pref"> <option value="--選択--">--選択--</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</select>
<em>＊</em>市区郡町村
<input name="member[address1]" id="address1" type="text" value="" style="ime-mode: active">横浜市上北町
<em>＊</em>番地
<input name="member[address2]" id="address2" type="text" value="" style="ime-mode: active">3-24-555
ビル名
<input name="member[address3]" id="address3" type="text" value="" style="ime-mode: active">通販ビル4F
<em>＊</em>電話番号
<input name="member[tel]" id="tel" type="text" value="" onkeydown="if (event.keyCode == 13) {return false;}" style="ime-mode: inactive" autocomplete="off">
FAX番号
<input name="member[fax]" id="fax" type="text" value="" onkeydown="if (event.keyCode == 13) {return false;}" style="ime-mode: inactive" autocomplete="off">組み込みについて
input:textのベタ打ちで年月日を入れさせるのはぶっちゃけ無理。
ユーザーはこちらに寄り添ってくれない。
それに、ユーザーに対してフリーワード入力で指定したフォーマットで入力を期待するのは頭がおかしいともいえる。
なのでいじる。
input:dateにするのが無難かと思う。
jsでやる。
管理画面の改修
上記の通り、フィールドを作ると新規会員登録、会員データ編集のページにも追加される。
<tr>
<td class="label">生年月日</td>
<td><input type="date" name="custom_member[birth]" id="custom_member[birth]" size="30" value=""></td>
</tr>先を見越せば、管理画面上で登録したり編集する可能性もあるだろうということで、ついでにやっていく。
input:textなので、input:dateに変更する。
対象のURLは以下の３種類。
新規会員登録ページ
admin.php?page=usces_membernew
会員編集ページ
admin.php?page=usces_memberlist&member_action=edit
会員編集（保存直後の再表示など）
admin.php?page=usces_memberlist&member_action=editpostここは自分だけの世界だから、直接タグを書き換えてしまう。
functions.phpからやれる。
<?php
add_action('admin_footer', 'custom_js_for_usces_member_pages');
function custom_js_for_usces_member_pages() {
global $pagenow;
if (is_admin() && $pagenow === 'admin.php') {
$page = isset($_GET['page']) ? $_GET['page'] : '';
$action = isset($_GET['member_action']) ? $_GET['member_action'] : '';
$is_member_edit = ($page === 'usces_memberlist' && $action === 'edit');
$is_member_editpost = ($page === 'usces_memberlist' && $action === 'editpost');
$is_member_new = ($page === 'usces_membernew');
if ($is_member_edit || $is_member_editpost || $is_member_new) {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
// ここにJS処理を記述
console.log("Welcart 会員データ編集 または 新規登録ページに JS が適用されました。");
$('input[name="custom_member[birth]"]').attr('type','date');
});
</script>
<?php
}
}
}
ページ指定がパラメータの照合っていう、しかも結局js（jQuery）頼りっていう、ここに来てものすごいアナログ感ある泥臭さだけどまあ、やむなしか。
問題ないからいいんです。
案１：typeを変更する
これが
生年月日<input type="text" name="custom_member[birth]" class="iopt_text" value="">こうなればいいよね
生年月日<input type="date" name="custom_member[birth]" class="iopt_text" value="">だからこう。
$(function() {
$('input[name="custom_member[birth]"]').attr('type', 'date');
});案２：別途入力フォームを作る
気持ちとしては、出力されたタグを直接編集するのはあまり気持ちのいいものじゃないので、別途用意してvalueを移植するのがいいように思う。
生年月日<input type="text" name="custom_member[birth]" class="iopt_text" value="">
<input type="date" name="input_custom_member[birth]" value="">そのためにはこう。
input[name="custom_member[birth]"]{ display:none; }$(function() {
const $birthText = $('input[name="custom_member[birth]"]');
// 日付入力フィールドを作成
const $birthDate = $('<input>', {
type: 'date',
name: 'input_custom_member[birth]',
value: ''
});
// テキスト型 input の直後に追加
$birthText.after($birthDate);
// 日付を入力したら hidden側に反映
$birthDate.on('change input', function () {
const dateVal = $(this).val();
$birthText.val(dateVal);
});
});応用すれば、年月日それぞれのプルダウンも作れる。
jsで生成するから<option>を作るのもそこまでめんどくさくない。
ただし、入力した内容の整合性（4月に31日は無いとか、うるう年判定とか）のチェック、登録された年月日をバラしてそれぞれに反映させるとか、めんどくささがすごいので導入は微妙。
コメント