カスタムログイン画面

BricksBuilderでカスタムログイン画面を作成する方法

BricksBuilder のフォームエレメントを使えば、WordPress のログイン画面を自由にデザインできます。
会員制サイトを構築する際には、ぜひ活用したい便利な機能です。
なおこの記事は、Bricks公式ドキュメントを参考にまとめたものです。

必要な3つのページを作成する

まずは以下の3つの固定ページを作成します（POPUPなど固定ページ以外では作れません）。

1. ログインページ
2. パスワードを忘れた方はページ
3. パスワードリセットページ

それぞれ BricksBuilder でページを編集し、フォームエレメントを使って設定していきます。

ログインページの設定

ログインフォームには、以下の3つの入力項目を追加します（下図参照）。

• ログインID（メールアドレス） … テキスト
• パスワード … パスワード
• ログイン情報を保存する … チェックボックスまたはスイッチ

次に アクションの設定 を行います。

アクションは 「ユーザーログイン」 を選択します。
必要であれば、このページからログイン後に遷移する リダイレクト先 も設定します（下図参照）。
一般的にはトップページやマイページになります。

さらに、「ユーザーログイン」タブで、どのフィールドをログインID／パスワードとして使うかを割り当てます。
併せて、エラーメッセージの文言もここで設定できます。

最終的に、このページがカスタムログイン画面として動作します（下図参照）。

「パスワードを忘れた方は」ページ

次に、パスワード再発行メールを送るページを作ります。
フォームには メールアドレスの入力欄を1つだけ 用意すればOKです。

アクションで 「パスワードを忘れた場合」 を選択します。
成功時のメッセージも設定できます（下図参照）。

アクションを選ぶと「パスワードを忘れた場合」という専用タブが追加されるので、そこで メールアドレスのフィールドを指定します。（下図参照）。

メール送信は WordPress の標準機能で実行されるため、Bricks 側でメール設定を行う必要はありません。
なお、メールのタイトル・本文・署名などは Bricks から変更できません。

パスワードリセットページ

パスワード再設定ページには、以下の2つの入力欄を用意します。

• 新しいパスワード（Name: pass1）
• 新しいパスワード（確認用パスワード、Name: pass2）

どちらも入力タイプは パスワード を選択します（下図参照）。

アクションでは 「パスワードリセット」 を選択します。
必要に応じてリダイレクト先（ログインページやトップページなど）も設定できます。

カスタムログイン画面の割り当て設定

3つのページが完成したら、Bricks の管理画面からこれらのページを認証ページとして紐づけます（下図参照）。

Bricks → 設定 → カスタム認証ページ（Custom Authentication Pages）

ここで、

• ログインページ
• パスワードを忘れた方はページ
• パスワードリセットページ

をそれぞれプルダウンから選択します。

最後に 「保存」 を忘れずに。

まとめ

BricksBuilder を使うと、WordPress のログイン画面を自分好みのデザインで作ることができます。

✔ 正しくログインできるか
✔ メールが送信されるか
✔ パスワードをリセットできるか

最後に、必ずテストして確認してください。