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

WordPressサイトに独自のログインページを作成してみませんか？私はこれまで複数のWordPressサイトで独自のログインページを設定してきましたが、これは一見些細な変更に見えても、実際には大きな違いをもたらす機能の一つです。WordPressのデフォルトのログイン画面は、味気なくありきたりなデザインで、さらにサイト外部へのリンクまで含まれています。

良いニュースは？たった1つのプラグインを使うだけで、ブランドイメージを反映したスタイリッシュなログインページに置き換えることができるのです。このガイドでは、WPFormsを使ってカスタムログインページを作成する手順を詳しく解説します。フォームの作成、デザインのカスタマイズ、ページの公開、そしてデフォルトのログインURLへのリダイレクト設定までを網羅しています。

今すぐオリジナルのログインページを作成しましょう！ 🙂

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

すべてのWordPressサイトには、同じデフォルトのログイン画面が備わっています。そこにはWordPressのロゴと無地の白い背景が表示されているだけで、訪問者が実際にどのサイトにログインしようとしているのかを示すものは何もありません。これを変更する価値がある理由は次のとおりです：

• ブランディング。カスタムログインページなら、ロゴやブランドカラー、メッセージを前面に押し出すことができます。WPFormsでは、カスタムログインページを活用して、ユーザーに向けて新機能やアップデート情報をアピールしています。
• セキュリティ。 カスタムログインページを作成すると、デフォルトのページをリダイレクトできます wp-login.php URL。これにより、ボットが実際のログインフォームを見つけられなくなるため、ブルートフォース攻撃やログインスパムが減少します。これに強力な WordPress用セキュリティプラグイン さらに高い保護を実現します。
• プロフェッショナルな印象。サイト上で会員登録、クライアントのログイン、または学生アカウントの登録を受け付けている場合、ブランドイメージを反映したログインページは信頼感を醸成します。訪問者はロゴを見た瞬間に、正しいサイトにアクセスしていることを実感できるでしょう。

そして何より素晴らしいのは、これを実現するために、ログイン設定用のプラグイン、ページビルダー、フォームプラグインをそれぞれ個別に用意する必要がないことです。WPFormsなら、ログインフォーム、ビジュアルなデザイン、ページ作成のすべてを1つのツールで完結させることができます。

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

ここでは、WPFormsとその「ユーザー登録」アドオンを使用して、完全なカスタムログインページを作成する方法をご紹介します。フォームの作成、ブランド要素の追加、外観のカスタマイズ、ページの公開、そしてボットに見つからないようにWordPressのデフォルトログインURLをリダイレクトする方法まで、すべてを網羅しています。

ステップ1：WPFormsをインストールし、ユーザー登録アドオンを設定する

まず、サイトにWPForms Proをインストールする必要があります。「ユーザー登録」アドオンには、ログイン、登録、パスワード再設定用のフォームテンプレートが含まれており、Proプラン以上で利用可能です。

まだWPFormsをお持ちでない場合は、価格ページから入手して、WordPressサイトにインストールしてください。その後、ダッシュボードの「WPForms」＞「アドオン」に移動してください。

「ユーザー登録アドオン」を見つけて、ボタンをクリックしてインストールしてください。これで設定は完了です。プラグイン1つとアドオン1つがあれば、カスタムログインページ、登録フォーム、パスワード再設定フォームを作成するために必要なものはすべて揃います。

今すぐWPForms Proを入手しよう！ ᙂ WPForms Pro

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

さあ、WPForms » 新規追加をクリックして、ログインフォームを作成しましょう。

フォームに名前（「カスタムログインフォーム」など）を付け、次に「ユーザーログインフォーム」テンプレートを選択してください。このテンプレートはログイン機能専用に作成されたもので、「ユーザー登録」アドオンを有効にしないと表示されません。

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

「Remember Me」チェックボックスをオンにすると、訪問者は次回以降のアクセス時もログイン状態を維持できます。些細な機能ですが、リピーターが毎回ログイン情報を入力する手間を省くことができます。技術的な詳細については、ログインフォームのドキュメントをご覧ください。

このテンプレートはそのまま使用することも、さらにカスタマイズすることも可能です。少なくとも自社ブランドを反映させることをお勧めします。それでは、次にその作業を行っていきましょう。

ステップ3：ブランド要素を追加し、デザインをカスタマイズする

別途ログインページ用カスタマイズプラグインをインストールしなくても、ロゴの追加、色の変更、フォントの調整、ボタンのデザイン変更などが可能です。すべての操作は、WPFormsとWordPressのブロックエディタ内で直接行えます。

