WP-Membersで会員登録(ログインIDをメールアドレスに変更)

wp-membersは簡単に会員サイトを作成できる超有名なプラグインです。

普通に導入する手順は世の中にあふれるほどありますので、本日はWP-Membersのプラグインを使って「会員登録」する方法をご紹介いたします。

ただし、使うのは「会員登録機能」のみです。

「お問合せ」や「資料請求」ではなく、『メルマガ購読』のみに利用用途を絞ったイメージです

【ログインIDをメールアドレスに変更】する手順をご覧になりたい方は、ステップ4.にお進みください。

関連記事

wordpress
wordpress
WP-Members ログイン画面カスタマイズ 邪魔な会員登録フォーム削除
wordpress
【2020年最新】WP-Members 会員ごとに閲覧範囲制限
wordpress
【最新版】WP-Members 日本語化
wordpress
WP-Membersで会員登録機能実装
WP-Membersをカスタマイズ(会員登録画面)

会員サイトの構成

今回は「メルマガ購読」の申し込みのみ行いますので、ログインに関わる機能は構築いたしません。

なので、ログイン後ページなども作成いたしません。会員サイト用のプラグインですが、会員登録のみ利用致します。(将来的には会員サイトが構成できるようにはしております)

WP-Membersのインストール

プラグイン->新規追加から「wp-members」を検索頂ければ下記のプラグインが出てきますので、こちらをインストール+有効化致します。

WP-Members

WP-Membersインストール
WP-Membersインストール

※有効化は忘れがちなので、必ず行ってください。メニューに出てこない時などはまず疑う部分(本人談)

WP-Membersの設定

プラグインの一覧から設定メニューへ遷移すると、設定メニューが表示されます。WP-Membersには3つのタブで設定項目があります。

  • WP-Membersオプション
    • どこをログイン必須のページにするかなど、全体の設定ができます
  • フィールド
    • 会員登録時の項目を制御するメニューです
  • ダイアログ
    • エラーメッセージなどの登録と修正を行います
  • メール
    • メール本文などの登録と修正を行います

WP-Membersオプション

デフォルトでは下記の状態です。

WP-Membersオプション設定前
WP-Membersオプション設定前

今回はログイン前閲覧のブロックやログインフォーム表示は行いませんので、とりあえず下記のように設定しておきます。

WP-Membersオプション設定後
WP-Membersオプション設定後

ブロックもせずログインページも表示させないという、なぜWP-Membersをインストールしたのかわからない状態ですが、今回はこれで良しとします。

ただし、会員登録画面は準備しますのでこちらは対応が必要です。といっても、該当のページにショートコードを張るだけの対応です。

会員登録のショートコードは下記になります。

[wpmem_form register]

そのほかのショートコードについては本家サイトをご確認ください

Page and Form Shortcodes

フィールド

会員登録時に入力する項目を管理します。

各項目は基本的に日本語化されておりますが、電話番号だけなぜか「Phone」のままになっており気になるので、まずはこれを修正します。

フィールドの項目名修正

修正するフィールド(今回は電話番号)を選択します

フィールドの項目編集
フィールドの項目編集

編集画面の「ラベル」が、画面に表示される名称になります。

こちらを「電話番号」などに修正すれば、日本語化が完了です。

フィールド ラベルの登録
フィールド ラベルの登録

ラベル以外の項目の説明に入る前に、電話番号に関しての完成形を記載いたします。

今回「電話番号」の項目については下記の通り設定致しました。

フィールド登録結果
フィールド登録結果
  • ラベル:電話番号
  • 表示:チェック
  • 必須入力項目:チェック
  • プレースホルダ―:電話番号
  • パターン:[0-9]+$
  • タイトル:電話番号(数字のみ)

では、ラベル以外の各項目について説明いたします。

表示・必須入力項目

そのままです。「画面に表示するか」と「必須入力にするか」です。

プレースホルダー

HTMLのプレースホルダーです。(入力項目にデフォルトで説明文が入っているやつ)

入れてあげると親切ですね。

パターン

各項目の入力パターンです。正規表現で登録することができます。HTML5ではHTMLの属性で入力値の制御が可能です。

電話番号はなぜか全角の日本語なども入力できることになっていたので、数字のみに制限致しました。

「-」などを入れてしまう方もいらっしゃると思いますが、その場合はエラーメッセージで「数字のみ」で入力するように誘導しております。

下記画面が設定完了後のエラーメッセージになります。

電話番号バリデーションチェック
電話番号バリデーションチェック

