会員制サイトを制作には、WordpressプラグインTheme My Loginは欠かせません。
登録フォームの実装手順を記録しておきます。
実装の前に:
実装準備編:
↑↑↑ この記事ではここまで ↑↑↑
ユーザー登録フォーム実装編:
- Theme My Login の設定
- テンプレートファイル(register-form.php)をテーマフォルダにコピー
- 追加したユーザープロフィール項目の実装(text、select、checkbox、radio、textareaに対応)
- ユーザー登録時のエラーメッセージの制御(翻訳不可文字列の対応)
シュールなご要望に対応(おまけ):
ユーザー登録できるようにする
だれでもユーザー登録ができるようにする
[管理画面 / 一般設定]ページを開き、
「だれでもユーザー登録ができるようにする」をチェックするだけです。
プラグインを使わなくてもユーザー登録できるサイトになります。
Theme My Login をインストールする
[管理画面 / プラグイン / 新規追加]ページで、Theme My Login をインストールして有効化しておいてください。
Theme My Login の日本語化
日本語についてはよろしければ以下の記事をご参照ください。
Theme My Login の日本語化
ユーザープロフィール項目の削除と追加
これについては以前の投稿でも紹介していましたが、改めて:
functions.phpに記述します。
/*********************************************** * ユーザープロフィールの項目の追加と削除 ***********************************************/ function my_user_meta($contactmethods) { //不要な項目の削除 unset($contactmethods['aim']); unset($contactmethods['jabber']); unset($contactmethods['yim']); //項目の追加 $contactmethods['user_name_kana'] = 'フリガナ'; $contactmethods['user_sex'] = '性別'; $contactmethods['user_company'] = '会社名'; $contactmethods['user_tel'] = '電話番号'; $contactmethods['user_fax'] = 'FAX番号'; $contactmethods['user_addr_zip'] = '郵便番号'; $contactmethods['user_addr_pref'] = '都道府県'; $contactmethods['user_addr'] = '住所'; $contactmethods['user_confirm'] = '会員規約に同意'; return $contactmethods; } add_filter('user_contactmethods', 'my_user_meta', 10, 1);
「不要な項目の削除」には「ウェブサイト(url)」が含まれていません。同様の要領で記述したとしても、url はハードコーディングされているため削除することはできません。しかし管理画面でのことなので今回はこのままにしておきます。(削除がどうしても必要ならjavascriptで可能です。)
確認してみましょう
[管理画面 / ユーザー / あなたのプロフィール]を開いて、項目を確認してみてください。
上記で設定した「不要な項目の削除」が削除されており、「項目の追加」が追加されていれば成功です。
WordPressデフォルトのユーザー登録フォームを使用する場合、つまり独自追加項目の入力を登録時に求めない場合、上記だけでOKです。
でも、登録時に上記を入力するようにするなら、それを保存するロジックが必要となります。
それには・・・
追加したユーザープロフィール項目を登録時に保存する
functions.phpに記述します。
/*********************************************** * ユーザープロフィール項目の登録時の保存 ***********************************************/ function tml_user_register( $user_id ) { if ( !empty( $_POST['last_name' ] ) ) update_user_meta( $user_id, 'last_name', $_POST['last_name' ] ); if ( !empty( $_POST['user_name_kana'] ) ) update_user_meta( $user_id, 'user_name_kana', $_POST['user_name_kana'] ); if ( !empty( $_POST['user_sex' ] ) ) update_user_meta( $user_id, 'user_sex' , $_POST['user_sex' ] ); if ( !empty( $_POST['user_company' ] ) ) update_user_meta( $user_id, 'user_company', $_POST['user_company' ] ); if ( !empty( $_POST['user_addr_zip' ] ) ) update_user_meta( $user_id, 'user_addr_zip', $_POST['user_addr_zip' ] ); if ( !empty( $_POST['user_tel' ] ) ) update_user_meta( $user_id, 'user_tel', $_POST['user_tel' ] ); if ( !empty( $_POST['user_fax' ] ) ) update_user_meta( $user_id, 'user_fax', $_POST['user_fax' ] ); if ( !empty( $_POST['user_addr_pref'] ) ) update_user_meta( $user_id, 'user_addr_pref', $_POST['user_addr_pref'] ); if ( !empty( $_POST['user_addr' ] ) ) update_user_meta( $user_id, 'user_addr', $_POST['user_addr' ] ); if ( !empty( $_POST['user_confirm' ] ) ) update_user_meta( $user_id, 'user_confirm', $_POST['user_confirm' ] ); } add_action( 'user_register', 'tml_user_register' );
user_registerというフックを利用して、POSTされた値を各user_metaに追加しているだけですね。
ユーザー登録時のエラーメッセージの制御(必須項目の指定)
registration_errors という登録時のエラー表示フックを使用します。ここでエラーが返されるとユーザーは登録されず、エラーを表示します。
/*********************************************** * 新規ユーザー登録時のバリデート ***********************************************/ function tml_registration_errors( $errors ) { $tel_format="/^[0-9]{2,3}\-[0-9]{3,4}\-[0-9]{3,4}$/"; if ( empty( $_POST['last_name' ] ) ) $errors->add( 'empty_last_name', '<strong>エラー</strong>: お名前を入力してください'); if ( empty( $_POST['user_name_kana'] ) ) $errors->add( 'empty_user_name_kana', '<strong>エラー</strong>: お名前フリガナを入力してください' ); if ( empty( $_POST['user_tel'] ) ) { //電話番号が入力されていな場合のエラー $errors->add( 'empty_user_tel', '<strong>エラー</strong>: 電話番号を入力してください' ); } else { //電話番号は入力されているが書式が間違っている場合のエラー if ( !preg_match($tel_format,$_POST["user_tel"]) ) { $errors->add( 'error_user_tel', '<strong>エラー</strong>: 電話番号の書式が間違っています' ); } } if ( !empty( $_POST['user_fax'] ) && !preg_match($tel_format,$_POST["user_fax"]) ) { //FAX番号は入力されているが書式が間違っている場合のエラー(空はOK) $errors->add( 'error_user_fax', '<strong>エラー</strong>: FAX番号の書式が間違っています' ); } if ( empty( $_POST['user_confirm' ] ) ) $errors->add( 'empty_user_confirm', '<strong>エラー</strong>: 会員規約に同意をチェックしてください' ); return $errors; } add_filter( 'registration_errors', 'tml_registration_errors' );
上記の例では、ユーザープロフィールの特定の項目POSTがない(empty)場合、指定したエラーメッセージを表示する、というものです。
正規表現などを用いるならより厳密なバリデートを実装して入力値チェックにも応用できます。その例が
電話番号の必須チェック、および書式チェック(上記10行目から):
10行目:「電話番号(user_tel)」が空(empty)なら
12行目:エラー追加
13行目:else、つまり電話番号に何らかの値が入力されているなら
15行目:電話番号書式(###-###-####)に合致するか、合致しないなら
16行目:エラー追加
FAX番号の書式チェック(上記19行目から):この値は必須ではない
19行目:「FAX番号(user_fax)」が入力されおり、かつ電話番号書式(###-###-####)にしないなら
21行目:エラー追加
ユーザー登録フォームの作り込みは別記事、Theme My Login 登録フォーム(実装編)にて