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のログインポップアップモーダルを簡単に作成する方法を紹介します。

Create a WordPress login popup modal

なぜWordPressログインポップアップモダルを作るのか?

オンラインショップや 会員制サイトを運営したり、オンラインコースを販売している場合、ユーザー登録やログインを許可していることが多いでしょう。

通常、ユーザーがログインリンクをクリックすると、初期設定のWordPressログインページか、サイト上の別のカスタムログインページに移動します。ログイン中、ユーザーは別のページにリダイレクトされます。

モーダルログインポップアップを使用すると、ユーザーを別のページに飛ばすことなくフォームを表示できます。ログイン中、ユーザーを好きなページにリダイレクトすることができます。

モーダルログインポップアップは、より速く、サイトでのユーザーエクスペリエンスを向上させます。より迅速で洗練されたユーザー体験は、売上とコンバージョンを向上させます。

ということで、WordPressで簡単にモーダルログインポップアップを作成する方法を見ていきましょう。無料のプラグインを使う方法と、プレミアムプラグインを使う方法の2つをご紹介します。

以下のリンクをクリックすると、お好きな方法にジャンプできます:

方法1:ログイン/サインアップポップアップを使用してモーダルログインポップアップを作成する

最初の方法では、ログイン/サインアップ ポップアッププラグインを使用します。これは無料のプラグインで、ユーザーが簡単にサイトにログインしたり、登録したりすることができます。

まず、ログイン/サインアップ ポップアップ プラグインをインストールして有効化する必要があります。WordPressプラグインのインストール方法はこちらをご覧ください。

有効化した後、WordPressの管理画面からログイン/サインアップポップアップ ” 設定に行くことができます。

Edit general settings of login popup plugin

一般設定では、ユーザー登録、自動ログイン、サインアップ、パスワードリセットを有効化できます。

それに加えて、プラグインは新規登録ユーザーに割り当てるWordPressユーザー権限グループを選択することもできます。初期設定では、「購読者」権限が割り当てられます。

下にスクロールすると、さらに多くの設定が表示されます。例えば、ユーザーがログイン中や登録中にリダイレクトURLを追加することができます。

More general settings of login popup plugin

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

次に、’Style’ タブに切り替え、ログイン/サインアップ ポップアップ モーダルを編集します。このプラグインでは、ポップアップの位置、幅、高さ、背景色、テキストの色などを変更できます。

Edit the login popup modal

その後、ポップアップモーダルのフォームフィールドをカスタマイズすることもできます。

WordPressダッシュボードからログイン/サインアップポップアップ ” フィールドに移動するだけです。ここでは、さまざまなフォームフィールドを有効化したり、ラベルを編集したり、必須フィールドにしたりすることができます。

Edit login form fields

それに加えて、ログイン/サインアップのポップアップにフィールドを追加する設定もあります。

上部にある「+ Add Field」ボタンをクリックし、ログインモーダルポップに追加するフォームフィールドを選択します。

Add more form fields to login modal

フォームフィールドをカスタマイズした後、モーダルログインポップアップをサイトに追加することができます。プラグインはサイトにポップアップを追加するさまざまな方法を提供します。

1.メニューにログインポップアップモダルを追加する

まず、WordPressのダッシュボードから外観 ” メニューを開きます。

その後、ログイン/サインアップポップアップメニュー項目が表示されます。表示したい項目を選択し、「メニューに追加」ボタンをクリックするだけです。

Add login to the menus

詳しくは、WordPressでナビゲーションメニューを追加する方法をご覧ください。

2.ログインポップアップモダルをアンカーリンクとして追加する

次に、サイトURLの末尾に#loginまたは#registerを追加し、ログインポップアップを内部リンクとして設置します。

例えば、URLは次のようになります:

<a href="www.mywebsite.com#login">Login</a>

これを行うには、投稿またはページを編集します。

コンテンツエディターに入ったら、3つの点をクリックし、「HTMLとして編集」オプションを選択します。

Edit as HTML option

その後、ログインのアンカーテキストに内部リンクを追加することができます。

さらに詳しく知りたい方は、WordPressでアンカーリンクを追加する方法をご覧ください。

3.ショートコードを使ってログインポップアップモダルを追加する

ログイン/サインアップのポップアップを追加するもう一つの方法は、ショートコードを使用することです。