ロゴやブランドイメージを追加する

まず、フォームのタイトル直下の最上部に「コンテンツ」フィールドをドラッグして配置します。

「コンテンツ」フィールドをクリックして、左側にフィールドオプションパネルを表示します。

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

サイト上の他の画像と同じように、WordPressのメディアギャラリーからロゴをアップロードしてください。

ブランディングのデザインが決まったら、「保存」をクリックしてください。デザインのアイデアがもっと欲しいですか？ 参考になるログインページの例をぜひご覧ください。

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

他のログインページに関するガイドのほとんどが触れていない点があります。それは、ログインフォームに専用のスタイリングプラグインは必要ないということです。WPFormsには、WordPressのブロックエディタにフォームのスタイリング機能が標準で備わっています。

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

• 背景色、枠線の色、角丸などのフィールドスタイル
• フォント、サイズ、色などのラベルのスタイル
• 背景色、文字色、角丸、幅などのボタンのスタイル
• 余白、配置、およびコンテナの背景に関する全体的なスタイル設定

これで大幅な時間の節約になります。色設定用のログインカスタマイズプラグインと、実際のログイン機能用のフォームプラグインを別々に使い分ける必要がなく、すべてWPFormsで完結させることができます。

すべてのスタイル設定オプションの詳細については、ブロックエディタでのフォームのスタイル設定方法に関するガイドをご覧ください。ついでに、送信ボタンのテキストもカスタマイズしてみましょう。

フォームビルダー内の「設定」»「一般」に移動し、「送信ボタンのテキスト」を「ログイン」などの文字列に変更してください。

ステップ4：ログイン設定を行う

フォームビルダーの画面のまま、左側のパネルにある「設定」をクリックします。次に「確認」をクリックし、ログインが成功した後の動作を設定します。

多くのサイトでは、ユーザーがログインした後、どこかにリダイレクトさせたいでしょう。ホームページやアカウントのダッシュボード、あるいはその他のページへ誘導することができます。「確認タイプ」を「URLへ移動（リダイレクト）」に設定し、移動先のURLを入力してください。

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

ログイン済みのユーザーにフォームを表示しないようにするオプションを有効にしてください。これにより、すでにログインしているユーザーにはログインフォームが表示されなくなります。代わりに表示されるメッセージはカスタマイズ可能です。

設定が完了したら、「保存」をクリックしてください。

ステップ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ログインページに関するよくある質問

WordPress用のカスタムログインページを作成したい場合、既存のWordPressログイン画面をカスタマイズしたい場合、あるいはサイト内の任意のページにログインフォームを追加したい場合、これらの回答が最もよくある質問に対応しています。

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

はい。WPForms を使えば、ドラッグ＆ドロップビルダーと WordPress のブロックエディタだけで、カスタムログインフォームの作成やデザイン設定をすべて行うことができます。CSS や PHP を1行も記述することなく、色やフォント、ボタンのスタイルを変更したり、独自のブランド要素を追加したりできます。

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

「WPForms Pro」と「ユーザー登録」アドオンの組み合わせをお勧めします。フォーム、スタイル、ページレイアウトをそれぞれ別のプラグインで管理するよう推奨するガイドもありますが、WPFormsならこれら3つすべてを1つで処理できます。

ログインフォーム、登録フォーム、パスワード再設定フォーム、そしてビジュアルスタイリングツールが1つのパッケージにまとめられています。利用可能なオプションの詳細については、おすすめのWordPressログインページプラグインのまとめ記事をご覧ください。

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

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

つまり、ログインフォームを任意のページやサイドバー、フッターなどに配置することができます。詳しい手順については、「任意のページにログインフォームと登録フォームを表示する方法」のガイドをご覧ください。

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

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

リダイレクト処理がGETリクエストにのみ適用されるようにしてください。そうすれば、ログインフォームのPOST送信も正常に機能します。

次に、登録プロセスの全体像を構築する

これで、WordPressサイト用のブランドイメージを反映した完全なカスタムログインページが完成しました。パスワード再設定フォームと組み合わせることで、ユーザーは最初から最後までプロフェッショナルで洗練された体験を得ることができます。

最後に、WPForms を使ってユーザー登録フォームを作成する方法もぜひご覧ください。また、セキュリティを最優先にする場合は、WordPress で不正なパスワードリセットを防ぐ方法を知り、セキュリティをさらに強化しましょう。

今すぐ独自のログインページを作成しましょう

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

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