WordPressでアラートボックスを作成する方法

公開: 2023-02-12

Web サイトの訪問者数が安定しているのに、サインアップ数やコンバージョン数が思ったよりも少ない場合、それはあなただけではありません。 トラフィックを増やすために利用できるリソースはたくさんありますが、そのトラフィックをサイトで適切なアクションに導くことは別の話です.

考えられる解決策の 1 つは、アラート ボックスを使用することです。 これは強力でシンプルなツールで、WordPress サイトでのコンバージョンを劇的に増加させることができます. さらに、この機能の作成とカスタマイズは非常に簡単です。

目次
1.アラートボックスとは?
2.アラート ボックスを作成する理由
3.プラグインでアラート ボックスを作成する
3.1. ステップ 1: プラグイン (Popup Maker など) をダウンロードする
3.2. ステップ 2: ポップアップを作成する
3.3. ステップ 3: ポップアップのトリガーを構成する
3.4。 ステップ 4: アラート ボックスのスタイルを設定する
4.プラグインなしでアラート ボックスを作成する
4.1. ステップ 1: header.php ファイルを編集する
4.2. ステップ 2: カスタム CSS を追加する
5.WPエンジンでサイトを強化する

この記事では、アラート ボックスとは何か、そしてアラート ボックスを使用する理由について説明します。 次に、WordPress で独自のアラート ボックスを作成する方法を紹介します。 飛び込みましょう!

アラート ボックスとは

アラート ボックスはまさにその名の通りです。 何かが発生したことを訪問者に通知するために Web サイトに表示されるアラートです。 この機能は「ポップアップ」としてよく知られているかもしれません。

通常、WordPress のアラート ボックスは 2 つの形式のいずれかを取ります。 画面にポップアップが表示されるか、ページの上部に表示されるバー (「ハロー バー」と呼ばれることもあります) が表示される場合があります。

アラート ボックスを作成する理由

通常、アラート ボックスは、サイトで何か重要なことが起こっていることをユーザーに通知 (または警告) するために使用されます。 たとえば、WordPress アラート ボックスを使用して、他の方法では見られない製品の特別セールや一連の特集記事について訪問者に知らせることができます。

この機能のもう 1 つの非常に一般的な用途は、訪問者の電子メール アドレスを取得することです。 多くの WordPress アラート ボックス プラグインは、ユーザーがカーソルをサイトから離したときにポップアップするように設定できます (たとえば、タブを閉じるか、戻るボタンを押すため)。

これらの「土壇場」のアラートは、訪問者が離れる前に連絡先の詳細を取得する優れた方法であり、将来のコンバージョンにつながる可能性があります. これらのアラートは非常に効果的です。最高のパフォーマンスを発揮するポップアップのコンバージョン率は 9% を超えています。 言い換えれば、実装する努力をするだけの価値があります。

プラグインでアラート ボックスを作成する

WordPress プラグインのおかげで、独自のアラート ボックスを簡単に作成できます。 強力な (そして無料の) Popup Maker プラグインを使用して、すべてのステップを順を追って説明します。

ステップ 1: プラグイン (Popup Maker など) をダウンロードする

最初に行う必要があるのは、専用のプラグインを選択することです。 上で述べたように、無料の Popup Maker プラグインは十分にレビューされており、堅実な選択です.

このツールをインストールするには、WordPress ダッシュボードに移動し、 [プラグイン] > [新規追加]に移動します。 「popup maker」を検索すると、最初のエントリになります。

WordPress にポップアップ メーカー プラグインを追加する

次に、 [今すぐインストール]をクリックします。 インストールが完了したら、 [有効化]を選択してプラグインを有効化することを忘れないでください。 Popup Maker 自体は無料ですが、一部の機能を使用するにはプレミアム プランが必要です。

ステップ 2: ポップアップを作成する

Popup Maker をインストールすると、プラグインにちなんで名付けられた WordPress サイドバーに新しいエントリが表示されます それをクリックして、すべてのポップアップのリストを開きます。 最初は空ですが、それを修正しようとしています。

ポップアップを作成するには、画面上部の[新しいポップアップを追加]をクリックします。 これにより、WordPress エディターが開きます。

WordPress に新しいポップアップを追加する

この画面にアクセスすると、ポップアップの作成方法を示すチュートリアルが表示されます。 最初に名前を入力するように求められます。これにより、後でポップアップを識別できます。

その後、ポップアップ内に見出しとして表示されるオプションのタイトルを入力できます。 メイン エディター フィールドでは、ポップアップに表示するコンテンツを入力することもできます。 シンプルな連絡先フォームを作成したいだけの場合は、定義済みのショートコードを使用することもできます.

