WordPressでリンクまたは画像をクリックしたときにポップアップフォームを開く方法

ポップアップフォームは、リードの獲得、コンバージョンの向上、ウェブサイト訪問者のエンゲージメントを高めるための強力なツールとなり得ます。訪問者がリンクまたは画像をクリックしたときにポップアップを表示することで、さらに一歩進めることができます。

これはメールリストを増やすための実績のある方法です。ユーザーがアクションを起こすことから始まるため、より効果的です。人気のサイトでは、さらに多くの購読者を得るために、オプトインインセンティブを提供するためによく使用されます。

WPBeginnerでも、このテクニックを使ってメールアドレスを収集しています。例えば、右側のパネルにある封筒のアイコンをクリックすると、ニュースレター登録のためのポップアップフォームが表示されます。

この記事では、リンクまたは画像をクリックしたときにWordPressのポップアップを開く方法をステップバイステップでご紹介します。

「クリック時」ポップアップフォームとは？

クリックポップアップフォームは、ユーザーがWordPressウェブサイトのリンク、ボタン、または画像をクリックしたときに開くライトボックスポップアップです。

通常、ポップアップはユーザーがサイトにアクセスしたとき、またはサイトを離れようとしたときに表示されます。クリック時ポップアップフォームは、ユーザーの操作によってトリガーされます。

WPBeginnerでも、メールリストを成長させるためにクリック時ポップアップを使用しています。たとえば、ユーザーがすべてのソーシャルアイコンの横にあるサイドバーのメールアイコンをクリックすると、ポップアップが表示されます。

クリック時に表示されるポップアップフォームが効果的な理由

クリックポップアップフォームは、強力なゼイガルニク効果を利用しているため効果的です。これは、自分でアクションを開始したユーザーはそれを完了する可能性が高いという心理原則です。

ポップアップをトリガーするリンクまたはボタンをクリックしたとき、ユーザーはすでに興味を示しています。フォームポップアップが表示されると、それを使用する可能性が高くなります。

例えば、クリック時に表示されるポップアップを使用して、リードマグネットを提供できます。これは、ユーザーがメールアドレスと引き換えに取得できる、無料のダウンロード可能なリソース（電子書籍やPDFファイルなど）です。

ただし、ウェブサイトでクリック時に表示されるポップアップを使用する他の方法もあります。たとえば、ユーザーにクーポンコードの請求、製品に関する詳細情報の学習、アンケートへの回答などを促すことができます。

詳細については、サインアップを250％増やすためのポップアップ心理学の使用方法に関するガイドを参照してください。

とはいえ、ウェブサイトでクリック時に表示されるライトボックスポップアップを簡単に作成する方法を見てみましょう。

WordPressでクリック時に表示されるポップアップを作成する

クリック時に表示されるポップアップを作成する最も簡単な方法は、OptinMonsterを使用することです。これは、WordPress向けの最高のポップアッププラグインおよびリードジェネレーションソフトウェアです。

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

まず、OptinMonsterアカウントにサインアップする必要があります。Proアカウント（またはそれ以上）が必要なのは、クリック時ポップアップを作成できるMonsterLinks™機能が含まれているためです。

OptinMonsterのウェブサイトにアクセスし、「今すぐOptinMonsterを入手」ボタンをクリックして開始してください。

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

これにより、OptinMonsterアカウントをWordPressサイトに接続できます。

プラグインを有効化したら、アカウントを接続する必要があります。WordPressダッシュボードで自動的にウェルカムページに移動するはずです。

「既存のアカウントを接続する」ボタンをクリックしてください。

その後、新しいウィンドウが開きます。

「WordPressに接続」ボタンをクリックすると、OptinMonsterにサイトを追加できます。

OptinMonsterアカウントをWordPressサイトに接続したら、クリック時ポップアップを作成できます。

WordPressダッシュボードからOptinMonster » Campaignsに移動し、「最初のキャンペーンを作成」ボタンをクリックするだけです。

次に、OptinMonsterはテンプレートまたはプレイブックの選択を求めます。

「テンプレート」オプションを選択して、カスタマイズするキャンペーンテンプレートを選択できます。一方、「プレイブック」オプションでは、大手ブランドにインスパイアされたすぐに使えるキャンペーンを選択できます。

このチュートリアルでは、「テンプレート」オプションを使用します。

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

キャンペーンタイプはすでにポップアップに設定されているはずです。そうでない場合は、ポップアップをクリックして選択してください。次に、キャンペーンテンプレートを選択する必要があります。

テンプレートは後で変更できます。このチュートリアルでは「ベーシック」テンプレートを使用します。

テンプレートの上にカーソルを合わせ、「テンプレートを使用」ボタンをクリックするだけです。

次に、キャンペーンの名前を入力するように求められます。これはあなたのためだけのものです。心配しないでください、ユーザーには表示されません。

名前を入力して「作成開始」をクリックするだけで、ポップアップを作成できます。

OptinMonsterは、ドラッグ＆ドロップキャンペーンビルダーでテンプレートを自動的に読み込みます。

テンプレートのデフォルトテキストを編集したり、要素を追加または削除したりできます。左側のメニューからブロックをドラッグしてテンプレートにドロップするだけです。

フォーム内の要素をクリックし、左側のメニューオプションを使用して、任意の要素を削除することもできます。たとえば、「名前」フィールドをフォームから削除します。

まず、画面下部にある「Optin」タブをクリックする必要があります。その後、フィールドをクリックして選択すると、左側の列に利用可能なオプションが表示され、削除するオプションも含まれます。

ポップアップのデザインが完了したら、次のステップは、フォームに入力した後に人々が表示する「成功ビュー」をデザインすることです。

画面上部にある「Success」ビューに切り替えるだけです。

オプトインビューを編集したのと同じように、成功ビューを編集できます。たとえば、テキストを変更したり、リードマグネットをダウンロードするためのリンクを含めたりしたい場合があります。

ポップアップをメールリストに接続する

ポップアップに満足したら、画面上部の 連携 タブをクリックします。メールリストに追加できるように、OptinMonster を メールマーケティングサービス にリンクする必要があります。

ここから、画面左側の「+ 新規連携を追加」ボタンをクリックします。

次に、ドロップダウンリストからメールプロバイダーを選択できます。

ここから、指示に従ってOptinMonsterに接続してください。

ポップアップが表示されるタイミングを「クリック時」に設定する

次に、ユーザーがリンクをクリックしたときにポップアップが表示されるように設定する必要があります。

画面上部の表示ルールタブをクリックしてください。

OptinMonsterのデフォルトの表示ルールは「ページ滞在時間」です。これは、デフォルトのポップアップが、ユーザーが特定の時間そのページを見ている後に表示されることを意味します。

ただし、ドロップダウンをクリックして代わりに「MonsterLink™」（クリック時）オプションを選択することもできます。

その後、表示ルールに MonsterLink™ が表示されます。

リンクをクリックすると、MonsterLink™コードをコピーできます。これはすぐに必要になります。

クリック時ポップアップを公開する

次に、ページ上部の「公開済み」タブに移動し、キャンペーンのステータスを「下書き」から「公開」に変更できます。

これが完了したら、画面上部にある「保存」ボタンをクリックしてキャンペーンビルダーを閉じます。

次に、キャンペーンの「WordPress出力設定」が表示されます。「ステータス」ドロップダウンメニューをクリックし、「保留中」から「公開済み」に変更できます。それが完了したら、「変更を保存」ボタンをクリックします。

MonsterLinkをWordPressウェブサイトに追加する

次に、特別な MonsterLink™ をサイトに追加する必要があります。これを以前にコピーしなかった場合は、キャンペーンの「表示ルール」設定に戻ることで取得できます。

まず、新しい投稿またはページを作成するか、リンクを追加したい投稿またはページを編集する必要があります。

MonsterLink™はHTMLコードなので、カスタムHTMLブロックに貼り付ける必要があります。

WordPressコンテンツエディターにいるときに、(+)ボタンをクリックしてカスタムHTMLブロックを追加します。

次に、そのブロックにMonsterLink™をコピーします。次のようになります。

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

「今すぐ購読！」という言葉を、リンクに使用したい任意のテキストに変更できます。

リンクを配置したら、ページまたは投稿をプレビューして、正しく機能していることを確認できます。

ここに、実際のリンクがあります。リードマグネットを宣伝するために、テキストにスタイルを適用して、大きなテキストのボックスを作成したことに注意してください。

ヒント： MonsterLinks™では、テキストリンクだけでなく、コールトゥアクションボタン、画像、バナー、またはウェブサイトのナビゲーションメニューでもMonsterLinkを使用できます。

動画チュートリアル

このチュートリアルで、クリック時にWordPressポップアップフォームをトリガーする方法を学べたことを願っています。また、売上を伸ばすためのWooCommerceポップアップの作成方法やおすすめのWordPressバナープラグインに関するチュートリアルも参照してください。

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