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

WordPressでカスタムログイン＆登録ページを作成することで、ユーザーによりスムーズでブランドイメージに合った体験を提供できます。デフォルトのWordPress画面ではなく、 ページをデザインする 。

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

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

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

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

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

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

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

でフォームを作成する手順は以下のとおりです WP Forms 。

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

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

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

WPFormsをインストールしたら、 WPForms ⟶ アドオン。

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

すると 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. それでは、ページに名前を付けてください。名前が決まったら、「 さあ始めましょう」。
3. このアクションにより、ログインフォームが埋め込まれた WordPress ブロック エディターに移動します。.
4. これは、WPForms ブロックのフォーム スタイル設定オプションを利用して、フィールド、ラベル、ボタンの外観を簡単にカスタマイズするのに最適な場所です。.
5. カスタムログインフォームのデザインに満足したら、「 公開」 ボタンをクリックしてカスタムログインページを公開してください。

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

プロのヒント： を使用している場合は [ログイン中は非表示] 、完成したフォームを表示するにはWordPressからログアウトする必要があることを覚えておいてください。そうしないと、ログイン中はログイン画面が表示されません。これは、訪問者がアクセスする前にすべてが正しく表示されていることを確認するためのちょっとしたコツです。

ご存知でしたか？ – 新しいCF7ブロックプラグインで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. にアクセスしてください WPForms ⟶ アドオン WordPressの管理画面から
2. アドオンのリストをスクロールするか、 ユーザー登録」 検索フィールドに「
3. をクリックします 「アドオンのインストール」 インストールプロセスを開始するには、
4. インストールが完了すると、ユーザー登録アドオンのステータスが 「アクティブ」。おめでとうございます！ユーザー登録アドオンの有効化が完了しました。
5. ユーザー登録アドオンが準備できたら、WPForms を使用して WordPress ユーザー登録フォームを簡単に作成できます。.

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

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

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

フォローしてください –

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

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

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

ユーザー情報を迅速に収集するために、必要最低限​​の項目のみを盛り込んだ、洗練された登録フォームを作成しましょう。フォームが短いほど、ユーザーの離脱率が低くなります。しかし、WPFormsの フォーム離脱対策 アドオンを使えば、そうした見込み客も確実に獲得できます。

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

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

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

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

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

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

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

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

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

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

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

まず、 [設定] ⟶ [ユーザー登録]。次に、 [ユーザー登録を有効にする] 、有効にします。

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

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

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

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

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

ドロップダウンメニューを使用して、各フォームフィールドを適切なプロファイルフィールドにリンクします。次に、 ユーザーロール エリアまでスクロールし、WordPressサイトで定義済みの新規ユーザー用ロールのいずれかを選択します。

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

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

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

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

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

別のガイド： 非表示のWordPress管理者ユーザーを削除する方法

登録フォームの編集

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

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

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

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

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

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

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

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

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

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

よくある質問