これらのショートコードは、ツールバーにポップアップ メーカーのロゴが付いた新しいボタンの下にあります。

ポップアップメーカーのショートコード WordPress

[サブスクリプション フォーム]をクリックして、電子メールをキャプチャするための基本的な連絡先フォームを挿入します。 フィールドとプライバシーの免責事項のテキストは、フォームをクリックして編集ボタンを選択することでカスタマイズできます。 テキストに加えて、スタイルとレイアウトには多くのオプションがあります。

ステップ 3: ポップアップのトリガーを構成する

ポップアップ フォームを作成したら、次のステップはそのトリガーを構成することです。 これらは、アラート ボックスがいつ表示されるかを決定します。

ポップアップ エディター画面で、 [ポップアップ設定]まで下にスクロールし、リストから[トリガー]を選択します。 次に、 [新しいトリガーの追加]をクリックします。

WordPress に新しいポップアップ トリガーを追加する

基本の Popup Maker プラグインには、ここに 3 つのオプションが含まれています: Click OpenTime Delay/Auto Open 、およびForm Submission 。 プレミアム プランを使用している場合は、トリガーとしてExit Intentを選択することもできます。これは、ユーザーがサイトを離れようとしたときにポップアップを表示する場合に使用するオプションです。

[ターゲティング]タブでアラート ボックスを表示するページを調整することもできます。 特定のページまたはデバイス タイプをアラートの表示から除外する場合は、この設定をカスタマイズしてください。

ステップ 4: アラート ボックスのスタイルを設定する

最後に、新しいアラート ボックスの外観をサイトのテーマに合わせて変更できます。 [ポップアップ設定]領域で、 [表示]を選択します。 そこでは、ポップアップが画面に表示される場所 (トップバーを含む) を変更したり、サイズと位置を設定したり、いくつかの利用可能なテーマから 1 つを選択したりできます。

カスタム スタイル アラート ボックス WordPress

完了したら、必ず[公開]ボタンを選択して変更を保存し、ポップアップを有効にしてください。

プラグインなしでアラート ボックスを作成する

プラグインを使用したくない場合は、いくつかのコードと少しの作業でアラート ボックスを自分で作成することもできます。 header.phpファイルを編集して、サイトに CSS を追加する必要があります。 この例では、ページの上部にアラート バーを作成します。

ステップ 1: header.php ファイルを編集する

最初に行う必要があるのは、 header.phpファイルにコードを追加することです。 これには、WordPress テーマ エディターを使用してアクセスできます。 ダッシュボードから、 [外観] > [テーマ エディター]に移動します。 次に、右側のサイドバーからテーマ ヘッダー (header.php)を選択します。

WordPress のヘッダー PHP ファイルにコードを追加する方法

次のコードをコピーして、ファイルの<head>セクションの最後に貼り付けます。

<div class="alertbar">All items 20% off!</div>

この追加後のファイルは次のようになります。

WordPress での PHP コードの追加例

「全品20%オフ!」というメッセージが表示されます。 アラートバーに。 好きなようにテキストをカスタマイズできます。

ステップ 2: カスタム CSS を追加する

最後に、カスケーディング スタイル シート (CSS) を使用してアラートのスタイルを設定する必要があります。 WordPress カスタマイザーを使用して CSS を追加できます。

これを行うには、WordPress ダッシュボードに移動し、 [外観] > [カスタマイズ] に移動します。 これにより、カスタマイザーでサイトが開きます。 サイドバーで、追加の CSSを選択します。 これにより、カスタム CSS を入力できるコード ボックスが開きます。

次のコードをテキスト フィールドに貼り付けます。

.alertbar {

background-color: #A9A9A9;

color: #FFFFFF;

display: block;

line-height: 45px;

height: 50px;

position: relative;

text-align: center;

text-decoration: none;

top: 0px;

width: 100%;

z-index: 100;

}

アラートは次のようになります。

上記のコードは、白いテキストの濃い灰色のバーを作成しますが、テーマに合わせて色とサイズを微調整できます. 完了したら、 [公開]をクリックして変更を保存します。

WP Engine でサイトを強化する

電子メールのサインアップを増やしたい場合でも、特別オファーについて訪問者に通知する簡単な方法が必要な場合でも、アラート ボックスはエレガントで効果的なソリューションです。 WordPress サイトに実装すると、コンバージョン率が大幅に向上します。

Popup Maker などの WordPress プラグインを使用してアラート ボックスを実装できます。 少しの CSS を使用して、比較的簡単に自分でコーディングすることもできます。 どちらの方法でも、サインアップとコンバージョンを増やすように設計されたカスタマイズ可能なアラートが表示されます.

サイトをさらに強化したい場合は、専用の WordPress ホスティング プランをチェックしてください。