• 
• Tweet

• 
• Tweet

会員制サイトを制作には、WordpressプラグインTheme My Loginは欠かせません。
登録フォームの実装手順を記録しておきます。

実装の前に：

• ユーザー登録できるようにする

実装準備編：

• ユーザープロフィール項目の削除と追加
• 追加したユーザープロフィール項目を登録時に保存する
• ユーザー登録時のエラーメッセージの制御（必須項目の指定）

↓↓↓ この記事ではここから ↓↓↓
ユーザー登録フォーム実装編：

• Theme My Login の設定
• テンプレートファイル（register-form.php）をテーマフォルダにコピー
• 追加したユーザープロフィール項目の実装（text、select、checkbox、radio、textareaに対応）
• ユーザー登録時のエラーメッセージの制御（翻訳不可文字列の対応）

↑↑↑ この記事ではここまで ↑↑↑

シュールなご要望に対応（おまけ）：

• メールアドレスでログインできるようにする
• ということはユーザーIDがいらなくなる
• ユーザー登録完了後、自動的にログイン

Theme My Login の設定

今回は以下のような設定が条件です。
［管理画面 / TML / 一般］ページを開き次の項目をチェックします。

• “theme-my-login.css” を有効にする
• email ログインを有効にする：
  ユーザー名の代わりにメールアドレスでログインできるようになる
• Custom E-mailを有効にする：
  新規登録時、およびパスワード再発行時の通知メールをカスタマイズできる
• Custom Passwordsを有効にする：
  新規登録時にユーザーがパスワードを指定できるようになる
• Themed Profilesを有効にする：
  プロフィールページを管理画面ではなく、サイト内（フロントエンド）に編集することができる

テンプレートファイル（register-form.php）をテーマフォルダにコピー

フォルダ plugin/theme-my-login\templates から register-form.php というファイルを、自分のテーマフォルダにコピーしてください。このファイルをカスタマイズして独自のユーザー登録フォームを作り込んでいきます。

確認してみましょう
カスタマイズする前にとにかく一度 新規登録ページを確認してみましょう。
説明するまでもありませんが、ログインしていない別のブラウザ（ChromeでログインしているならFirefoxで）を起動して、サイトドメイン/register にアクセスしてみてください。次のようになっていますか？

“Confirm Password” と英語表記になっているのが気になりますが、後ほど対応するとして、このフォームに独自の項目を追加していくことになります。

追加したユーザープロフィール項目の実装（text、select、checkbox、radio、textareaに対応）

register-form.php をエディタで開いて次の行を見つけてください。

		<?php do_action( 'register_form' ); ?>

この部分でパスワードの入力フィールドを読み込んでいます。
この行の後ろに次のコードを挿入してみてください。

<!-- ▼▼▼ 追加ここから ▼▼▼ -->
		<p>
			<label for="last_name<?php $template->the_instance(); ?>">お名前</label>
			<input type="text" name="last_name" id="last_name<?php $template->the_instance(); ?>" class="input" value="<?php $template->the_posted_value( 'last_name' ); ?>" size="40" />
		</p>
		<p>
			<label for="user_name_kana<?php $template->the_instance(); ?>">フリガナ</label>
			<input type="text" name="user_name_kana" id="user_name_kana<?php $template->the_instance(); ?>" class="input" value="<?php $template->the_posted_value( 'user_name_kana' ); ?>" size="40" />
		</p>
		<p>
			<label for="user_sex<?php $template->the_instance(); ?>_m">性別</label>
			<label><input type="radio" name="user_sex" id="user_sex<?php $template->the_instance(); ?>_m" class="input" value="男性"<?php if ( $_POST['user_sex'] == '男性' ) echo ' checked="checked"'; ?> /> 男性</label>
			<label><input type="radio" name="user_sex" id="user_sex<?php $template->the_instance(); ?>_f" class="input" value="女性"<?php if ( $_POST['user_sex'] == '女性' ) echo ' checked="checked"'; ?> /> 女性</label>
		</p>
		<p>
			<label for="user_company<?php $template->the_instance(); ?>">会社名</label>
			<input type="text" name="user_company" id="user_company<?php $template->the_instance(); ?>" class="input" value="<?php $template->the_posted_value( 'user_company' ); ?>" size="40" />
		</p>
		<p>
			<label for="user_tel<?php $template->the_instance(); ?>">電話番号（例：033-123-4567）</label>
			<input type="text" name="user_tel" id="user_tel<?php $template->the_instance(); ?>" class="input" value="<?php $template->the_posted_value( 'user_tel' ); ?>" size="20" />
		</p>
		<p>
			<label for="user_fax<?php $template->the_instance(); ?>">FAX番号（例：033-123-4568）</label>
			<input type="text" name="user_fax" id="user_fax<?php $template->the_instance(); ?>" class="input" value="<?php $template->the_posted_value( 'user_fax' ); ?>" size="20" />
		</p>
		<p>
			<label for="user_addr_zip<?php $template->the_instance(); ?>">郵便番号</label>
			<input type="text" name="user_addr_zip" id="user_addr_zip<?php $template->the_instance(); ?>" class="input" value="<?php $template->the_posted_value( 'user_addr_zip' ); ?>" size="20" />
		</p>
		<p>
			<label for="user_addr_pref<?php $template->the_instance(); ?>">都道府県</label>
			<select name="user_addr_pref" id="user_addr_pref<?php $template->the_instance(); ?>">
					<option value="">【選択して下さい】</option>
					<?php
$addr_pref = $_POST['user_addr_pref'];
$prefArr["北海道・東北地方"] = array("北海道","青森県","岩手県","秋田県","宮城県","山形県","福島県");
$prefArr["関東地方"] = array("栃木県","群馬県","茨城県","埼玉県","東京都","千葉県","神奈川県");
$prefArr["中部地方"] = array("山梨県","長野県","新潟県","富山県","石川県","福井県","静岡県","岐阜県","愛知県");
$prefArr["近畿地方"] = array("三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県");
$prefArr["四国地方"] = array("徳島県","香川県","愛媛県","高知県");
$prefArr["中国地方"] = array("鳥取県","島根県","岡山県","広島県","山口県");
$prefArr["九州・沖縄地方"] = array("福岡県","佐賀県","長崎県","大分県","熊本県","宮崎県","鹿児島県","沖縄県");
foreach ( $prefArr as $prefGrp => $prefs):
					?>
					<optgroup label="<?php echo $prefGrp ?>">
						<?php foreach ( $prefs as $pref): ?>
						<option value="<?php echo $pref ?>"<?php if ( $addr_pref == $pref) echo ' selected="selected"' ?>><?php echo $pref ?></option>
						<?php endforeach ?>
					</optgroup>
					<?php endforeach ?>
				</select>
		</p>
		<p>
			<label for="user_addr<?php $template->the_instance(); ?>">市区町村番地（建物名、部屋番号もご入力ください）</label>
			<input type="text" name="user_addr" id="user_addr<?php $template->the_instance(); ?>" class="input" value="<?php $template->the_posted_value( 'user_addr' ); ?>" size="60" />
		</p>
		<p><strong>会員規約：</strong><br />
			会員規約の文面会員規約の文面会員規約の文面会員規約の文面会員規約の文面会員規約の文面会員規約の文面会員規約の文面</p>
		<p>
			<label for="user_confirm<?php $template->the_instance(); ?>">
			<input type="checkbox" name="user_confirm" id="user_confirm<?php $template->the_instance(); ?>" class="input" value="会員規約に同意" /> 会員規約に同意</label>
		</p>

<!-- ▲▲▲ 追加ここまで ▲▲▲ -->

登録ページを開いてみてください。（ページイメージ）

「性別」の ラジオボタン（type=”radio”）、
「都道府県」の プルダウン（type=”select”）
このあたりは参考にしていただけるかもしれません。同様の方法で、チェックボックス（checkbox）、テキストエリア（textarea）にも対応可能です。

都道府県の配列は、プロフィールページなど他の場所でも使うなら、
functions.phpでグローバル変数にしておいてもよいかもしれません。

ユーザー登録時のエラーメッセージの制御（翻訳不可文字列の対応）

以下でご紹介するのは登録時のエラーメッセージの対応例です。
プロフィールページでのエラーメッセージの対応は異なるようです。フォーラムの回答をご参照ください。
http://ja.forums.wordpress.org/topic/14595

試してみましょう
登録フォームに何も入力せずに［登録］ボタンをクリックしてみてください。
ユーザー登録時のエラーメッセージの制御（必須項目の指定）で設定したエラーメッセージが表示されるはずです。

「電話番号」欄に適当な文字列を入力して［登録］ボタンをクリックすると、「電話番号の書式が間違っています」とエラーメッセージが表示されるはずです。

日本語化されていないメッセージに対応
以前の記事、Theme My Login 6.3.8対応版 日本語ファイル　にも書きましたが、
本来管理画面に表示するものをサイト内で表示するためのプラグインですから、Wordpress管理画面のための翻訳ファイルをうまく読み込めない箇所等があるようです。
その対処のための小細工の方法です。

エラーメッセージを記述した時（ユーザー登録時のエラーメッセージの制御 を参照）に使用した同じフックを使いますので、その記述に追記します。

	// tml_registration_errors に追記部分
	$rep1 = array();
	$rep2 = array();
	array_push($rep1, "<strong>ERROR</strong>");
	array_push($rep2, "<strong>エラー</strong>");
	array_push($rep1, "Please enter your password twice.");
	array_push($rep2, "パスワードを2回入力してください。");
	array_push($rep1, "Please enter the same password in the two password fields.");
	array_push($rep2, "パスワードは同じものを2回入力してください。");
	array_push($rep1, "This username is already registered, please choose another one.");
	array_push($rep2, "同じメールアドレスがすでに登録されています。");
	$custom_error = new WP_Error();
	foreach ( $errors -> errors as $key => $val ) {
		$tmp = str_replace($rep1,$rep2,$val[0]);
		$custom_error -> add($key, $tmp);
	}
	return $custom_error;
//	return $errors;

英語文字列とその対訳となる日本語文字列をセットにして配列化し、エラーメッセージの配列$errorsに格納された値を一つ一つ評価して、日本語に置換しています。
日本語訳が適用されている箇所でもちょっとカスタマイズしたい表現に置き換えることもできますね。

このようにフックしておけば、Wordpressが更新された時にも安心ですね。
先ほどと同様にエラーメッセージを表示させると

 

でもまだ

フォームのラベルで日本語になっていない箇所に対応 しなければなりません。
Confirm Password （パスワードの確認入力フィールド）です。
方法は二つ（？）
theme-my-login\modules\custom-passwords\custom-passwords.php を編集する。
もう一つの方法は
register-form.php にjavascriptで文字列置換で日本語化する。
例えば（追記2013/08/16）

<script type="text/javascript">
	var labels = document.getElementsByTagName('label');
	for (var i=0 ; i<=labels.length+1 ; i++){
		if ( labels[i].innerHTML === 'Confirm Password') {
			labels[i].innerHTML = 'パスワード確認';
		}
	}
</script>

あとは、スタイルを調整して体裁よく整えたら、
オリジナルユーザー登録フォームの完成です！

ちょっとしたおまけを別の記事にて・・・