WordPressでカスタムログインページを作成する方法

WordPressサイトのカスタムログインページを作成したいですか？私は複数のWordPressサイトでカスタムログインページを設定しましたが、これは見た目は小さいけれど、大きな違いを生む変更の1つです。デフォルトのWordPressログイン画面は、味気なく、一般的で、サイトから離れるリンクさえ含まれています。

良いニュースは？プラグイン1つだけで、完全にブランド化され、スタイル設定されたログインページに置き換えることができます。このガイドでは、WPFormsを使用してカスタムログインページを作成する方法を説明します。フォームの作成、デザインのカスタマイズ、ページの公開、デフォルトのログインURLのリダイレクトが含まれます。

今すぐカスタムログインページを作成しましょう！🙂

WordPressでカスタムログインページを作成する理由

すべてのWordPressサイトは同じデフォルトのログイン画面で出荷されます。WordPressのロゴ、プレーンな白い背景があり、訪問者が実際にどのサイトにサインインしているかを伝えるものはありません。変更する価値がある理由は次のとおりです。

• ブランディング。カスタムログインページは、ロゴ、色、メッセージを前面に押し出します。WPFormsでは、カスタムログインページを使用して、ユーザー向けの新しい機能やアップデートを強調しています。
• セキュリティ。カスタムログインページを作成すると、デフォルトのwp-login.phpURLをリダイレクトできます。これにより、ボットが実際のログインフォームを見つけられないため、ブルートフォース攻撃やログインスパムが減少します。さらに強力な保護のために、強力なWordPressセキュリティプラグインと組み合わせてください。
• プロフェッショナルな外観。サイトがメンバー登録、クライアントログイン、または学生アカウントを受け入れる場合、ブランド化されたログインページは信頼を築きます。訪問者は、ロゴを見た瞬間に正しい場所にいることを知ります。

そして、これが最も良い点です。これを実現するために、個別のログインカスタマイザープラグイン、ページビルダー、およびフォームプラグインをすべて必要とする必要はありません。WPFormsは、ログインフォーム、ビジュアルスタイリング、およびページ作成をすべて1つのツールで処理します。

WordPressでカスタムログインページを作成する方法

WPFormsとそのUser Registrationアドオンを使用して、完全なカスタムログインページを構築する方法を説明します。フォームの構築、ブランディングの追加、外観のスタイリング、ページの公開、およびボットが見つけられないようにデフォルトのWordPressログインURLのリダイレクトまで、すべてをカバーします。

ステップ1：WPFormsのインストールとUser Registrationアドオンの設定

まず、サイトにWPForms Proがインストールされている必要があります。User Registrationアドオンは、ログイン、登録、パスワードリセットフォームのテンプレートを提供するもので、Proティア以上で利用可能です。

まだWPFormsをお持ちでない場合は、料金ページから入手してWordPressサイトにインストールしてください。次に、ダッシュボードのWPForms » Addonsに移動します。

User Registration Addonを見つけて、インストールボタンをクリックします。これでセットアップは完了です。1つのプラグインと1つのアドオンで、カスタムログインページ、登録フォーム、パスワードリセットフォームを作成するために必要なすべてが揃いました。

今すぐWPForms Proを入手！:)

ステップ2：カスタムログインフォームの作成

次に、WPForms » Add Newをクリックしてログインフォームを作成します。

フォームに名前（「カスタムログインフォーム」など）を付け、User Login Formテンプレートを選択します。このテンプレートはログイン機能専用に構築されており、User Registrationアドオンがアクティブになっていないと表示されません。

テンプレートには、ユーザー名、パスワード、ログイン状態を保持するの3つのフィールドが最初から用意されています。

ログイン状態を保持するチェックボックスにより、訪問者は次回訪問時もログインしたままになります。これは些細なことですが、リピーターユーザーは毎回資格情報を入力する手間が省けます。詳細については、ログインフォームのドキュメントをご覧ください。

このテンプレートはそのまま使用することも、さらにカスタマイズすることもできます。最低限、ブランドのブランディングを追加することをお勧めします。これは次に実行することです。

ステップ3：ブランディングの追加とデザインのカスタマイズ

個別のログインページカスタマイザープラグインをインストールすることなく、ロゴの追加、色の変更、フォントの調整、ボタンのスタイリングが可能です。すべてWPFormsとWordPressブロックエディター内で完結します。

ロゴまたはブランディング画像を追加する

まず、コンテンツフィールドをフォームの先頭、タイトルのすぐ下にドラッグします。

