WordPress サイドバーにログインフォームを追加する方法

ウェブサイトでログインページを探すのがどれほどイライラするか、気づいたことはありますか？サイドバーにシンプルなログインフォームを設置することで、どこからでもサインインできるようになり、WordPressウェブサイトの問題を解決できます。

eCommerceストアの場合は、より多くの購入完了につながる可能性があります。オンラインコースの場合は、学生がより頻繁に戻ってくるのを助けることができます。そして、どのサイトにとっても、よりスムーズで魅力的なエクスペリエンスを作成します。

WPBeginnerでは、多くのサイトオーナーがログインフォームを適切な場所に配置するお手伝いをしてきました。テーマによってはすでにこのオプションが含まれていますが、含まれていない場合は、WPFormsのようなプラグインを使用すると、独自のフォームを作成し、好きな場所に表示するのが簡単になります。

このチュートリアルでは、WordPressサイドバーにカスタムログインフォームを追加する方法を説明します。

WordPressサイドバーにログインフォームを追加する理由

サイドバーのログインフォームは、ユーザーにアカウントへの即時アクセスを提供します。これにより、ログインプロセスが簡素化され、全体的な使いやすさが向上します。

WordPressサイドバーにログインフォームを追加する主な利点は次のとおりです。

• アクセシビリティの向上：ユーザーはサイト上のどのページからでも即座にログインできるため、専用のログインページを探す必要がなくなります。
• エンゲージメントの向上：ログインオプションが見つけやすくなると、メンバー、学生、または顧客は、コンテンツ、コース、またはアカウント機能に戻ってインタラクションする可能性が高くなります。
• コンバージョンの向上：Eコマースまたはメンバーシップサイトの場合、ログインプロセスを容易にすることで、ユーザーはアカウントにすばやくアクセスし、注文を追跡し、コースを続行し、購入を完了することができます。

それでは、WordPressサイドバーにログインフォームを簡単に追加する方法を見ていきましょう。デフォルトのログインフォームをサイドバーに追加する方法と、カスタムログインフォームを作成する方法を説明します。

下のリンクをクリックすると、お好みのセクションにジャンプできます。

方法1：サイドバーにデフォルトのWordPressログインフォームを追加する

デフォルトのWordPressログインフォームをウェブサイトのサイドバーに表示できます。

これにより、ユーザーはユーザー名とパスワードを簡単に入力して、ウェブサイトのアカウントや制限されたコンテンツにアクセスできます。このフォームには、「ログイン情報を記憶する」や「パスワードをお忘れですか？」といった便利なオプションもサイドバーに直接表示されます。

このチュートリアルでは、Hestiaテーマを使用します。使用しているWordPressテーマによってオプションが異なる場合があることに注意してください。

開始するには、WordPressダッシュボードから外観 » ウィジェットに移動する必要があります。

ここで、「+」ボタンをクリックし、「ログイン/ログアウト」を検索します。「ログイン/ログアウト」ブロックをクリックして、サイドバーに追加します。

次に、ウィジェットエリアに「ログイン/ログアウト」ブロックが表示されます。

ブロック設定パネル（通常は右側）で、「ログインフォームとして表示」オプションがチェックされていることを確認して、完全なログインフォームを表示します。

変更が完了したら、上部にある「更新」ボタンをクリックします。

その後、WordPressのウェブサイトにアクセスして、デフォルトのWordPressログインフォームが機能していることを確認できます。

フォームをすぐに確認すると、ログイン状態になります。メンバーにフォームがどのように表示されるかを確認するには、サイトからログアウトしてください。

方法2：WPFormsプラグインを使用したカスタムログインフォームの追加

デフォルトのWordPressログインフォームには、ユーザー名とパスワードのフィールドしかありません。代わりに、サイトのブランディングに一致し、追加機能が含まれるカスタムログインフォームを作成することをお勧めします。

そのための最良の方法は、WPFormsとそのユーザー登録アドオンを使用することです。これにより、カスタムフィールドを使用してカスタムログインフォームと登録フォームの両方を作成できます。

私たちは、お問い合わせフォームや年次アンケートを作成するためにもそれを使用しており、素晴らしい経験をしました。私たちの経験について詳しく知りたい場合は、詳細なWPFormsレビューをご覧ください。

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

有効化したら、ライセンスキーを入力するために WPForms » 設定 ページにアクセスする必要があります。ライセンスキーは、WPForms のウェブサイトにあるアカウントから取得できます。

