会員登録の際にメールアドレスをユーザー名にして、ニックネームを必須入力でデフォルトの表示名にする（WP-Membersなど）

2023.04.21
jQuery・JS wordpress

ワードプレスの会員制サイト制作用のプラグインには、フリーでも十分使えるものがいくつかありますが、今回は「WP-Members」を利用した案件です。他のプラグインでも使える方法ではないかと思います。

クライアントの希望は「ユーザー名に日本語を使いたい」ということだったのですが、ワードプレスの仕組み上これが出来ないことを説明し、さらにニックネームをつけて、表示名に選ぶことが出来ると伝えたところ、「登録時はユーザー名にメールアドレスと同じものを入れて、入力欄自体は見えないようにする。そのうえでニックネームを必須入力にして、ニックネームが自動的に表示名になるように」という希望が帰ってきました。

考え方は以下の通りです。

ユーザー名の入力欄を見えなくする
メールアドレスを入力したら、ユーザー名にメールアドレス欄の値を入力する
ニックネームを必須入力欄として追加する
新規ユーザー登録時に、表示名がニックネームになるようにする

1. コード

コード

メールアドレスとユーザー名の値を同じにする

ここは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
    )) ;
}

ここまで出来たらテストで新規登録を行ってみて、希望通りに動くか確認します。