ダイアログ

画面の文言やエラーメッセージを登録します。

そのままでも日本語化はされていますが、いまいちな表現もあるため

ここで直接修正してしまいます。(きれいに言語ファイルを修正してもOKです)

今回は特に気になった「メールアドレス登録済み」「登録完了」のメッセージのみ修正しております。

ダイアログ 日本語化
ダイアログ 日本語化

そのほかのメッセージも適宜修正していきます。

メールアドレスをユーザネーム(ログインID)として登録

今回のメインテーマともいえる対応です。

WP-Membersでは、メールアドレスをユーザネーム(ログインID)として登録することができませんが、対応する方法はあります。

デフォルトでは、会員登録時に「ユーザネーム(ログインID)」が必須になっています。しかし、今時のサイトであればメールアドレスのほかにログインIDを入力させるなんていうことはしたくないですよね。

そこで、ユーザには「ユーザネーム(ログインID)」の入力を意識させず会員登録を完了させます。

修正するのは「username」と「メールアドレス」のフィールドです。

対応1 usernameフィールドの修正

修正するのは下記2点です。

  1. ラベルの修正:usernameからメールアドレスに変更
  2. パターンの修正:メールアドレス入力用の正規表現を登録
username項目のラベルを「メールアドレス」、パターンをメールアドレスの正規表現として登録
username項目のラベルを「メールアドレス」、パターンをメールアドレスの正規表現として登録

正規表現はこちら

^[a-zA-Z0-9_+-]+(.[a-zA-Z0-9_+-]+)*@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$

対応2 メールアドレスを「メールアドレス確認用」項目にする

こちらが今回の対応のミソです。まずは見た目を整えます。

ラベルの修正後は下記の通りになります。

ラベルに「メールアドレス確認用」と登録
ラベルに「メールアドレス確認用」と登録

これで、項目の表示位置を調整すると下記の通り違和感のない入力項目になります。

会員登録画面 「メールアドレス」と「メールアドレス確認用」の項目が2つ並んでいる
会員登録画面 「メールアドレス」と「メールアドレス確認用」の項目が2つ並んでいる

とりあえず見た目はきれいにできました。しかしこのままでは、「メールアドレス」と「メールアドレス確認用」に違うものを入れられてもチェックすることができません。

そこで、WP-Membersのadd_filterを利用して「メールアドレス」と「メールアドレス確認用」の項目が一致しているかをチェックします。

追記する内容は下記の通りです。


add_action( 'wpmem_pre_register_data', 'my_reg_hook' );
function my_reg_hook( $fields ) {
  
    global $wpmem_themsg;

    if ( htmlspecialchars($fields['username']) != htmlspecialchars ($fields['user_email']) ) {
      $wpmem_themsg = '入力されたメールアドレスが一致しません。';
    }

    return;
}

簡単に解説していいきます。

add_action( 'wpmem_pre_register_data', 'my_reg_hook' );

まずはMP-Membersのアクションフックを利用します。色々と準備されておりますのでフィルターとアクションフック一覧をご覧いただけば、他にもやりたいことが実現できると思います。

global $wpmem_themsg;

if ( htmlspecialchars($fields['username']) != htmlspecialchars ($fields['user_email']) ) {
  $wpmem_themsg = '入力されたメールアドレスが一致しません。';
}

次に$fieldsから取得したusernameとuser_emailが一致しているかどうか判定し、一致していない場合は$wpmem_themsgというメッセージ表示用の変数にエラーメッセージを格納します。

これでfunction.phpへの追記は完了です。

会員登録画面からテストをしてみましょう。

メールアドレスが一致しないことのテスト
メールアドレスが一致しないことのテスト

このように、「メールアドレス」と「メールアドレス確認用」に違う文字列を入れるとエラーメッセージが表示されることが確認できました。

会員登録完了後、管理画面からユーザを検索すると下記の通りユーザ登録されているのが確認できます。

会員登録完了後の登録データ
会員登録完了後の登録データ

これで会員登録時の項目追加は完了です。

会員登録画面やメールのカスタマイズについては関連記事からご参照ください

wordpress
wordpress
WP-Members ログイン画面カスタマイズ 邪魔な会員登録フォーム削除
wordpress
【2020年最新】WP-Members 会員ごとに閲覧範囲制限
wordpress
【最新版】WP-Members 日本語化
wordpress
WP-Membersで会員登録機能実装
WP-Membersをカスタマイズ(会員登録画面)

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA