WordPress でカスタムログインおよび登録ページを作成する方法は?

WordPressでカスタムログイン＆登録ページを作成すると、よりスムーズでブランドイメージに沿ったユーザーエクスペリエンスを提供できます。WordPressのデフォルト画面の代わりに、ページをデザイン。

カスタム設定では、ソーシャルログイン、セキュリティ強化、ユーザーロール、パーソナライズされたメッセージなどの便利な機能を追加できます。これにより、ログインプロセスがよりプロフェッショナルでユーザーフレンドリーになります。

このガイドでは、サイトを壊したり複雑なコードを書いたりせずに、ログインページと登録ページを構築およびカスタマイズする最も簡単な方法を学習します。

WordPressでカスタムログイン＆登録ページを作成する手順

WordPressのカスタムログイン・登録ページは、オーディエンスとのより深いつながりを築くための鍵となるでしょう。一緒にこの旅に乗り出し、ウェブサイトをカスタマイズ可能なインタラクティブなオンラインハブへと進化させる方法を見つけましょう。.

カスタムログインを作成する

WordPressカスタムデザインでは、ユーザーがアカウントにアクセスするための認証情報を入力するためのゲートウェイとして、カスタマイズされたログインページを作成します。標準的なログインページとは異なり、カスタムログインページはウェブサイトのスタイルやブランディングに合わせて作成され、シームレスなユーザーエクスペリエンスを提供します。また、強化されたウェブセキュリティ対策や、登録時に特定のユーザー情報を収集するためのフィールドなどの追加機能を組み込むこともできます。これは、ユーザーがログインし、WordPressウェブサイトを安全に利用するためのパーソナライズされたアプローチです。

続きを読む:ウェブサイトのセキュリティのために WordPress reCAPTCHA を追加するには?

WP Formsでフォームを作成する方法は次のとおりです。

ステップ1：WPFormsプラグインをインストールする

まず、WPForms プラグインをインストールしてアクティブ化する必要があります。.

ユーザー登録とログイン機能をご利用いただくには、WPForms Pro以上のバージョンが必要です。Pro版にはユーザー登録アドオンが付属しており、カスタムログインページを簡単に作成できます。.

WPForms をインストールしたら、 WPForms ⟶ Addons。

ユーザー登録アドオン」が見つかるまで下にスクロールしてください。ボタンをクリックしてインストールし、次のステップに進みます。

WordPress メンテナンス モードすると、訪問者を寄せ付けず、中断することなくプロセス全体を操作できます。

詳細はこちら: WordPressメンテナンスタスクをアウトソーシングして効率を最大化

準備完了！新しいカスタム ログイン フォームを作成しましょう。.

ステップ2：カスタムWordPressログインフォームを作成する

WPForms のインストールが完了したら、Web サイトの独自の外観と雰囲気を反映した新しい WordPress ログイン フォームを作成します。.

WPFormsへ移動⟶ 「新規追加」開始します

次に、WPFormsのテンプレート選択画面が表示されます。ユーザー登録アドオンを使用すると、以下に示すように、独自の機能を備えた複数の専用テンプレートにアクセスできます。.

フォーム ビルダーでフォームが開くと、ユーザー名、パスワード、および [ログイン情報を記憶する] のフィールドが含まれており、非常に包括的なカスタム ログイン ソリューションになっていることがわかります。.

ログイン情報を記憶する」フィールドは、このテンプレートでのみ利用可能な独自のフィールドです。このフィールドを使用すると、ユーザーはこのフォームを使用した後、ウェブサイトに戻るたびに自動的にログインできます。テンプレートはそのまま使用することも、他の機能を追加することもできます。

次の手順でその方法を説明します。.

興味深い記事： WordPressに必須のフォームプラグイン トップ5

ステップ3: ログインフォームにブランド画像を追加する

WPFormsを使えば、テンプレートを簡単に編集したり、新しいフォームを作成したりできます。例えば、ログインフォームにブランドを追加して、独自のフォームにすることができます。.

一つの方法は、ブランドを表すヘッダー画像を挿入することです。これを行うには、 「コンテンツ」フィールドをフォームの上部、タイトルのすぐ下にドラッグ＆ドロップします。

フォームにコンテンツ フィールドを追加した後、それをクリックしてフィールド オプション。

さあ、創造力を働かせましょう！左側の WYSIWYG エディターで、フォームに画像を追加したり、カスタムテキストを作成したりしてみましょう。.

WordPressのログインフォームにブランドイメージをプラスして、華やかに演出しましょう。 「メディアを追加」ボタンをクリックして、おしゃれなカスタム画像を。

モーダルウィンドウが開きます。WordPressでいつものように、ここから画像をアップロードできます。

取引を確定するには保存」を押してください

さらに読む： WordPressのおすすめお問い合わせフォームプラグイン

ステップ4: カスタムログインフォームの設定をカスタマイズする

それでは、ログインフォームの設定を見てみましょう。ここでは、フォームのボタンと、フォームを送信した後に訪問者が移動するページを管理できます。.

まず、フォーム ビルダーの左側にある[設定]

設定に入ると、 「全般」タブがすでに選択されており、まさにこれが必要な場所です。

一般設定内で、「送信ボタンのテキスト」まで下にスクロールし、 「ログイン」。

ログインが進行中であることをユーザーに知らせるため、 「送信ボタンの処理中テキスト」を調整しました

それでは、 「確認」セクションに移動しましょう。

ここでは、ログインフォームが送信された後のアクションを選択できます。ユーザーをWordPress管理画面に誘導することもできますが、多くのサイトではフロントエンドに戻す方が合理的です。.

この場合、ユーザーをホームページにリダイレクトします。.

先に進む前に、確認する設定がもう 1 つあります。.

フォームビルダーの「設定」タブを下にスクロールすると、 「ユーザー登録」メニューが表示されます。クリックするとオプションが表示されます。

ボタンを「オン」に切り替えることで、既にログインしているユーザーに対してこのフォームを非表示にすることができます。テキストボックスを使用して、ユーザーが既にログインしている場合にフォームの代わりに表示するメッセージをカスタマイズできます。.

さあ、実際に試してみましょう！他の設定も自由にチェックして、お好みに合わせて微調整してみてください。満足したら、フォームビルダー上部の保存」

こちらもご覧ください： MacにWordPressをローカルインストールする方法

ステップ5: カスタムログインフォームを公開する

素晴らしい時間です！新しく作成されたログインフォームは、世界に向けて準備万端です。.

どこに設置するか？選択肢はあなたの想像力次第で無限大です。

• その存在でページを飾ります。.
• 投稿内にシームレスに埋め込みます。.
• サイドバーで輝かせましょう。.
• または、フッターにぴったりと配置します。.

次に、カスタムWordPressログインページの作成に取り掛かります。準備はいいですか？フォームビルダー上部の「埋め込み」

次に何が起こるか見てみましょう –

1. フォームを埋め込む場所を尋ねるモーダルが表示されます。この例では、新しいページを作成します。「新しいページを作成」。
2. ページに名前を付けます。入力が完了したら、 「Let's Go」。
3. このアクションにより、ログインフォームが埋め込まれた WordPress ブロック エディターに移動します。.
4. これは、WPForms ブロックのフォーム スタイル設定オプションを利用して、フィールド、ラベル、ボタンの外観を簡単にカスタマイズするのに最適な場所です。.
5. カスタム ログイン フォームの外観に満足したら、 [公開]ボタンをクリックしてカスタム ログイン ページを公開します。

これで完了です。カスタム WordPress ログイン ページが公開され、使用できるようになりました。.

プロのヒント： ログイン中は非表示」を使用している場合は、完成したフォームを表示するにはWordPressからログアウトする必要があることに注意してください。そうしないと、ログイン中にログイン画面が表示されなくなります。訪問者が来る前にすべてが正しく表示されるようにするためのちょっとしたコツです。

ご存知ですか？ –新しいCF7 BlocksプラグインがContact Form 7にブロック機能を導入

ステップ6: ナビゲーションメニューにログインフォームを追加する

ああ、カスタムブランドのログインフォームの最終仕上げが終わったところです。素晴らしいですね！

それでは、訪問者が簡単にアクセスできるようにしましょう。鍵となるのは、ウェブサイトのナビゲーションメニュー。

開始するには、WordPress ダッシュボードに移動し、 「外観」、 「メニュー」。

外観 ⟶ メニュー

徹底的に、私たちは次のステップを踏みます。

1. テーマに既にナビゲーションメニューがある場合は、 「外観」 → 「メニュー」。左側の列からログインページにチェックマークを付け、 「メニューに追加」。
2. ログインページが他のメニュー項目と共に右側に表示されます。必要に応じてドラッグ＆ドロップで順序を変更できます。.
3. 次に、メニューを表示する場所を選択します。ほとんどのテーマでは、ヘッダーやフッターなど、最大5つの表示場所を選択できます。この例では、ヘッダー（多くの場合、プライマリメニューと呼ばれます）に追加します。.
4. 「プライマリメニュー」をクリックし、下部の「メニューを保存」

ナビゲーションメニューに新しいログインページが追加されました。メニューを更新または作成したら、ホームページにアクセスして、すべてが正常に表示されているかご確認ください。.

5. ウェブサイトにメニューが必要な場合は、同様に作成します。まず、 「メニュー構造」。

上記と同じ手順に従って、ログインページをナビゲーションに追加します。カスタムパスワードリセットフォームも作成している場合は、メニューに追加することを検討してください。.

もう一つのハウツーガイド： WordPressでワンページウェブサイトを作成する方法（3つの簡単なステップ）

ステップ7: WordPressログインページをカスタムログインページにリダイレクトする

この段階では、通常の WordPress ログイン ページを使用しようとしているユーザーが、新しいカスタム ログイン ページに送信されるようにする必要があります。.

これを実現するには、 WPCodeと、少しのコーディングの知識が必要になります。

WPCodeは、WordPressサイトに独自のコードを無料で追加できる便利なプラグインです。インストールして有効化したら、 「コードスニペット」、 「+スニペットを追加」、 「カスタムコードを追加」新しいスニペット。

次に、次の画面でスニペットに分かりやすく覚えやすい名前を付けます。例えば、「ログインページリダイレクト」と名付けました。

次に、提供されたコードを指定された領域に貼り付けます。

add_filter( 'login_url', function( $login_url, $redirect, $force_reauth ){ // ここでログイン ページの URL を変更します $login_url = 'https://sulliesflowers.com/login/'; if ( ! empty( $redirect ) ) { $login_url = add_query_arg( 'redirect_to', urlencode( $redirect ), $login_url ); } if ( $force_reauth ) { $login_url = add_query_arg( 'reauth', '1', $login_url ); } return $login_url;}, 10, 3);

https://sulliesflowers.com/login/ をカスタムログインページのURLに置き換えてください。「スニペットを保存」ボタンをクリックして変更を保存します。

リダイレクトが保存され適用されると、成功メッセージが表示されます。最後に、画面上部の設定を有効にして、スニペットを有効化してください。.

今後、ユーザーがログインしようとすると、カスタム ページに誘導されるようになります。.

WordPress でユーザー登録を作成するには?

カスタムユーザー登録フォームは、訪問者がウェブサイトでアカウントを作成するためのパーソナライズされたウェブページです。常連ユーザー向けのログインページとは異なり、このフォームは新規ユーザーを歓迎し、パーソナライズされたエクスペリエンスを提供するために詳細情報を集めることを目的としています。WP登録フォームでは、カスタマイズされたフィールドを追加することで、サイトの雰囲気にシームレスに溶け込ませ、さらに魅力的なアクセントを加えることができます。.

また、カスタム登録フォームを使用すると、必要な情報のみを収集できるため、サインアップのプロセスがわかりやすく、ユーザーフレンドリーになります。

別のハウツーガイド: WordPress のパスワードリセットページをカスタマイズするには?

ステップ1：WPFormsプラグインをインストールする

プラグインのインストールが最初のステップです。WPForms Proプランいただくと、ユーザー登録アドオンへのアクセスが提供され、ウェブサイトのユーザー向けに動的な登録フォームを簡単に作成できるようになります。

HTML 、 PHP 、 CSSの一切必要ないことです。直感的なドラッグ＆ドロップフォームビルダーを使えば、誰でも簡単にニーズに合わせたカスタムフォームを作成できます。

ステップ2：ユーザー登録アドオンを有効にする

アドオンは WordPress サイトに適切に統合されるため、有効化するのは簡単です。.

1. WordPress 管理画面からWPForms ⟶ Add-onsに移動します
2. アドオンのリストをスクロールするか、検索フィールドに「ユーザー登録」
3. インストールプロセスを開始するには、 「アドオンのインストール」をクリックします
4. インストールが完了すると、「ユーザー登録アドオン」のステータスが「アクティブ」。おめでとうございます！ユーザー登録アドオンの有効化に成功しました。
5. ユーザー登録アドオンが準備できたら、WPForms を使用して WordPress ユーザー登録フォームを簡単に作成できます。.

学ぶ： UmbracoからWordPressに移行する方法

ステップ3：WordPressユーザー登録フォームを作成する

このステップにより、基本的にユーザー情報をシームレスに収集し、WordPress サイトでの登録プロセスを合理化できます。.

フォローしてください –

1. 新しい登録フォームを作成するには、 WPForms ⟶ 新規追加。
2. フォーム設定画面に移動し、フォームに名前を付けてテンプレートを選択できます。.
3. 今回はWordPressのサインアップフォームを一から作成しますが、より手早く作成したい場合はテンプレートから始めることもできます。「空白のフォームを作成」。

4. フォーム ビルダー画面が表示されますが、空白のフォームを選択したため、フォームは空です。.
5. WPFormsは、必要に応じて追加できる様々なカスタムフィールドを含む、幅広いカスタマイズオプションを提供しています。次の手順では、これらの登録機能について詳しく見ていきます。.

ステップ4: ユーザー登録フォームのフィールドをカスタマイズする

洗練された登録フォームを作成してみましょう。ユーザー情報を素早く収集するために、必須項目のみをシンプルにまとめたシンプルなフォームです。フォームが短いほど、ユーザーが離脱する可能性が低くなります。しかし、私たちの経験では、WPFormsのフォーム放棄アドオンを使えば、リード獲得の可能性は依然として高いです。

それでは、ドラッグ＆ドロップビルダーを使って、フォームにフィールドを追加してみましょう。左側のメニューからフィールドを選択し、右側のフォームにドロップするだけです。.

必要なフィールドがすべて配置されるまで、この手順を繰り返します。.

私たちのフォームには次のものが含まれています:

1. 名前
2. メール
3. 単一行テキスト（ユーザー名を入力するための便利なツール）
4. パスワード

「ユーザー名」という単一行テキストフィールドをカスタマイズし、最大文字数制限を設定し、ユーザー名に使用できる文字数を制御する入力マスクも追加しました。

フィールドを調整するには、フィールドをクリックして「フィールドオプション」。「全般」タブでは、ラベルを調整したり、説明を追加したり、フィールドを必須としてマークしたりできます。

さあ、作り始めましょう！

さらに詳しく学ぶ： Umbraco vs WordPress：コンテンツ管理の正しい選択

ステップ5: WordPressユーザー登録フォームの設定を構成する

ユーザーアクティベーション方法

このステップでは、WordPress ユーザー登録フォームの設定を、ユーザーフローに合わせて設定します。

、「設定」⟶「ユーザー登録」をクリックします。次に、 「ユーザー登録を有効にする」有効にします。

このセクションで管理できる内容は次のとおりです。

• 各フォームフィールドを対応するユーザープロファイルフィールドにマッピングします

• 新規サインアップのデフォルトのユーザーロールを選択する

• 新規登録のメール通知をオンにする

• 登録後にユーザーが見る確認ページを選択します

ドロップダウンメニューを使用して、各フォームフィールドを適切なプロフィールフィールドにリンクします。次に、「ユーザーロール」セクションまでスクロールし、WordPressサイトで新規ユーザー向けに事前定義されたロールを1つ選択します。

新規ユーザー登録設定の変更

先ほど説明した設定を下にスクロールしていくと、「メール通知」セクションがあります。ここで、新規ユーザー登録時の通知を調整できます。.

オプションは次のとおりです:

• 新しいユーザーがサインアップしたときに管理者にメールを送信する
• ユーザーにアカウント情報を送信し、
• アカウントが有効化されたらユーザーに通知する

これらのメールのヘッダーと内容をカスタマイズしたい場合は、各通知タイプの横にある「テンプレートの編集」ボタンをクリックしてください。.

別のガイド: 非表示の WordPress 管理者ユーザーを削除するにはどうすればいいですか?

登録フォームの編集

WPForms は通知メールを送信するだけでなく、ユーザーがフォームを送信した後に確認メッセージも表示します。.

選択できる確認の種類は 3 つあります。

1. メッセージ:フォームが送信されたことを確認する簡単なメッセージが表示されます。
2. ページを表示:ユーザーは、登録に対する感謝の気持ちを表すために、サイト上の特定の Web ページに移動します。
3. URL に移動 (リダイレクト):商取引などの別の Web サイトにリダイレクトされます。

「設定」⟶「確認」からカスタマイズできます。この例では、デフォルトのメッセージタイプを使用し、ユーザーへの指示を追加しました。新規ユーザーがウェブサイトに登録した後、サンキューメッセージではなく、新しいWordPressアカウントに自動的にログインするようにしたい場合は、変更を保存してください。

次に、フォームをサイトに埋め込み、公開します。.

ステップ6: サイトにユーザー登録フォームを追加する

WordPress ユーザー登録およびログイン フォームを作成したら、それを WordPress ウェブサイトに追加します。.

1. フォームの埋め込み:
   • フォームビルダー画面の右上にある埋め込みをクリックします
   • 「新しいページを作成」を選択し、新しいページに名前を付けます。次に、 「Let's Go」。

• WPForms を使用すると、新しい登録フォームがすでに埋め込まれた WordPress エディターが開きます。.
• 「公開」をクリックしてください。これで完了です！WordPressサイトに登録ページが公開されました。

2. デフォルトの WordPress 登録 URL をリダイレクトする:
   • デフォルトの WordPress 登録 URL を新しいカスタム ログイン ページにリダイレクトすることを検討してください。.
   • デフォルトの WordPress ログイン ページはシンプルすぎてサイトのテーマと一致しないため、サイトに合わないように見える場合があります。.

これで、ユーザーはカスタム登録フォームを使用してサイトに登録できるようになります。登録後は、各ユーザーのデフォルトのWordPressプロフィールページから、役割やその他の設定を変更できます。.

ステップ7：ウェブサイトのメニューに登録ページを追加する

新規ユーザー登録フォームを公開したら、ユーザーが簡単に見つけられるようにする必要があります。その方法の一つは、WordPressサイトのメインメニューに追加することです。.

方法は次のとおりです。

1. WordPress ダッシュボードの「外観」⟶「メニュー」に移動します

2. 左側にリストされているオプションで新しい登録ページを探し、メニューに追加します。.
3. WordPressテーマのメニューに古い登録ページがある場合は、削除する必要があるかもしれません。変更は必ず保存してください。.
4. ヘルプが必要な場合は、WordPress メニューのチュートリアルを参照してください。.

これで完了です！WordPress 登録フォームを作成し、新しいユーザーがサイトに簡単にサインアップできるようにする方法を学びました。.

続きを読む：ウェブサイトにWordPressを使うべき10の理由

WordPressカスタムログイン＆登録ページを作成するメリット

WordPressウェブサイトにカスタムログインページと登録ページを作成することは、あなたとユーザーの両方に多くのメリットをもたらす賢明な選択です。ウェブサイトのこの重要な側面をコントロールすることで、ユーザーエクスペリエンス全体の向上、ブランドアイデンティティの強化、さらにはセキュリティ対策の強化にもつながります。.

ブランディング

ログインページと登録ページをカスタマイズすることは、まるでバーチャルな玄関に待望のリフォームを施すようなものです。クリエイティブなセンスがあれば、ブランドの鮮やかなロゴ、シグネチャーカラースキーム、そしてトレンドのタイポグラフィを瞬時にシームレスに統合できます。この一貫したブランディングは、ウェブサイトの独自のアイデンティティを瞬時に強化し、訪れるすべての訪問者に、一貫性のある記憶に残る体験を提供します。

最大限に活用するためのヒント:

• ブランドのロゴと配色を取り入れる
• すべてのページで一貫した外観と雰囲気を維持する
• ブランドアイデンティティを強化し、信頼を築く

続きを読む：低予算でブランディングするための5つのヒント

ユーザーエクスペリエンスの向上

WordPressのデフォルトのログインページと登録ページは簡素で、見た目の魅力に欠けています。これらのページをカスタマイズすることで、訪問者にとってより魅力的で使いやすいエクスペリエンスを提供できます。.

最大限に活用するためのヒント:

• 視覚的に魅力的で直感的なインターフェースを設計する
• 全体的な美観と使いやすさを向上させる
• ユーザーにシームレスで楽しい体験を提供する

続きを読む:悪い UX がビジネスにとって悪夢となるのはなぜでしょうか?

セキュリティの強化

カスタムログインページと登録ページを使用すると、2要素認証、キャプチャ認証、パスワード強度インジケーターといった追加のセキュリティ対策を実装できます。この追加の保護層は、潜在的なセキュリティリスクを、ウェブサイトを不正アクセスから保護するのに役立ちます。

最大限に活用するためのヒント:

• 2要素認証などの追加のセキュリティ機能を追加する
• ボット攻撃を防ぐためにキャプチャ認証を実装する
• セキュリティ強化のため、より強力なパスワード要件を適用します

続きを読む: WordPressマルウェア＆セキュリティスキャナーベスト10

サードパーティツールとの統合

カスタムログインページと登録ページは、ソーシャルメディアログイン、メールマーケティングプラットフォーム、顧客関係管理（CRM）システムなどのサードパーティ製ツールやサービスとシームレスに統合できます。この統合により、ユーザーのオンボーディングとデータ管理プロセスを効率化できます。.

会員サイトは正確なユーザーデータ、自動化されたワークフロー、簡単なオンボーディングに依存するため、シームレスな統合が不可欠です。

最大限に活用するためのヒント:

• 利便性のためにソーシャルメディアログインオプションを有効にする
• シームレスなキャンペーンのためにメールマーケティングプラットフォームと統合
• CRMシステムに接続して効率的なデータ管理を実現

続きを読む：ウェブエージェンシー向けプロジェクト管理ツール トップ10

結論

WordPressでカスタムログイン＆登録ページを作成すると、よりクリーンでブランド化された、ユーザーフレンドリーなエクスペリエンスを提供できます。適切なツールを使用すれば、デザインをカスタマイズし、セキュリティを強化し、ログインプロセスをプロフェッショナルでスムーズなものにすることができます。

いくつかの簡単な変更を加えるだけで、ユーザーがサイトとやりとりする方法が大きく変わり、ログイン ページが機能的かつ使いやすいものになります。

よくある質問