WordPressでフロントエンドログインページとウィジェットを追加する方法

デフォルトのWordPressログインページは、最高の体験を提供できず、ユーザーを混乱させる可能性さえあります。そのため、ユーザーがウェブサイトの主要部分から直接ログインできるように、フロントエンドログインページを追加することをお勧めします。

これは、アクセシビリティと全体的なユーザー満足度を向上させます。さらに、サイドバーやフッターなど、サイトのさまざまな場所からユーザーがログインフォームにアクセスできるため便利です。

私たちは、ユーザビリティ向上のためにこの機能を提供する複数のオンラインストアやウェブサイトを作成してきました。これにより、フロントエンドのログインページで何が効果的で何が効果的でないかを学ぶことができました。

この記事では、WordPressにフロントエンドのログインページとウィジェットを簡単に追加する方法をご紹介します。

WordPressでフロントエンドログインが必要なのはなぜ、いつですか？

デフォルトでは、WordPressログインページにはWordPressのブランディングが表示され、通常は現在のWordPressウェブサイトのデザインと一致しません。

これは、小規模なWordPress ブログやウェブサイトに有効です。

ただし、会員制サイト、オンラインストア、またはユーザーが登録してログインできるその他のサイトがある場合は、フロントエンドのログインページとウィジェットを追加すると、ユーザーエクスペリエンスが向上します。

このページをブランドに合わせてカスタマイズしたり、WordPressサイドバーに簡単なログインフォームを追加したりすることもできます。

それでは、WordPress にフロントエンドのログインページとログインウィジェットを簡単に追加する方法を見てみましょう。このチュートリアルでは、最も簡単な3つの方法を紹介します。以下のリンクからお好みの方法にジャンプできます。

• 方法1：WPFormsを使用してWordPressにフロントエンドログインページとウィジェットを追加する
• 方法2：SeedProdでWordPressにフロントエンドログインページを追加する
• 方法3：テーママイログインを使用してWordPressにフロントエンドログインページとウィジェットを追加する
• エキスパートヒント：WordPressサイトメニューにログインボタンを追加
• ボーナス：WordPressログインフォームにCAPTCHAを追加する
• 動画チュートリアル
• よくある質問 (FAQ)

方法1：WPFormsを使用してWordPressにフロントエンドログインページとウィジェットを追加する

WPFormsは、市場で最高のWordPressお問い合わせフォームプラグインであり、600万以上のウェブサイトで使用されています。これにより、カスタムフロントエンドログインページとログインウィジェットをウェブサイトに簡単に作成できます。

WPBeginnerでは、お問い合わせフォームや年次アンケートの作成に使用しており、素晴らしい経験をしています。詳細については、WPFormsの詳細レビューをご覧ください。

まず、WPFormsプラグインをインストールして有効化する必要があります。詳しい手順については、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。WordPressプラグインのインストール方法

有効化したら、WordPress管理画面のサイドバーから WPForms » 設定 ページにアクセスして、ライセンスキーを入力してください。

このキーはWPFormsウェブサイトのアカウントから取得できます。

これが完了したら、WordPressダッシュボードからWPForms » Addonsページに移動して、User Registration Addonを見つけます。

次に、「アドオンのインストール」ボタンをクリックして、ウェブサイトにダウンロードしてアクティブ化します。

ユーザー登録アドオンを有効にしたら、管理画面のサイドバーから WPForms » 新規追加 画面に移動してフォームビルダーを起動してください。

ここから、作成しようとしているフォームの名前を入力して開始します。その後、単に「ユーザーログインフォーム」テンプレートを選択して、ユーザーログインフォームの作成を開始します。

これにより、テンプレートがフォームビルダーで起動します。右側にフォームのプレビュー、左側に利用可能なフィールドの列が表示されます。

テンプレートには、必要なユーザー名とパスワードフィールドがすでに含まれています。ただし、フォームをカスタマイズしたい場合は、サイドバーから追加のフィールドをドラッグアンドドロップできます。

詳細については、WordPress のカスタムログインページを作成する方法に関するガイドをご覧ください。

設定に満足したら、「保存」ボタンをクリックして変更を保存してください。

