Theme My Login 登録フォーム（準備編）
Theme My Login 登録フォーム（実装編）
WordpressプラグインTheme My Login を活用して新規ユーザー登録の機能をサイトに搭載してきました。「登録フォーム」という枠組みでは、今回がシリーズ最後となりちょっとおまけ的な要素の紹介です。
実装の前に：（過去記事）
実装準備編：（過去記事）
ユーザー登録フォーム実装編：（過去記事）
- Theme My Login の設定
- テンプレートファイル（register-form.php）をテーマフォルダにコピー
- 追加したユーザープロフィール項目の実装（text、select、checkbox、radio、textareaに対応）
- ユーザー登録時のエラーメッセージの制御（翻訳不可文字列の対応）
↓↓↓ この記事ではここから ↓↓↓
シュールなご要望に対応（おまけ）：
↑↑↑ この記事ではここまで ↑↑↑
メールアドレスでログインできるようにする
ユーザーログインを簡便にするために、ユーザーID（ユーザー名）ではなくメールアドレスでログインできるようにしたい、という要望はよくあります。
これは簡単です。すでに既出ですが：
［管理画面 / TML / 一般］ページを開き、「email ログインを有効にする」にチェック
これだけです。
これで、ログイン画面の「ユーザー名」に、登録したメールアドレスを入力してログインできるようになります。
ということはユーザーIDがいらなくなる
メールアドレスでログインできるようになるということは、
ユーザーID（ユーザー名）は登録時のみに必要なだけ、ということになります。
しかし、次の条件を満たさなければWordPressで構築されたサイトにユーザー登録はできません。
- ユーザーID（ユーザー名）は必須
- ユーザーIDはユニークでなければならない（登録済みのIDは使えない）
さあどうしましょう？
メールアドレスもユニークでなければならず、登録済みのメールアドレスは使えません。
入力されたメールアドレスをユーザーIDすればよさそうです。
入力されたメールアドレスとユーザーIDを同期するには
これは様々な方法がありますが、
簡単なのはJavascriptを使って同期する方法でしょうか。例えば次のようにします。
<script type="text/javascript">
//ページ読み込み時にも同期
window.onload = sync_to_user_login();
//ユーザー名をメールアドレスの入力値で同期する
function sync_to_user_login() {
var el_user_email = document.getElementById("user_email<?php $template->the_instance(); ?>");
var el_user_login = document.getElementById("user_login<?php $template->the_instance(); ?>");
el_user_login.value = el_user_email.value;
}
</script>
そして、ユーザーID と メールアドレス のinputも次のように書き換えます。
<input type="hidden" name="user_login" id="user_login<?php $template->the_instance(); ?>" value="<?php $template->the_posted_value( 'user_login' ); ?>" />
表示される必要がありませんので、labelは不要で、ユーザー名の input は type=”hidden” です。
<input type="text" name="user_email" id="user_email<?php $template->the_instance(); ?>" class="input" value="<?php $template->the_posted_value( 'user_email' ); ?>" size="20" onChange="sync_to_user_login()" />
メールアドレスのフィールドの変更時(change)に、上述のJavascriptを機能させる必要がありますので、inputタグ内に、onChange=”sync_to_user_login()” を追加しています。
エラーメッセージのカスタマイズも忘れずに
ユーザー名を入力するフィールドを非表示にしましたが、ユーザー名に関連して表示されるエラーメッセージのカスタマイズも忘れてはいけません。
例えば、
メールアドレスが入力しないまま［登録］ボタンをクリックすると
「ユーザー名を入力してください」というエラーが表示され、ユーザーは「それって、どれ？」となってしまいます。
すでに登録済みのメールアドレスで登録しようとすると
「このユーザー名はすでに登録されています。他のユーザー名をご入力ください」を表示され、やはり混乱します。
これらのエラーメッセージは他の表現に置き換えなければなりません。
その方法については
ユーザー登録時のエラーメッセージの制御（翻訳不可文字列の対応） で詳細は説明しています。
例えば、置換する配列に次のように追加すればよさそうです。
array_push($rep1, "This username is already registered, please choose another one."); array_push($rep2, "同じメールアドレスがすでに登録されているため、ユーザー名を確定できません。"); array_push($rep1, "ユーザー名を入力してください。"); array_push($rep2, "ユーザー名を確定できません。メールアドレスを入力してください。");
ユーザー登録完了後、自動的にログイン
新規ユーザー登録からログインできるまでの、WordPressの通常のフローは
ユーザー登録 → パスワード発行 → パスワードをメールでユーザーに通知 → ログイン
ですが、
ユーザーは登録時にパスワードを自分で決めていますから、もはや登録とログインのフローを分ける必要はないかもしれません。
その場合、ユーザー登録にWordPressが成功したら、自動的にログインしたら便利です。
その方法については過去記事をご参照ください。
ユーザー登録完了後に自動的にログイン
雑感
秀逸なWordPressプラグイン、Theme My Loginを活用すれば、会員制サイトの要件を満たすサイトの構築が可能です。
このプラグインを使って何ができるかに通じることも必要ですが、エンドユーザーにとって、どのようなフローが使いやすいのか、常にユーザー目線に立つのが重要なことだと感じます。（当たり前ですけどね。）