コンテンツフィールドをクリックして、左側のフィールドオプションパネルを開きます。

ここに好きなものを追加できるテキストエディターが表示されます。ロゴを挿入するには、メディアを追加ボタンをクリックして、ブランド画像をアップロードします。

サイト上の他の画像と同様に、WordPressメディアギャラリーからロゴをアップロードします。

ブランディングが整ったら、保存をクリックします。デザインのインスピレーションがもっと必要ですか？アイデアについては、ログインページの例をご覧ください。

ブロックエディターでログインフォームをスタイリングする

他のほとんどのログインページガイドでは言及されないことですが、ログインフォーム専用のスタイリングプラグインは必要ありません。WPFormsには、WordPressブロックエディターに直接組み込まれたフォームスタイリング機能があります。

フォームをページに埋め込むと（ステップ5で実行します）、WPFormsブロックのサイドバーにスタイリングオプションが表示されます。そこから、以下をカスタマイズできます。

• 背景色、境界線の色、境界線の半径などのフィールドスタイル
• フォント、サイズ、色を含むラベルスタイル
• 背景色、テキストの色、境界線の半径、幅などのボタンのスタイル
• 間隔、配置、コンテナの背景などの全体的なフォームのスタイリング

これは大幅な時間節約になります。色のためのログインカスタマイザープラグインと実際のログイン機能のためのフォームプラグインを使い分ける代わりに、すべてWPFormsで行えます。

すべてのスタイリングオプションの完全なウォークスルーについては、ブロックエディターでフォームをスタイリングする方法ガイドを参照してください。ついでに、送信ボタンのテキストもカスタマイズしましょう。

フォームビルダー内の設定 » 一般に移動し、送信ボタンのテキストを「ログイン」などに変更します。

ステップ4：ログイン設定の設定

引き続きフォームビルダー内で、左側のパネルにある設定をクリックします。次に、正常なログイン後に何が起こるかを決定するために確認をクリックします。

ほとんどのサイトでは、ログイン後にユーザーをどこかにリダイレクトさせたいはずです。ホームページ、アカウントダッシュボード、またはその他のページに送信できます。「確認タイプ」を「URLに移動（リダイレクト）」に設定し、ターゲットURLを入力します。

確認しておくべき設定がもう一つあります。下にスクロールして「ユーザー登録」をクリックし、オプションを展開します。

ログイン中のユーザーにはフォームを非表示にするオプションをオンにします。これにより、すでにサインインしている人はログインフォームを見なくなります。代わりにカスタマイズしたメッセージを表示できます。

設定が完了したら「保存」をクリックします。

ステップ5：カスタムログインページの公開

ログインフォームは作成、ブランディング、設定が完了しました。次にページに配置しましょう。フォームビルダーの上部にある「埋め込み」ボタンをクリックします。

ポップアップでフォームをどこに埋め込みたいか尋ねられます。「新規ページを作成」をクリックします。

ページに名前を付けます（「ログイン」のようなもの）。「開始」をクリックします。

WordPressは、ログインフォームがすでに埋め込まれた状態でブロックエディターを開きます。これは、ステップ3のブロックのスタイリングオプションが表示される場所でもあるため、公開する前にここで色やフォントを微調整できます。

すべてが希望どおりに見えたら、「公開」をクリックします。カスタムログインページが公開され、数分で登録ユーザーを受け入れる準備が整います！

ステップ6：ログインページをナビゲーションメニューに追加する

ログインページは存在しますが、訪問者がそれを見つける方法が必要です。最も自然な場所は、サイトのナビゲーションメニューです。WordPressダッシュボードで「外観 » メニュー」に移動します。

すでにメニューが設定されている場合は、左側の「ページ」パネルでログインページを見つけて、「メニューに追加」をクリックします。

ログインページをメニューのどこに配置したいかにドラッグします。ほとんどのサイトでは、ナビゲーションバーの右端に配置します。メニューの表示場所（通常はヘッダーの場合は「プライマリメニュー」）を選択し、「メニューを保存」をクリックします。

サイトにまだメニューがない場合は、まず作成する必要があります。「メニュー構造」セクションの下にメニューの名前を入力します。

「メニューを作成」をクリックして設定します。次に、先ほど説明したのと同じ手順でログインページを追加します。保存後にホームページにアクセスして、ログインリンクが期待どおりに表示されていることを確認してください。

ステップ7：デフォルトのWordPressログインURLのリダイレクト

