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

WordPressのサイドバーにログインフォームを設置することで、ユーザーはサイトのどこからでも素早くログインすることができます。ログインフォームに簡単にアクセスできることで、eコマースサイトの売上アップやオンラインコースの継続率アップなどにつながります。

WPBeginnerでは、ログインフォームを適切な場所に設置するために、多くの人々のサイトデザインをお手伝いしてきました。私たちの経験から、デフォルト設定でログインオプションをサイドバーに表示する様々なテーマがあることを知っています。一方、私たちのようにWPFormsのようなプラグインを使用することで、さまざまなフォームを作成し、サイト上の任意の場所に表示することができます。

この投稿では、WordPressのサイドバーにカスタムログインフォームを簡単に追加する方法をご紹介します。

WordPressにカスタムログインフォームが必要なのはなぜか？

会員制サイトやオンラインショップを運営したり、オンラインコースを販売している場合、特定のアクションを実行するためにユーザーのログインが必要になることがあります。

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

WordPressのサイドバーにログインフォームを追加することで、ユーザーが簡単に素早くアカウントにサインインできるようになります。これは、エンゲージメントを高め、より良いユーザーエクスペリエンスを提供し、フォームコンバージョンを増加させます。

ということで、WordPressのサイドバーにログインフォームを簡単に追加する方法を見ていきましょう。サイドバーに初期設定のログインフォームを追加する方法とカスタマイザーのログインフォームを作成する方法を紹介します。

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

方法1：サイドバーに初期設定のWordPressログインフォームを追加する

サイトのサイドバーに初期設定のWordPressログインフォームを表示することができます。これにより、ユーザーがWordPress管理エリアにアクセスするためにユーザー名とパスワードを入力するのがとても簡単になります。

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

まず、WordPressダッシュボードから外観 ” ウィジェットにアクセスします。

ここから「+」ボタンをクリックし、「テーマ」見出しまでスクロールし、「ログイン／アウト」ウィジェットブロックをクリックしてサイドバーに追加することができる。

次に、ウィジェットエリアに’ログイン/アウト’ブロックが表示されます。ログインをフォームとして表示するオプションを有効化することができます。

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

その後、WordPressのサイトにアクセスし、初期設定のWordPressログインフォームを確認することができます。

すぐにフォームを確認する場合は、ログイン中であることに注意してください。フォームがメンバーにどのように表示されるかを確認するには、サイトからログアウトしてください。

方法2: WPFormsプラグインを使ってカスタムログインフォームを追加する

初期設定のWordPressログインフォームには、ユーザー名とパスワードのフィールドしかありません。しかし、より多くのフィールドとカスタマイズオプションを持つカスタムユーザー登録フォームを作成することができます。

それにはWPFormsを使うのが一番です。WPFormsは最も人気のあるWordPressフォームプラグインで、WPFormsのプレミアムバージョンではカスタムフィールド付きのWordPressログインフォームや登録フォームを簡単に作成することができます。

WPBeginnerユーザーはWPFormsクーポンを使用できます：SAVE50で50%オフで購入できます。

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

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

検証後、WPForms ” Addonsページに移動する必要があります。

ここから、「ユーザー登録アドオン」までスクロールダウンし、「アドオンのインストール」ボタンをクリックする必要があります。

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

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

まず、一番上にフォーム名を入力し、ビルトインされている’ユーザーログインフォーム’テンプレートを選択する必要があります。マウスオーバーして「テンプレートを使う」ボタンをクリックしてください。

ログインフィールドが表示されます。フィールドをクリックして編集したり、左のカラムから新規フィールドを追加することができます。

WPFormsはドラッグアンドドロップビルダーを使って追加できる複数のフォームフィールドを提供しています。例えば、ログインフォームに名前やCAPTCHAフォームフィールドを追加することができます。

その後、「設定」タブに向かい、「確認」セクションをクリックする。

ここでは、ユーザーがサイトへのログインに成功した後の処理を定義する必要があります。

オプション設定には、メッセージ、カスタマイザーページ、サイト内の任意のページへのリダイレクトURLなどがあります。

理想的には、ユーザーがログインしたら、あるページにリダイレクトしたいものです。これは、あなたのホームページ、WordPressの管理画面、または会員ダッシュボードやクライアントポータルなど、あなたのサイト上の他のページである可能性があります。

次に、上部にある「保存」ボタンをクリックして、フォームビルダーを終了します。

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

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

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

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

完了したら「更新」ボタンをクリックするのをお忘れなく。

カスタムログインフォームWordPressの機能を確認するために、あなたのサイトを訪問することができます。

また、WPFormsを使ってスパム対策機能付きのカスタマイザーユーザー登録フォームを作成することもできます。

この投稿がWordPressのサイドバーにログインフォームを追加する方法を学ぶのにお役に立てば幸いです。WordPressでユーザー登録を許可する方法と 最高のWordPressログインページプラグインのステップバイステップガイドもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.