ログインフォームをページ/投稿に追加する

次に、ログインフォームをページまたは投稿に追加するには、管理エリアから、選択したページ/投稿をWordPressブロックエディターで開きます。

そこに着いたら、「+」ボタンをクリックしてブロックメニューを開き、WPFormsブロックを追加します。

その後、ブロック自体のドロップダウンメニューから作成したログインフォームを選択します。

最後に、「公開」または「更新」ボタンをクリックして設定を保存します。

ウェブサイトのサイドバーにログインフォームを追加

ウェブサイトのサイドバーにログインフォームを追加したい場合は、WordPressダッシュボードからAppearance » Widgetsページにアクセスしてください。

ここで、画面左上の「+」ボタンをクリックして、ブロックメニューを開きます。

ここから、サイドバーにWPFormsブロックを見つけて追加する必要があります。

これが完了したら、ブロック自体のドロップダウンメニューからログインフォームを選択します。

最後に、「更新」ボタンをクリックして設定を保存します。詳細については、WordPressサイドバーにログインフォームを追加する方法に関するガイドを参照してください。

これで、WordPressサイトにアクセスして、サイドバーにログインフォームを表示できます。

フルサイトエディターにログインフォームを追加

ブロックベースのテーマを使用している場合、上記の方法でウェブサイトのサイドバーにログインを追加することはできません。

FSEにログインフォームを追加するには、WordPressダッシュボードから[外観] » [エディター]ページにアクセスしてください。

これによりFSEが起動します。ここで「+」ボタンをクリックしてブロックメニューを開く必要があります。

ここから、WPFormsブロックを見つけて、ウェブサイトの好きな場所に追加してください。

その後、ブロック自体のドロップダウンメニューから作成したログインフォームを選択します。

最後に、「保存」ボタンをクリックして設定を保存します。

ボーナスのヒント: ログインフォームをさらにカスタマイズするには、WordPressフォームのスタイリング方法に関するチュートリアルをご覧ください。

方法2：SeedProdでWordPressにフロントエンドログインページを追加する

SeedProd は、市場で 最高のWordPressドラッグ＆ドロップページビルダー であり、100万以上のウェブサイトで使用されています。

現在のウェブサイトのデザインに合わせたり、ユニークなものにしたりできる、完全にカスタムなログインページを作成できます。

非常に初心者向けで、ログインページを構築するために使用できるプロがデザインしたログインページテンプレートが豊富に用意されています。

当社のパートナーブランドのいくつかは、このツールを使用してログインページを含むウェブサイト全体を設計しています。詳細については、SeedProdの完全なレビューをご覧ください。

まず、SeedProd プラグインをインストールして有効化する必要があります。詳細は、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。

アクティベートしたら、WordPress管理サイドバーからSeedProd » ランディングページ画面にアクセスし、「ログインページのセットアップ」ボタンをクリックして「ログインページ」オプションを選択します。

これで「テンプレート」画面に移動し、テンプレートを選択してドラッグ＆ドロップビルダーでページをカスタマイズできます。

空のテンプレートを使用すると、カスタムフロントエンドログインページをゼロからデザインすることもできます。

テンプレートを選択すると、ページ名を入力するように求められます。SeedProdは、そのページ名をログインフォームのランディングページのURLとして使用します。

これが完了したら、「保存してページの編集を開始」ボタンをクリックして続行します。

これにより、SeedProdのドラッグ＆ドロップビルダーが起動し、右側にログインページのプレビュー、左側に利用可能なフィールドが表示されます。

ここから、左側のメニューからブロックをドラッグして好きな場所に配置するだけで、ページに任意のブロックを追加できます。

詳細については、カスタムWordPressログインページの作成方法に関するガイドをご覧ください。

ページの設計が完了したら、上部にあるドロップダウンメニューの「公開」ボタンをクリックして設定を保存することを忘れないでください。

その後、WordPressダッシュボードに戻り、SeedProd » ランディングページに移動します。

ここから「ログインページ」セクションを見つけ、トグルをクリックして「非アクティブ」から「アクティブ」に切り替えます。これで、ログインページがウェブサイトで公開されます。

