私はWordPressのアラートメッセージを使って、在庫が少ないことを顧客に警告したり、チェックアウトが成功したことを確認したり、さらにはブログの新機能を強調したりしました。アラートメッセージとは、サイト上に表示される小さなスタイルのボックスのことで、サイト訪問者が必要なときに、更新情報、エラー、お知らせを共有することができます。
WordPressは、フォームが失敗したときやログインが成功したときなど、デフォルトでいくつかのアラートを表示する。しかし、それらは限定的であり、カスタマイズするには通常コードをいじらなければならない。
このガイドでは、カスタムコードを必要としないツールを使って、ドラッグ・アンド・ドロップするだけで独自のアラートメッセージを作成する2つの簡単な方法を紹介します。
WordPressのアラートメッセージとは？
アラートメッセージは、重要な更新、通知、エラーなどを訪問者に知らせるためにWordPressウェブサイトに表示されるメッセージです。ヘッダー、フッター、サイドバー、ブログ記事やページの中など、サイトのさまざまな場所に表示できます。
WordPress では、ユーザーがログインに成功したときや、お問い合わせフォームの送信にエラーが発生したときなど、さまざまなイベントに対してデフォルトのアラートメッセージを用意しています。これらのデフォルトのアラートメッセージは、有益でユーザーフレンドリーであるように設計されていますが、ウェブサイトの特定のニーズには必ずしも十分ではありません。
なぜWordPressサイトにアラートメッセージを追加するのか？
WordPressにカスタムアラートメッセージを追加すると、特定の要件に合わせたメッセージを表示できます。
例えば、ウェブサイトの新機能をユーザーに知らせたり、eコマース商品の割引コードを提供したい場合があります。同様に、ショッピングカートに残っている商品についてユーザーに警告したり、チェックアウトに成功した後に成功のメッセージを表示したりすることもできます。
カスタムアラートメッセージを追加することで、ウェブサイトのユーザーエクスペリエンスを向上させ、オーディエンスに重要な情報を伝え、緊急性を高めて行動を促すことができます。
WordPressで使えるアラートメッセージの種類
WordPressのアラートメッセージには、訪問者に何をしてもらいたいか、何を知ってもらいたいかによって追加できる種類がいくつかあります。それぞれ異なる目的を持ち、メッセージのスタイルによって、ユーザーが一目で何が起こっているのかを認識することができます。
- 情報メッセージ：一般的なヒント、リマインダー、または新機能やブログ投稿をユーザーに知らせるようなアップデートに使用します。
- 成功メッセージ：フォーム送信、アカウント作成、購入完了など、何かがうまくいったことを確認するメッセージです。
- 警告またはエラーメッセージ：在庫の減少、アクションの失敗、システムエラーなど、緊急の注意が必要なアラートに最適です。
このガイドの各メソッドでは、ビジュアルツールを使ってこれらのメッセージタイプを1つ以上作成する方法を示しているので、コードを1行も書く必要はありません。
WordPressでカスタムアラートメッセージを追加する方法（2つの簡単な方法）
WordPressにカスタムアラートメッセージを追加するには、いくつかの方法があります。手動で機能をコーディングする、WordPress通知バープラグインをインストールする、ポップアッププラグインを使用する、または通知ソフトウェアを試すことができます。今日は、最も簡単な2つの方法、WordPressページビルダー・プラグインと強力なポップアップ・ソフトウェアの使い方を紹介しよう。
どちらのソリューションも非常に簡単で、専門的な知識も必要なく、カスタムCSS、HTML、PHP、Javascript、その他のコードを使用する必要もありません。
方法1：SeedProdを使ってWordPressのアラートメッセージを表示する
最初の方法では、SeedProdを使います。100万人以上のユーザーを持つ、WordPressのための最高のページビルダー・プラグインです。
SeedProdを使用すると、コードに触れることなくWordPressサイトにカスタムアラートメッセージを簡単に追加できます。アラートが表示される場所を選択し、あなたのサイトにマッチするようにスタイルを設定し、情報ボックスから警告通知まで、メッセージタイプを制御することができます。
また、SeedProdを使って次のようなこともできる：
- WordPressで近日公開ページを作成する
- WooCommerceウェブサイトのデザインをカスタマイズ
- カスタムWordPressテーマの作成
- カスタムソーシャルメディアアイコンをサイトに追加
- サイトをメンテナンスモードにする
- その他にもいろいろある。
SeedProdを使用してWordPressでカスタムアラートメッセージを作成するには、以下の手順に従ってください。
ステップ1：SeedProdプラグインのインストールと有効化
まず最初に、SeedProdの価格ページにアクセスし、プラグインをダウンロードしてください。この作業で助けが必要な場合は、SeedProdのインストールに関するドキュメントに従ってください。
注：SeedProdには無料版がありますが、ここではアラートボックス機能のためにSeedProd Proを使用します。
プラグインを有効化した後、SeedProd " Settingsに行き、ライセンスキーをライセンスボックスに貼り付けてください。
ライセンスキーは、SeedProdウェブサイトのアカウントダッシュボードにあります。キーを入力後、Verify Keyボタンをクリックしてください。
次に、作成したいレイアウトのタイプを決める必要があります。SeedProdでは、ランディングページビルダーで個別のWordPressページを作成するか、テーマビルダーでカスタムWordPressテーマを作成することができます。
現在のWordPressテーマを使い続けたい場合は、ランディングページビルダーのオプションをお勧めします。しかし、テーマを置き換え、ヘッダー、フッター、サイドバー、その他のテーマテンプレートにアラートボックスを追加したい場合は、テーマビルダーが最適です。
このチュートリアルでは、Theme Builderオプションを使用します。しかし、ランディングページを作成したい場合は、WordPressでランディングページを作成する方法について、こちらのガイドに従ってください。
プロからのアドバイス：両方のオプションでアラートボックス機能を使用することができます。
ステップ2：WordPressテンプレートキットを選ぶ
テーマ・ビルダー・オプションを使用するので、次のステップはSeedProd " テーマ・ビルダー・ページにアクセスすることです。そのページで、Theme Template Kitsボタンをクリックして、既製のウェブサイトレイアウトを選択する必要があります。
ワンクリックでサイトに追加できるウェブサイトキットのライブラリがすぐに表示されます。トップバーのフィルタを使用すると、人気、新しさ、WooCommerceなどでテンプレートを並べ替えることができます。
気に入ったテンプレートが見つかったら、その上にカーソルを置いてチェックマークアイコンを選択し、WordPressサイトに追加します。数秒後、SeedProdはデモの特定のページやコンテンツを含むテンプレート全体をインポートします。
そこから、WordPressダッシュボードにテーマを構成する個々のパーツが表示されます。テーマパーツの上にマウスカーソルを置き、「デザインを編集」リンクをクリックすると、テーマパーツをカスタマイズすることができます。
例えば、以下のチュートリアルの助けを借りて、あなたはできる：
- カスタムブログページの作成
- カスタム単一投稿テンプレートを構築する
- ワードプレスのホームページを編集する
- ワードプレスのヘッダーをカスタマイズする
- WordPressのフッターを編集する
- カスタムサイドバーを作る
- そしてもっと。
さらに、アバウトページ、コンタクトページ、サービスページなど、個々のページをカスタマイズすることもできます。Pages " All Pagesに アクセスし、カスタマイズしたいページの横にあるEdit with SeedProdリンクをクリックするだけです。
まずはじめに、WordPressのホームページにアラートメッセージを追加する方法を説明します。ホームページテンプレートにカーソルを合わせ、デザイン編集リンクをクリックしてください。
ステップ3：アラートメッセージブロックの追加とカスタマイズ
テンプレートを開くと、SeedProdのドラッグアンドドロップページビルダーが表示されます。左側にWordPressのブロックと設定、右側にホームページのライブプレビューが表示されます。
プレビュー上のどこかをクリックしてテンプレートの内容をカスタマイズし、リアルタイムで変更を確認することができます。さらに、左側のパネルから新しいWordPressブロックをページにドラッグして、より多くの機能や特徴を追加することができます。
これがホームページにアラートメッセージを追加する方法です。詳細ブロックパネルでアラートブロックを見つけ、表示したい場所にドラッグします。
ブロックを設置した後は、その外観やウェブサイトの訪問者に表示するメッセージをカスタマイズすることができます。
まず、「タイプ」ドロップダウンメニューをクリックし、「情報」、「成功」、「警告」、「危険」などのアラートタイプを選択します。
次に、アラートにタイトルを付けます。また、ユーザーがメッセージを閉じることができるクローズボタンを有効または無効にすることもできます。
ここで、ユーザーに詳細情報を提供するために、アラートの説明を入力します。その下に、タイトルと説明、サイズ、配置、見出しレベルを変更することができます。
アラートを目立たせるために、カスタムアイコンを追加することができます。SeedProdには何百ものFont Awesomeアイコンがあるので、たくさんの選択肢があります。
アラートメッセージにカスタムカラーを使用したい場合は、ブロック設定の「詳細設定」タブをクリックしてください。ここでは、タイポグラフィを編集し、説明、タイトル、背景の色を変更し、テキストの影を選択することができます。
同じパネルで、ブロックの間隔や可視性を編集したり、より人目を引くようにアニメーションを追加することもできる。
他のページをカスタマイズする前に、必ず「保存」ボタンをクリックしてください。
アラートメッセージは、サイトの他のエリアに注意を引くための素晴らしい方法です。下のスクリーンショットでは、オンラインストアの注文確認ページに成功メッセージを追加しています。
カスタム通知をクリエイティブに作成し、最後のステップでウェブサイト上に表示させましょう。
ステップ4：アラートメッセージをWordPressサイトに公開する
SeedProdテーマテンプレートを編集した後、テーマを有効にしてライブウェブサイトで変更を表示する必要があります。これを行うには、ページビルダーを終了し、テーマビルダーのダッシュボードに戻ります。
そこから、Enable SeedProd Themeトグルを見つけ、緑色の「Yes」の位置に切り替えます。
これで、あなたのウェブサイトにアクセスし、アラートメッセージを実際に見ることができます！
方法2：OptinMonsterを使ってWordPressに通知バーを表示する
WordPressサイトにアラートメッセージを追加するもう一つの方法は、アラート通知バーを作成することです。アラートバーはウェブサイトの上部または下部に表示され、訪問者にカスタムメッセージを表示します。
この方法では、市場で最高のコンバージョン最適化ソフトウェアであるOptinMonsterを使用します。
OptinMonsterでは、サイトの上部または下部に貼り付けるフローティングアラートバーを追加することができます。期間限定オファー、製品に関する警告、サイト全体のお知らせなど、コードなしで使用することができます。
さらに、上記で述べたように、OptinMonsterを使ってあなたのウェブサイトにアラートメッセージバーを作成することができます。このソフトウェアには数え切れないほどのテンプレートがあらかじめ用意されており、見栄えの良いアラートメッセージバーを数分で簡単に作成することができます。
これがこのチュートリアルで作るものだ：
始めよう！
ステップ1：OptinMonsterをインストールし、サイトに接続する
まず、OptinMonsterのウェブサイトにアクセスし、アカウントにサインアップします。
次に、OptinMonster WordPressプラグインをインストールし、有効化します。WordPressプラグインのインストール方法については、こちらのガイドをご覧ください。
OptinMonsterプラグインを使用すると、数回のクリックで簡単にあなたのウェブサイトをソフトウェアに接続することができます。
プラグインを有効化した後、アカウントを接続する必要があります。これを行うには、WordPressの管理画面からOptinMonster " Settingsにアクセスしてください。
そこで、「Connect an Existing Account」ボタンをクリックします。
メールアドレスを入力するウィンドウがポップアップ表示されます。メールアドレスを追加したら、WordPressに接続ボタンをクリックします。
ステップ2：フローティング・アラート・バー・テンプレートの選択
OptinMonsterアカウントに接続した後、WordPressのダッシュボードからOptinMonster " キャンペーンにアクセスしてください。最初のキャンペーンを作成するボタンをクリックしてください。
OptinMonsterでは、あらかじめ用意されたテンプレートを使用するか、本物のブランドから成功したキャンペーンを複製したプレイブックを使用するかを選択することができます。このガイドでは、テンプレートを選択します。
このページで、キャンペーンタイプとしてフローティングバーを選択し、アラートバーを作成します。
次に、さまざまなキャンペーンテンプレートが表示されます。テンプレートを選択するには、テンプレートにカーソルを合わせ、「テンプレートを使用」ボタンをクリックします。
アラート・バーには「Alert」テンプレートを使用します。
テンプレートを選択すると、キャンペーン名を入力する画面が表示されます。名前を入力したら、ビルド開始ボタンをクリックします。
ステップ3：アラートバーのテキストとデザインを編集する
次の画面では、OptinMonsterのキャンペーンエディタが表示されます。ここでアラートメッセージをデザインし、カスタマイズすることができます。
デフォルトでは、画面上部にアラートバーが表示されます。フローティングバーのテキストを変更するには、編集したい部分をクリックし、カスタムメッセージを入力します。
また、フォント、フォントサイズ、色などを変更することもできる。
アラートバーの緊急度を上げたい場合は、カウントダウンブロックをドラッグしてフローティングバーにドロップします。
そこから、テンプレートのタイマーを選択し、設定をカスタマイズし、希望の終了日時を入力することができます。
タイマーをエバーグリーンカウントダウンとして設定することもできます。エバーグリーンカウントダウンは、あなたのウェブサイトへの訪問者ごとに個別に設定されます。
アラートバーに満足したら、画面上部の「保存」ボタンをクリックします。
ステップ4：表示ルールとトリガー設定の設定
次のステップは、'表示ルール'タブに移動し、バーを表示するタイミングと場所を選択することです。デフォルトのルールでは、訪問者がページに5秒間滞在した後にバーを表示します。
これを0秒に変更して、アラートメッセージが即座に表示されるようにします。そのためには、'sec'カウントダウンを0に変更すればよい。
完了したら、「次のステップ」ボタンをクリックしてアクション設定を変更します。キャンペーンビューを表示する」ドロップダウンはOptinのままにしておき、アラートバーが表示されたときに効果音を再生するかどうかを選択します。
変更後、「次のステップ」ボタンをクリックします。次のページで、キャンペーンの概要が表示されます。
設定に問題がなければ、「保存」ボタンをクリックします。
ステップ5：WordPressサイトにアラートバーを公開する
次のステップは、Publishタブに切り替え、PublishステータスをPublishに変更することです。
最後のステップは、WordPressサイトでキャンペーンを有効にすることです。
キャンペーンエディターを閉じて、OptinMonster " キャンペーンにアクセスしてください。リストにキャンペーンが表示され、ステータスが保留になります。
このステータスを変更するには、「保留」ステータスをクリックし、ドロップダウンメニューから「公開」を選択します。
これで、あなたのウェブサイト上のどのページでも、アラートバーの動作を確認することができます。
よくある質問
それだけだ！
WordPress でアラートメッセージを作成する方法について、この記事がお役に立てれば幸いです。フィードバックを集める別の方法をお探しなら、UserFeedbackプラグインをご覧ください。使い方はとても簡単で、スタイリッシュなポップアップフォームを数分で追加することができます。
お帰りになる前に、WordPressにGoogle Analyticsを追加する方法や、最適なWordPressホスティング・プロバイダーについてのガイドもご覧ください。
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