このステップはオプションですが、強くお勧めします。デフォルトでは、誰でも yoursite.com/wp-login.php にアクセスして、標準のWordPressログイン画面を見ることができます。

そのURLをカスタムログインページにリダイレクトすることで、エクスペリエンスを統一し、ボットによるサイトのターゲットを困難にします。

ここではWPCodeを使用します。これは、テーマファイルを編集せずにコードスニペットをWordPressに追加できる無料のプラグインです。

WPCodeをインストールして有効化し、「コードスニペット » + 追加」に移動します。「カスタムコードを追加（新規スニペット）」を選択します。

スニペットに「ログインページリダイレクト」のような名前を付け、リダイレクトコードを貼り付けます。コード内のURLをカスタムログインページのURLに合わせて更新してください。スニペットを保存をクリックします。

保存が成功すると確認メッセージが表示されます。

最後に、ページ上部にあるスニペットをアクティブに切り替えます。

これで、wp-login.phpにアクセスしようとする人は誰でも、代わりにブランド化されたカスタムログインページに自動的にリダイレクトされます。

ボーナス：カスタムパスワードリセットフォームの作成

サイトでユーザー登録が許可されている場合、カスタムパスワードリセットフォームも必要になります。それがないと、パスワードを忘れたユーザーはデフォルトのWordPressリセット画面に誘導され、せっかく構築したブランドエクスペリエンスが損なわれます。

ユーザー登録アドオンには、ユーザーパスワードリセットフォームテンプレートが含まれています。WPForms »新規追加に移動して選択してください。

このフォームは、ログインフォームをカスタマイズしたのと同じ方法でカスタマイズできます。コンテンツフィールドでブランドを追加し、ブロックエディターでスタイルを設定し、独自のページに公開します。詳細な手順については、WordPressでパスワードリセットフォームをカスタマイズする方法をご覧ください。

カスタムWordPressログインページに関するFAQ

WordPressのカスタムログインページを作成したい場合、既存のWordPressログイン画面をカスタマイズしたい場合、またはサイトの任意のページにログインフォームを追加したい場合、これらの回答は最も一般的な質問をカバーしています。

コーディングなしでWordPressログインページをカスタマイズできますか？

はい。WPFormsを使用すると、ドラッグアンドドロップビルダーとWordPressブロックエディターを通じて、カスタムログインフォームを完全に構築およびスタイル設定できます。CSSやPHPを一行も書かずに、色、フォント、ボタンのスタイルを変更し、独自のブランドを追加できます。

カスタムWordPressログインページに最適なプラグインは何ですか？

WPForms Proとユーザー登録アドオンをお勧めします。一部のガイドでは、フォーム、スタイル、ページレイアウトに別々のプラグインを使用することを推奨していますが、WPFormsはこれらすべてを処理します。

ログインフォーム、登録フォーム、パスワードリセットフォーム、およびビジュアルスタイリングツールが1つのパッケージに含まれています。利用可能なオプションをより広く確認するには、最高のWordPressログインページプラグインのまとめをご覧ください。

WordPressの任意のページにログインフォームを追加するにはどうすればよいですか？

WPFormsを使えば簡単です。ブロックエディターのWPFormsブロック、ショートコード、またはウィジェットを使用してログインフォームを埋め込むことができます。

これにより、ログインフォームを任意のページ、サイドバー、またはフッターに配置できます。完全な手順については、任意のページにログインおよび登録フォームを表示する方法をご覧ください。

デフォルトのWordPressログインURLをリダイレクトしても安全ですか？

はい、実際にはスマートなセキュリティ対策です。wp-login.phpをカスタムログインページにリダイレクトすると、デフォルトのURLをターゲットとするボットや自動スクリプトが実際のログインフォームに到達できなくなります。

リダイレクトコードがGETリクエストにのみ適用されるようにしてください。これにより、ログインフォームのPOST送信が正しく機能し続けます。

次に、完全な登録エクスペリエンスを構築する

これで、WordPressサイト用の完全にブランド化されたカスタムログインページが完成しました。パスワードリセットフォームと組み合わせることで、ユーザーは最初から最後までプロフェッショナルで洗練されたエクスペリエンスを得られます。

さらに、WPFormsでユーザー登録フォームを作成する方法をチェックしてください。セキュリティが最優先事項の場合は、WordPressで不正なパスワードリセットを防ぐ方法を学んで、さらにロックダウンしてください。

カスタムログインページを今すぐ作成

フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。

この記事がお役に立った場合は、FacebookとTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。