方法3：テーママイログインを使用してWordPressにフロントエンドログインページとウィジェットを追加する

サイトに非常にシンプルなフロントエンドのログインページを追加したい場合は、無料のTheme My Loginプラグインを使用できます。

まず、プラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。

有効化すると、プラグインは自動的にログイン、ログアウト、パスワード忘れ、登録用のページを作成します。

管理メニューからTheme My Login » Generalページに移動して、プラグインの設定を表示できます。

まず、ログインタイプを設定できます。「デフォルト」設定は、ログインにメールアドレスとパスワードを要求するため、最も安全です。

次に、登録設定を選択できます。ここではデフォルト設定を維持しました。ログインにはメールアドレスとパスワードの両方が必要です。

ユーザーが独自のパスワードを作成できるようにするには「パスワード」ボックスを、登録後に自動的にログインさせるには「自動ログイン」ボックスをチェックすることもできます。

その後、「スラッグ」設定でログインおよび登録URLを変更できます。

これらは自動的にリダイレクトを作成します。そのため、標準の「yoursite.com/wp-admin」ログインURLは「yoursite.com/login」にリダイレクトされます。

これらのURLは同じままにするか、変更することができます。

変更が完了したら、「変更を保存」ボタンをクリックしてください。

プレミアム拡張機能を使用するようにアップグレードしない限り、それ以上の高度な機能を追加することはできません。

それでも、シンプルなフロントエンドログインページを作成したい予算の限られたユーザーにとっては良いソリューションです。

ログインフォームをページ/投稿に追加する

次に、Theme My Loginによって作成されたログインフォームを追加するには、WordPressブロックエディターでページ/投稿を開きます。

ここから「+」ボタンをクリックしてブロックメニューを開き、ページにショートコードブロックを追加します。

その後、ブロックに次のショートコードを追加します:

[theme-my-login]

最後に、「更新」または「公開」ボタンをクリックして設定を保存します。

次に、ウェブサイトにアクセスしてログインフォームを表示します。

ウィジェットエリアにログインフォームを追加する

Theme My Loginブロックを使用して、WordPressウィジェットエリアにログインフォームを追加することもできます。

単純に 外観 » ウィジェット ページに移動し、「+」ボタンをクリックしてブロックメニューを開きます。

ここから、Theme My Loginブロックを見つけて、選択したウィジェットエリアに追加する必要があります。

その後、ブロック自体のドロップダウンメニューから追加したいフォームを選択します。

最後に、「更新」ボタンをクリックして設定を保存します。次に、WordPressサイトにアクセスして、ウィジェットエリアにログインフォームを表示します。

エキスパートヒント：WordPressサイトメニューにログインボタンを追加

フロントエンドのログインページを作成したら、ナビゲーションメニューにログインボタンを追加して、簡単にアクセスできるようにすることをお勧めします。

これにより、ユーザーはログインページを探すことなく、アカウントを見つけてアクセスできるようになります。

サイトメニューにログインボタンを追加するには、WordPressダッシュボードから外観 » メニューページにアクセスするだけです。

ここで、左側の列から「カスタムリンク」タブを展開し、フロントエンドログインページのURLを追加します。ログインボタンのリンクテキストを追加することもできます。

「メニューに追加」ボタンをクリックしてください。

その後、「メニューを保存」ボタンをクリックします。

WordPressサイトにアクセスして、ログインボタンが機能していることを確認してください。ユーザーがそれをクリックすると、自動的にフロントエンドのログインフォームページに移動します。

ただし、ブロックテーマを使用している場合、上記の С方法 は機能しません。

その場合は、WordPress管理サイドバーから外観 » エディターページにアクセスしてください。

これにより、フルサイトエディターが起動します。左側のメインデザインパネルで「ナビゲーション」を選択して、サイトのメインメニューの編集を開始します。

これを行うと、ナビゲーションメニューがフルサイトエディターで開きます。ここで、横にある「+」ボタンをクリックします。これにより、フロントエンドログインページの名前を入力するプロンプトが開きます。

結果に表示されたら、それをクリックしてナビゲーションメニューにリンクを追加します。

次に、左側のパネルから「ブロック」タブに切り替えます。

