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を活用すれば、会員制サイトの要件を満たすサイトの構築が可能です。
このプラグインを使って何ができるかに通じることも必要ですが、エンドユーザーにとって、どのようなフローが使いやすいのか、常にユーザー目線に立つのが重要なことだと感じます。(当たり前ですけどね。)