Bricksのフォームウィジェットを使って会員楼六フォームを作る方法をわかりやすく解説

会員登録フォームを作る

目次(MENU)

Bricksのフォームで WordPress の会員登録フォームを作成する方法

Bricks のフォーム機能を使えば、WordPress の標準ユーザー機能を利用した 会員登録フォーム を簡単に作成できます。
今回は、実際に必要なフィールド作成からユーザー登録の紐づけ設定まで、順を追って解説します。

フィールドを作成

まずは、会員登録に必要な項目をフォームに追加します。

  • ユーザーID(ログインID)
  • パスワード
  • メールアドレス
  • ニックネーム(推奨)

(図:Bricksのフォームを使って会員登録フォームを作る)

Bricksのフォームを使って会員登録フォームを作る

ニックネームを作る理由

WordPress では ニックネームを設定しない場合、ユーザーIDがニックネームとして公開表示されてしまいます。
ユーザーIDはログイン情報の一部であるため、公開されるのは好ましくありません。
そのため、初期段階でニックネームの入力欄を作成しておくことをおすすめします。

ニックネームのフィールドでは
属性:名前 → nickname
と入力します。

Bricksのフォームを使って会員登録フォームを作る

各フィールドの設定

ユーザーID

  • タイプ:テキスト
  • 属性:名前 → username

(図:ユーザーIDフィールドの設定)

Bricksのフォームを使って会員登録フォームを作る

パスワード

  • タイプ:パスワード
  • 属性:名前 → password
  • パスワード表示/非表示切り替えを ON にすると、目玉アイコンを設定可能

(図:パスワード設定画面)

Bricksのフォームを使って会員登録フォームを作る

エラーメッセージ

パスワードの制限に合わせてカスタムのエラーメッセージを入力できます。
今回は「8文字以上」で設定するため、「パスワードは8文字以上です」と入力しておきました。

属性:パターン

正規表現で使用できる文字種の制限を設定できますが、複雑にするとユーザー体験が低下しやすいので、今回は設定していません。

Bricksのフォームを使って会員登録フォームを作る

アクションの設定

フォームが完成したら、次に アクションタブ を設定します。

  • 「ユーザー登録」
  • 「リダイレクト」

を選択します。

会員登録後は 会員マイページへリダイレクト する想定です。
成功メッセージもここで設定できます。(図:アクション設定画面)

Bricksのフォームを使って会員登録フォームを作る

ユーザー登録の紐づけ設定

フォームで作成した各フィールドを WordPress のユーザー情報に紐づけます。

パスワードの最低文字数

ここで「8文字以上」などの条件を設定できます。(図:パスワード条件設定画面)

会員登録後の動作

  • 今回は 自動ログイン を ON にしています。
  • 会員登録を審査制にしたい場合は OFF のままにしてください。
Bricksのフォームを使って会員登録フォームを作る

役割(ロール)

  • 編集者(Editor)
  • 投稿者(Author)
  • 寄稿者(Contributor)
  • 購読者(Subscriber)

の中から選択できます。
各権限の詳細は WordPress オフィシャルのドキュメントをご覧ください。

Bricksのフォームを使って会員登録フォームを作る

コードスニペットでニックネームを保存する

今回は会員登録時にニックネームも同時に保存したいため、コードスニペットを使用します。
以下のコードを functions.php または Code Snippets に追加してください。

add_action('user_register', function($user_id){
    if (isset($_POST['nickname'])) {
        wp_update_user([
            'ID' => $user_id,
            'nickname' => sanitize_text_field($_POST['nickname']),
        ]);
    }
});

これで、フォームの「nickname」フィールドが WordPress のユーザーのニックネームに反映されるはずです。

まとめ

Bricks のフォームを使った会員登録は、WordPress の標準機能を活かしつつ構築できます。
今回はニックネームを登録するためのコードを使用しましたが、一般的な会員登録フォームであれば Bricks の機能だけで十分に作成できます。

おまけ

Bricks の「カスタム認証」設定で、会員登録ページに作成した登録ページを指定して保存してください(下図参照)。

Bricksのフォームウィジェットを使って会員楼六フォームを作る方法をわかりやすく解説

この設定を行うことで、Bricks の動的タグがそのページを「会員登録ページ」として正しく認識するようになります。

なお、この設定をしていない場合でも、会員登録の機能自体は問題なく動作します。ただし、動的タグのリンク先が不明になったり、意図しないページへリダイレクトされる可能性があります。安定した認証フローのためにも、登録ページを明示的に設定しておくことをおすすめします。

参考になった:
会員登録する
お問い合わせはこちら

コメントして足跡を残す…

おススメの関連する記事: