WordPressログインポップアップモーダルを作成する方法（ステップバイステップ）

ウェブサイトにWordPressログインポップアップモーダルを追加すると、ユーザーのログインがスムーズになります。訪問者は現在のページを離れることなくサインインできるため、全体的なエクスペリエンスが向上します。

この機能を使用してユーザーエンゲージメントを維持し、サイトインタラクションを改善することに成功したウェブサイトをいくつか見てきました。これは、ログインプロセスを合理化するためのシンプルでありながら効果的な方法です。

この記事では、WordPressのログインポップアップモーダルを作成する手順を説明します。

WordPressログインポップアップモーダルを作成する理由

オンラインストアを運営していたり、オンラインコースを販売していたり、メンバーシップサイトをお持ちの場合は、ユーザーがウェブサイトに登録してログインできるようにしている可能性が高いでしょう。

通常、ユーザーがログインリンクをクリックすると、デフォルトのWordPressログインページまたはウェブサイト上の別のカスタムログインページに移動します。ユーザーがログインすると、再び別のページにリダイレクトされます。

残念ながら、これはユーザーにとって不便な場合があります。

モーダルログインポップアップを使用すると、ユーザーを別のページに送信せずにフォームを表示できます。ログイン後、ユーザーをリダイレクトして、任意のページに誘導できます。プロセスが迅速かつ洗練されているため、ユーザーエクスペリエンスを向上させ、コンバージョンを促進することができます。

これを踏まえ、無料プラグインと有料プラグインを使用してWordPressでモーダルログインポップアップを簡単に作成する方法をご紹介します。以下のリンクをクリックするだけで、お好みの方法にジャンプできます。

• 方法1：ログイン/サインアップポップアップを使用してモーダルログインポップアップを作成する
• 方法2：WPFormsとOptinMonsterを使用してモーダルログインポップアップを作成する
• ボーナスヒント：WordPressリードフォームでユーザーのジャーニーを追跡する

準備はいいですか？早速始めましょう！

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

最初のアプローチでは、無料プラグインであるLogin/Signup Popupプラグインを使用します。これにより、ユーザーはサイトに簡単にログインまたは登録できます。

まず、Login/Signup Popup プラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPress プラグインのインストール方法に関するガイドを参照してください。

有効化後、WordPress管理パネルからLogin/Signup Popup » Settingsに移動できます。

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

それに加えて、このプラグインでは、新しく登録されたユーザーに割り当てられるWordPressのユーザーロールを選択することもできます。デフォルトでは、「Subscriber」ロールが割り当てられます。

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

変更を加えた場合は、必ず「保存」ボタンをクリックしてください。

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

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

WordPress ダッシュボードから Login/Signup Popup » フィールド に移動するだけです。ここで、さまざまなフォームフィールドを有効化したり、ラベルを編集したり、必須フィールドにしたりできます。

それに加えて、ログイン/サインアップポップアップにさらにフィールドを追加するオプションもあります。

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

フォームフィールドをカスタマイズしたら、モーダルログインポップアップをウェブサイトに追加できるようになりました。このプラグインは、ポップアップをサイトに追加するためのさまざまな方法を提供します。

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

まず、WordPress ダッシュボードから 外観 » メニュー に移動します。

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

詳細については、WordPressでナビゲーションメニューを追加する方法に関するガイドを参照してください。

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

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

たとえば、URLは次のようになります。

<a href="https://www.myawesomesite.com/#login">Login</a>

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

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

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

WordPressにアンカーリンクを追加する方法に関するガイドに従って、さらに詳しく学ぶことができます。

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

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

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

たとえば、Appearance » Widgetsに移動し、ショートコードウィジェットブロックを追加して、ウェブサイトのサイドバーにログインポップアップを表示できます。

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

これで、ウェブサイトにアクセスして、ログインポップアップが機能していることを確認できます。

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

この方法は、ログインポップアップのデザインと動作をより細かく制御したい人に最適です。

WPFormsとOptinMonsterを組み合わせることで、強力なデザインオプション、高度な表示ルール（ユーザーが特定のリンクをクリックした後にポップアップを表示するなど）、およびメールマーケティングサービスとのより良い統合が可能になります。

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

OptinMonsterは、市場で最高のWordPressポップアッププラグインです。ウェブサイト訪問者を購読者や顧客に変換するのに役立ちます。

WPBeginnerでは、インタラクティブなポップアップを作成するために何度か使用しており、素晴らしい経験をしました。詳細については、完全なOptinMonsterレビューをご覧ください。

この記事で紹介するツールのMonsterLinks機能を利用するには、Proプランが必要であることを覚えておいてください。

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

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

有効化したら、WordPressダッシュボードからWPForms » 設定に移動し、ライセンスを入力する必要があります。

キーはWPFormsのアカウントエリアで見つけることができます。

次に、WPForms » Addonsに移動して、「User Registration Addon」をインストールしてアクティブ化しましょう。

アドオンを有効化した後、WPForms » 新規追加 に移動して新しいフォームを作成します。

次の画面で、まずフォームに名前を付ける必要があります。

次に、テンプレートギャラリーから事前作成済みのフォームテンプレートを選択します。「ユーザーログインフォーム」テンプレートを簡単に見つけるには、検索バーを使用できます。

見つけたら、「テンプレートを使用」ボタンをクリックできます。

このログインフォームテンプレートには、デフォルトのWordPressログインフォームと同様に機能するメールアドレスとパスワードフィールドがあります。

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

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

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

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>.

その後、「保存」ボタンをクリックして変更を保存すると、フォームを公開する準備が整います。

開始するには、「埋め込み」ボタンをクリックするだけです。

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

「ショートコードを使用する」オプションを選択してください。これはボタンではなく、ウィンドウ内のリンクとして表示されます。

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

ここで、後で使用するためにショートコードをコピーして保存します。

モーダルポップアップを作成するためにOptinMonsterを使用する

この時点で、ログインフォームの準備ができました。次のステップは、OptinMonsterを使用してモーダルポップアップを作成することです。

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

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

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

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

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

「WordPressに接続」ボタンをクリックするだけです。

接続したら、モーダルポップアップを作成する準備が整いました。

WordPress管理画面のOptinMonsterに移動し、「最初のキャンペーンを作成」ボタンをクリックするだけです。

次の画面で、キャンペーンとテンプレートを選択します。

ポップアップモーダルを作成するので、キャンペーンタイプとして「ポップアップ」を選択しましょう。

テンプレートに関しては、OptinMonsterは多くの事前作成済みテンプレートを提供しているため、必要に応じてすぐに調整できます。

テンプレートを選択すると、ポップアップウィンドウが開きます。キャンペーンに名前を追加するように求められます。

名前を入力した後、「ビルド開始」ボタンをクリックできます。

これが完了すると、OptinMonsterキャンペーンビルダーにリダイレクトされます。

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

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

「フォーム選択」ドロップダウンメニューから、作成したばかりのログインフォームを選択できます。

フォームが表示されない場合は、「ショートコードを手動で追加」オプションを選択し、WPFormsでフォームを作成したときにコピーしたショートコードを入力してください。

キャンペーンビルダーでフォームをプレビューできない場合でも心配しないでください。キャンペーンを発行するとフォームが表示されます。

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

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

オプションを選択すると、表示ルールとしてMonsterLinkが表示されるはずです。

「MonsterLinkコードをコピー」ボタンをクリックし、リンクを安全な場所に保管してください。後で必要になります。

これで、キャンペーンを公開する準備ができました。

キャンペーンビルダーの上部にある「公開」タブに移動するだけです。ここで、「公開ステータス」を「公開」に設定できます。

それが完了したら、変更を保存するために右上隅にある「保存」ボタンをクリックすることを忘れないでください。

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

これで、新しいWordPressページを作成するか、既存のページを編集できます。

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

その後、MonsterLink をカスタム HTML ブロックに貼り付ける必要があります。次のようになります。

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

デフォルトでは、MonsterLinkコードのリンクテキストは「今すぐ購読」と表示されます。これは、メールオプトインによく使用されるためです。

デフォルトのコードの例を次に示します。

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">Subscribe Now</a>

これはログインフォームなので、そのテキストを変更したいはずです。このチュートリアルでは、以下のコードスニペットで見られるように、「ログインまたは登録」に変更しました。

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

上記のコードをWordPressのメニュー、サイドバー、またはサイトのその他の領域に追加することもできます。

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

ボーナスヒント：WordPressリードフォームでユーザーのジャーニーを追跡する

WordPressでログインポップアップモーダルを作成する方法を学んだので、WordPressフォームのユーザーのジャーニーを追跡する方法を見てみましょう。

これは、ユーザーがログインまたは登録を決定する直前にどのコンテンツを見ているかを明らかにできるため、ログインフォームにとって特に役立ちます。その情報は、サイトのナビゲーションとユーザーエクスペリエンスを改善するのに役立ちます。

フォームの入力を完了させる要因を知ることで、そのプロセスを再現し、より多くのリードを獲得してビジネスを成長させることができます。Google Analytics は一部のユーザーアクティビティを表示できますが、フォームを送信した特定のユーザーにその行動を直接リンクさせることはできません。

そこで登場するのがWPFormsです。これは人気のフォームビルダープラグインで、「User Journey」アドオンが含まれており、ユーザーがどこから来たのか、どのような経路をたどったのか、フォームを送信する前に各ページにどれくらいの時間を費やしたのかを確認できます。

詳細については、WordPress リードフォームでのユーザーのジャーニーを追跡する方法に関するガイドを参照してください。

よくある質問 (FAQ)

WordPressでログインポップアップモーダルを追加することについて、読者からよく寄せられる質問を以下に示します。

WordPressログインポップアップのデザインをカスタマイズできますか？

はい、もちろんです。どちらの方法でも、ウェブサイトのブランディングに合わせるためのカスタマイズオプションが用意されています。通常、色、フォント、サイズを変更したり、独自のロゴを追加してシームレスな外観を作成したりできます。

ログインポップアップモーダルはモバイルデバイスでも機能しますか？

はい。OptinMonsterのような最新のポップアッププラグインは、完全にレスポンシブになるように構築されています。これは、ログインモーダルがデスクトップ、タブレット、スマートフォンで見栄えがするように自動的に調整されることを意味します。

ログインポップアップはウェブサイトの速度を低下させますか？

WPFormsやOptinMonsterのような適切にコーディングされ最適化されたプラグインを使用する場合、サイトのパフォーマンスに目立った影響はないはずです。これらのツールは軽量で効率的に読み込まれるように設計されています。

ポップアップにソーシャルログインボタンを追加できますか？

一部のプラグインでは、ソーシャルログイン機能を組み込み機能またはプレミアム機能として提供しています。たとえば、Login/Signup Popup プラグインのプロバージョンはソーシャルログインをサポートしています。これにより、ユーザーはさらに簡単にサインインできるようになります。

この記事がWordPressでログインポップアップモーダルを作成する方法を学ぶのに役立ったことを願っています。また、WordPressログインページプラグインのベストの完全なリストと、WordPressでログイン成功後にユーザーをリダイレクトする方法に関するガイドも確認できます。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。