Wordpressで会員制サイトを構築してみよう（ユーザー項目の変更 その1）


[事前準備編](http://qiita.com/hiroki_y/items/7ca0a2a364eb9edabe39)だけで、とりあえずの会員登録機能は実装できましたが、このままでは思い通りに使えません。
準備でコピーしたテンプレートファイルを変更して、オリジナルの項目を追加してみます。


##元記事
下記エントリの転載になります。
[WordPressで会員制サイトを構築してみよう（ユーザー項目の変更 その1）](http://www.rokurofire.info/2014/10/08/wp_membership2/)

##ユーザー項目について
本連載では、下記の項目を定義しています。

###会員登録時
会員登録時に登録してもらう項目です。

* メールアドレス（user_email）
* パスワード
* パスワード確認

###ログイン時
ログイン時に入力する項目です。

* メールアドレス（user_email）
* パスワード

###プロフィール画面
登録完了、ログイン後に追加/変更できる項目です。

* 苗字（last_name）
* 名前（first_name）
* 郵便番号（user_zip）
* 都道府県（user_prefecture）
* 番地（user_address）
* プロフィール（user_text）
* メールアドレス（user_email）
* パスワード
* パスワード確認

###WordPressの仕様上必要な項目について

* ユーザー名（user_login）

ユーザー名は、WordPressの仕様上必須の項目です。
ユニークである必要があり、他のユーザーと同じものは利用できません。

昨今のサービスでは、わざわざログイン用のユーザー名を登録させるサービスは少ないと思います。今回は同じユニーク項目であるメールアドレスを、自動でユーザー名に設定されるようにしてみます。

##会員登録フォームの変更
会員登録ページのフォーム用テンプレート register-form.php を変更します。

###不要な項目の削除

デフォルトですと、画像のような表示になっていると思います。

![register4-1.jpg](https://qiita-image-store.s3.amazonaws.com/0/10172/cc0d9bfd-48cd-8035-dfa3-ce56b582c29c.jpeg "register4-1.jpg")

今回は「ユーザー名」が不要ですので、削除します。
（上記で必須の項目と書きましたが、ユーザーに見せる必要はありませんので消しましょう）

```register-form.php
// パラメータ "user_login" 部分を削除

<label for="user_login"><?php _e( 'Username' ); ?></label>
<input type="text" name="user_login" id="user_login" value="<?php echo esc_attr( $profileuser->user_login ); ?>" disabled="disabled" class="regular-text" /> <span class="description"><?php _e( 'Your username cannot be changed.', 'theme-my-login' ); ?></span>
```

項目がメールアドレス、パスワード、パスワード確認だけになりました。
登録フォームの変更はこれで完了です。


###「Confirm Password」というラベルを変更する
このテキストは、テンプレートからは変更できません。
ちょっと強引ですがJavaScriptで変更し「パスワード（確認）」というテキストに変更します。

```
// DOMの変更例
<script>
(function(){
	jQuery("#pass2").parent().children("label").html("パスワード（確認）");
})();
</script>
```

##会員登録処理を変更

次に、フックを利用して会員登録の処理を追加します。
上記にも書きましたが、メールアドレスをユーザー名にも設定する必要があります。

```functions.php
function my_user_postregister($tml) {
	if ( 'register' == $tml->request_action ) {
		if ( 'POST' == $_SERVER['REQUEST_METHOD'] ) {
			$_POST['user_login'] = $_POST['user_email'];
		}
	}
}

add_action( 'tml_request', 'my_user_postregister');
```

会員登録フォームでPOSTした内容を取得し、$_POST['user_login'] に $_POST['user_email'] を代入しています。
これで ユーザー名（user_login） の項目にも、メールアドレスと同じものが設定されます。

今回はユーザー名にメールアドレスを設定しましたが、メールアドレスの@よりも前だけにしたり、ランダム文字列を追加したり・・・等、ここでいろいろ処理を追加することができます。

変更を保存して会員登録を実行すると、下記のような画面になると思います。
認証用のメールが、指定したメールアドレスに届いていれば登録成功です。

![register4-2.jpg](https://qiita-image-store.s3.amazonaws.com/0/10172/3220d4f1-3ede-a252-7fa1-b4f433b9192c.jpeg "register4-2.jpg")

##ログインフォームの変更

WordPressの仕様で、ログインは「ユーザー名」と「パスワード」で行うことになっています。
今回は、「ユーザー名」ではなく「メールアドレス」でログインしたいので、その設定を行います。

Theme My Loginの設定で、下記画像の部分にチェックを入れると「ユーザー名」のところに「メールアドレス」を入れても、ログインができるようになります。

![register4-3.jpg](https://qiita-image-store.s3.amazonaws.com/0/10172/56361731-2a30-63cf-5d8c-5768653885bb.jpeg "register4-3.jpg")

これでメールアドレスとパスワードでログインできるようになりました。
あとは、ラベルの「ユーザー名」を「メールアドレス」に変更すれば完了です。

```login-form.php
<label for="user_login<?php $template->the_instance(); ?>"><?php _e( 'Username' ); ?></label>

↓

<label for="user_login<?php $template->the_instance(); ?>">メールアドレス</label>
```

![register4-4.jpg](https://qiita-image-store.s3.amazonaws.com/0/10172/f8169225-69af-80ee-c11f-3bee5979c005.jpeg "register4-4.jpg")

これだけで、メールアドレスとパスワードでログインすることができるようになります。
次回、ユーザーのプロフィールページの変更を行います。

##参考
下記サイト様を参考にさせていただきました。

* **[つながるねっと](http://yahss.net/wordpress/765-registration-form2-with-theme-my-login/)さん**