TL;DR: コードなしでWordPressのアラートメッセージを追加する方法
2つのノーコードツールを使えば、数分でWordPressのアラートメッセージを任意のページに追加できます。知っておくべきことは以下の通りです。
- WordPressのアラートメッセージとは、訪問者に適切なタイミングで更新情報、エラー、プロモーションを表示する、スタイル設定された通知ボックスのことです。
- SeedProdのアラートブロックを使用すると、コードに触れることなく、任意のページやテーマテンプレートに情報、成功、警告、または危険メッセージを追加できます。
- OptinMonsterは、サイト全体の告知のために、サイトの上部または下部に固定されるフローティング通知バーを作成します。
- どちらのツールもコードなしで動作し、ドラッグ＆ドロップエディターと事前構築済みのテンプレートを備えています。
- アラートブロックは、Basicプランを含むすべてのSeedProdプランで利用可能です。
私はWordPressでアラートメッセージを使用して、在庫切れの警告、チェックアウト成功の確認、新しいブログ機能の強調などを行ってきました。これらは、訪問者が見る必要があるときに、更新、エラー、または通知を共有するためにサイトに表示される、小さくスタイル設定されたボックスです。
WordPressは、フォームの失敗やログインの成功時など、デフォルトでいくつかのアラートを表示します。しかし、それらは限定的であり、カスタマイズするには通常コードの編集が必要になります。
このガイドでは、カスタムコードを必要としないツールを使用して、独自のカスタムアラートメッセージを作成する2つの簡単な方法を紹介します。ドラッグ＆ドロップするだけで完了します。
WordPressにおけるアラートメッセージとは？
アラートメッセージとは、WordPressサイトに表示されるスタイル設定された通知ボックスで、訪問者に重要な更新情報、エラー、または確認を表示します。ヘッダー、フッター、サイドバー、ブログ記事やページ内など、サイトのさまざまな場所に表示できます。
WordPressは、ユーザーが正常にログインしたときや、お問い合わせフォームの送信にエラーがあったときなど、さまざまなイベントに対してデフォルトのアラートメッセージを提供します。これらのデフォルトのアラートメッセージは、情報提供とユーザーフレンドリーになるように設計されていますが、ウェブサイトの特定のニーズには常に十分とは限りません。
WordPressサイトにアラートメッセージを追加する理由
訪問者が注文を完了せずにチェックアウトページを離れようとしています。「在庫残り2点のみ」という単一の警告アラートは、販売を成立させるための後押しとなる可能性があります。
たとえば、ウェブサイトの新機能についてユーザーに通知したり、eコマース製品の割引コードを提供したりしたい場合があります。同様に、ショッピングカート内の商品についてユーザーに警告したり、チェックアウトが正常に完了した後に成功メッセージを表示したりしたい場合があります。
調査によると、最もパフォーマンスの高い通知ポップアップのコンバージョン率は9%以上であり、標準的なページ要素と比較して大幅な向上です。カスタムアラートメッセージを追加することで、オーディエンスに重要な情報を伝え、緊急性を高めることができます。
WordPressで使用できるアラートメッセージの種類
WordPressには、訪問者に何をしてほしいか、または何を知ってほしいかによって追加できる、WordPressアラートボックスとも呼ばれるいくつかの種類のアラートメッセージがあります。それぞれ異なる目的を果たし、メッセージのスタイルはユーザーが一目で状況を把握するのに役立ちます。
- 情報メッセージ：新しい機能やブログ投稿についてユーザーに知らせるなど、一般的なヒント、リマインダー、または更新に使用します。
- 成功メッセージ：フォーム送信、アカウント作成、購入完了など、何かがうまくいったことを確認します。
- 警告またはエラーメッセージ：在庫切れ、アクションの失敗、またはシステムエラーなど、緊急の注意が必要なアラートに最適です。
各タイプを適切なタイミングに合わせるための簡単なガイドを以下に示します。
- 情報：アクションを必要としない新機能、発表、または役立つヒント。
- 成功：注文確認、フォーム送信、または完了したすべてのアクション。
- 警告：在庫切れ通知、期限切れオファー、またはカートに残っている商品。
- 危険：システムエラー、セキュリティアラート、または即時の注意が必要な重大な問題。
WordPressにカスタムアラートメッセージを追加する方法（簡単な2つの方法）
WordPressにカスタムアラートメッセージを追加する方法はいくつかあります。手動で機能をコーディングしたり、WordPress通知バープラグインをインストールしたり、ポップアッププラグインを使用したり、通知ソフトウェアを試したりできます。今日は、最も簡単な方法の2つ、WordPressのドラッグ＆ドロップウェブサイトビルダーと強力なポップアップソフトウェアの使用方法を紹介します。
どちらのソリューションも簡単で、技術的な知識は必要なく、カスタムCSS、HTML、PHP、Javascriptなどのコードを使用する必要はありません。
PHPやCSSの編集に慣れている場合は、数行のコードでアラートバーを追加することもできます。しかし、これらのノーコードの方法はより速く、開発者を必要としません。
方法1：SeedProdを使用してWordPressアラートメッセージを表示する
最初の方法では、SeedProdを使用します。これは、100万人以上のユーザーを持つWordPress用のドラッグ＆ドロップウェブサイトビルダーです。
SeedProdを使用すると、コードに触れることなく、WordPressサイトのどこにでもアラートボックスを簡単に追加できます。タイプを選択し、スタイルをカスタマイズすれば、すぐに公開されます。
それでは、始める準備ができたなら、以下の手順に従ってSeedProdでWordPressにカスタムアラートメッセージを作成しましょう。
ステップ1：SeedProdプラグインのインストールと有効化
まず最初に、SeedProdの価格ページにアクセスしてプラグインをダウンロードする必要があります。これについてヘルプが必要な場合は、SeedProdのインストールに関するドキュメントに従ってください。
注意：SeedProdには無料版があり、SeedProd（アラートブロックはBasicを含むすべてのプランで利用可能）を使用します。
プラグインを有効化した後、SeedProd » Settingsに移動し、ライセンスキーをライセンスボックスに貼り付けます。
ライセンスキーはSeedProdウェブサイトのアカウントダッシュボードにあります。キーを入力したら、Verify Keyボタンをクリックします。
次に、作成したいレイアウトのタイプを決定する必要があります。SeedProdを使用すると、ランディングページビルダーを使用して個別のWordPressページを作成するか、テーマビルダーを使用してカスタムWordPressテーマを作成できます。
現在のWordPressテーマの使用を続けたい場合は、ランディングページビルダーオプションをお勧めします。ただし、テーマを置き換えて、ヘッダー、フッター、サイドバー、その他のテーマテンプレートにアラートボックスを追加したい場合は、テーマビルダーが最適です。
このチュートリアルでは、テーマビルダーオプションを使用します。ただし、ランディングページを作成したい場合は、WordPressでランディングページを作成する方法に関するこのガイドに従うことができます。
プロのヒント：アラートボックス機能は、どちらのオプションでも使用できます。
ステップ2：WordPressテンプレートキットを選択する
テーマビルダーオプションを選択するので、次のステップはSeedProd » Theme Builderページにアクセスすることです。そのページで、ウェブサイトのレイアウトを選択するためにTheme Template Kitsボタンをクリックする必要があります。
クリック一つでサイトに追加できる ウェブサイトキット のライブラリがすぐに表示されます。トップバーのフィルターを使用して、テンプレートを人気順、新着順、WooCommerceなどで並べ替えることができます。
気に入ったテンプレートを見つけたら、その上にカーソルを合わせてチェックマークアイコンを選択し、WordPressサイトに追加します。数秒で、SeedProdはデモの特定のページやコンテンツを含むテンプレート全体をインポートします。
そこから、WordPressダッシュボードでテーマを構成する個々の部分が表示されます。各テーマ部分にカーソルを合わせてEdit Designリンクをクリックすることで、カスタマイズできます。
例えば、以下のチュートリアルの助けを借りて、以下のようなことができます：
- カスタムブログページを作成する
- カスタムシングル投稿テンプレートを構築する
- WordPressのホームページを編集する
- WordPressのヘッダーをカスタマイズする
- WordPressのフッターを編集する
- カスタムサイドバーを作成する
- その他多数。
さらに、About、Contact、Servicesページなどの個々のページをカスタマイズすることもできます。単にPages » All Pagesにアクセスし、カスタマイズしたいページの横にあるEdit with SeedProdリンクをクリックしてください。
始めるために、WordPressのホームページにアラートメッセージを追加する方法を示します。ホームページテンプレートにカーソルを合わせて、Edit Designリンクをクリックしてください。
ステップ3：アラートメッセージブロックの追加とカスタマイズ
テンプレートを開くと、SeedProdのドラッグ＆ドロップウェブサイトビルダーが表示されます。左側にはWordPressブロックと設定があり、右側にはホームページのライブプレビューがあります。
プレビューのどこかをクリックしてテンプレートコンテンツをカスタマイズし、変更をリアルタイムで確認できます。さらに、左側のパネルから新しいWordPressブロックをページにドラッグして、機能を追加することもできます。
このようにして、ホームページにアラートメッセージを追加します。高度なブロックパネルでアラートブロックを見つけ、表示したい場所にドラッグしてください。
ブロックが配置されたら、その外観とウェブサイト訪問者に表示されるメッセージをカスタマイズできます。
まず、「Type」ドロップダウンメニューをクリックし、Info、Success、Warning、Dangerなどのアラートタイプを選択します。
次に、アラートにタイトルを付けます。ユーザーがメッセージを閉じることができる閉じるボタンを有効または無効にすることもできます。
次に、アラートの説明を入力して、ユーザーにより多くの情報を提供します。その下で、タイトルと説明、サイズ、配置、見出しレベルを変更できます。
アラートを目立たせるために、カスタムアイコンを追加できます。SeedProdには数百のFont Awesomeアイコンがあり、多くのオプションがあります。
アラートメッセージにカスタムカラーを使用したい場合は、ブロック設定の「詳細設定」タブをクリックしてください。ここでは、タイポグラフィを編集したり、説明、タイトル、背景の色を変更したり、テキストシャドウを選択したりできます。
同じパネルで、ブロックの間隔、表示/非表示を編集したり、アニメーションを追加してより目を引くようにすることもできます。
他のページをカスタマイズする前に、必ずSaveボタンをクリックしてください。
アラートメッセージは、サイトの他の領域に注意を引くのに最適な方法です。下のスクリーンショットでは、オンラインストアの注文確認ページに成功メッセージを追加しました。
カスタム通知でクリエイティブに作成したら、最終ステップに従ってウェブサイトで公開してください。
ステップ4：アラートメッセージをWordPressサイトに公開する
SeedProdテーマテンプレートを編集した後、ライブウェブサイトに変更を表示するにはテーマを有効にする必要があります。これを行うには、ページビルダーを終了し、テーマビルダーダッシュボードに戻ります。
そこから、Enable SeedProd Themeトグルを見つけて、緑色の「Yes」の位置に切り替えます。
これで、ウェブサイトにアクセスして、アラートメッセージが機能していることを確認できます！
WooCommerceページでのアラートメッセージの使用
WooCommerceストアを実行している場合、アラートメッセージは最も重要な瞬間にさらに役立ちます。製品ページでの在庫警告、チェックアウト確認、または放棄されたカートの通知などです。
SeedProdのテーマビルダーを使用すると、WooCommerceのページテンプレートを完全に制御できます。方法1と同じドラッグアンドドロップワークフローを使用して、カート、チェックアウト、または製品ページテンプレートにアラートブロックを直接追加できます。
まず、いくつかのユースケースを次に示します。
- 在庫切れ間近：「残り3点のみ、売り切れる前にお早めに。」のような警告アラートを製品ページテンプレートに追加します。
- チェックアウト成功：注文が正常に完了したことを確認するために、サンキューページテンプレートに成功アラートを追加します。
- 放棄されたカート：「カートに商品が入っています。今日の価格を確保するために注文を完了してください。」のような警告アラートをカートページに追加します。
これを行うには、SeedProd » Theme Builderに移動し、編集したいWooCommerceテンプレート（カート、チェックアウト、または単一製品）を開きます。次に、方法1の同じ手順に従って、アラートブロックを追加および設定します。
方法2：OptinMonsterでWordPressに通知バーを表示する
WordPressサイトにアラートメッセージを追加するもう1つの方法は、フローティング通知バーを作成することです。アラートバーは、ウェブサイトの上部または下部に配置され、訪問者にカスタムメッセージを表示します。
この方法では、Awesome Motiveファミリーの一部であるコンバージョン最適化ツール、OptinMonsterを使用します。
OptinMonsterを使用すると、サイトの上部または下部に固定されるフローティングアラートバーを追加できます。これらは、コードなしで、期間限定オファー、製品警告、またはサイト全体の発表に使用できます。
これは、このチュートリアルで作成するものです。
始めましょう！
ステップ1：OptinMonsterをインストールしてサイトを接続する
まず、OptinMonsterのウェブサイトにアクセスして、アカウントにサインアップしてください。
次に、OptinMonster WordPressプラグインをインストールして有効化します。これに関するヘルプについては、WordPressプラグインのインストール方法に関するこの記事を参照してください。
OptinMonsterプラグインを使用すると、数回クリックするだけでウェブサイトをソフトウェアに簡単に接続できます。
プラグインを有効化した後、アカウントを接続する必要があります。これを行うには、WordPress管理画面からOptinMonster » Settingsに移動します。
そこから、Connect an Existing Accountボタンをクリックします。
メールアドレスを入力するように求めるウィンドウが表示されます。メールを追加したら、Connect to WordPressボタンをクリックします。
ステップ2：フローティングアラートバーテンプレートを選択する
OptinMonsterアカウントを接続した後、WordPressダッシュボードからOptinMonster » Campaignsに移動します。次に、Create Your First Campaignボタンをクリックできます。
OptinMonsterでは、既製のテンプレートを選択するか、実際のブランドの成功したキャンペーンを再現するプレイブックを使用するかを選択できます。このガイドでは、テンプレートオプションを選択します。
このページで、アラートバーを作成するために、キャンペーンタイプとしてFloating Barを選択します。
次に、さまざまなキャンペーンテンプレートの選択が表示されます。テンプレートを選択するには、テンプレートの上にカーソルを合わせて、Use Templateボタンをクリックします。
アラートバーには「Alert」テンプレートを使用します。
テンプレートを選択した後、キャンペーンに名前を付けるように求めるプロンプトが表示されます。名前を入力したら、Start Buildingボタンをクリックします。
ステップ3：アラートバーのテキストとデザインを編集する
次の画面で、OptinMonsterのキャンペーンエディターが表示されます。ここでアラートメッセージのデザインとカスタマイズを行うことができます。
デフォルトでは、アラートバーは画面の上部に表示されます。フローティングバーのテキストを変更するには、編集したい領域をクリックしてカスタムメッセージを入力します。
フォント、フォントサイズ、色などを変更することもできます。
アラートバーの緊急性を高めたい場合は、Countdownブロックをドラッグしてフローティングバーにドロップできます。
そこから、テンプレートのタイマーを選択し、設定をカスタマイズして、希望の終了日時を入力できます。
タイマーをエバーグリーンカウントダウンとして設定することもできます。エバーグリーンカウントダウンは、ウェブサイトの訪問者ごとに個別に設定されます。
アラートバーに満足したら、画面上部にあるSaveボタンをクリックします。
ステップ4：表示ルールとトリガー設定を行う
次のステップは、「Display Rules」タブに移動し、バーを表示するタイミングと場所を選択することです。デフォルトのルールでは、訪問者がページに5秒間滞在した後にバーが表示されます。
アラートメッセージがすぐに表示されるように、これを0秒に変更します。これを行うには、「sec」カウントダウンを0に変更するだけです。
それが完了したら、Next Stepボタンをクリックしてアクション設定を変更します。ドロップダウンの「show the campaign view」をOptinのままにして、アラートバーが表示されたときに効果音を再生するかどうかを選択できます。
これらの変更を行った後、次のステップボタンをクリックします。次のページには、キャンペーンの概要が表示されます。
設定に問題がなければ、保存ボタンをクリックします。
ステップ5：WordPressサイトにアラートバーを公開する
次のステップは、公開タブに切り替えて、公開ステータスを公開に変更することです。
最後のステップは、WordPressサイトでキャンペーンを有効にすることです。
これを行うには、キャンペーンエディタを閉じ、OptinMonster » Campaignsに移動します。キャンペーンがリストに表示され、ステータスは保留中になります。
これを変更するには、保留中のステータスをクリックし、ドロップダウンメニューから公開を選択します。
これで、ウェブサイトの任意のページにアクセスして、アラートバーが機能していることを確認できます。
よくある質問
WordPressにアラートメッセージを追加するにはSeedProd Proが必要ですか？
いいえ。アラートブロックは、無料のBasicプランを含むすべてのSeedProdプランで利用できます。アップグレードせずに、任意のページに情報、成功、警告、または危険メッセージを追加できます。
WordPressのアラートバーとアラートボックスの違いは何ですか？
アラートボックスは、ページまたは投稿内に配置されるインラインメッセージブロックです。配置したコンテンツ内に表示されます。アラートバーは、サイトの先頭または末尾に固定され、訪問者がスクロールしても表示され続けるフローティングストリップです。
SeedProdのアラートブロックはインラインアラートボックスを作成します。OptinMonsterのフローティングバーはサイト全体のアラートバーを作成します。
WordPressのアラートメッセージを特定のページにのみ表示できますか？
はい。SeedProdでは、アラートブロックを個々のページまたはテーマテンプレートに追加するため、配置した場所にのみ表示されます。OptinMonsterでは、ページレベルターゲティング表示ルールを使用して、アラートバーを特定のURLまたはページタイプに制限します。
在庫切れまたはチェックアウトに関するWooCommerceアラートメッセージを追加するにはどうすればよいですか？
SeedProdのテーマビルダーを使用して、WooCommerceのカート、チェックアウト、または商品ページのテンプレートを編集します。アラートブロックをテンプレートにドラッグし、タイプを警告または成功に設定し、メッセージを追加します。
たとえば、カートページでの警告アラート（「在庫残り2点のみ」）は、カスタムコードなしでチェックアウト放棄を減らすことができます。
プラグインなしでWordPressにアラートメッセージを追加できますか？
はい。カスタムHTMLとCSSを使用してWordPressメッセージボックスをページまたは投稿に直接追加したり、PHPをテーマのfunctions.phpファイルに追加したりできます。ただし、このアプローチにはコーディング知識が必要であり、テーマが更新されると破損する可能性があります。
SeedProdのようなプラグインを使用する方が、高速で安全であり、開発者は不要です。
WordPressアラートメッセージを今日から追加しましょう
アラートメッセージは、適切なタイミングで訪問者とコミュニケーションをとるための最も迅速な方法の1つです。在庫切れの警告、チェックアウトの確認、またはサイト全体のお知らせなどです。
SeedProdのアラートブロックを使用すると、コードなしでサイトのどこにでも簡単に追加できます。SeedProdを入手して構築を開始してください。
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
