私はWordPressでアラートメッセージを使用して、在庫切れの警告、チェックアウト成功の確認、新しいブログ機能の強調などを行ってきました。これらは、訪問者が見る必要があるときに、更新、エラー、または通知を共有するためにサイトに表示される、小さくスタイル設定されたボックスです。
WordPressは、フォームの失敗やログインの成功時など、デフォルトでいくつかのアラートを表示します。しかし、それらは限定的であり、カスタマイズするには通常コードの編集が必要になります。
このガイドでは、カスタムコードを必要としないツールを使用して、独自のカスタムアラートメッセージを作成する簡単な2つの方法を紹介します。ドラッグ＆ドロップで完了します。
WordPressにおけるアラートメッセージとは？
アラートメッセージとは、WordPressウェブサイトに表示され、訪問者に重要な更新、通知、またはエラーを知らせるメッセージのことです。ヘッダー、フッター、サイドバー、またはブログ記事やページ内など、サイトのさまざまな場所に表示できます。
WordPressは、ユーザーが正常にログインしたときや、お問い合わせフォームの送信にエラーがあったときなど、さまざまなイベントに対してデフォルトのアラートメッセージを提供します。これらのデフォルトのアラートメッセージは、情報提供とユーザーフレンドリーになるように設計されていますが、ウェブサイトの特定のニーズには常に十分とは限りません。
WordPressサイトにアラートメッセージを追加する理由
WordPressにカスタムアラートメッセージを追加することで、特定の要件に合わせたメッセージを表示できます。
たとえば、ウェブサイトの新機能についてユーザーに通知したり、eコマース製品の割引コードを提供したりしたい場合があります。同様に、ショッピングカート内の商品についてユーザーに警告したり、チェックアウトが正常に完了した後に成功メッセージを表示したりしたい場合があります。
カスタムアラートメッセージを追加することで、ウェブサイトでのユーザーエクスペリエンスを向上させ、重要な情報をオーディエンスに伝え、行動を促すための緊急性を高めることができます。
WordPressで使用できるアラートメッセージの種類
訪問者に何をしてほしいか、または何を知ってほしいかによって、WordPressに追加できるアラートメッセージの種類はいくつかあります。それぞれが異なる目的を果たし、メッセージのスタイルはユーザーが一目で状況を把握するのに役立ちます。
- 情報メッセージ：一般的なヒント、リマインダー、または更新に使用します。ユーザーに新機能やブログ記事について知らせるなどです。
- 成功メッセージ：フォーム送信、アカウント作成、購入完了など、何かがうまくいったことを確認します。
- 警告またはエラーメッセージ：在庫切れ、アクションの失敗、システムエラーなど、緊急の注意が必要なアラートに最適です。
このガイドの各方法は、ビジュアルツールを使用してこれらのメッセージタイプのいずれかまたは複数をどのように作成するかを示しているため、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 »設定に移動し、ライセンスキーをライセンスボックスに貼り付けます。
ライセンスキーはSeedProdウェブサイトのアカウントダッシュボードにあります。キーを入力したら、キーの検証ボタンをクリックします。
次に、作成したいレイアウトのタイプを決定する必要があります。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 page]などの個々のページをカスタマイズできます。単に Pages » All Pages にアクセスし、カスタマイズしたいページの横にある Edit with SeedProd リンクをクリックしてください。
始めるために、WordPressのホームページにアラートメッセージを追加する方法を示します。ホームページテンプレートの上にカーソルを合わせて、Edit Design リンクをクリックしてください。
ステップ3：アラートメッセージブロックの追加とカスタマイズ
テンプレートを開くと、SeedProdのドラッグ＆ドロップページビルダーが表示されます。左側にはWordPressブロックと設定があり、右側にはホームページのライブプレビューが表示されます。
プレビューのどこかをクリックしてテンプレートコンテンツをカスタマイズし、変更をリアルタイムで確認できます。さらに、左側のパネルから新しいWordPressブロックをページにドラッグして、機能を追加することもできます。
このようにして、ホームページにアラートメッセージを追加します。高度なブロックパネルでアラートブロックを見つけ、表示したい場所にドラッグしてください。
ブロックが配置されたら、その外観とウェブサイト訪問者に表示されるメッセージをカスタマイズできます。
まず、「Type」ドロップダウンメニューをクリックし、Info、Success、Warning、Dangerなどのアラートタイプを選択します。
次に、アラートにタイトルを付けます。ユーザーがメッセージを閉じることができる閉じるボタンを有効または無効にすることもできます。
次に、アラートの説明を入力して、ユーザーにより多くの情報を提供します。その下で、タイトルと説明、サイズ、配置、見出しレベルを変更できます。
アラートを目立たせるために、カスタムアイコンを追加できます。SeedProdには数百のFont Awesomeアイコンがあり、多くのオプションがあります。
アラートメッセージにカスタムカラーを使用したい場合は、ブロック設定の「詳細設定」タブをクリックしてください。ここでは、タイポグラフィを編集したり、説明、タイトル、背景の色を変更したり、テキストシャドウを選択したりできます。
同じパネルで、ブロックの間隔、表示/非表示を編集したり、アニメーションを追加してより目を引くようにすることもできます。
他のページをカスタマイズする前に、必ず 保存 ボタンをクリックしてください。
アラートメッセージは、サイトの他のエリアに注意を引くための素晴らしい方法です。下のスクリーンショットでは、オンラインストアの注文確認ページに成功メッセージを追加しました。
カスタム通知でクリエイティブに作成したら、最終ステップに従ってウェブサイトで公開してください。
ステップ4：アラートメッセージをWordPressサイトに公開する
SeedProdテーマテンプレートを編集した後、ライブウェブサイトに変更を表示するにはテーマを有効にする必要があります。これを行うには、ページビルダーを終了し、テーマビルダーダッシュボードに戻ります。
そこから、「SeedProdテーマを有効にする」トグルを見つけて、緑色の「はい」の位置に切り替えます。
これで、ウェブサイトにアクセスして、アラートメッセージが機能していることを確認できます！
方法2：OptinMonsterでWordPressに通知バーを表示する
WordPressサイトにアラートメッセージを追加するもう1つの方法は、アラート通知バーを作成することです。アラートバーは、ウェブサイトの上部または下部に配置され、訪問者にカスタムメッセージを表示します。
この方法では、市場で最高のコンバージョン最適化ソフトウェアであるOptinMonsterを使用します。
OptinMonsterを使用すると、サイトの上部または下部に固定されるフローティングアラートバーを追加できます。これらは、コードなしで、期間限定オファー、製品警告、またはサイト全体の発表に使用できます。
さらに、前述したように、OptinMonsterを使用してウェブサイトのアラートメッセージバーを作成できます。このソフトウェアには数え切れないほどの既製のテンプレートがあり、数分で見た目の良いアラートバーを簡単に作成できます。
これは、このチュートリアルで作成するものです。
始めましょう！
ステップ1：OptinMonsterをインストールしてサイトを接続する
まず、OptinMonsterのウェブサイトにアクセスしてアカウントにサインアップしてください。
次に、OptinMonster WordPressプラグインをインストールしてアクティブ化します。これに関するヘルプについては、WordPressプラグインのインストール方法に関するガイドを参照してください。
OptinMonsterプラグインを使用すると、数回クリックするだけでウェブサイトをソフトウェアに簡単に接続できます。
プラグインをアクティブ化した後、アカウントを接続する必要があります。これを行うには、WordPress管理画面から「OptinMonster » 設定」に移動します。
そこから、「既存のアカウントを接続」ボタンをクリックします。
メールアドレスを入力するように求めるウィンドウが表示されます。メールを追加したら、「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のままにして、アラートバーが表示されたときに効果音を再生するかどうかを選択できます。
これらの変更を行った後、Next Stepボタンをクリックします。次のページで、キャンペーンの概要が表示されます。
設定に満足したら、Saveボタンをクリックします。
ステップ5：WordPressサイトにアラートバーを公開する
次のステップは、Publishタブに切り替えて、公開ステータスをPublishに変更することです。
最後のステップは、WordPressサイトでキャンペーンを有効にすることです。
これを行うには、キャンペーンエディターを閉じて、OptinMonster » Campaignsに移動します。キャンペーンがリストに表示され、ステータスはPendingになります。
変更するには、保留中のステータスをクリックし、ドロップダウンメニューから公開を選択します。
これで、ウェブサイトの任意のページにアクセスして、アラートバーが機能していることを確認できます。
よくある質問
これで完了です！
この記事が、WordPressでアラートメッセージを作成する方法を学ぶのに役立ったことを願っています。フィードバックを収集する別の方法を探している場合は、UserFeedbackプラグインをご覧ください。使い方は非常に簡単で、スタイリッシュなポップアップフォームを数分で追加できます。
お帰りの前に、WordPressにGoogle Analyticsを追加する方法やおすすめのWordPressホスティングプロバイダーに関するこれらのガイドもご覧ください。
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
