Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressのサイドバーにログインフォームを追加したいですか?

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

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

How to add a login form in your WordPress

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

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

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

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

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

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

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

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

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

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

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

Add a login out widget block

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

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

See a logout option and update widgets area

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

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

Default login form preview

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

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

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

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

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

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

Entering the WPForms license key

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

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

The WPForms user registration addon

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

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

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

Select the user login form template

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

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

Customize your user login form

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

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

Go to confirmation settings

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

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

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

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

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

Add WPForms widget block

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

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

Edit form settings and update

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

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

Custom login form preview

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

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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

6件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Paul Jurado says

    Does the Sidebar Login Plugin still work? The plugin site shows it hasn’t been updated in 3 years and therefore may have some compatibility issues. Please advise.

    • WPBeginner Support says

      The plugin appears to be working currently but we will certainly take a look at alternatives.

      管理者

  3. Hafsa says

    Hi,
    Could u plz tell me, if i can creat a custome login form for users without the need of registration??

  4. Zion Oyemade says

    Just a thought, the WordPress sidebar login has not being updated in two years. I’m wondering if this was an oversight considering that this blog post was recently updated.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。