サイト上の任意の場所に[xoo_el_action]ショートコードを入力するだけで、ポップアップを開くためのリンク/ボタンを作成することができます。

例えば、外観 ” ウィジェットにアクセスし、サイトのサイドバーにログインポップアップを表示するショートコードウィジェットブロックを追加します。

Add shortcode for login modal

完了したら、「更新」ボタンをクリックするだけです。

その後、サイトにアクセスしてログインポップアップの動作を確認できます。

Login popup modal preview

方法2:WPFormsとOptinMonsterを使用してモーダルログインポップアップを作成する

この方法では、WPFormsと OptinMonsterプラグインが必要です。

WPFormsは最高のWordPressお問い合わせフォームプラグインです。ユーザー登録アドオンにアクセスするには、少なくとも同社のProプランが必要です。

OptinMonsterは、市場で最高のWordPressポップアッププラグインと リードジェネレータソフトウェアです。サイト訪問者を購読者やカスタマイザーに変換するのに役立ちます。この投稿で使用しているMonsterLinks機能にアクセスするには、少なくともProプランが必要です。

詳細については、OptinMonsterのレビューをご覧ください。

WPFormsを使ってユーザーログインフォームを作成する

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

有効化した後、WordPressダッシュボードからWPForms ” Settingsにアクセスし、ライセンスを入力する必要があります。

Entering the WPForms license key

キーはWPFormsアカウントエリアにあります。

次に、WPForms ” Addonsのページに行き、ユーザー登録アドオンをインストールして有効化する必要があります。

The WPForms user registration addon

アドオンを有効化した後、WPForms ” Add Newページに移動して新しいフォームを作成する必要があります。

WPForms には複数のフォームテンプレートが用意されています。まず、フォームの名前を入力し、’ユーザーログインフォーム’テンプレートを選択します。そして ‘テンプレートを使う’ ボタンをクリックします。

Select the user login form template

このログインフォームテンプレートにはメールとパスワードのフィールドがあり、初期設定の WordPress ログインフォームと同様に動作します。

必要に応じて、画面の左側から追加フィールドをドラッグ&ドロップすることができます。

Customize your user login form

次に、パスワードフィールドをクリックすると、左側にフィールドオプションが表示されます。

パスワード」フィールドの説明ボックスに以下のコードを追加すると、パスワード忘れやユーザー登録などのオプションを表示することができます。

Can't remember your password? <a href="{url_lost_password}">Click here</a>. Don't have an account? <a href="{url_register}">Register here</a>.
Enter login form description

その後、「保存」ボタンをクリックして変更を保存する必要があります。

次に、「埋め込み」ボタンをクリックします。

Save and embed your form

ログインフォームを追加するオプションのポップアップウィンドウが開きます。

ショートコードを使う」オプションを設定してください。ボタンではなく、リンクとしてウィンドウに外観されます。

Create a new page

フォームの埋め込みコードが表示されるはずです。

このショートコードをコピーして、後で使うために保存しておこう。

Use shortcode option

ログインフォームの準備ができました。次に、OptinMonster を使用してモーダルポップアップを作成します。

OptinMonsterを使用してモーダルポップアップを作成する

まず、OptinMonsterのサイトにアクセスし、アカウントにサインアップする必要があります。

OptinMonster

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

このプラグインは、WordPressサイトとOptinMonster間のコネクタとして機能します。

有効化すると、ウェルカム画面が表示されます。既存のアカウントに接続する」ボタンをクリックしてください。

Connect your existing account

新しいウィンドウが開きます。

WordPressに接続」ボタンをクリックします。

Connect OptinMonster to WordPress

これでログインポップアップモーダルを作成する準備ができました。

WordPressの管理エリアからOptinMonsterにアクセスし、「最初のキャンペーンを作成」ボタンをクリックするだけです。

Create first OptinMonster campaign

OptinMonsterのダッシュボードが新しいページで開きます。

ログインフォームをポップアップに追加するには、キャンペーンタイプとして「ポップアップ」を選択する必要があります。

Choose a campaign type and template

次に、キャンペーンテンプレートを選択する必要があります。

OptinMonsterはテンプレートがあらかじめ用意されているので、すぐに選んで編集することができます。

テンプレートを選択すると、ポップアップウィンドウが開きます。キャンペーン名を入力してください。