ログインボタンのアンカーテキストを好きなように変更できるようになりました。

完了したら、「保存」ボタンをクリックして設定を保存します。

さて、ログインボタンが機能しているかウェブサイトをご覧ください。

ボーナス：WordPressログインフォームにCAPTCHAを追加する

カスタムログインフォームを追加したら、CAPTCHAを追加することをお勧めします。このページはハッカーやスパマーの標的になりやすいためです。

CAPTCHAを追加すると、スパムボットをブロックし、ウェブサイトを保護できます。これはWPFormsで簡単に行えます。

プラグインを有効化したら、WordPressダッシュボードからWPForms » 設定ページにアクセスし、「CAPTCHA」タブに切り替えてください。

その後、CAPTCHAタイプとして「reCAPTCHA」オプションを選択します。

それが完了したら、Google reCAPTCHAウェブサイトにアクセスして、サイトキーとシークレットキーを作成する必要があります。これらのキーは、WordPressサイトにreCAPTCHAを統合するのに役立ちます。

これらのキーを追加した後、以前に作成したWordPressフォームを編集し、「設定」タブに切り替えるだけです。

次に、「スパム保護とセキュリティ」 オプションを選択し、「Google v3 reCAPTCHAを有効にする」スイッチをオンにします。次に、「保存」ボタンをクリックして設定を保存します。

これで、WordPressのログインフォームにCAPTCHAを正常に追加でき、スパムボットや自動攻撃に対してはるかに安全になりました。

より詳細な手順については、WordPressのログインおよび登録フォームにCAPTCHAを追加する方法に関するチュートリアルをご覧ください。WordPressのログインおよび登録フォームにCAPTCHAを追加する方法。

動画チュートリアル

文章での説明よりも動画での説明がお好みであれば、こちらのビデオチュートリアルをご覧ください。

WPBeginnerを購読する

よくある質問 (FAQ)

WordPress でフロントエンドのログインページやウィジェットを追加することに関して、読者からよく寄せられる質問をいくつかご紹介します。

すべてのWordPressサイトにフロントエンドログインページは必要ですか？

いいえ、全く問題ありません。管理者のログインのみ、または編集者がログインするだけのシンプルなブログやビジネスウェブサイトでは、デフォルトのWordPressログインページで問題なく使用できます。

フロントエンドのログインページは、会員制サイト、オンラインストア、フォーラムなど、ユーザーが定期的にサインインするサイトで最も価値があります。

ログイン後にユーザーを特定のページにリダイレクトするにはどうすればよいですか？

WPFormsやSeedProdを含むほとんどのログインページプラグインには、ログイン後のリダイレクトを処理するための組み込み設定があります。

通常、フォームまたはページの設定に、ユーザーをリダイレクトしたい特定のURL（アカウントダッシュボードや会員限定ページなど）を入力するオプションがあります。

開始するには、WordPressでログイン成功後にユーザーをリダイレクトする方法に関するチュートリアルをご覧ください。WordPressでログイン成功後にユーザーをリダイレクトする方法

フロントエンドフォームにソーシャルメディアログインボタンを追加できますか？

はい、可能です。多くのユーザー登録およびログインプラグインは、ソーシャルログイン用の拡張機能または統合機能を提供しています。

例えば、WPFormsは、GoogleでログインしたりFacebookでログインしたりするボタンを追加できるサービスと統合されており、ユーザーのプロセスをさらに簡単にします。

ご興味があれば、WordPressにソーシャルログインを追加する方法に関するチュートリアルがあります。これはお役に立てるでしょう。

カスタムログインページはウェブサイトの速度に影響しますか？

SeedProdやWPFormsのような高品質なプラグインで構築された場合、カスタムログインページはサイトの速度にほとんど影響を与えないはずです。

これらのツールはパフォーマンスのために最適化されています。重要なのは、適切にコーディングされたプラグインを使用し、ログインページの設計に過度に大きな画像や重いスクリプトを追加しないことです。

この記事が、WordPressにフロントエンドのログインページとウィジェットを追加するのに役立ったことを願っています。また、おすすめのWordPressログインページプラグインや、WordPressでカスタムログインURLを追加する方法についてのガイドもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。