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

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

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

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

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

WordPressでカスタムログインフォームが必要なのはいつ、なぜですか？

会員制ウェブサイト、オンラインストア、またはオンラインコースを販売している場合、ユーザーが特定の操作を実行するためにログインする必要がある可能性が高いです。

サイドバーはウェブサイト全体に表示されるため、ログインフォームがより目立ち、サイトのすべてのページから簡単にアクセスできるようになります。

WordPressのサイドバーにログインフォームを追加すると、ユーザーはアカウントにすばやくサインインできるようになります。これにより、エンゲージメントが向上し、ユーザーエクスペリエンスが向上し、フォームコンバージョンが増加します。

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

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

• 方法1：サイドバーにデフォルトのWordPressログインフォームを追加する
• 方法2：WPFormsプラグインを使用したカスタムログインフォームの追加
• サイドバーにログインフォームを追加することに関するよくある質問

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

ウェブサイトのサイドバーにデフォルトの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でもフォローできます。