名前を入力したら、「ビルド開始」ボタンをクリックする。

Enter a name for your campaign

ボタンをクリックすると、OptinMonsterキャンペーンビルダーにリダイレクトされます。

左側のメニューから、テンプレートにさまざまなブロックを追加できます。WPFormsブロックを追加します。

Add WPForms block

その後、左側のメニューにWPFormsブロックオプションが表示されるはずです。

フォーム選択」ドロップダウンメニューから、先ほど作成したログインフォームを選択することができます。

フォームが表示されない場合は、’Add Shortcode Manually’ オプションを選択し、WPForms でフォームを作成する際にコピーしたショートコードを入力してください。

Enter shortcode of login form

キャンペーンビルダーでフォームをプレビューできなくても心配しないでください。キャンペーンを公開するとフォームが外観表示されます。

次に、「表示ルール」タブに向かいます。OptinMonsterは強力なターゲティングオプションを提供します。

ここから、「MonsterLink™(クリック時)」表示ルールを選択します。

Select Monsterlink rule

その後、表示ルールとしてMonsterLinkが表示されます。

MonsterLinkコードをコピーする」ボタンをクリックしてください。このリンクは後で必要になります。

Copy Monsterlink code

これで、上部にある「公開する」タブに向かうことができます。

公開する状態を「下書き」から「公開する」に変更するだけです。

Publish your campaign

上部の「保存」ボタンをクリックし、キャンペーンビルダーを終了することを忘れないでください。

次に、キャンペーンのWordPress出力設定が表示されます。Visibility & Status」セクションで「Status」が「Published」になっていることを確認してください。

Check if status is published

右上の’Save’ボタンをクリックし、’Publish’セクションに移動して状態を有効にすることを確認してください。

WordPressにモーダルログインを追加する

次に、WordPressの新規ページを作成するか、既存のページを編集します。

コンテンツエディターに入ったら、「+」ボタンをクリックし、カスタムHTMLブロックを追加します。

Add a Custom HTML Block to Your Page

その後、カスタマイザーをカスタムHTMLブロックに貼り付けます。以下のようになります:

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">log in or register</a>

これはログインフォームであり、メールオプトインではないので、コード内の’今すぐ購読者’というリンクテキストを好きなものに変更したいでしょう。このチュートリアルでは、上のコードスニペットにあるように、’ログイン中または登録中’に変更しました。

上記のコードをWordPressのメニューやサイドバーなど、サイト上の任意のエリアに追加することもできます。

WordPress ページに変更を保存し、サイトにアクセスしてモーダルログインの動作を確認してください。

Login modal preview

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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 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

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

  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. Jiří Vaněk says

    This looks great. It usually annoys me on the web if I have to log in and the original page I was on disappears. This is a very elegant solution to prevent this. I have both Optin Monster and WP Forms and I’m definitely going to try this process. Thank you for the very detailed instructions.

  3. Danny says

    Thanks for the tutorial.
    When you say “Add the shortcode to a new page” do you mean we should create a new page and paste the shortcode?
    Does it mean this page will now become our Login/Registration page?

    • WPBeginner Support says

      If you wanted a login/registration page you would place it on a new page which means that page would be the login/registration page your visitors could use. :)

      管理者

  4. Danny says

    Thanks for the info,
    I guess they have removed Popup from the selection options. I only saw Dropdown and LinktoDefault.

    Am I the only one?

    • WPBeginner Support says

      Currently, it does not appear to be available with CSH Login, thanks for letting us know

      管理者

  5. Laura says

    Sometimes y’all have great info. But sometimes, it’s really frustrating when you only give instructions that require more plugins. I tell my clients that it’s better to keep plugins to a minimum, and when I’m trying to code something from scratch, looking for some snippets that’ll make the work easier, I feel let down when I come here. This is one of those cases. If you want to provide instructions using plugins, fine. But it would be awesome if you’d include an additional option showing how to do it from the ground up.

    Thanks, though, for the many things you DO help with a lot.

    • WPBeginner Support says

      Glad you find our articles helpful. In this case, it would have taken far more than just a snippet to set this up which is why our article for beginners is showing only plugin options :)

      管理者

  6. Bob says

    From the end user perspective these things are horrible. They may look nice but password managers like Lastpass have a hard time with them. Some work, others don’t.

返信を残す

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