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

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

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

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

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

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

関連記事

会員サイトの構成

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

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

WP-Membersのインストール

プラグイン->新規追加から「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」と「メールアドレス」のフィールドです。

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

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

1. ラベルの修正：usernameからメールアドレスに変更
2. パターンの修正：メールアドレス入力用の正規表現を登録

正規表現はこちら

^[a-zA-Z0-9_+-]+(.[a-zA-Z0-9_+-]+)*@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{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への追記は完了です。

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

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

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

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

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