会員制サイトを制作には、WordpressプラグインTheme My Loginは欠かせません。
登録フォームの実装手順を記録しておきます。
実装の前に:
実装準備編:
↓↓↓ この記事ではここから ↓↓↓
ユーザー登録フォーム実装編:
- Theme My Login の設定
- テンプレートファイル(register-form.php)をテーマフォルダにコピー
- 追加したユーザープロフィール項目の実装(text、select、checkbox、radio、textareaに対応)
- ユーザー登録時のエラーメッセージの制御(翻訳不可文字列の対応)
↑↑↑ この記事ではここまで ↑↑↑
シュールなご要望に対応(おまけ):
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>
あとは、スタイルを調整して体裁よく整えたら、
オリジナルユーザー登録フォームの完成です!
ちょっとしたおまけを別の記事にて・・・
直接メールしてみる
コメントをどうぞ
コメント:14 件
テンプレートファイル(register-form.php)をテーマフォルダにコピー
フォルダ plugin/theme-my-login\templates から register-form.php というファイルを、自分のテーマフォルダにコピーしてください。このファイルをカスタマイズして独自のユーザー登録フォームを作り込んでいきます。
以上の方法がわからずに困っています。助けてください。よろしくお願いします。
はじめまして、yahss様。
現在Theme My loginのログインページのテキストの変更をしようとしております。
yahss様のサイトを拝見しフックを利用すれば変更可能なことがわかったのですが、
ログインページのフックがわからず困っております。
お忙しい中恐縮ではございますが、アドバイスを頂ければと思います。
どうぞよろしくお願いいたします。
「Theme My loginのログインページのテキストの変更」ということであれば、翻訳ファイルの編集で対応できるかと思われます。
以下の翻訳ファイルを調整すれば対応できます。
http://yahss.net/wordpress/653-theme-my-login-japanese-po-file/
エラーメッセージの制御について述べておられるようでしたら、次を参照してみてください。
http://yahss.net/wordpress/729-registration-form1-with-theme-my-login/#tml04
早速のご回答有難うございます!
messageの”Please log in to continue.”の文章を変更しようと思い、
翻訳ファイルを導入後、”ログインしてください。”という文言に変更したのですが、
“ログインを継続してください。”になってしまうのです。
この文章は翻訳ファイルの文章ではないのでしょうか?
どうぞよろしくお願いいたします。
こんにちは。yahss様。こちらのサイトを見せていただきながらTheme My loginの登録画面をカスタマイズしようとしている者です。
テーマはMesoColumnを仕様しているのですが、上記のfunction.phpというのはテーマのfunction.phpのことでしょうか?
yahss様の上記の記述をコピーして保存してみたのですが、全く動作いたしません。このテーマだとTheme My loginのカスタマイズは無理なのでしょうか?ちなみにCimy User Extra Fieldsで登録画面をカスタマイズしようとしましたが、これもうまくいきませんでした(登録終了画面が真っ白になりました)ご多忙の折恐縮ですが、アドバイスいただければ誠に幸いです。何卒よろしくお願い致します。
ご質問系はメールフォームにて送信していただけると、細やかな対応ができます。
このページで紹介しているコードでfunctions.phpに記述することに言及しているのは、
http://yahss.net/wordpress/765-registration-form2-with-theme-my-login/#tml04
のエラーメッセージの日本語対応の部分ですが、この日本語対応を実装しようとしておられるということですか?
このfunctions.phpはテーマの中のファイルのことです。
「全く動作しない」というのは、具体的にどういうことなのか記述していただけると何らかのご提案ができるかもしれません。
TMLのテンプレートregister-form.phpの表示はできているのでしょうか。このテンプレートに「お名前」「フリガナ」「性別」などのタグを追加したけど表示されないということでしょうか。表示されるけど、ユーザー登録できていないということでしょうか。ユーザー登録はできているけど、追加した「フリガナ」などが保存されていないということでしょうか。何をして、何ができて、どのように不具合があるかをまずご自分で理解して、記述していただけると助かります。
もとより、このサイトもそうですが、functions.phpを触る時点でもはや開発の分野です。コピペではなかなか思ったように動作しないものと思います。何をしているのか紹介しているアイデアをしっかり理解して実装するようにしてみてください。
サイトドメイン/registerにアクセスすると404 Not Foundになるのですがどうしたらよいですか?register-form.phpのコピーは完了しています。
Theme My Loginをインストールして有効化すると、[管理画面/固定ページ]に「登録(もしくはregister)」というページが生成されているはずです。まずこれはありますか?あるなら、その編集画面を開いていただいて、そのパーマリンクはどうなっているでしょうか。そのパーマリンクで示されているURLが、tanakamasuoさんの環境での登録ページのURLです。そのURLにアクセスしてみてください。
迅速な対応感謝します。
?page_id=6となっていてログインしていないブラウザにはりつけると?page_id=4®istration=disabledなって「登録はできません」となります。
「登録」を始め作成された固定ページは全て[theme-my-login]となっています。
新規投稿に[theme-my-login default_action=”register” register_template=”register-form.php”]とすれば登録画面は出てきます。
パーマリンクの設定がおかしいのでしょうか?
ログインしていないブラウザで「登録」ページを開こうとすると、「登録できません」となるということは、WordPressの設定がユーザー登録を許していない設定になっているということです。
http://yahss.net/wordpress/729-registration-form1-with-theme-my-login/#tml01
ここで説明しているとおり、まず[管理画面/設定]で「だれでもユーザー登録ができるようにする」をチェックしてください。
これで登録できるようになります。
そして、tanakamasuoさんのWPの環境では、パーマリンクの設定がデフォルトのままのようです。これはこれでOKです。
その場合の「登録」ページのパーマリンクは、WPルート/?page_id=6 ということです。
前述の登録できるように設定されていれば、この ?page_id=6 にアクセスすると、登録ページが正しく表示されます。
試してみていただけるでしょうか。
ありがとうございます!全て解決致しました!
丁寧な回答本当に感謝します!!
英語表記 ‘Confirm Password’ を日本語表記にするためのJavascriptについてのお問い合わせをいただきましたので、サンプルを追記いたしました。
custom-passwords.php内に、“Confirm Password”が2ヵ所あるのですが、片方は末尾にコロンが付いています。
theme-my-login-ja.poには、コロン付きしか入っていないので、コロン無しを追記すれば日本語表記になると思います。
匿名様:有用な情報をありがとうございます!