ワードプレスの会員制サイト制作用のプラグインには、フリーでも十分使えるものがいくつかありますが、今回は「WP-Members」を利用した案件です。他のプラグインでも使える方法ではないかと思います。
クライアントの希望は「ユーザー名に日本語を使いたい」ということだったのですが、ワードプレスの仕組み上これが出来ないことを説明し、さらにニックネームをつけて、表示名に選ぶことが出来ると伝えたところ、「登録時はユーザー名にメールアドレスと同じものを入れて、入力欄自体は見えないようにする。そのうえでニックネームを必須入力にして、ニックネームが自動的に表示名になるように」という希望が帰ってきました。
考え方は以下の通りです。
- ユーザー名の入力欄を見えなくする
- メールアドレスを入力したら、ユーザー名にメールアドレス欄の値を入力する
- ニックネームを必須入力欄として追加する
- 新規ユーザー登録時に、表示名がニックネームになるようにする
コード
メールアドレスとユーザー名の値を同じにする
ここはJSの出番です。
// ユーザー登録時にusernameにメールアドレスを自動入力
window.addEventListener('DOMContentLoaded', function(){
// input要素を取得
var usr_account = document.getElementById("user_email");
var usr_username = document.getElementById("username");
// イベントリスナーでイベント「change」を登録
usr_account.addEventListener("change",function(){
usr_username.value = this.value;
});
});ユーザー名の入力欄を隠す
上記コードで、メールアドレスを入力したらユーザー名にメールアドレスが入ることを確認したら、ユーザー名の入力欄をCSSで隠します。
#wpmem_register_form input#username{
display:none!important;
}
#wpmem_register_form label[for=username]{
display:none;
}WP-Membersはユーザー名を必須入力として出力しますので、そのラベルを消すために2つ目のCSSを書いています。
ユーザー登録時に表示名をニックネームに変更する
ここはfunctions.phpの出番です。これをやらないと、ユーザー名のメールアドレスが表示名になってしまい、ユーザー名を晒すことになってしまうので、要注意です。
// ユーザー登録時に表示名をニックネームに変更する
function fix_user_display_name($user_id) {
$user = get_user_by('id', $user_id);
$display_name = $user->nickname;
wp_update_user(array(
'ID' => $user_id,
'display_name' => $display_name
)) ;
}ここまで出来たらテストで新規登録を行ってみて、希望通りに動くか確認します。
ログインフォームを変更する
最後に、ログインフォームを変更します。デフォルトの日本語表記は、ログイン時に「ユーザー名またはメールアドレス」と書かれています。このままだと会員はニックネームとパスワードでも入力出来ると勘違いしそうなので、ログインフォームに入力欄の表記は、メールアドレスのみに書き換える必要があります。
ここは「Loco Translate」を使って、無理やり翻訳を変更してしまいました。あまりいい方法とは言えませんが、他に良い方法が思いつかず。
上記で思った通りの動きになりました。