確認後、WPForms » アドオン ページに移動する必要があります。

ここから下にスクロールして「ユーザー登録アドオン」を見つけ、「アドオンをインストール」ボタンをクリックします。

心配しないでください。登録アドオンと呼ばれていますが、カスタムログインフォームを作成するためにも使用します。

アドオンは、ウェブサイトに自動的にインストールおよび有効化されます。

これでカスタムWordPressログインフォームを作成する準備が整いました。WPFormsビルダーを起動するには、WPForms » 新規追加 ページにアクセスしてください。

まず、一番上にフォーム名を入力し、次に組み込みの「ユーザーログインフォーム」テンプレートを選択する必要があります。それをホバーして、「テンプレートを使用」ボタンをクリックするだけです。

フォームにあらかじめ読み込まれたログインフィールドが表示されます。フィールドをクリックして編集したり、左側の列から新しいフィールドを追加したりできます。

WPFormsは、ドラッグアンドドロップビルダーを使用して追加できる複数のフォームフィールドを提供します。たとえば、セキュリティを大幅に強化し、スパム送信を防ぐためにCAPTCHAフィールドを追加したり、送信ボタンのテキストをカスタマイズしたりできます。

このセキュリティアプローチは、ブルートフォース攻撃や不要なボット登録からユーザーアカウントを保護し、サイトの整合性を維持するのに役立ちます。

その後、「設定」タブに移動し、「確認」セクションをクリックします。

ここで、ユーザーがサイトに正常にログインした後に何を行うかを定義する必要があります。

オプションには、メッセージ、カスタムページ、またはサイト上の任意のページへのリダイレクトURLが含まれます。より有用なページにユーザーをリダイレクトすることをお勧めします。

メンバーダッシュボードやクライアントポータルのようなカスタムページに送信すると、デフォルトのWordPressプロフィールページよりもはるかに優れたユーザーエクスペリエンスを提供できます。

ホームページやその他の重要なページにリダイレクトすることもできます。次に、上部にある「保存」ボタンをクリックして、フォームビルダーを終了します。

ログインフォームの準備ができました。ここから、WordPress サイドバーに追加できます。

WordPress管理画面の外観 » ウィジェットページにアクセスするだけです。このページで、サイトのサイドバーウィジェットエリアに「WPForms」ウィジェットブロックを追加します。

次に、ドロップダウンメニューからユーザーログインフォームを選択できます。

右側の設定パネルでさらにオプションを表示できます。たとえば、フォームのタイトルと説明を表示するオプションがあります。

完了したら、「更新」ボタンをクリックすることを忘れないでください。

これで、ウェブサイトにアクセスして、カスタムログインフォームのWordPress機能を確認できます。

WPFormsを使用して、スパム対策機能を備えたカスタムユーザー登録フォームを作成することもできます。

サイドバーにログインフォームを追加することに関するよくある質問

WordPressのサイドバーにログインフォームを追加することについて、読者からよく寄せられる質問をいくつかご紹介します。

サイドバーログインフォームの外観をカスタマイズできますか？

はい、できます。WPFormsのようなプラグインを使用すると、フォームの外観を変更するためのスタイリングオプションにアクセスできます。より高度な変更については、カスタムCSSを使用してテーマのデザインと完全に一致させることができます。ただし、デフォルトのWordPressログインウィジェットはカスタマイズオプションが非常に限られています。

サイドバーにログインフォームを配置するのは安全ですか？

もちろんです。ログインフォームの場所はウェブサイトのセキュリティに影響しません。サイトの安全性は、強力なパスワードの使用、WordPressコア、テーマ、プラグインの更新、および優れたWordPressセキュリティプラグインの使用にかかっています。

サイドバーフォームにソーシャルログインオプションを追加できますか？

はい、ユーザーが簡単にサインインできるようにソーシャルログイン（GoogleやFacebookなど）を追加できます。これには通常、ユーザー登録システムと統合する別のソーシャルログインプラグインが必要です。

テーマにサイドバーがない場合はどうなりますか？

テーマにサイドバーがない場合は、フッターなどの他の利用可能な領域にログインフォームウィジェットを配置できます。または、メインナビゲーションメニューに「ログイン」リンクを追加して、ユーザーを標準のログインページに誘導することもできます。

この記事がWordPressサイドバーにログインフォームを追加する方法を学ぶのに役立ったことを願っています。また、WordPressでユーザー登録を許可する方法と最高のWordPressログインページプラグインに関するステップバイステップガイドも参照してください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。